更改Silverlight图表图例项目布局

问题描述

我正在自定义Silverlight工具包图表的布局。我有两个要求：

I am working on customizing the layout of a Silverlight Toolkit Chart. I have two requirements:

1）将图例区域移动到图表底部（已解决）。

1) Move the Legend area to the bottom of the chart (solved).

2）改变要在图例中相邻显示的元素的布局，
ie。 {legend 1}，{legend 2}，{legend 3}，而不是默认的列格式。

2) change the layout of elements within the legend to be displayed next to each other,ie. {legend 1},{legend 2},{legend 3}, rather than the default column format.

使用ControlTemplate（见下文）解决。

1) was easy to solve with a ControlTemplate (see below).

2）如何更改图例项目的布局？是否可以通过进一步自定义图表的ControlTemplate来完成，或者图例是否需要自己的ControlTemplate？

2) How do I change the layout of legend items? Can it be done by further customizing the Chart's ControlTemplate, or does the Legend need its own ControlTemplate?

图表本身定义为：

<chartingToolkit:Chart Name="chartCompareMain"
                       Template="{StaticResource ChartLayoutLegendBottom}">
        <chartingToolkit:Chart.Axes>
             <chartingToolkit:DateTimeAxis Orientation="X"
                        AxisLabelStyle="{StaticResource ChartDateFormat}">
             </chartingToolkit:DateTimeAxis>
             <chartingToolkit:LinearAxis  Orientation="Y"/>
        </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>

ControlTemplate移动图例项目（基于默认模板）是：

The ControlTemplate to move the legend items (based on the default template) is:

<ControlTemplate x:Key="ChartLayoutLegendBottom" TargetType="chartingToolkit:Chart">
        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <dataviz:Title Grid.Row="0" Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />
                <Grid Grid.Row="1" Margin="0,15,0,15">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Column="0" >
                        <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                        <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
                    </chartingprimitives:EdgePanel>
                </Grid>
                <dataviz:Legend x:Name="Legend" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Row="2"/>
            </Grid>
        </Border>
    </ControlTemplate>

推荐答案

将以下内容添加到图表将会从） ：

Adding the following to the chart will do the trick (from here):

<chartingToolkit:Chart.LegendStyle>
    <Style TargetType="dataviz:Legend">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</chartingToolkit:Chart.LegendStyle>

这篇关于更改Silverlight图表图例项目布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！