Rounded corners on legend

2 posts, 0 answers
  1. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 14 Jul 2010 Link to this post

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

  2. Sia
    Sia avatar
    667 posts

    Posted 16 Jul 2010 Link to this post

    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:
    <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"/>
    <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" >
                <ControlTemplate TargetType="charting:ChartLegend">
                    <Border CornerRadius="30"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" >
                        <Grid Margin="{TemplateBinding Padding}">
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            <ContentControl Foreground="{TemplateBinding Foreground}"
                                            FontWeight="{TemplateBinding TitleFontWeight}"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                            <ItemsPresenter Grid.Row="1" />
        <Setter Property="ItemsPanel" >
                    <controls:RadWrapPanel Orientation="{Binding ItemsPanelOrientation}" />
        <Setter Property="HeaderTemplate" >
                        <TextBlock FontSize="12"
                                TextWrapping="Wrap" />

    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,
    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. DevCraft R3 2016 release webinar banner
Back to Top