WinRT XAML Toolkit图表控件：如何设置图例项的样式？

Question

我想设置WinRT XAML Toolkit图表控件的图例项目的样式。

我检查了源代码，发现以下样式：

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

但这只会设置图例容器和标题的样式。

如何设置图例项的样式？

编辑：非常 感谢菲利普的答案，这正是我想要的。但是Visual Studio在以下位置给我一个错误：

<Setter.Value>
                    <ItemsPanelTemplate>
                        <controls:UniformGrid
                            Columns="1"
                            Rows="5" />
                    </ItemsPanelTemplate>
                </Setter.Value>

它说控件：找不到UniformGrid，我删除了本节并设法使事情起作用。

Answer 1

首先要注意的是该Legend控件是一个控件ItemsControl，因此您可以使用设置其样式ItemContainerStyle。项目模板由LegendItem样式控制，您也可以在源代码中找到样式。在应用程序中对所有样式进行样式设置的Style方法是Legend通过LegendStyle在Chart控件上设置属性来设置的。然后在Legend样式设置ItemContainerStyle到Style的LegendItem。我还没有检查Chart控件在Blend中的行为是否正确，但这将是编辑这些控件的最佳位置。我只是手工制作了这个样品。

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