WinRT XAML Toolkit Charting Controls: How to style Legend Items?

Question

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.

score 5 · Accepted Answer · answered Feb 13 '13 at 17:24

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.

enter image description here

<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>

WinRT XAML Toolkit Charting Controls: How to style Legend Items?

1 Answers1