kb-databar-add-labels-inside-bars.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to Add Labels Inside Bars of RadStackedDataBar and RadStacked100DataBar	This article demonstrates how to add labels inside the bars of RadStacked100DataBar.	how-to	Place Labels In RadStackedDataBar and RadStacked100DataBar	kb-databar-add-labels-inside-bars	0	databar, add, labels, inside, bars, radstackeddatabar, radstacked100databar	1449620	kb

Environment

Product

RadDataBar for WPF

Description

How to add labels inside the bars of RadStackedDataBar and RadStacked100DataBar.

Solution

To achieve this requirement you need to [modify the control template]({%slug styling-apperance-editing-control-templates%}) of the StackedBarItem control and add an extra TextBlock to it. To position the label (TextBlock) accordingly, you will also have to define a converter similar to the one in Example 1:

[C#] Example 1: Define the LabelOffsetConverter

{{region cs-kb-databar-add-labels-inside-bars-1}}
public class LabelOffsetConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var barItem = values[0] as StackedBarItem;
        var width = barItem.ActualWidth;
        var dc = barItem.DataContext as DataBarDataItem;
        return new Thickness(width * dc.LeftPercent, 0, 0, 0);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
{{endregion}}

As can be observed, the converter calculates the offset based on the LeftPercent property of the underlying DataBarDataItem. It can be then used in the control template of the StackedBarItem as shown in Example 2:

[XAML] Example 2: Use the converter in the StackedBarItem template

{{region xaml-kb-databar-add-labels-inside-bars-2}}
    <local:LabelOffsetConverter x:Key="LabelOffsetConverter" />
    <Style TargetType="dataBars:StackedBarItem">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dataBars:StackedBarItem">
                    <Grid>
                        <dataBars:DataBarShape
                        LeftPercent="{Binding LeftPercent}"
                        RightPercent="{Binding RightPercent}"
                        HeightPercent="{TemplateBinding BarHeightPercent}"
                        Fill="{TemplateBinding BarBrush}"
                        Stroke="{TemplateBinding BarBorderBrush}"
                        StrokeThickness="{TemplateBinding BarBorderThickness}"
                        ShowToolTip="{TemplateBinding ShowToolTip}"
                        Style="{TemplateBinding BarStyle}"/>
                        <TextBlock VerticalAlignment="Center" Text="{Binding Value}">
                            <TextBlock.Margin>
                                <MultiBinding Converter="{StaticResource LabelOffsetConverter}">
                                    <Binding Path="." RelativeSource="{RelativeSource AncestorType=dataBars:StackedBarItem}" />
                                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=dataBars:StackedBarItem}" />
                                </MultiBinding>
                            </TextBlock.Margin>
                        </TextBlock>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
{{endregion}}

Please note that the use of a MultiBinding is required so that the label offset is updated each time the ActualWidth of the items changes - in case the control is resized, for example.

See Also

• [Editing Control Templates]({%slug styling-apperance-editing-control-templates%})
• [RadStackedDataBar Properties]({%slug raddatabar-main_properties%})