RadDataBoundListBox layout is messed up

12 posts, 1 answers
  1. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 04 Feb 2013 Link to this post

    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>

  2. Answer
    Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 06 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 06 Feb 2013 Link to this post

  5. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 25 Jun 2013 Link to this post

    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>


  6. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 27 Jun 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  7. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 27 Jun 2013 Link to this post

    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>
  8. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 01 Jul 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  9. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 01 Jul 2013 Link to this post

    Hi Deyan

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

    Regards Doug
  10. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 01 Jul 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  11. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 08 Jul 2013 Link to this post

    Hi Deyan

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

    Best Regards Doug
  12. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 11 Jul 2013 Link to this post

  13. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 15 Jul 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner