2

我想为 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>

但这仅设置 Legend 容器和 Title 的样式。

如何设计图例项目？

编辑： 非常感谢 Filip 的回答，这正是我想要的。但 Visual Studio 给了我一个错误：

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

它说控件：未找到 UniformGrid，我删除了这一部分并设法使事情正常进行。

4

1 回答 1

5

首先要注意的是该Legend控件是一个ItemsControl，因此您可以使用ItemContainerStyle. 项目模板受LegendItem样式控制，您也可以在源代码中找到该样式。在应用程序中设置样式的方法是Style通过Legend设置控件的LegendStyle属性来设置 的Chart。然后在Legend样式中设置ItemContainerStyle为 a Styleof 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>
于 2013-02-13T17:24:25.720 回答