Applied ChartLegendItemStyle but lose Legend Item Shape in UI for Silverlight Chart

Daren May

4 posts

Member since:
Apr 2010

Posted 21 Apr 2010 Link to this post

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

Admin

765 posts

Posted 26 Apr 2010 Link to this post

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

86 posts

Member since:
Apr 2010

Posted 08 Feb 2011 Link to this post

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

Admin

765 posts

Posted 09 Feb 2011 Link to this post

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

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>

MainPage.zip

Anatoly Chekh

86 posts

Member since:
Apr 2010

Posted 09 Feb 2011 Link to this post

Thanks a lot! It's work.

Gary

7 posts

Member since:
May 2011

Posted 27 May 2011 Link to this post

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

Admin

765 posts

Posted 31 May 2011 Link to this post

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:

<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

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

Gary

7 posts

Member since:
May 2011

Posted 01 Jun 2011 Link to this post

Thanks