Modifica legenda grafico Silverlight Layout elemento

Question

Sto lavorando alla personalizzazione del layout di un grafico di Silverlight Toolkit. Ho due requisiti:

1) Spostare l'area della legenda in fondo alla tabella (risolta).

2) modificare il layout degli elementi all'interno della legenda da visualizzare uno accanto all'altro, ie. {legend 1}, {legend 2}, {legend 3}, piuttosto che il formato di colonna predefinito.

1) era facile da risolvere con un ControlTemplate (vedi sotto).

2) Come si modifica il layout degli elementi della legenda? Può essere fatto personalizzando ulteriormente il ControlTemplate del Chart o la Legend necessita del proprio ControlTemplate?

grafico stesso è definito come:

<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 per spostare gli elementi della legenda (basato sul modello predefinito) è:

<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

L'aggiunta dei seguenti al grafico farà il trucco (da 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

Per completezza, ecco la t egli LegendStyle="{StaticResource BottomLegendLayout} (strumento molto utile per capire gli stili è il 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>