Chart LegendItemStyle over 2 columns

[David]

I'm having trouble trying to work out how to create a template for the style "LegendItemStyle" which lays out the items which are in the "MergedLegendItemCollection" so that there are 2 columns.  I'm currently using the style below which is basically the one out of the example for styling the chart legend in Silverlight.

Can someone please advise how this can be done?  Or point me to an example?

<Style x:Key="KPIChartLegendItemStyle"
     TargetType="telerik:ChartLegendItem">
  <Setter Property="Foreground"
         Value="{StaticResource LegendForeground}" />
  <Setter Property="Padding"
         Value="5,0,5,0" />
  <Setter Property="Margin"
         Value="0,3,0,2" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="telerik:ChartLegendItem">
        <Grid x:Name="PART_MainContainer"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Top">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="HoverStates">
              <VisualState x:Name="Normal">
                <Storyboard>
                  <DoubleAnimation Duration="0.00:00:00.15"
                                                     To="1.0"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Storyboard.TargetName="PART_MainContainer" />
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Hovered">
                <Storyboard>
                  <DoubleAnimation Duration="0.00:00:00.15"
                                                     To="1.0"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Storyboard.TargetName="PART_MainContainer" />
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Hidden">
                <Storyboard>
                  <DoubleAnimation Duration="0.00:00:00.15"
                                                     To="0.15"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Storyboard.TargetName="PART_MainContainer" />
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05"
                                                                 Storyboard.TargetProperty="Stroke"
                                                                 Storyboard.TargetName="PART_LegendItemMarker">
                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                      <DiscreteObjectKeyFrame.Value>
                        <SolidColorBrush Color="#B2000000" />
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05"
                                                                 Storyboard.TargetProperty="StrokeThickness"
                                                                 Storyboard.TargetName="PART_LegendItemMarker">
                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                      <DiscreteObjectKeyFrame.Value>
                        <System:Double>2</System:Double>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05"
                                                                 Storyboard.TargetProperty="StrokeThickness"
                                                                 Storyboard.TargetName="PART_SelectedState">
                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                      <DiscreteObjectKeyFrame.Value>
                        <System:Double>0</System:Double>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Path x:Name="PART_LegendItemMarker"
                         Data="M1,0A1,1,0,0,0,-1,0A1,1,0,0,0,1,0"
                         Height="12"
                         Style="{TemplateBinding ItemStyle}"
                         Stretch="Fill"
                         Width="12" />
          <Path x:Name="PART_SelectedState"
                         Data="M1,0A1,1,0,0,0,-1,0A1,1,0,0,0,1,0"
                         Fill="{StaticResource LegendItemMarkerMask}"
                         Height="10"
                         OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}"
                         Stretch="Fill"
                         Stroke="{StaticResource LegendItemMarkerMaskStroke}"
                         StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}"
                         Width="10" />
          <Path Data="M1,0A1,1,0,0,0,-1,0A1,1,0,0,0,1,0"
                         Fill="{StaticResource LegendItemMarkerMask2}"
                         Height="12"
                         Stretch="Fill"
                         Width="12" />
          <TextBlock x:Name="PART_TextBlock"
                             Grid.Column="1"
                             Foreground="{TemplateBinding Foreground}"
                             Padding="{TemplateBinding Padding}"
                             Text="{TemplateBinding Label}" FontSize="9.333" Margin="0,1,0,0" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

[Giuseppe]

Hello Peter,

We are a bit unsure what you are trying to achieve by re-templating the legend items but if you are looking for some kind of wrap functionality for the ChartLegend itself, it is in fact already built-in and provided out-of-the-box -- if there is a large number of legend items that cannot be displayed in a single column, they will be automatically wrapped in two columns.

Please elaborate a bit more on your specific requirement if the problem persists.


Regards,
Freddie
the Telerik team