This is a migrated thread and some comments may be shown as answers.

Chart LegendItemStyle over 2 columns

1 Answer 56 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

David asked on 15 Dec 2010, 05:54 PM

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>

1 Answer, 1 is accepted

answered on 20 Dec 2010, 03:43 PM

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