[Solved] Rounded corners on legend

[madladuk]

Can you have rounded corners for the box that is used for the legend ?

P

[Sia]

Hello madladuk,

If you need to change the shape of the Legend items, please review our example which shows the available legend functionality.

If you need to set CornerRadius to the whole Legend, please put the following style in your resources:

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">

<UserControl.Resources>

<SolidColorBrush x:Key="LegendForeground" Color="#FF000000" />
<LinearGradientBrush x:Key="LegendBackground" EndPoint="1.96,0.5" StartPoint="-0.96,0.5">
    <GradientStop Color="#FFB5B5B5"/>
    <GradientStop Color="#FFF0F0F0" Offset="0.5"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="LegendBorderBrush" Color="#FF848484" />
<Thickness x:Key="LegendBorderThickness">1</Thickness>

<Style x:Key="CustomLegend" TargetType="charting: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="TitleFontWeight" Value="Bold" />
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="charting:ChartLegend">
                <Border CornerRadius="30"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" >
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <ContentControl Foreground="{TemplateBinding Foreground}"
                                        FontWeight="{TemplateBinding TitleFontWeight}"
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                        <ItemsPresenter Grid.Row="1" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel" >
        <Setter.Value>
            <ItemsPanelTemplate>
                <controls:RadWrapPanel Orientation="{Binding ItemsPanelOrientation}" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="HeaderTemplate" >
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <TextBlock FontSize="12"
                            Padding="0,0,0,2"
                            HorizontalAlignment="Left"
                            Width="Auto"
                            Height="Auto"
                            Text="{Binding}"
                            TextWrapping="Wrap" />
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

</UserControl.Resources>

The resources above are valid for our default "Office Black" theme. If you use a different one, just let me know.

You need to set this style to your legend by putting the following line in your code-behind:

RadChart1.DefaultView.ChartLegend.Style = this.Resources["CustomLegend"] as Style;

I hope this helps you.
 
All the best,
Sia
the Telerik team