How to change insert direction to ItemsControl - wpf

I have a control - ItemsControl that was binding to ObservableCollection of a simple model,
I want that it's itemscontrol will have a capability to insert dircetion from bottom to top, How to i can implement that?
Currently, Every insertion to itemscontrol starts from the top to bottom, but i want to change that..
<Window >
<Window.Resources>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}" >
</ItemsControl>
</Grid>

The solution is override ItemsControl's ItemsPanel as follows:
<Window >
<Window.Resources>
<ScaleTransform ScaleY="-1" x:Key="Transform"/>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
LayoutTransform="{StaticResource Transform}"
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplateVerticalAlignment">
<StackPanel VerticalAlignment="Bottom" LayoutTransform="{StaticResource Transform}"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}"
ItemsPanel="{StaticResource ItemsPanelTemplateVerticalAlignment}"/>
</Grid>
</Window>

The order of items in ItemsControl is the same as in ObservableCollection. Thus, if you do Collection.Insert(0, item), new item in ItemsControl will appear on the top.

Related

Row height don't include scrollviewer ability

I'm currently creating a new WPF window which look like this :
The part starting with "Filter and with the array is define like this :
<Grid Grid.Row="2" Visibility="{Binding FilterVisibility}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="20,0,0,0" HorizontalAlignment="Left"
Text="{Binding Source={x:Static dictionnaries:MainDictionnary.bcfFilter}, StringFormat={}{0} :}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="1" Margin="2" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding Filters}">
<ItemsControl.Template>
<ControlTemplate>
<Border Background="White" BorderBrush="Black" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="col1"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col2"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterField}"
Grid.Column="0"
Margin="5,2"/>
<Line Grid.Column="1"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterCondition}"
Grid.Column="2" Margin="5,2"
TextWrapping="WrapWithOverflow" TextAlignment="Center"/>
<Line Grid.Column="3"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterValue}"
Grid.Column="4" Margin="5,2"
TextWrapping="WrapWithOverflow" TextAlignment="Center"/>
</Grid>
<Line Grid.Row="0" Fill="Black"
X2="{Binding ActualWidth, Mode=OneWay ,RelativeSource={RelativeSource Self}}"
Stroke="Black" VerticalAlignment="Bottom"/>
<ScrollViewer Grid.Row="1" MinHeight="50" VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="col1"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col2"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" VerticalAlignment="Center" Margin="3" SelectedItem="{Binding Field}"/>
<Line Grid.Column="1"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<ComboBox Grid.Column="2" VerticalAlignment="Center" Margin="3" SelectedItem="{Binding Condition}"/>
<Line Grid.Column="3"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBox Grid.Column="4" VerticalAlignment="Center"
HorizontalAlignment="Left" Margin="3"
MinWidth="50"
Text="{Binding Value, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"/>
<Line VerticalAlignment="Bottom"
Grid.ColumnSpan="6" Grid.Column="0"
X2="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Black"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<StackPanel Grid.Column="2" Margin="0,0,20,0">
<Button Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Margin="2" Padding="0"
Command="{Binding AddFilterCommand}">
<Path Stroke="Black" StrokeThickness="1" VerticalAlignment="Center">
<Path.Data>M0,5 H10 M5,0 V10</Path.Data>
</Path>
</Button>
<Button Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Margin="2"
Command="{Binding RemoveFilterCommand}">
<Path Stroke="Black" StrokeThickness="1" VerticalAlignment="Center">
<Path.Data>M0,0 H8</Path.Data>
</Path>
</Button>
</StackPanel>
</Grid>
The visibility of this part is controled by my viewmodel. Until this everything is working nice, but when I add new rows to the array with the + button, I would like the array not to grow but use a ScrollViewer. So in the ItemControl.template is added the scrollViewer.
But I got this result :
How can I get the scrollviewer to work ?
Set the Height of the second RowDefinition to *:
<RowDefinition Height="*"/>
Or set the Height property of the ItemsControl or ScrollViewer.
A ScrollViewer must have a constrained height to be able to calculate the scrollable view port.

Can't get Xaml TextBlock TextWrapping to work

My code is pretty straightforward:
<ListView Grid.Row="0" ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Grid.Row="0" Margin="0 2 0 2" BorderBrush="Black" BorderThickness="1" x:Name="ListItem" >
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontWeight="Bold" FontSize="18" />
<Image Grid.Row="0" Grid.Column="1" Source="../Images/x.png" HorizontalAlignment="Right"/>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.ColumnSpan="2" MaxWidth="{Binding ElementName=ListItem, Path=Width}">
<TextBlock TextWrapping="WrapWithOverflow" Text="{Binding Description}" />
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding TimeStamp}" HorizontalAlignment="Right"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
But the listview width becomes bigger than window's width every times there's an item with long descriptions
Neither the HorizontalContentAlignment setter, nor TextWrapping or MaxWitdh work.
What am I doing wrong??
Disable horizontal scrolling:
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>

Bind button command in listboxItem

I want to bind a button command from a listbox item. But my code not work. Can you help me?
My item template definition:
<UserControl.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</UserControl.Resources>
And my listbox declaration:
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Thank you for your help.
It worked fine for me
XAML:
<Window.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Command="{Binding DataContext.CloseButton,RelativeSource={RelativeSource AncestorType=Window, AncestorLevel=1}}" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid Height="200" Width="200" VerticalAlignment="Center">
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<!--<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>-->
</ListBox>
</Grid>
ViewModel
private ICommand closeButton;
public ICommand CloseButton
{
get
{
if (this.closeButton == null)
{
this.closeButton = new RelayCommand<object>(this.ExecuteCloseButton);
}
return this.closeButton;
}
}
private void ExecuteCloseButton(object err)
{
}

Listbox ItemTemplate not rendering correctly

I have a listbox as defined below. Any idea what I need to do to get the border to display? Currently it looks like:
When it should look like:
<ListBox
Grid.Row="1"
ItemsSource="{Binding Path=ProfessionalsView}"
Style="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4">
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Grid>
<TextBlock Margin="9,5,29,5" Text="{Binding Path=FormattedName}"></TextBlock>
<Image Margin="0,2.5,9,2.5" HorizontalAlignment="Right" Source="/BluBrik.Workflow;component\Images/FlagComplete_16.png" Width="16" Height="16"></Image>
</Grid>
</HeaderedContentControl.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="9,5,5,2.5" Text="Surname"></TextBlock>
<TextBlock Grid.Row="1" Text="Forename"></TextBlock>
<TextBlock Grid.Row="2" Text="Work Phone"></TextBlock>
<TextBlock Grid.Row="3" Text="Mobile Phone"></TextBlock>
<TextBlock Grid.Row="4" Text="Email"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Margin="9,5,9,2.5" Text="{Binding Path=Surname}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Forenames}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Path=WorkPhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Path=MobilePhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Path=EmailAddress}"></TextBlock>
</Grid>
</HeaderedContentControl>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Your border:
<Border BorderThickness="4">
Has no BorderBrush defined. Therefore there's nothing to paint the outlines with. Try
<Border BorderThickness="4" BorderBrush="Black">
You need to set the background Linear Gradiant color for Header. and a Border for you Contents. try below one.
<ListBox
Grid.Row="1"
ItemsSource="{Binding Path=ProfessionalsView}"
Style="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4">
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFD1D0D0" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Margin="9,5,29,5" Text="{Binding Path=FormattedName}"></TextBlock>
<Image Margin="0,2.5,9,2.5" HorizontalAlignment="Right" Source="/BluBrik.Workflow;component\Images/FlagComplete_16.png" Width="16" Height="16"></Image>
</Grid>
</HeaderedContentControl.Header>
<Border BorderBrush="DarkGray" BorderThickness="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="9,5,5,2.5" Text="Surname"></TextBlock>
<TextBlock Grid.Row="1" Text="Forename"></TextBlock>
<TextBlock Grid.Row="2" Text="Work Phone"></TextBlock>
<TextBlock Grid.Row="3" Text="Mobile Phone"></TextBlock>
<TextBlock Grid.Row="4" Text="Email"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Margin="9,5,9,2.5" Text="{Binding Path=Surname}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Forenames}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Path=WorkPhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Path=MobilePhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Path=EmailAddress}"></TextBlock>
</Grid>
</Border>
</HeaderedContentControl>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

LabeledPieChart: Style overrides DataTemplate

I have customized the template of LabeledPieChart (source: Bea) in a Style. Then I created a DataTemplate for the Slices of the LabeledPieChart. Both the style and the DataTemplate works great if they are alone. If they are together the Style overrides the DataTemplate that he has no effect. Is it possible to combine these two?
Here is my Code (The Style and the DataTemplate are in Window.Resources):
Style:
<Style TargetType="customControls:LabeledPieChart" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="customControls:LabeledPieChart">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*" />
<ColumnDefinition Width="9*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<dataVis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" Margin="0,5,0,3"/>
<Grid Grid.Row="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<chartPrmtvs:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Canvas.ZIndex="-1" Background="Transparent" />
<Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />
</chartPrmtvs:EdgePanel>
</Grid>
</Grid>
<dataVis:Legend x:Name="Legend" Style="{TemplateBinding LegendStyle}" Title="{TemplateBinding LegendTitle}"
BorderThickness="0" Background="Transparent" FontSize="15" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
DataTemplate:
<DataTemplate DataType="{x:Type local:City}" >
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel Background="White" Orientation="Horizontal">
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type customControls:PieChartLabel}}, Path=FormattedRatio}" VerticalAlignment="Center" Margin="5,0,5,0" />
<TextBlock Text="- " />
<TextBlock Text="{Binding Path=Population}" Margin="5,0,5,0" />
<TextBlock Text="- " />
<TextBlock Text="{Binding Name}" Margin="0,0,5,0"/>
</StackPanel>
</Border>
</DataTemplate>
LabeldPieChart:
<Grid>
<customControls:LabeledPieChart
x:Name="labeledPieChart"
Title="Population of Puget Sound Cities"
Height="500" Width="700"
Grid.Row="3"
BorderBrush="Gray"
>
<customControls:LabeledPieChart.Series>
<customControls:LabeledPieSeries
x:Name="labeledPieSeries"
ItemsSource="{Binding}"
IndependentValuePath="Name"
DependentValuePath="Population"
IsSelectionEnabled="True"
LabelDisplayMode="Auto"
/>
</customControls:LabeledPieChart.Series>
</customControls:LabeledPieChart>
</Grid>

Resources