How to Style Label

[Keaire]

For some reason, I'm unable to apply a LabelText attribute on the RadDataBar. Its ControlTemplate contains a TextBlock which uses TemplateBinding to bind to the AppliedLabelMargin and LabelText properties, but they're not available.

What gives?

[Evgenia]

Hi,

Indeed most of the properties in RadDatabar such as AppliedLabelMargin and LabelText have only getters and that's why you can't access them as direct properties of the DataBar. However you can retemplate the databar control and bind to custom business object properties so that custom text gets visualized. For example:

<UserControl.Resources>
        <Style TargetType="telerik:RadDataBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadDataBar">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" >
                            <Grid>
                                <dataBars:DataBarShape Fill="{TemplateBinding AppliedBarBrush}"
                                                    Style="{TemplateBinding BarStyle}"
                                                    Stroke="{TemplateBinding AppliedBarBorderBrush}"
                                                    StrokeThickness="{TemplateBinding BarBorderThickness}"
                                                    HeightPercent="{TemplateBinding BarHeightPercent}"
                                                    RightPercent="{TemplateBinding BarRightPercent}"
                                                    LeftPercent="{TemplateBinding BarLeftPercent}"
                                                    OutOfRangeRule="{TemplateBinding AppliedOutOfRangeRule}" />
                                <ContentPresenter ContentTemplate="{TemplateBinding AppliedOutOfRangeTemplate}" />
                                <Rectangle Margin="{TemplateBinding AppliedAxisMargin}"
                                         Fill="{TemplateBinding AxisStroke}"
                                         Style="{TemplateBinding AxisStyle}"
                                         Visibility="{TemplateBinding AppliedAxisVisibility}"
                                         HorizontalAlignment="Left"/>
                                <TextBlock Text="{Binding Name}"
                                       Style="{TemplateBinding LabelStyle}"
                                       Visibility="{TemplateBinding LabelVisibility}"
                                       Margin="{TemplateBinding AppliedLabelMargin}"
                                       VerticalAlignment="Center" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadDataBar Height="20" Value="{Binding Val}" OriginValue="20" BorderBrush="Gray" BorderThickness="1" Margin="2" ValueBrush="RoyalBlue" />
    </Grid>

And the business objects class:

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.DataContext = new Item() { Val = 40, Name = "My Product" };
        }

        public class Item
        {
            public double Val { get; set; }
            public string Name { get; set; }
        }
    }

Regards,
Evgenia
Telerik

 

 

[Christian]

Hy Evgenia,

 

im wondering where "dataBars:DataBarShape" is refernced to?

Which refernce do i need to access DataBarShape?

Thx in advance

[Evgenia]

Hello Christian,

You can easily see what is the exact namespace mapping that xmlns:databars points to if you open the default control template as we defined it in our themes. For the purpose you might use one of the approaches described here.

I'm pasting it here for your ease:

xmlns:dataBars="clr-namespace:Telerik.Windows.Controls.DataBars;assembly=Telerik.Windows.Controls.DataVisualization"

Regards,
Evgenia
Telerik