In my previous post you saw how to style the Telerik chart
item in Metro Style. However you saw that the Legend was not at all matching
the Metro Style. So let’s Style the ChartLegend.
Add a ChartLegend like this,
<telerikCharting:ChartLegend
HorizontalAlignment="Left" VerticalAlignment="Top"/>
(Remember to delete this extra ChartLegend once you finish
style as this is just to ease the creation of the style.)
Once added right
click on the ChartLegend and select the Edit Template->Edit a copy option. Once
the template for the ChartLegend opens up you will see the basic elements of
style used in the slice.
The border for the
CharLegend has a gradient fill. Change it to a solid fill to match the metro
UI.
Apply this Style to you chart Legend.
Code:
SeriesMapping pieSeries = new SeriesMapping(); pieSeries.SeriesDefinition = new PieSeriesDefinition(); pieChart.DefaultView.ChartLegend.LegendItemStyle = App.Current.Resources["ChartLegendItemStyle"] as Style;
On applying the style your Legend will partially get the
Metro look.
I am saying partially because if you have noticed the Legend
Item, it is still having a non-metro look.
Lets style this Legend Item as well. Follow the same
procedure and open up the template for a ChartLegendItem. You will notice that
the glossy look is because of the gradient fill in the PART_SelectedState path.
Just remove this gradient fill or replace it with a solid fill.
Apply the ChartLegendItem style,
pieChart.DefaultView.ChartLegend.LegendItemStyle=App.Current.Resources["ChartLegendItemStyle"]
as Style;
After all this our chart will be metro ready
Here is the complete code,
Code:
<!--Legend Style--> <SolidColorBrush x:Key="LegendForeground" Color="#FF000000"/> <LinearGradientBrush x:Key="LegendBackground" EndPoint="1.96000003814697,0.5" StartPoint="-0.959999978542328,0.5"> <GradientStop Color="#FFB5B5B5"/> <GradientStop Color="#FFF0F0F0" Offset="0.5"/> </LinearGradientBrush> <SolidColorBrush x:Key="LegendBorderBrush" Color="#FF848484"/> <Thickness x:Key="LegendBorderThickness">1</Thickness> <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="10,10,10,5"/> <Setter Property="Margin" Value="0"/> <Setter Property="BorderBrush" Value="{StaticResource LegendBorderBrush}"/> <Setter Property="BorderThickness" Value="{StaticResource LegendBorderThickness}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="telerik:ChartLegend"> <Border Background="#FF1B1B1B" BorderThickness="0"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Margin="5"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="White" FontFamily="Segoe UI" /> <ItemsPresenter Grid.Row="1"/> </Grid> </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="12" HorizontalAlignment="Left" Height="Auto" Padding="0,0,0,2" TextWrapping="Wrap" Text="{Binding}" Width="Auto"/> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> <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> <!--End--> <!--Legend Item Style--> <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="#FFFFFFFF"/> <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" 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> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Path x:Name="PART_LegendItemMarker" Height="10" Style="{TemplateBinding ItemStyle}" Stretch="Fill" StrokeThickness="{TemplateBinding MarkerStrokeThickness}" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center"> <Path.Data> <PathGeometry x:Name="PART_ItemMarkerGeometry" /> </Path.Data> </Path> <Path x:Name="PART_SelectedState" Height="10" OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}" Stretch="Fill" StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center"> <Path.Data> <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" /> </Path.Data> </Path> <TextBlock x:Name="PART_TextBlock" Grid.Column="1" Padding="{TemplateBinding Padding}" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" FontFamily="Segoe UI"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--End-->