[Solved] DataBar inside DataTemplate not working?

[Mikael]

We're trying to use the new RadDataBar-control inside a ListBox but it doesn't seem to work. First we thought that we're just doing something wrong when binding the value of the DataBar to the collection but even with a hard-coded value the DataBar isn't shown.

If we only have a hard-coded RadDataBar, we can see it correctly:

<telerik:RadDataBar Height="20" Margin="2" BorderBrush="Gray" BorderThickness="1" Value="-10" OriginValue="30" />

But if the RadDataBar is inside a DataTemplate, it's not working:

<ListBox Grid.Row="1" x:Name="Items">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Name}" />
                <telerik:RadDataBar Grid.Column="1"
                                    Height="20"
                                    Margin="2"
                                    BorderBrush="Gray"
                                    BorderThickness="1"
                                    Value="-10"
                                    OriginValue="30"/>
            </Grid>

        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

When run, we can see the TextBlock's OK but even though the RadDataBar's value is fixed to -10, the bar isn't drawn at all.

Any ideas?

[Mikael]

Actually, I got the ListBox to show the bars after I manually defined the bar's width.

<telerik:RadDataBar Grid.Column="1"
                    Height="20"
                    Margin="2"
                    BorderBrush="Gray"
                    BorderThickness="1"
                    Value="-10"
                    OriginValue="30"
                    Width="150"/>

But I'm still wondering why the bar requires the width and doesn't fill the whole column? The DataTemplate in its current forms is like this:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Name}" />
            <telerik:RadDataBar Grid.Column="1"
                                Height="20"
                                Margin="2"
                                BorderBrush="Gray"
                                BorderThickness="1"
                                Value="-10"
                                OriginValue="30"
                                Width="150"/>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

[Petar Marchev]

Hi Mikael,

The reason for not seeing the data bar is because you have not set the Width to either the data bar, the grid or the column definition. If you replace the data bar with a Border (set a background as well) - you are not going to see this Border too.

When you don't explicitly specify a width for the data bar - it expects (from it's visual parent) to be told its size. The column definition, on the other hand, expects its children to know their size, so it can chose the max size. So as a result of this - the width of the column is left to zero.  

For now I can suggest that you specify at least one Width or a MinWidth - to the Grid or the ColumnDefinition or the RadDataBar.

Regards,
Petar Marchev
the Telerik team

[Mikael]

Hi Petar and thank you for your comment,

Silverlight trickery, it's just too easy to forget these things. Thank you :) I ended up modifying the ListBox's ItemContainerStyle which seems to be an alternative to specifying the width:

<Style x:Key="DefaultListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <ContentPresenter x:Name="ContentContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5">
                        <ContentPresenter.RenderTransform>
                            <CompositeTransform/>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>