Applied ChartLegendItemStyle but lose Legend Item Shape

8 posts, 0 answers
  1. Daren May
    Daren May avatar
    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?
     

  2. Sia
    Admin
    Sia avatar
    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.
  3. Anatoly Chekh
    Anatoly Chekh avatar
    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.
  4. Sia
    Admin
    Sia avatar
    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>>
  5. Anatoly Chekh
    Anatoly Chekh avatar
    86 posts
    Member since:
    Apr 2010

    Posted 09 Feb 2011 Link to this post

    Thanks a lot! It's work.
  6. Gary
    Gary avatar
    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?
  7. Sia
    Admin
    Sia avatar
    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:

    <!-- 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
    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
  8. Gary
    Gary avatar
    7 posts
    Member since:
    May 2011

    Posted 01 Jun 2011 Link to this post

    Thanks
Back to Top