windows-runtime - WinRT XAML 工具包图表控件 : How to style Legend Items?

Question

我想为 WinRT XAML 工具包图表控件的图例项设置样式。

查看源码，发现如下样式:

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

但这仅对图例容器和标题进行样式设置。

如何设置图例项的样式？？

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>

它说未找到 controls:UniformGrid，我删除了这部分并设法让一切正常。

Answer 1

首先要注意的是 Legend 控件是一个 ItemsControl，因此您可以使用 ItemContainerStyle 设置其项目的样式。项目模板由 LegendItem 样式管理，您也可以在源代码中找到它。在应用程序中设置所有样式的方法是通过设置 Chart< 上的 LegendStyle 属性来设置 Legend 的 Style/ 控制。然后在 Legend 样式中将 ItemContainerStyle 设置为 LegendItem 的 Style。我没有检查 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>