Develop Reference

WPF XAML display content in a ContentControl

I need to display a number in a square, centered horizontally and vertically.
When I tried to use a label for that purpose, it seemed like it ignored the centering completely. So I decided to use a grid and display a label on the grid as that centers perfectly.
I need to use a template as there's several themes available. From what I've found on the internet, I thought this ( ignoring the centering for now )
<ControlTemplate x:Key="ClockTemplate">
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="White"/>
</Style>
</Grid.Style>
<Label>
<Label.Style>
<Style TargetType="Label">
<Setter Property="Foreground" Value="#376092"/>
</Style>
</Label.Style>
<ContentPresenter/>
</Label>
</Grid>
</ControlTemplate>
would be correct. Using it as follows:
<ContentControl Content="20" Height="64" Width="64" Template="{DynamicResource ClockTemplate}"/>
the content is not displayed tho, what am I doing wrong? Also, is there a better way to achieve my goal?

As per my understanding this is not the correct approach. Instead of creating ControlTemplate you have to write a Style for your control like below, also use StaticResource binding if possible. It is faster than Dynamic binding. Please not that, I have not mentioned the Label size inside the ControlTemplate. Please do it based on your needs
<Style x:Key="ContentControlStyle"
TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid Background="White">
<Label Foreground="#376092"
Width="200"
Height="100" Content="{TemplateBinding Content}">
</Label>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
bind your ContentControl with the newly created Style like below
<ContentControl Style="{StaticResource ContentControlStyle} ">
If your requirement is only to set some value in ContentControl, use Label instead and change the Style of the Label. Because ContentControl is heavy

Making tab header flexible to header text on WPF

I'm new to the WPF stuff around and I tried restyling a TabItem myself.
As you people can see the tabs are filling the window's whole width. Unlike my original purpose which I actually wanted to make the tabs width is based on the text inside of it. Like the original style, only redesigned.
My style in code:
<Style x:Key="ZoidTab" TargetType="{x:Type TabItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ZoidTemplate" TargetType="{x:Type TabItem}">
<Border Width="Auto" Height="Auto">
<Grid x:Name="grid">
<Polygon
Fill="Turquoise"
Points="0,1 0.05,0 0.95,0 1,1"
Stretch="Fill"
Margin="0,0,0,0"
/>
<ContentPresenter x:Name="tabContent" HorizontalAlignment="Center" ContentSource="Header" VerticalAlignment="Center" TextElement.Foreground="#FFFFFFFF"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="12pt"/>
</Style>
I'd like to know what is it that I must fix to get the width right... Thank you.

The problem is that your Grid doesn't have a ColumnDefinitions section to limit the size of the one and only column. Modify it to look like this:
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
...

Multiple charts Styling - individual Color

I've got this BubbleChart where I wanted to add an individual Style to show a ToolTip. As I did this, the ToolTip was there and everything was fine until I added a second Series - now the former color setup (each series a different color) was gone and each Series had the same color. Does someone knowshow to bind on the default color of the series?
I tried a Template Binding but it won't work.
<Style x:Key="BubbleToolTipTemplate" TargetType="{x:Type c:BubbleDataPoint}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="c:BubbleDataPoint">
<Grid RenderTransformOrigin=".5,.5">
<Grid.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Grid.RenderTransform>
<!-- This Ellipse should bind on the default color -->
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" />
<ContentPresenter Content="{TemplateBinding Size}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content ="{ TemplateBinding DependentValue, Converter={StaticResource DoubleToStringConverter}}" />
<ContentControl Content ="{ TemplateBinding IndependentValue}"/>
<ContentControl Content ="{ TemplateBinding Size }" />
</StackPanel>
</ToolTipService.ToolTip>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Maybe someone handled this before! Any help is appreciated!

Ok I've found a solution!
In the Background there is the generic.xaml where you can find the default Style of the Bubbledatapoint (You can find this here ).
As i read through this if found the Palette resource. Later i tried to bind on those colours until i found the trick!
Just set the fill property of the ellipse to {DynamicResource Background}" !

How to bind polygon points in specific style at runtime wpf ,windows?

I have this code for style
<Window.Resources>
<Style x:Key="Mystyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<Polygon Name="poly" Points="0,0 0,100 50,200"
Fill=" TemplateBinding Background}"
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Name="b1" Style="{StaticResource Mystyle }"></Button>
</Grid>
I need to set points for polygon in style tag not static but dynamic based on some calculation how can i bind points to polygon.
example I have this
PointCollection pc=this.CalculatePolygonPoints(new Point(0,0), 100,Orientation.Flat);
How can i bind this pc to my polygon dynamic

Why dont you just create new dependency property(of a type PointCollection?) and bind Polygon's Points property against it? Then do your calculations when needed(#code-behind), and UI will automatically understand.
Here is an example(using ObservableCollection); http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1293d4cb-87b3-4cdc-97e3-ae2f41caf2d4/

Create a horizontal line between ListBoxItems (horizontally oriented ListBox)

I want to create a listbox like this:
-----|-----|-----|-----|-----|-----
The |'s are my listboxitems which I have separated using margins. This works fine. What I want is the listbox to have a background that contains this line. Or at least have it in the background. I tried a separator but that is not what I want because that is also clickable since I used it in the itemtemplate.
Any ideas?
Thanks

You have to add a style with a control template to the ListBox items.
<Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border"
BorderThickness="1,0"
BorderBrush="Black"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The Border control is intended for this type of decorative lines. The side's thickness are independently set, so use just one side for a single vertical line. On a related note, have you tried using a Grid control for your layout instead of margins?

I'm trying to create a timeline like control. I now fixed it using this:
<ListBox.Template>
<ControlTemplate>
<Border BorderThickness="2" BorderBrush="Black">
<Grid>
<Rectangle Height="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" Fill="Black"/>
<ScrollViewer Padding="{TemplateBinding Padding}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</ListBox.Template>
This works fine in a testproject, but I'm having some problems in my main project. The rectangle remains under the scrollviewer. Well... making progress. Hope to fix this thing soon.
Thanks for your answers so far!