更改 Silverlight 图表图例项目布局
我正在致力于自定义 Silverlight Toolkit 图表的布局。我有两个要求:
1)将图例区域移动到图表底部(已解决)。
2) 更改图例中元素的布局以彼此相邻显示, IE。 {图例 1}、{图例 2}、{图例 3},而不是默认的列格式。
1) 使用 ControlTemplate 很容易解决(见下文)。
2) 如何更改图例项目的布局?是否可以通过进一步自定义Chart的ControlTemplate来完成,还是Legend需要自己的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(基于默认模板)是:
<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>
I am working on customizing the layout of a Silverlight Toolkit Chart. I have two requirements:
1) Move the Legend area to the bottom of the chart (solved).
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) was easy to solve with a ControlTemplate (see below).
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?
The Chart itself is defined as:
<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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
为了完整起见,这里是
LegendStyle="{StaticResource BottomLegendLayout}
(确定样式的非常有用的工具是 Silverlight 默认样式浏览器)For completeness sake, here is the
LegendStyle="{StaticResource BottomLegendLayout}
(very useful tool to figure out styles is the Silverlight Default Style Browser)将以下内容添加到图表中即可解决问题(来自 这里):
Adding the following to the chart will do the trick (from here):