Custom Colors for Horizontal Bar Series

[Jim Lundgren]

Hello,

I am using the latest version of the RadControls and the code in the WPF MVVM Support example to create a horizontal bar chart.  The example shows different colors in a regular bar chart, however, when I change it to a horizontal bar definition the fill colors in the rectangles disappear. What is the syntax for creating custom colors in a horizontal bar chart?  Is this possible?

Thank you.

[Sia]

Hello Jim Lundgren,

You need to change the custom Bar style to correspond with the HorizontalBar template. You need to have the following resources in your project:

<Window.Resources>
    <Style  x:Key="CustomStyle" TargetType="telerik:HorizontalBar" >
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:HorizontalBar">
                    <Canvas Opacity="0" x:Name="PART_MainContainer">
                        <Rectangle x:Name="PART_DefiningGeometry"
                                    Height="{TemplateBinding ItemActualHeight}"
                                    Width="{TemplateBinding ItemActualWidth}"
                                    RadiusX="5"
                                    RadiusY="5"
                                    Fill="{Binding DataItem.GradeColor}" />
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"  />
                        </Canvas.RenderTransform>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="CustomLabelStyle" TargetType="telerik:SeriesItemLabel">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="2,0" />
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:SeriesItemLabel">
                    <Canvas>
                        <Polyline x:Name="PART_Connector"
                                    Points="{TemplateBinding ConnectorPoints}"
                                    Visibility="{TemplateBinding ConnectorVisibility}"
                                    Style="{TemplateBinding ConnectorStyle}"
                                    Stroke="{TemplateBinding Stroke}"
                                    StrokeThickness="{TemplateBinding StrokeThickness}" />
                        <Border x:Name="PART_TextContainer"
                                Canvas.Left="{TemplateBinding TextContainerCanvasLeft}"
                                Canvas.Top="{TemplateBinding TextContainerCanvasTop}"
                                Style="{TemplateBinding LabelStyle}"
                                BorderBrush="{TemplateBinding Stroke}"
                                Background="Transparent">
                            <TextBlock TextAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Foreground="Black"
                                        Text="{TemplateBinding Content}" />
                        </Border>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

and apply them in your code-behind:

RadChart1.DefaultSeriesDefinition = new HorizontalBarSeriesDefinition();
RadChart1.DefaultSeriesDefinition.ItemStyle = this.Resources["CustomStyle"] as Style;
RadChart1.DefaultSeriesDefinition.SeriesItemLabelStyle = this.Resources["CustomLabelStyle"] as Style;

You need to use the same approach as the one used in our MVVM example. The only difference is that I have changed the Bar template.

I hope this helps.

Sincerely yours,
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.