更改 Silverlight 图表图例项目布局 [英] Change Silverlight Chart Legend Item Layout

问题描述

我正在定制 Silverlight Toolkit 图表的布局.我有两个要求:

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.

1) 使用 ControlTemplate 很容易解决(见下文).

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

2) 如何更改图例项的布局?可以通过进一步自定义Chart的ControlTemplate来实现，还是Legend需要自己的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 图表图例项目布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！