DataBar inside DataTemplate not working?

4 posts, 0 answers
  1. Mikael
    Mikael avatar
    3 posts
    Member since:
    May 2011

    Posted 21 Mar 2012 Link to this post

    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?
  2. Mikael
    Mikael avatar
    3 posts
    Member since:
    May 2011

    Posted 21 Mar 2012 Link to this post

    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>

  3. DevCraft banner
  4. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 21 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Mikael
    Mikael avatar
    3 posts
    Member since:
    May 2011

    Posted 22 Mar 2012 Link to this post

    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>

Back to Top