Rad-Chart Custom legend problem

[Akshay]

Hi
In RadChart, I am using a cutom legend style. But I am facing certain issues in the UI. The border of the chart cuts through the labels on X-Axis.

I am using the following style in legend.

<LinearGradientBrush x:Key="LegendItemMarkerMask"
                        EndPoint="0.5,1"
                        StartPoint="0.5,0">
        <GradientStop Color="#D8FFFFFF"
                    Offset="0.009" />
        <GradientStop Color="#66FFFFFF"
                    Offset="1" />
        <GradientStop Color="Transparent"
                    Offset="0.43" />
        <GradientStop Color="#7FFFFFFF"
                    Offset="0.42" />
    </LinearGradientBrush>
    <SolidColorBrush x:Key="LegendForeground"
                    Color="#FF000000" />
    <LinearGradientBrush x:Key="LegendBackground"
                        EndPoint="1.96,0.5"
                        StartPoint="-0.96,0.5">
        <GradientStop Color="#FFFFFF" />
        <GradientStop Color="#FFFFFF"
                    Offset="0.5" />
    </LinearGradientBrush>
    <SolidColorBrush x:Key="LegendItemMarkerMaskOpacityMask"
                    Color="#FF000000" />
    <SolidColorBrush x:Key="LegendItemMarkerMaskStroke"
                    Color="White" />
    <System:Double x:Key="LegendItemMarkerMaskStrokeThickness">1</System:Double>
    <SolidColorBrush x:Key="LegendItemMarkerMask2"
                    Color="Transparent" />
    <Style x:Key="ChartLegendItemStyle"
        TargetType="telerik:ChartLegendItem">
        <Setter Property="Foreground"
            Value="{StaticResource LegendForeground}" />
        <Setter Property="Padding"
            Value="0,0,0,0" />
        <Setter Property="Margin"
            Value="0,0,0,0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:ChartLegendItem">
                    <Grid x:Name="PART_MainContainer"
                        Background="{TemplateBinding Background}"
                        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"
                            Height="8"
                            Margin="{TemplateBinding Margin}"
                            Style="{TemplateBinding ItemStyle}"
                            Stretch="Fill"
                            StrokeThickness="{TemplateBinding MarkerStrokeThickness}"
                            Width="8">
                            <Path.Data>
                                <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                            </Path.Data>
                        </Path>
                        <Path x:Name="PART_SelectedState"
                            Fill="{StaticResource LegendItemMarkerMask}"
                            Height="8"
                            Margin="{TemplateBinding Margin}"
                            OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}"
                            Stretch="Fill"
                            Stroke="{StaticResource LegendItemMarkerMaskStroke}"
                            StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}"
                            Width="8">
                            <Path.Data>
                                <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" />
                            </Path.Data>
                        </Path>
                        <Path Fill="{StaticResource LegendItemMarkerMask2}"
                            Height="8"
                            Margin="{TemplateBinding Margin}"
                            Stretch="Fill"
                            Width="8">
                            <Path.Data>
                                <PathGeometry x:Name="PART_ItemMarkerMaskGeometry2" />
                            </Path.Data>
                        </Path>
                        <TextBlock x:Name="PART_TextBlock"
                                Grid.Column="1"
                                Foreground="{TemplateBinding Foreground}"
                                Margin="{TemplateBinding Margin}"
                                Padding="{TemplateBinding Padding}"
                                Text="{TemplateBinding Label}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <SolidColorBrush x:Key="LegendBorderBrush"
                    Color="#FF848484" />
    <Thickness x:Key="LegendBorderThickness">1</Thickness>
    <telerik:MarkerShape x:Key="LegendItemMarkerShape">SquareRounded</telerik:MarkerShape>
    <telerik:TextToVisibilityConverter x:Key="textToVisibilityConverter" />
    <Style x:Key="ChartLegendStyle"
        TargetType="telerik:ChartLegend">
        <Setter Property="Foreground"
            Value="{StaticResource LegendForeground}" />
        <Setter Property="Background"
            Value="{StaticResource LegendBackground}" />
        <Setter Property="Padding"
            Value="0,0,0,0" />
        <Setter Property="Margin"
            Value="0.2,0.2,0.2,0.2" />
        <Setter Property="BorderBrush"
            Value="{StaticResource LegendBorderBrush}" />
        <Setter Property="BorderThickness"
            Value="{StaticResource LegendBorderThickness}" />
        <Setter Property="HeaderFontWeight"
            Value="Bold" />
        <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
            Value="Stretch" />
        <Setter Property="LegendItemMarkerShape"
            Value="{StaticResource LegendItemMarkerShape}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:ChartLegend">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}">
                        <telerik:LayoutTransformControl>
                            <telerik:LayoutTransformControl.LayoutTransform>
                                <RotateTransform Angle="90"/>
                            </telerik:LayoutTransformControl.LayoutTransform>

                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        Content="{TemplateBinding Header}"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontWeight="{TemplateBinding HeaderFontWeight}" />
                                <ItemsPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Grid.Row="1"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Grid>
                        </telerik:LayoutTransformControl>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:RadWrapPanel Orientation="{Binding ItemsPanelOrientation}" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <TextBlock FontSize="7"
                                   HorizontalAlignment="Left"
                                   Height="Auto"
                                   Padding="0,0,0,0"
                                   TextWrapping="Wrap"
                                   Text="{Binding}"
                                   Visibility="{Binding Converter={StaticResource textToVisibilityConverter}}"
                                   Width="Auto" />
                        </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Any pointers?

[Lancelot]

Hi Akshay,

I have run your template inside an example project and came up with a solution for you. The code is below uses your original Style and you can paste it directly in your app to test it for yourself.

What I have done is create two Grid.ColumnDefinitions and assigned the Chart legend to the second column. You can set the column width explicitly, to *,  or Auto. I have set the second column definition's width to 30px for demonstration purposes to show that UI elements (if set to Stretch) will not overlap into another column. Then, I placed the chart legend into that column and the chart into the first column. If you follow my example you should not experience the problem any longer.

Good Luck,
Lancelot

<UserControl.Resources>

     <LinearGradientBrush x:Key="LegendItemMarkerMask"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
         <GradientStop Color="#D8FFFFFF"
                 Offset="0.009" />
         <GradientStop Color="#66FFFFFF"
                 Offset="1" />
         <GradientStop Color="Transparent"
                 Offset="0.43" />
         <GradientStop Color="#7FFFFFFF"
                 Offset="0.42" />
     </LinearGradientBrush>
     <SolidColorBrush x:Key="LegendForeground"
                 Color="#FF000000" />
     <LinearGradientBrush x:Key="LegendBackground"
                     EndPoint="1.96,0.5"
                     StartPoint="-0.96,0.5">
         <GradientStop Color="#FFFFFF" />
         <GradientStop Color="#FFFFFF"
                 Offset="0.5" />
     </LinearGradientBrush>
     <SolidColorBrush x:Key="LegendItemMarkerMaskOpacityMask"
                 Color="#FF000000" />
     <SolidColorBrush x:Key="LegendItemMarkerMaskStroke"
                 Color="White" />
     <System:Double x:Key="LegendItemMarkerMaskStrokeThickness">1</System:Double>
     <SolidColorBrush x:Key="LegendItemMarkerMask2"
                 Color="Transparent" />
     <Style x:Key="ChartLegendItemStyle"
     TargetType="telerik:ChartLegendItem">
         <Setter Property="Foreground"
         Value="{StaticResource LegendForeground}" />
         <Setter Property="Padding"
         Value="0,0,0,0" />
         <Setter Property="Margin"
         Value="0,0,0,0" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="telerik:ChartLegendItem">
                     <Grid x:Name="PART_MainContainer"
                     Background="{TemplateBinding Background}"
                     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"
                         Height="8"
                         Margin="{TemplateBinding Margin}"
                         Style="{TemplateBinding ItemStyle}"
                         Stretch="Fill"
                         StrokeThickness="{TemplateBinding MarkerStrokeThickness}"
                         Width="8">
                             <Path.Data>
                                 <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                             </Path.Data>
                         </Path>
                         <Path x:Name="PART_SelectedState"
                         Fill="{StaticResource LegendItemMarkerMask}"
                         Height="8"
                         Margin="{TemplateBinding Margin}"
                         OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}"
                         Stretch="Fill"
                         Stroke="{StaticResource LegendItemMarkerMaskStroke}"
                         StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}"
                         Width="8">
                             <Path.Data>
                                 <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" />
                             </Path.Data>
                         </Path>
                         <Path Fill="{StaticResource LegendItemMarkerMask2}"
                         Height="8"
                         Margin="{TemplateBinding Margin}"
                         Stretch="Fill"
                         Width="8">
                             <Path.Data>
                                 <PathGeometry x:Name="PART_ItemMarkerMaskGeometry2" />
                             </Path.Data>
                         </Path>
                         <TextBlock x:Name="PART_TextBlock"
                             Grid.Column="1"
                             Foreground="{TemplateBinding Foreground}"
                             Margin="{TemplateBinding Margin}"
                             Padding="{TemplateBinding Padding}"
                             Text="{TemplateBinding Label}" />
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

     <SolidColorBrush x:Key="LegendBorderBrush"
                 Color="#FF848484" />
     <Thickness x:Key="LegendBorderThickness">1</Thickness>
     <telerik:MarkerShape x:Key="LegendItemMarkerShape">SquareRounded</telerik:MarkerShape>
     <telerik:TextToVisibilityConverter x:Key="textToVisibilityConverter" />
     <Style x:Key="ChartLegendStyle"
     TargetType="telerik:ChartLegend">
         <Setter Property="Foreground"
         Value="{StaticResource LegendForeground}" />
         <Setter Property="Background"
         Value="{StaticResource LegendBackground}" />
         <Setter Property="Padding"
         Value="20,0,0,0" />
         <Setter Property="Margin"
         Value="0.2,0.2,0.2,0.2" />
         <Setter Property="BorderBrush"
         Value="{StaticResource LegendBorderBrush}" />
         <Setter Property="BorderThickness"
         Value="{StaticResource LegendBorderThickness}" />
         <Setter Property="HeaderFontWeight"
         Value="Bold" />
         <Setter Property="HorizontalContentAlignment"
         Value="Stretch" />
         <Setter Property="VerticalContentAlignment"
         Value="Stretch" />
         <Setter Property="LegendItemMarkerShape"
         Value="{StaticResource LegendItemMarkerShape}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="telerik:ChartLegend">
                     <Border BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Background="{TemplateBinding Background}">
                         <telerik:LayoutTransformControl>
                             <telerik:LayoutTransformControl.LayoutTransform>
                                 <RotateTransform Angle="90"/>
                             </telerik:LayoutTransformControl.LayoutTransform>

                             <Grid Margin="{TemplateBinding Padding}">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="*" />
                                 </Grid.RowDefinitions>
                                 <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}"
                                     Content="{TemplateBinding Header}"
                                     Foreground="{TemplateBinding Foreground}"
                                     FontWeight="{TemplateBinding HeaderFontWeight}" />
                                 <ItemsPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         Grid.Row="1"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                             </Grid>
                         </telerik:LayoutTransformControl>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
         <Setter Property="ItemsPanel">
             <Setter.Value>
                 <ItemsPanelTemplate>
                     <telerik:RadWrapPanel Orientation="{Binding ItemsPanelOrientation}" />
                 </ItemsPanelTemplate>
             </Setter.Value>
         </Setter>
         <Setter Property="HeaderTemplate">
             <Setter.Value>
                 <DataTemplate>
                     <Grid>
                         <TextBlock FontSize="7"
                                HorizontalAlignment="Left"
                                Height="Auto"
                                Padding="0,0,0,0"
                                TextWrapping="Wrap"
                                Text="{Binding}"
                                Visibility="{Binding Converter={StaticResource textToVisibilityConverter}}"
                                Width="Auto" />
                     </Grid>
                 </DataTemplate>
             </Setter.Value>
         </Setter>
     </Style>

 </UserControl.Resources>

 <Grid x:Name="LayoutRoot">
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="30" />
     </Grid.ColumnDefinitions>
     <telerik:RadCartesianChart HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
         <telerik:RadCartesianChart.HorizontalAxis>
             <telerik:CategoricalAxis/>
         </telerik:RadCartesianChart.HorizontalAxis>
         <telerik:RadCartesianChart.VerticalAxis>
             <telerik:LinearAxis/>
         </telerik:RadCartesianChart.VerticalAxis>
         <telerik:BarSeries>
             <telerik:CategoricalDataPoint Category="{x:Null}" IsSelected="False" Label="10" Value="10"/>
             <telerik:CategoricalDataPoint Category="{x:Null}" IsSelected="False" Label="20" Value="20"/>
             <telerik:CategoricalDataPoint Category="{x:Null}" IsSelected="False" Label="30" Value="30"/>
         </telerik:BarSeries>
     </telerik:RadCartesianChart>
     <telerik:ChartLegend Grid.Column="1"  Style="{StaticResource ChartLegendStyle}"  />


 </Grid>

[Petar Marchev]

Hi Akshay,

Thank you for the attached screenshot and code.

I think that what you are talking about is not caused by the legend style. You can try to run your app without this style and the same overlapping will most probably still occur. I can suggest that you consider rotating the labels to avoid this overlapping. A better approach would be to use a custom layout for the chart. You can examine this link (Creating a Chart With Custom Layout). I suggest that you give the ChartArea an appropriate margin, which will fix the overlapping issue.

Greetings,
Petar Marchev
the Telerik team