Images within RadDataBoundListBox not sizing correctly

4 posts, 0 answers
  1. Matt
    Matt avatar
    3 posts
    Member since:
    Mar 2014

    Posted 17 Jul 2014 Link to this post

    Hi

    I am binding a RadDataboundListBox with an ObservableCollection of strings. Each string is an absolute URL to an image. In the dataTemplate for the list is a Grid and an Image control, the image correctly picks up the URL and displays the image.

    My problem is that initially all of the images are small (possibly their size) and I'm trying to get them to fill the screen in both portrait and landscape modes. 

    The interesting part is that if I scroll down so the images are off the screen and then scroll back up, each image now fills the screen correctly.

    How can I get the images to fill the screen, the first time the list loads?

    Here is the code I'm using

    <Controls:RadDataBoundListBox Name="boundThumbGrid"  Margin="0,0,0,119"
                                  ItemsSource="{Binding Items}" DataVirtualizationMode="OnDemandAutomatic"
                                  IsCheckModeActive="True" IsCheckModeEnabled="True"
                                  AsyncBalanceMode="FillViewportFirst">
        <telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
            <telerikPrimitives:WrapVirtualizationStrategyDefinition Orientation="Horizontal" />
        </telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
        <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Name="boundImage" Source="{Binding}" />
                </Grid>
            </DataTemplate>
        </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
    </Controls:RadDataBoundListBox>

    And this is the code behind

    ObservableCollection<string> paths = new ObservableCollection<string>();
    foreach (XElement rssItem in elements)
    {
        string fullImage = rssItem.Element("enclosure").Attribute("url").Value;
        string thumbPath = GetThumbPath(rssItem);
        paths.Add(thumbPath);
    }
    this.Dispatcher.BeginInvoke(new Action(() =>
    {
        boundThumbGrid.ItemsSource = paths;
    }));

    It's in a dispatcher as this method is in an AsyncCallBack method from httpwebrequest.BeginGetResponse().

    I feel I'm just not setting something up correctly?

    Cheers
    Matt
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 22 Jul 2014 Link to this post

    Hello Matt,

    Thank you for contacting us.

    If you use WrapVirtualizationStrategyDefinition, you will have to set explicitly the width/length of the items depending on the Orientation property of the strategy. If you wish the items to take the whole width/height of the provided space, you can use StackVirtualizationStrategyDefinition instead. I have attached a sample project.

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Matt
    Matt avatar
    3 posts
    Member since:
    Mar 2014

    Posted 22 Jul 2014 in reply to Rosy Topchiyska Link to this post

    Thanks Rosy

    The issue I have with Stack instead of Wrap is the checkbox for the image then appears to the left of the image instead of overlaid. I'm guessing I need to wrap and find a reliable way to get the screen width height (minus other display elements)
  5. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 25 Jul 2014 Link to this post

    Hello Matt,

    Depending on the Orientation property of WrapVirtualizationStrategyDefinition you will have to explicitly set the width or height of the items. I have attached a project that demonstrates how this can be achieved with a converter.

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top