更改Silverlight图表图例项目布局

更改Silverlight图表图例项目布局

本文介绍了更改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图表图例项目布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 21:10