WinRT XAML Toolkit Charting Controls: How to style Legend Items?
I want to style the legend items of the WinRT XAML Toolkit Chart Control.
I checked the source code and found the following style:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization">
<Style
TargetType="datavis:Legend">
<Setter
Property="BorderBrush"
Value="Black" />
<Setter
Property="BorderThickness"
Value="1" />
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="TitleStyle">
<Setter.Value>
<Style
TargetType="datavis:Title">
<Setter
Property="Margin"
Value="0,5,0,10" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="HorizontalAlignment"
Value="Center" />
</Style>
</Setter.Value>
</Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="datavis:Legend">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<datavis:Title
Grid.Row="0"
x:Name="HeaderContent"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Style="{TemplateBinding TitleStyle}" />
<ScrollViewer
Grid.Row="1"
VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Padding="0"
IsTabStop="False">
<ItemsPresenter
x:Name="Items"
Margin="10,0,10,10" />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
but this styles the Legend container and Title only.
how can I style the legend items ??
EDIT: Thanks a lot Filip for the answer, this is exactly what I wanted. but Visual Studio gave me an error at:
<Setter.Value>
<ItemsPanelTemplate>
<controls:UniformGrid
Columns="1"
Rows="5" />
</ItemsPanelTemplate>
</Setter.Value>
it said the controls:UniformGrid was not found, I removed this section and managed to get things working.
Answer
A thing to note first is that the Legend control is an ItemsControl, so you can style its items using ItemContainerStyle. An item template is governed by LegendItem style which you can find in the source too. The way to style it all in an application is to set the Style of the Legend by setting the LegendStyle property on the Chart control. Then in the Legend style set ItemContainerStyle to a Style of LegendItem. I haven't checked if the Chart control behaves correctly in Blend, but that would be the best place to edit these if it does. I just handcrafted this sample.
<charting:Chart
x:Name="PieChart"
Title="Pie Chart"
Margin="70,0">
<charting:Chart.Series>
<Series:PieSeries
Title="Population"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart.Series>
<charting:Chart.LegendStyle>
<Style
TargetType="datavis:Legend">
<Setter
Property="VerticalAlignment"
Value="Stretch" />
<Setter
Property="Background"
Value="#444" />
<Setter
Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<controls:UniformGrid
Columns="1"
Rows="5" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter
Property="TitleStyle">
<Setter.Value>
<Style
TargetType="datavis:Title">
<Setter
Property="Margin"
Value="0,5,0,10" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="HorizontalAlignment"
Value="Center" />
</Style>
</Setter.Value>
</Setter>
<Setter
Property="ItemContainerStyle"
xmlns:series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting">
<Setter.Value>
<Style
TargetType="series:LegendItem">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="series:LegendItem">
<Border
MinWidth="200"
Margin="20,10"
CornerRadius="10"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{Binding Background}">
<datavis:Title
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="24"
FontWeight="Bold"
Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="datavis:Legend">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<datavis:Title
Grid.Row="0"
x:Name="HeaderContent"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Style="{TemplateBinding TitleStyle}" />
<ScrollViewer
Grid.Row="1"
VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Padding="0"
IsTabStop="False">
<ItemsPresenter
x:Name="Items"
Margin="10,0,10,10" />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:Chart.LegendStyle>
</charting:Chart>