[Solved] Applied ChartLegendItemStyle but lose Legend Item Shape

[Daren May]

Hi,

I am adding a custom style to the ChartLegendItem:

 

 

 

    <SolidColorBrush x:Key="LegendForeground"
                     Color="#FF000000" />
    <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="LegendItemMarkerMaskStroke"
                     Color="White" />
    <System:Double x:Key="LegendItemMarkerMaskStrokeThickness">1</System:Double>
    <SolidColorBrush x:Key="LegendItemMarkerMaskOpacityMask"
                     Color="#FF000000" />
    <SolidColorBrush x:Key="LegendItemMarkerMask2"
                     Color="Transparent" />
    <Style x:Key="TrimmedChartLegendItem"
           TargetType="Telerik_Windows_Controls_Charting: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_Windows_Controls_Charting:ChartLegendItem">
                    <Grid HorizontalAlignment="Stretch"
                          VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Path x:Name="PART_LegendItemMarker"
                              Stretch="Fill"
                              Height="16"
                              Margin="{TemplateBinding Margin}"
                              Style="{TemplateBinding ItemStyle}"
                              Width="16"
                              Data="" />
                        <Path Fill="{StaticResource LegendItemMarkerMask}"
                              Stretch="Fill"
                              Stroke="{StaticResource LegendItemMarkerMaskStroke}"
                              StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}"
                              Height="14"
                              Margin="{TemplateBinding Margin}"
                              Width="14"
                              OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}"
                              Data="" />
                        <Path Fill="{StaticResource LegendItemMarkerMask2}"
                              Stretch="Fill"
                              Height="14"
                              Margin="{TemplateBinding Margin}"
                              Width="14"
                              Data="" />
                        <TextBlock Margin="{TemplateBinding Margin}"
                                   Grid.Column="1"
                                   Foreground="{TemplateBinding Foreground}"
                                   Width="140"
                                   Padding="{TemplateBinding Padding}"
                                   Text="{TemplateBinding Label}">
                            <Interactivity:Interaction.Behaviors>
                                <Behaviors:EllipsisTextBlockBehavior />
                            </Interactivity:Interaction.Behaviors>
                        </TextBlock>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I'm getting the customizations to the TextBlock, etc. but I am losing the Legend Item Shape from the display. Any Ideas?

I refer to the above style via:

 

    <Style x:Key="chartLegendStyle"
           TargetType="Telerik_Windows_Controls_Charting:ChartLegend">
        <Setter Property="Foreground"
                Value="#00000000" />
        <Setter Property="Background"
                Value="#00000000" />
        <Setter Property="Padding"
                Value="10,10,10,5" />
        <Setter Property="Margin"
                Value="0,0,20,0" />
        <Setter Property="BorderBrush"
                Value="#00000000" />
        <Setter Property="BorderThickness"
                Value="1,1,1,1" />
        <Setter Property="TitleFontWeight"
                Value="Bold" />
        <Setter Property="MaxWidth"
                Value="200" />
        <Setter Property="LegendItemStyle"
                Value="{StaticResource TrimmedChartLegendItem}" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:ChartLegend">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <ContentControl FontWeight="{TemplateBinding TitleFontWeight}"
                                            Foreground="{TemplateBinding Foreground}"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}" />
                            <ItemsPresenter Grid.Row="1" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="{Binding ItemsPanelOrientation}"
                                Width="200" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <TextBlock Height="Auto"
                                   TextWrapping="Wrap"
                                   HorizontalAlignment="Left"
                                   Width="Auto"
                                   FontSize="12"
                                   Padding="0,0,0,2"
                                   Text="{Binding}" />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 If I comment out the line below:

        <Setter Property="LegendItemStyle"
                Value="{StaticResource TrimmedChartLegendItem}" />

The legend item shape appears as expected.

Any ideas?
 

[Sia]

Hello Daren May,

The Legend Item Shapes disappear because the Data of your Path elements is empty in your new template. Just put the path you need there.

You can refer to our help section, where the Data is:

Data="M1,0A1,1,0,0,0,-1,0A1,1,0,0,0,1,0"

 
Hope this helps.

All the best,
Sia
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Anatoly Chekh]

Hello.

I have the same problem. The data you writed is for the circle marker. So I have two questions:

What's the data for the square markes?
And is there a way to use template without hardcode data? If I don't know what marke user want to see, I cann't use hardcoded type.

Thanks, Anatoly Chekh.

[Sia]

Hello Anatoly Chekh,

In the attached file you can find the original template and resources in "Office Black" for the ChartLegendItem where the marker shape is not hard coded. I hope this helps.

Kind regards,
Sia
the Telerik team

[Anatoly Chekh]

Thanks a lot! It's work.

[Gary]

following the main page attachment that was provide, I ended up with flat squares with no gradients. How do I get the original style?

[Sia]

Hi Gary,

The attached style represents the default legend items' style for our default "Office Black" theme. It includes a mask, which is visualized by a rectangle:

<!-- Mask 1 -->
<Path x:Name="PART_SelectedState"
    Width="14"
    Height="14"
    Margin="{TemplateBinding Margin}"
    Fill="{StaticResource LegendItemMarkerMask}"
    Stroke="{StaticResource LegendItemMarkerMaskStroke}"
    StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}"
    Stretch="Fill">
    <Path.Data>
        <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" />
    </Path.Data>
</Path>

Please make sure that you have it in your custom style and let me know if your problem is not solved.

Kind regards,
Sia
the Telerik team

[Gary]

Thanks