Images within RadDataBoundListBox not sizing correctly

[Matt]

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

[Rosy Topchiyska]

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

 

 

[Matt]

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)

[Rosy Topchiyska]

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