I am attempting to convert a bing map implementation that uses standard PushPins in order to populate the map, but I need to add a tooltip to each pin. I found some options of how to do this on the website but the issue is I need the pushpins to be different from each other in a way that is dynamic. Based on the properties of each pin it must have a different background color.
The code already on this site all has the programmer use an image of the pushpin when they customize it.
So right now I need a way to either create a templated pushpin that is able to maintain the look and properties of a pushpin (so I can set background), while allowing a tooltip. Or instead having a regular pushpin have a tooltip or popup with it.
Any help would be appreciated!
Edited:
Control Template I am using
<ControlTemplate x:Key="NewPins" >
<Grid x:Name="pushPin" >
<Popup IsOpen="False" behaviors:RolloverPopup.HideDelay="0" behaviors:RolloverPopup.Target="{Binding ElementName=pushPin}" Margin="30,-20,0,0" >
<Border Background="White" BorderBrush="Black" CornerRadius="10" BorderThickness="1">
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Title}" Foreground="Black" FontWeight="Bold" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
<TextBlock Text="{Binding Content}" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
</StackPanel>
</Border>
</Popup>
</Grid>
</ControlTemplate>
This is setting up the pin in C#
Pushpin pin = new Pushpin()
{
Location = new Location( Double.Parse(item.PinLat), Double.Parse(item.PinLong)),
Content=String.Concat( GetNewlineString(item.LocationName), GetNewlineString(item.CallerName), GetNewlineString(item.PhoneNumber)),
Template=(ControlTemplate)Application.Current.Resources["NewPins"],
Width = 50,
Height = 65,
};
And this is creating the Bing Map
<c:BingMapAdSmart
AnimationLevel="UserInput"
Pins="{Binding DashboardViewModel.MapPins}"
NavigationVisibility="Visible"
SetViewZoomFactor="0"
MaxZoomLevel="7"
Visibility="{Binding NavViewModel.IsViewTransitioning, Converter={StaticResource TrueToCollapsedConverter}}" />
I may not really understand your question correctly, but i assume you need pushpins that are being created dynamically based on a template right? And you want to be able to change the tooltip (content property i assume) independently.
If thats the case, first you need to put a template resource to your resources in xaml;
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="template_name" TargetType="m:Pushpin">
...this is your design part you can compile this xaml via Expression
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
then you'll need pass this value to every pushpin you've created dynamically codebehind. On this stage you can also set their content property, since they don't have a notification property, i don't know if you mean this but content property is the similar one. You can edit them like you edit other stuff;
myPushPin.template = (ControlTemplate)This.Resources["template_name"];
myPushPin.Content = "Hello World!";
This stage may differ according where you put your resources if its in phone:PhoneApplicationPage.Resources
if you put in Application.Resources
use this;
myPushPin.template = (ControlTemplate)Application.Current.Resources["template_name"];
myPushPin.Content = "Hello World!";
This should work, i don't have bing maps API or WP7 tools installed on this computer so i can't test it but this should be ok.
Happy coding!
Edit:
So if you want to change the background of a pushpin you don't have to hold back, it doesn't matter whether it has a control template or not. Actually every control has one as default. You can change the background as you always do
myPushpin.Background = new SolidColorBrush(Colors.Blue);
I have done exactly what you describe. The way i did this makes the most sense to me. Here is what I did:
I created a custom Pushpin (i.e. UserControl). This Xaml defines my custom pushpin. It assumes this pushpin is to be data-bound to. One of the binded properties is background Color. This will easily satisfy your dynamic color issue.
In the bing map control i defined the following:
The MyPushpinTemplate is defined in the UserControl.Resources like this:
MyPushpinControl is the UserControl.
I also have a data model class (that implements INotifyPropertyChanged). This class is bound to an instance of MyPushpinControl. this data model class has all the properties and is data-binded to the UserControl.
This is technically all you need to know.
To satisfy your tooltip issue, I simply added a tooltip to one of the panels within my custom pushpin. Simple as that.
Until I have a better solution I have decided the only thing I can think to do is to create a number of different pins to use. I don't need an infinite color solution so about 15 different pins should do the trick. Messy but it will work.
I just solved this issue to my complete satisfaction. To accomplish this, you need to have to create a Pushpin style with a key. Then inside this pushpin you create a standard pushpin (you can use another style on that but don't let it look back to this style, I used default), and a popup to go along with it. An example is below, I am using a local tool to do easy rollover popups, otherwise its standard stuff + bind maps.
<Style TargetType="bingMaps:Pushpin" x:Key="NewPins2">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="bingMaps:Pushpin" >
<Grid x:Name="pushPin" >
<Border Width="50" Height="65" >
<bingMaps:Pushpin Background="{TemplateBinding Background}" />
</Border>
<Popup IsOpen="False" behaviors:RolloverPopup.HideDelay="0" behaviors:RolloverPopup.Target="{Binding ElementName=pushPin}" Margin="30,-20,0,0" >
<Border Background="White" BorderBrush="Black" CornerRadius="10" BorderThickness="1">
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Title}" Foreground="Black" FontWeight="Bold" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
<TextBlock Text="{Binding Content}" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
</StackPanel>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
This may be a no-brainer for the WPF cognoscenti, but I'd like to know if there's a simple way to put text on the WPF ProgressBar. To me, an empty progress bar looks naked. That's screen real estate that could carry a message about what is in progress, or even just add numbers to the representation. Now, WPF is all about containers and extensions and I'm slowly wrapping my mind around that, but since I don't see a "Text" or "Content" property, I'm thinking I'm going to have to add something to the container that is my progress bar. Is there a technique or two out there that is more natural than my original WinForms impulses will be? What's the best, most WPF-natural way to add text to that progress bar?
Both of the prior responses (creating a new CustomControl or an Adorner) are better practices, but if you just want quick and dirty (or to understand visually how to do it) then this code would work:
<Grid Width="300" Height="50">
<ProgressBar Value="50" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
My Text
</TextBlock>
</Grid>
Just keep in mind that the z-index is such that the last item listed will be on top.
Also, if you don't have Kaxaml yet, be sure to pick it up - it is great for playing with XAML when you're trying to figure things out.
This can be very simple (unless there are alot of ways getting this to work).
You could use Style to get this done or you just overlay a TextBlock and a ProgressBar.
I personally use this to show the percentage of the progress when waiting for completion.
To keep it very simple I only wanted to have one Binding only,
so I attached the TextBock.Text to the ProgressBar.Value.
Then just copy the Code to get it done.
<Grid>
<ProgressBar Minimum="0"
Maximum="100"
Value="{Binding InsertBindingHere}"
Name="pbStatus" />
<TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
Here is how this could look like:
Check out WPF Tutorial for the full post.
If you are needing to have a reusable method for adding text, you can create a new Style/ControlTemplate that has an additional TextBlock to display the text. You can hijack the TextSearch.Text attached property to set the text on a progress bar.
If it doesn't need to be reusable, simply put the progress bar in a Grid and add a TextBlock to the grid. Since WPF can compose elements together, this will work nicely.
If you want, you can create a UserControl that exposes the ProgressBar and TextBlock as public properties, so it would be less work than creating a custom ControlTemplate.
You could use an Adorner to display text over top of it.
See MSDN article on Adorners
You would create a class that inherits from the Adorner class. Override the OnRender method to draw the text that you want. If you want you could create a dependency property for your custom Adorner that contains the text that you want to display. Then use the example in the link I mentioned to add this Adorner to your progress bar's adorner layer.
ProgressBar with Text and Binding from 2 Properties ( Value/Maximum value ):
<Grid>
<ProgressBar Name="pbUsrLvl"
Minimum="1"
Maximum="99"
Value="59"
Margin="5"
Height="24" Foreground="#FF62FF7F"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Text>
<MultiBinding StringFormat="{}UserLvl:{0}/{1}">
<Binding Path="Value" ElementName="pbUsrLvl" />
<Binding Path="Maximum" ElementName="pbUsrLvl" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
Rezult:
The same but with % of progress :
<Grid>
<ProgressBar Name="pbLifePassed"
Minimum="0"
Value="59"
Maximum="100"
Margin="5" Height="24" Foreground="#FF62FF7F"/>
<TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
Right click ProgressBar, and click Edit Template > Edit a Copy.
Then put the TextBlock as shown below just above the closing tag of Grid in the Style generated by VS.
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
<TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
This is based on the given answers.
Since I´m using MahApps Metro, I ended up with this:
<Grid>
<metro:MetroProgressBar x:Name="pbar" Value="50" Height="20"></metro:MetroProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>
If you want to use the normal bar with Metro Style:
<Grid>
<ProgressBar x:Name="pbar" Value="50" Height="20" Style="{StaticResource MetroProgressBar}"></ProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>
Same without Style:
<Grid>
<ProgressBar x:Name="pbar" Value="60" Height="20" Style="{x:Null}"></ProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>
What is Happening?
You have your progressbar and simply just lay text over it.
So you just use your progressbar as you would.
Put the progressbar in a grid and lay an textblock in it.
Then you can text as you wish or grab the current percenteage wich is the value from the progressbar.
I have a ContentControl which will not display any XAML from its DataTemplate, and I feel certain that the problem I'm facing will be obvious for those with better WPF codemancy than myself. I have substituted "Object" for my object name where appropriate for confidentiality reasons.
In my MainWindow.xaml I have this:
<ContentControl x:Name="ObjectDetailView"
Margin="20,20,20,20" Grid.Row="2" Grid.Column="1"
DataContext="{Binding SelectedItem, ElementName=ObjectListView}"
Template="{DynamicResource DetailControlTemplate}"
ContentTemplate="{DynamicResource DetailDataTemplate}"/>
I keep my templates in separate files to keep code readable. The template is in a DataResources.xaml file that is being successfully used for the ListView. The code for the content/template in question is:
<ControlTemplate x:Key="DetailControlTemplate">
<Border Style="{StaticResource ObjectDetailBorderStyle}">
<ContentPresenter/>
</Border>
</ControlTemplate>
<DataTemplate x:Key="DetailDataTemplate" DataType="{x:Type model:Object}">
<!-- Valid XAML -->
</DataTemplate>
In my Designer (both in VS and Blend) The border/background gradient displays, but nothing further. Same for the running program.
If I move the <!-- Valid XAML --> into the Control Template, it displays fine, but I don't believe that's kosher, and I also don't believe that the data-binding will work that way. Please correct me if I'm wrong.
ObjectListView is a ListView populated dynamically from my VM, and I'm using MVVM. That all works just fine. I'd prefer this ContentControl only appears once there is a valid selected object in the list view, but that's UX sugar at this point, thus my only concern is to get this content control displaying my model's data.
I'm also fairly new to StackOverflow, so if I missed anything or made an error in posting this question, please let me know. I've not had luck with searching for this issue over the last few hours, as I don't want to waste your time.
Two things. You did not set the actual Content of the ContentControl, but only its DataContext. You should instead write this:
<ContentControl ...
Content="{Binding SelectedItem, ElementName=ObjectListView}"
Template="{DynamicResource DetailControlTemplate}"
ContentTemplate="{DynamicResource DetailDataTemplate}"/>
And your ControlTemplate is missing a TargetType:
<ControlTemplate x:Key="DetailControlTemplate" TargetType="ContentControl">
<Border Style="{StaticResource ObjectDetailBorderStyle}">
<ContentPresenter/>
</Border>
</ControlTemplate>
Without the TargetType, the ContentPresenter's properties aren't set by default, and you would have to set them explicitly like
<ControlTemplate x:Key="DetailControlTemplate">
<Border Style="{StaticResource ObjectDetailBorderStyle}">
<ContentPresenter
Content="{Binding Content,
RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding ContentTemplate,
RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
</ControlTemplate>
I am currently working with Windows 10 and Pivot control. I am aware that we can customize the header template by adding an Image or customizing the TextBlock. I know how to customize basic template like following
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}"
FontSize="22"/>
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
This works perfectly fine for basic purpose but I want to achieve an output similar to the following screenshot. Add ellipse for each header and it should at the center of the page.
Can someone suggest whether this is possible or not?
Update
I added a StackPanel like below.
<StackPanel HorizontalAlignment="Center" Grid.Row="1" Orientation="Horizontal">
<Ellipse Fill="Cyan"
Height="10"
Width="10"
Margin="10,0"/>
<Ellipse Fill="Gainsboro"
Height="10"
Width="10"
Margin="10,0"/>
<Ellipse Fill="Gainsboro"
Height="10"
Width="10"
Margin="10,0"/>
</StackPanel>
Now how to assign PivotHeaderForegroundSelectedBrush and PivotHeaderForegroundUnselectedBrush to ellipses?
For designing ellipses on center of page.
Option 1
You can accomplish is by having binding a margin property. This margin property will need to be updated for each resize.
Option2
Else specify a Stackpanel with Orientation as Horizontal, Center aligned and containing ellipses which are updated as soon as Pivot selection changes. You can find a similar control being created by Jerry Nixon Pagination
As for Ellipses Color change you can Create a template for different state, use a trigger or even override current Pivot header templates
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Blue" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="White" />
I have a custom WPF control based on Soroosh Davaee’s ImageButton example at http://www.codeproject.com/Tips/773386/WPF-ImageButton. The custom control combines an Image and TextBlock in a horizontal StackPanel within a Button. (BTW, to get Soroosh’s example to run, I had to edit the solution properties so that “SampleView” is the startup project rather than “ExtendedButton” being the startup project.)
I want the text in the TextBlock to automatically shrink if necessary to avoid clipping at the right edge if the text is too long to fit naturally in the button. For example, if I edit Soroosh's MainWindow.xaml to make the button text too long to fit...
...
<EB:ImageButton Width="100" Height="30" Content="TextTooLongToFitInTheButton" Grid.Row="2"
...
<EB:ImageButton Width="100" Height="30" Content="TextTooLongToFitInTheButton" Grid.Row="2"
...
...the result is the following buttons with clipped text:
In researching this, it seems the simplest way to auto-shrink the content of a TextBlock is to wrap it within a Viewbox:
<Viewbox StretchDirection="DownOnly" Stretch="Fill">
<TextBlock ... />
</Viewbox>
DownOnly apparently prevents the Viewbox from enlarging the text to fill the space, and Fill (as opposed to Uniform) seems to tell it to stretch (shrink) only the dimension that needs to shrink (i.e. the horizontal dimension in my case).
In Soroosh's example Generic.xaml file, I wrapped the TextBlock in such a Viewbox:
<Button >
<StackPanel Orientation="Horizontal">
<Image Margin="2 0"
Source="{TemplateBinding Image}"
Width="{TemplateBinding ImageWidth}"
Height="{TemplateBinding ImageHeight}"
Visibility="{TemplateBinding Image,Converter={StaticResource VisibilityConvertor}}"
VerticalAlignment="Center"/>
I added--> <Viewbox StretchDirection="DownOnly" Stretch="Fill">
<TextBlock Text="{TemplateBinding Content}"
VerticalAlignment="Center"/>
I added--> </Viewbox>
</StackPanel>
</Button>
This produced exactly the same clipped button text. Just experimenting, I tried forcing the Viewbox to have a fixed width...
<Viewbox StretchDirection="DownOnly" Stretch="Fill" Width="60">
...which produced this:
...which shows the capability of the Viewbox, if only it could somehow know its available width when it's inside the StackPanel.
I did note that if I wrap the Viewbox around the whole StackPanel, it successfully auto-shrinks the entire content of the StackPanel:
<Button >
<Viewbox StretchDirection="DownOnly" Stretch="Fill" Width="60">
<StackPanel Orientation="Horizontal">
<Image Margin="2 0"
Source="{TemplateBinding Image}"
Width="{TemplateBinding ImageWidth}"
Height="{TemplateBinding ImageHeight}"
Visibility="{TemplateBinding Image,Converter={StaticResource VisibilityConvertor}}"
VerticalAlignment="Center"/>
<TextBlock Text="{TemplateBinding Content}"
VerticalAlignment="Center"/>
</StackPanel>
</Viewbox>
</Button>
...which produces very nearly what I want:
...but both the image and text are shrunk, and I want only the text shrunk.
How can I make the Viewbox, wrapping only the TextBox, know its available width (and height, I suppose) from within a cell of the StackPanel?
This is a common problem. The solution is simply to not use a StackPanel to do any kind of layout that requires re-sizing of child controls. It's simply not the correct Panel for the job. Instead, try using a Grid panel, which will resize its child controls. The StackPanel control is really only good for the most basic of layout duties... try anything more adventurous and you'll find yourself getting these issues.
One other alternative is to use the TextBlock.TextTrimming Property to trim the text instead... you could put the full text into a ToolTip too.
I have a problem with custom control.
I have a custom controls, where i have 5-8 Paths, what user can "select". Up of those Paths i want to have label (inside custom control), where i can change the content inside (from Window, where i use that custom control).
My XAML of the Custom control looks like:
<FirstMolarTooth ..........>
<DockPanel>
<Label Name="lbl_tooth" DockPanel.Dock="Top" FontSize="10" HorizontalAlignment="Center" />
<Grid DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Path ......./>
</Grid>
</DockPanel>
</FirstMolarTooth>
How can i reach that label inside from window where i use that custom control??
something like:
<local:FirstMolarTooth x:Name="Tooth_15" ........>
<lbl_tooth Content="15" />
</local:FirstMolarTooth>
or
<local:FirstMolarTooth .... Content="15">
</local:FirstMolarTooth>
Second problem is that i rotate the custom control in window where i use it with:
<local:FirstMolarTooth ....>
<local:FirstMolarTooth.LayoutTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="180"/>
</local:FirstMolarTooth.LayoutTransform>
</local:FirstMolarTooth>
My problem is that when i do that (logically), this rotate whole control (with a label). I want to rotate just the Paths and not with the label. I thought that i can do something like custom property for that label "isRotated" and when its setted on true, i should "reset" the rotate (set angle 0) with triggers. But i am not able to do that. (should i reach that custom property from XAML? or only in code? that was maybe the problem i try to reach it from XAML).
I know i can delete the label from custom control and have in there just the Paths and after that rotate just the Paths and the label have in Window. But user can select "whole" custom control (select tooth) and he can select "segment" of tooth (Paths). Therefore i would like to have it everything inside that custom control.
Thanks for any advice.
For your first problem, just bind lbl_tooth against FirstMolarTooth Content property. If that doesn't work, create new dependency property inside FirstMolarTooth(of string) and bind against it. Then you can change that property later outside of custo control.
<FirstMolarTooth x:Name="MOLAR" ..........>
<DockPanel>
<Label Name="lbl_tooth" DockPanel.Dock="Top" FontSize="10" HorizontalAlignment="Center"
Content="{Binding Content, ElementName=MOLAR}" />
<Grid DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Path ......./>
</Grid>
</DockPanel>
For the second problem, just make new dependency property of type DOUBULE that you can set outside. For creating dependency properties, you can either google or search this forum. Millions of answers.
<FirstMolarTooth x:Name="MOLAR" ..........>
<DockPanel>
<Label Name="lbl_tooth" DockPanel.Dock="Top" FontSize="10" HorizontalAlignment="Center"
Content="{Binding Content, ElementName=MOLAR}" />
<Grid DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Path .......>
<Path.LayoutTransform>
<RotateTransform CenterX="0.5" CenterY="0.5"
Angle="{Binding YourNewAngleProperty, ElementName=MOLAR}"/>
</Path.LayoutTransform>
</Path>
</Grid>
</DockPanel>