Rounded corners for background

[madladuk]

Hi. Is there a quick way to edit the style [using the windows7 style] so that the background has a corner radius of 10?

Thanks
P

[Sia]

Hi Paul Ashford,

Could you please specify which corners you want to be with radius of 10? The bars' corners or the chart area's corners?

Thank you,
Sia
the Telerik team

[madladuk]

The chart area corners, however if you can easily do the bars as well.

Thanks {P

[Sia]

Hello Paul Ashford,

You can surround your RadChart with a Grid, which clips it as follows:

<Grid x:Name="ClipPanel">
     <telerikChart:RadChart x:Name="RadChart1" telerik:StyleManager.Theme="Windows7" />
</Grid>

After that you need to set the clipping in your code behind:

public MainPage()
{
    InitializeComponent();

    DataSeries dataSeries = new DataSeries();
    dataSeries.Definition = new BarSeriesDefinition() { ItemStyle= this.Resources["CustomBar"] as Style };
    dataSeries.Add(new DataPoint() { YValue = 41 });
    dataSeries.Add(new DataPoint() { YValue = 33 });
    dataSeries.Add(new DataPoint() { YValue = 25 });
    RadChart1.DefaultView.ChartArea.DataSeries.Add(dataSeries);

    ClipPanel.SizeChanged += new SizeChangedEventHandler(LayoutRoot_SizeChanged);
}

void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ClipInsideSender(sender);
}

public void ClipInsideSender(object sender)
{
    Grid grid = sender as Grid;
    RectangleGeometry geometry = new RectangleGeometry();
    geometry.Rect = new Rect(0, 0, grid.ActualWidth, grid.ActualHeight);
    geometry.RadiusX = 10;
    geometry.RadiusY = 10;
    grid.Clip = geometry;
}

In order to set different radius of the bars, you need to re-template them. Above you can see that there is a ItemStyle set to the BarSeriesDefinition.

All styles you need to add in your resources are below:

<UserControl.Resources>

<LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">
    <GradientStop Color="Transparent" Offset="0.2"/>
    <GradientStop Color="#CCFFFFFF" Offset="0.48"/>
    <GradientStop Color="Transparent" Offset="0.8"/>
    <GradientStop Color="White" Offset="0.5"/>
    <GradientStop Color="#CCFFFFFF" Offset="0.52"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="BarOpacityMaskBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#CCFFFFFF" Offset="1"/>
    <GradientStop Color="Transparent" Offset="0.4"/>
    <GradientStop Color="#7FFFFFFF" Offset="0.8"/>
    <GradientStop Color="#66FFFFFF" Offset="0.05"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="BarTopMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">
    <GradientStop Color="#33FFFFFF" Offset="0.5"/>
    <GradientStop Color="Transparent"/>
    <GradientStop Color="Transparent" Offset="0.5"/>
    <GradientStop Color="#33FFFFFF" Offset="1"/>
    <GradientStop Color="Transparent" Offset="0.75"/>
</LinearGradientBrush>

<Style x:Key="CustomBar" TargetType="telerikCharting:Bar">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerikCharting:Bar">
                <Canvas Opacity="0"  x:Name="PART_MainContainer">
                    <Rectangle x:Name="PART_DefiningGeometry"
                        Height="{TemplateBinding ItemActualHeight}"
                        Width="{TemplateBinding ItemActualWidth}"
                        Style="{TemplateBinding ItemStyle}"
                        RadiusX="10"
                        RadiusY="10" />
                    <Rectangle Height="{TemplateBinding ItemActualHeight}"
                        Width="{TemplateBinding ItemActualWidth}"
                        RadiusX="10"
                        RadiusY="10"
                        OpacityMask="{StaticResource BarOpacityMaskBrush}"
                        Fill="{StaticResource BarMaskBrush}"  />
                    <Rectangle x:Name="PART_SelectedState"
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            RadiusX="10"
                            RadiusY="10"
                            Fill="{StaticResource BarTopMaskBrush}" />
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                    </Canvas.RenderTransform>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="HoverStates">
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hovered">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected">
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#B2000000" />
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <mscorlib:Double xmlns:mscorlib="clr-namespace:System;assembly=mscorlib">2</mscorlib:Double>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</UserControl.Resources>

Please ignore the VisualStateManager part of the template if you use SL 4.

Let me know if this solution is appropriate for you.

Regards,
Sia
the Telerik team