Improving chart bar series bar gradient

8 posts, 0 answers
  1. Manish Kumar
    Manish  Kumar avatar
    62 posts
    Member since:
    Feb 2010

    Posted 24 Nov 2010 Link to this post

    Hi

    My requirement is to display bars of the barseries in chart area with the blackish gradient rather than the white one. for this i created a style which looks like as below:
    <Style x:Key="MyBarStyle" TargetType="charting:Bar">

     

     

    <Setter Property="Template" >

     

     

     

    <Setter.Value>

     

     

     

        <ControlTemplate TargetType="charting:Bar">

     

     

     

            <Rectangle   x:Name="PART_DefiningGeometry"     
                Stroke
    ="Black"     StrokeThickness="3"    Height="{TemplateBinding  ItemActualHeight}"

     

     

     

                 Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}">

     

     

     

             </Rectangle>

     

     

     

        </ControlTemplate>

     

     

     

     </Setter.Value>

     

     

     

     </Setter>

     

     

     

     </Style>


    but this only outlines the bar of the barseries with black color. I need to show the gradient exactly the way it was in 2009 build charts.

    Thanks
    Manish Kumar

     

     

     

     


     

  2. Sia
    Admin
    Sia avatar
    745 posts

    Posted 25 Nov 2010 Link to this post

    Hello Manish Kumar,

    Please check the attached project. There you can see how to achieve the old "Office Black" look. The only thing which is not changed is the mask over the bars. Is that solution appropriate for you? If you want the old mask, you need to re-template your bar series.

    Greetings,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. Manish Kumar
    Manish  Kumar avatar
    62 posts
    Member since:
    Feb 2010

    Posted 25 Nov 2010 Link to this post

    Hi Sia

    Thanks for your help but actually my requirement is to modify the series bar mask exactly like the old version one. if that can be possible with the re-templating thing (i don't know how it can be achieved) then it would be just wonderfull if you could help me out in that. Also, i saw the help document of the earlier versions of the RadCharts wherein it do give us such flexiblity to modify the gradient (bar mask) with much ease i don't know if this feature is available with the new versions of the radchart. I have attached help document (2009 version ) screen shot for your refrence. Can not this possible in the newer versions.

    Thanks
    Manish
  4. Sia
    Admin
    Sia avatar
    745 posts

    Posted 26 Nov 2010 Link to this post

    Hi Manish Kumar,

    The steps are still the same for changing the mask in Blend (see the attached screen-shot).
    You can also find attached the same project but modified to have custom bar mask. I hope that this is what you want to achieve.

    Best wishes,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  5. Manish Kumar
    Manish  Kumar avatar
    62 posts
    Member since:
    Feb 2010

    Posted 06 Dec 2010 Link to this post

    Hi

    I followed your code but code dont seem to return the expected result but gives the Bar in the series invisible (ref attaced image).

    <

     

    Style x:Key="CustomBar" TargetType="charting:Bar">
    <Setter Property="Template" >
    <Setter.Value>
    <ControlTemplate TargetType="charting:Bar">
    <Canvas Opacity="0" x:Name="PART_MainContainer">
    <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}" RadiusX="1" RadiusY="1" />
    <Rectangle Height="{TemplateBinding ItemActualHeight}"
    Width="{TemplateBinding ItemActualWidth}"  RadiusX="1" RadiusY="1"  Fill="{StaticResource BarMaskBrush}" />

     

     

     

     

    <Rectangle x:Name="PART_SelectedState" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" RadiusX="1" RadiusY="1" />
    <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>

     

     

    I also removed few of the code from this style as given below and also tried to execute the code but got no help. I am using Silverlight3 dll of 2010.2.714.1030 version.

     

     

    <LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5">

     

     

     

     

    <GradientStop Color="#00000000" Offset="0"/>

     

     

     

     

    <GradientStop Color="#00FFFFFF" Offset="1"/>

     

     

     

     

    <GradientStop Color="#26000000" Offset="0.904"/>

     

     

     

     

    <GradientStop Color="#66000000" Offset="0.992"/>

     

     

     

     

    <GradientStop Color="Black" Offset="0.268"/>

     

     

     

     

    </LinearGradientBrush>

     

     

     

     

    <Style x:Key="CustomBar" TargetType="charting:Bar" >

     

     

     

     

    <Setter Property="Template" >

     

     

     

     

    <Setter.Value>

     

     

     

     

    <ControlTemplate TargetType="charting:Bar">

     

     

     

     

    <Canvas Opacity="0" x:Name="PART_MainContainer">

     

     

     

     

    <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}"

     

     

     

    Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}"

     

     

     

    RadiusX="2" RadiusY="2" />

     

     

     

     

    <Rectangle Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" RadiusX="2"

     

     

     

    RadiusY="2" Fill="{StaticResource BarMaskBrush}" />

     

     

     

     

    <Rectangle x:Name=" " Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}"

     

     

     

    RadiusX="2" RadiusY="2" />

     

     

     

     

    <Canvas.RenderTransform>

     

     

     

     

    <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />

     

     

     

     

    </Canvas.RenderTransform>

     

     

     

     

    </Canvas>

     

     

     

     

    </ControlTemplate>

     

     

     

     

    </Setter.Value>

     

     

     

     

    </Setter>

     

     

     

     

    </Style>

    thanks
    Manish

     

     

  6. Manish Kumar
    Manish  Kumar avatar
    62 posts
    Member since:
    Feb 2010

    Posted 06 Dec 2010 Link to this post

    image attached here
  7. Sia
    Admin
    Sia avatar
    745 posts

    Posted 07 Dec 2010 Link to this post

    Hello Manish Kumar,

    I suggest that you are using older version, because we changed a Part Name in the template. The template which I have sent you is the latest one. Please try to replace this line in your XAML:
    <Canvas Opacity="0"  x:Name="PART_MainContainer">

    with this:
    <Canvas Opacity="0"  x:Name="PART_CanvasContainer">

    and let me know if you still experience the problem.

    Regards,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  8. Manish Kumar
    Manish  Kumar avatar
    62 posts
    Member since:
    Feb 2010

    Posted 07 Dec 2010 Link to this post

    Hi Sia ,
    Thats just great, it has worked now...
    Manish
Back to Top