Chart LegendItemStyle over 2 columns

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Dec 2010

    Posted 15 Dec 2010 Link to this post

    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>

  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 20 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top