我正在自定义 Silverlight 工具包图表的布局。我有两个要求:
1)将图例区域移动到图表底部(已解决)。
2) 更改图例中元素的布局,使其彼此相邻显示,
IE。 {legend 1},{legend 2},{legend 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>
最佳答案
为了完整起见,这里是 LegendStyle="{StaticResource BottomLegendLayout}
(确定样式的非常有用的工具是 Silverlight Default Style Browser )
<Style x:Name="BottomLegendLayout" TargetType="dataviz:Legend">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="chartingToolkit:LegendItem" >
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LegendItem">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="2,2,5,2">
<Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" VerticalAlignment="Center" />
<dataviz:Title Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="dataviz: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="ItemsPanel"> <!-- change layout container for legend items to be horizonal -->
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dataviz:Legend">
<!-- This is the border around the legend area.
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="2">
-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<!-- Uncomment the next line to show a grid title. -->
<!--<dataviz:Title Grid.Row="0" x:Name="HeaderContent" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding TitleStyle}"/>-->
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0" IsTabStop="False">
<ItemsPresenter x:Name="Items" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
关于silverlight - 更改 Silverlight 图表图例项目布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1917031/