更改Silverlight圖例圖例項目佈局

Question

我正在自定義Silverlight Toolkit圖表的佈局。我有兩個要求：

1）將圖例區域移動到圖表底部（已解決）。

2）更改圖例中要相互顯示的元素的佈局，即 即。 {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 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> 

Answer 1

添加下面的圖表會做技巧（從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> 

Answer 2

爲了完整起見，這裏是t他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>