Improving chart bar series bar gradient

[Manish Kumar]

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

 

 

 

 

 

[Sia]

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

[Manish Kumar]

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

[Sia]

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

[Manish Kumar]

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

 

 

[Manish Kumar]

image attached here

[Sia]

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

[Manish Kumar]

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