Formatting issues using VirtualizingWrapPanel

[mark]

Hello. I'm see differences in formatting using a VirtualizingWrapPanel vs using a standard WrapPanel.

Here is the xaml:

<Window x:Class="GalleryView3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
        Title="MainWindow" Height="350" Width="525" MinWidth="350">
    <Grid>
        <Border BorderThickness="3" MinWidth="100" MinHeight="100">
        <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Name="TabGalleryListView" ItemsSource="{Binding Source}" SelectionChanged="SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                        <telerik:VirtualizingWrapPanel IsItemsHost="True" Orientation="Horizontal" />
                        <!--<WrapPanel IsItemsHost="True" Orientation="Horizontal" />-->
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="10,10,10,10" Orientation="Vertical">
                        <Border BorderThickness="3" BorderBrush="Black">
                            <Image Width="128" Height="128" Source="{Binding ImageSource}" Stretch="Uniform" />
                        </Border>
                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
                            <CheckBox Margin="0,0,5,0" VerticalAlignment="Center"/>
                            <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding DisplayText}" Foreground="Red"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        </Border>
    </Grid>
</Window>

You'll see where I've been commenting in/out the standard WrapPanel & the VirtualizingWrapPanel.

When I run with the WrapPanel enabled, and VWP commented out, I get the desired effect, a nice bunch of the same graphic with checkbox & text following. (first attached illustration)

When I run with the VWP enabled, and WrapPanel commented out, the image is not properly resized and the checkbox & text are clipped. (second attached illustration).

I'm thinking that they should both work the same! Hopefully you can tell me where I am going wrong.
My Telerik.Windows.Controls.dll version is 2012.2.607.40

Thanks!
Mark

[mark]

Seems my xaml got clipped, I'll try again...

<Window x:Class="GalleryView3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525" MinWidth="350">
    <Grid>
        <Border BorderThickness="3" MinWidth="100" MinHeight="100">
        <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Name="TabGalleryListView" ItemsSource="{Binding Source}" SelectionChanged="SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                        <telerik:VirtualizingWrapPanel IsItemsHost="True" Orientation="Horizontal" />
                        <!--<WrapPanel IsItemsHost="True" Orientation="Horizontal" />-->
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="10,10,10,10" Orientation="Vertical">
                        <Border BorderThickness="3" BorderBrush="Black">
                            <Image Width="128" Height="128" Source="{Binding ImageSource}" Stretch="Uniform" />
                        </Border>
                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
                            <CheckBox Margin="0,0,5,0" VerticalAlignment="Center"/>
                            <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding DisplayText}" Foreground="Red"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        </Border>
    </Grid>
</Window>

[Vlad]

Hello,

 You can modify the panel ItemWidth/ItemHeight to adjust the size of the items. 

Greetings,
Vlad
the Telerik team

[mark]

Thanks, I'll give that a try. Although hard coding a size seems ... wrong.