Rounded corners for background

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

    Posted 13 Sep 2010 Link to this post

    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
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 14 Sep 2010 Link to this post

    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
    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 banner
  4. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 14 Sep 2010 Link to this post

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

    Thanks {P
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 14 Sep 2010 Link to this post

    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
    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
Back to Top