RadDataBoundListBox layout is messed up

[StevenDale]

I am using the RadDataBoundListBox to display the contents of an RSS Feed on my WP8 application. I am using the Panorama window and it contains 3 user controls on the third user control, I have the RadDataBoundListBox. However when I display the page the contents of the list are all bunched up as displayed in the image below. I original had this same xaml in a normal window and it worked like expected. 
Screen Shot

My Main Page Xaml is:

<phone:Panorama Title="Devtasia">
    <phone:Panorama.Background>
        <ImageBrush ImageSource="/DevtasiaPanorama;component/Assets/DevtasiaPanoramaBackground.png"/>
    </phone:Panorama.Background>

    <!--Panorama item one-->
    <phone:PanoramaItem>
        <!--Single line list with text wrapping-->
        <userControls:QuotesUserControl Margin="0,-60,0,0"  OnNavigateToUri="OnNavigateToUri"  />
    </phone:PanoramaItem>

    <!--Panorama item two-->
    <phone:PanoramaItem>
        <userControls:FunSoundsUserControl Margin="0,-60,0,0" />
    </phone:PanoramaItem>

    <!--Panorama item three-->
    <phone:PanoramaItem Orientation="Horizontal">
        <userControls:RssFeedUserControl Margin="0,-60,0,0" OnNavigateToUri="OnNavigateToUri" />
    </phone:PanoramaItem>
</phone:Panorama>

My User Control Xaml is:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.Resources>
            <DataTemplate x:Name="ListBoxItemTemplate">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <!--<TextBlock Text="{Binding Title}"/>-->
                    <TextBlock Text="{Binding Title}" FontWeight="Bold" TextWrapping="Wrap" />
                    <TextBlock Text="{Binding Description}" Grid.Row="1" TextWrapping="Wrap"/>
                    <HyperlinkButton Content="View Article" FontWeight="Bold" Command="{Binding OpenWebPageCommand}" CommandParameter="{Binding Link}" Grid.Row="2" />
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="5">
            <TextBlock Text="MSDN Rss Feed" HorizontalAlignment="Left" Style="{StaticResource PhoneTextTitle2Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="5">
            <telerikPrimitives:RadDataBoundListBox CacheMode="BitmapCache" ItemsSource="{Binding RssNodes, Mode=TwoWay}" ItemTemplate="{StaticResource ListBoxItemTemplate}"/>
        </Grid>
    </Grid>

[Deyan]

Hi Billy,

Thanks for writing and for the attached screenshot.

From what I see the ListBox is simply not stretched to the extent of the panorama item. Based on the XAML snippets you are pasting I cannot exactly say why this happens.

Can you please send me the entire project in which this happens so that I can be able to directly debug the case?

Please open a new support ticket in order to be able to attach your project.

All the best,
Deyan
the Telerik team

[StevenDale]

I created this support ticket: http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=656657

Thanks,

Billy Jacobs

[Doug]

Hi

Can you make the answer for this public? I have the same problem, this is what I've tried to stretch the listbox across the screen but nothing is happening.

                

<telerikPrimitives:RadDataBoundListBox.ItemContainerStyle>
    <Style TargetType="telerikPrimitives:RadDataBoundListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
</telerikPrimitives:RadDataBoundListBox.ItemContainerStyle>

[Deyan]

Hi Doug,

Here's a copy of the answer:

"Thanks for writing back and for the attached project.

The reason for the observed behavior is setting the Orientation property of the panorama item to Horizontal. Is there any specific need to do this? When this property is horizontal, the list box is measured with infinite available horizontal size and because of the DataBoundListBox UI virtualization mechanism which implies that no known horizontal desired size is available, the list box returns a default size which you are actually seeing.

If you set the PanoramaItem.Orientation property everything works just fine."

If that's not the case on your side, please share with us some further code so that we can take a thorough look.

Regards,
Deyan
Telerik

[Doug]

I dont have a panorama on my page. tho after a little messing around i figured out that if i remove the datatemplate selector that this problem doesn't occur. I'm going to paste the code for my listbox here. I hope you can figure out the problem from this code snippet.

<telerikPrimitives:RadDataBoundListBox EmptyContent=" " CacheMode="BitmapCache" x:Name="ReviewList" DataRequested="ReviewList_DataRequested">
    <telerikPrimitives:RadDataBoundListBox.ItemContainerStyle>
        <Style TargetType="telerikPrimitives:RadDataBoundListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </telerikPrimitives:RadDataBoundListBox.ItemContainerStyle>
    <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
        <DataTemplate>
            <local:DatatemplateSelector Content="{Binding}">
                <local:DatatemplateSelector.Template1>
                    <DataTemplate>
                        <Border BorderThickness="0,1,0,0" Margin="0,0,0,5" BorderBrush="{StaticResource OpacityBorderColor}" Background="Transparent">
                            <StackPanel Margin="0,5,0,0">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Image Height="64" Width="64" Grid.RowSpan="2" Margin="0,5,5,5" Source="{Binding Image}"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Header}" FontSize="25" FontWeight="Thin" Style="{StaticResource BasicTextBlockStyle}" />
                                    <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Subtitle}" FontWeight="Thin" Style="{StaticResource SubtitleTextBlockStyle}" />
                                    <Button x:Name="ViewBtn" Grid.Column="2" Grid.RowSpan="2" Height="45" Tag="{Binding}" Content="{Binding Path=LocalizedResources.String1, Source={StaticResource LocalizedStrings}}" Style="{StaticResource RegularButtonStyle}" Margin="0,0,5,0" Click="Btn_Click"/>
                                </Grid>
                                <telerikInput:RadRating x:Name="rating" Value="{Binding Rating}" Margin="0,15,0,0" IsReadOnly="True" ItemShapeHeight="15" ItemShapeWidth="15" ItemShapeGeometry="M50,0.5 L67.325,30.1529 L99.5,38.3146 L78.0324,64.8029 L80.5927,99.5 L50,86.2178 L19.4073,99.5 L21.9676,64.8029 L0.5,38.3146 L32.675,30.1529 z" HorizontalAlignment="Left" >
                                    <telerikInput:RadRating.ItemShapeSelectedStyle>
                                        <Style TargetType="Path">
                                            <Setter Property="Fill" Value="White"/>
                                            <Setter Property="StrokeThickness" Value="0.5"/>
                                        </Style>
                                    </telerikInput:RadRating.ItemShapeSelectedStyle>
                                    <telerikInput:RadRating.ItemShapeUnselectedStyle>
                                        <Style TargetType="Path">
                                            <Setter Property="Fill" Value="{StaticResource ControlBackgroundColor}"/>
                                            <Setter Property="Stroke" Value="{StaticResource ControlBackgroundColor}"/>
                                            <Setter Property="StrokeThickness" Value="0.5"/>
                                        </Style>
                                    </telerikInput:RadRating.ItemShapeUnselectedStyle>
                                    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
                                    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
                                    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
                                    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
                                    <telerikInput:RadRatingItem/>
                                </telerikInput:RadRating>
                                <TextBlock Text="{Binding Text1}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextBlockStyle}" Visibility="{Binding IsPresentSubItems, Converter={StaticResource BooleanToVisibilityConverter}}" />

                                <ListBox ItemsSource="{Binding Items}">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Image Height="80" Width="80" Source="{Binding ImageUri}"/>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                                <Grid Margin="0,10,5,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock x:Name="Footer" Text="{Binding Footer}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                                    <Image x:Name="Image" Source="../Images/white.png" Height="20" Width="20"  Grid.Column="1" Margin="5" HorizontalAlignment="Right" />
                                    <TextBlock x:Name="Count" Text="{Binding Count}" Grid.Column="2" Style="{StaticResource SubtitleTextBlockStyle}" Margin="5,0,5,0"/>
                                </Grid>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </local:ReviewCheckinDatatemplateSelector.Template1>
                <local:ReviewCheckinDatatemplateSelector.Template2>
                    <DataTemplate>
                        <Border BorderThickness="0,1,0,0" Margin="0,0,0,5" BorderBrush="{StaticResource OpacityBorderColor}" Background="Transparent">
                            <StackPanel Width="470" Margin="0,5,0,0">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Image Height="64" Width="64" Grid.RowSpan="2" Margin="0,5,5,5" Source="{Binding Img}"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Header}" FontSize="25" FontWeight="Thin" Style="{StaticResource BasicTextBlockStyle}" />
                                    <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}" />

                                </Grid>
                                <TextBlock Text="{Binding Text}" Margin="0,15,0,0" TextWrapping="Wrap" Style="{StaticResource SubtitleTextBlockStyle}" Visibility="{Binding IsPresentSubItems, Converter={StaticResource BooleanToVisibilityConverter}}" />

                                <TextBlock x:Name="Date" Margin="0,10,5,0" Text="{Binding Date}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </local:DatatemplateSelector.Template2>
            </local:DatatemplateSelector>
        </DataTemplate>
    </telerikPrimitives:RadDataBoundListBox.ItemTemplate>

    <telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
        <telerikCore:RadMoveAnimation StartPoint="500, 0" EndPoint="0, 0" Duration="0:0:0.5">
            <telerikCore:RadMoveAnimation.Easing>
                <CubicEase EasingMode="EaseOut"/>
            </telerikCore:RadMoveAnimation.Easing>
        </telerikCore:RadMoveAnimation>
    </telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>

    <telerikPrimitives:RadDataBoundListBox.ItemRemovedAnimation>
        <telerikCore:RadMoveAnimation StartPoint="0, 0" EndPoint="500, 0" Duration="0:0:0.5">
            <telerikCore:RadMoveAnimation.Easing>
                <CubicEase EasingMode="EaseIn"/>
            </telerikCore:RadMoveAnimation.Easing>
        </telerikCore:RadMoveAnimation>
    </telerikPrimitives:RadDataBoundListBox.ItemRemovedAnimation>

    <telerikPrimitives:RadDataBoundListBox.EmptyContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextGroupHeaderStyle}" TextWrapping="Wrap"/>
        </DataTemplate>
    </telerikPrimitives:RadDataBoundListBox.EmptyContentTemplate>

    <telerikPrimitives:RadDataBoundListBox.ItemLoadingTemplate>
        <DataTemplate>
            <telerikPrimitives:RadBusyIndicator AnimationStyle="AnimationStyle9" IsRunning="True" Content="{Binding Path=LocalizedResources.Loading, Source={StaticResource LocalizedStrings}}" Foreground="{StaticResource FontForegroundColor}" />
        </DataTemplate>
    </telerikPrimitives:RadDataBoundListBox.ItemLoadingTemplate>

</telerikPrimitives:RadDataBoundListBox>

[Deyan]

Hi Doug,

In the XAML code you're pasting here, you're not correctly setting the DataTemplateSelector. It should be set to the ItemTemplateSelector property exposed by RadDataBoundListBox. Now you are setting it within the DataTemplate for the item. The code should be looking like this:

<telerikPrimitives:RadDataBoundListBox.ItemTemplateSelector>
            <local:DatatemplateSelector >
....................

Hope this helps.

Regards,
Deyan
Telerik

[Doug]

Hi Deyan

And how does one use the RadDataBoundListBox.ItemTemplateSelector ? 
I tried searching for some examples but i didnt find anything.

Regards Doug

[Deyan]

Hello Doug,

Thanks for writing back.

You just simply define a class that inherits from DataTemplateSelector defined in the Telerik.Windows.Core assembly. In this class you override the SelectTemplate method and return the data template you want according to the data item which is automatically passed as an argument by the DataBoundListBox to the SelectTemplate method. Here's a sample code:

public class HeaderAndFooterItemTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        ListItem dataItem = item as ListItem;
        return dataItem.IsRight ? this.ItemTemplateRight : this.ItemTemplateLeft;
    }

    public DataTemplate ItemTemplateLeft
    {
        get;
        set;
    }

    public DataTemplate ItemTemplateRight
    {
        get;
        set;
    }
}

Additionally, you define as many DataTemplate properties as you need and set them when you instantiate the DataTemplateSelector in XAML. Here's an example of using this data template selector:

<telerikPrimitives:RadDataBoundListBox
    x:Name="radDataBoundListBox"
    ItemTemplateSelector="{StaticResource ItemTemplateSelector}"/>

And here's how the resources are defined:

<Grid.Resources>
           <listBox:ForegroundConverter x:Key="ForegroundConverter"/>
        <DataTemplate x:Key="ItemTemplateLeft">
               <Grid MinHeight="128">
                   <Image Stretch="None" Source="{Binding ImageUri}"/>
                   <TextBlock FontSize="34" Foreground="{Binding Foreground, Converter={StaticResource ForegroundConverter}}" FontFamily="Segoe WP SemiLight" Text="{Binding HeaderText}" Margin="135, 10, 0, 0"/>
               </Grid>
           </DataTemplate>
           <DataTemplate x:Key="ItemTemplateRight">
               <Grid MinHeight="128">
                   <Image Stretch="None" Source="{Binding ImageUri}"/>
                   <TextBlock FontSize="34" Foreground="{Binding Foreground, Converter={StaticResource ForegroundConverter}}" FontFamily="Segoe WP SemiLight" HorizontalAlignment="Right" Text="{Binding HeaderText}" Margin="0, 8, 135, 0"/>
               </Grid>
           </DataTemplate>
           <DataTemplate x:Key="HeaderTemplate">
               <Grid MinHeight="133">
                   <Image Source="Images/HeaderAndFooter/header.png" Stretch="None"/>
                   <TextBlock Text="your day with" HorizontalAlignment="Right" FontFamily="Segoe WP Semibold" FontSize="22" Margin="0, 23, 28, 0"/>
               </Grid>
           </DataTemplate>
           <DataTemplate x:Key="FooterTemplate">
               <Grid MinHeight="96">
                   <Image Source="Images/HeaderAndFooter/footer.png" Stretch="None"/>
                   <!--<TextBlock Text="do it again" FontFamily="Segoe WP Semibold" FontSize="22" Margin="28, 23, 0, 0"/>-->
               </Grid>
           </DataTemplate>
           <listBox:HeaderAndFooterItemTemplateSelector
               x:Key="ItemTemplateSelector"
               ItemTemplateLeft="{StaticResource ItemTemplateLeft}"
               ItemTemplateRight="{StaticResource ItemTemplateRight}"/>
       </Grid.Resources>

I hope this helps.

Regards,
Deyan
Telerik

[Doug]

Hi Deyan

I did it as you said and it worked out perfectly. Thank you for your help.

Best Regards Doug

[Doug]

Hi Deyan

I posted a question related to this here:

http://www.telerik.com/community/forums/windows-phone-8/databound-listbox/datatemplate-change-doesn-t-work.aspx

Regards Doug.

[Deyan]

Hi Doug,

We handled your ticket.

We will consider this thread closed for now.

Let us know if you have further questions.

Regards,
Deyan
Telerik