Formatting issues using VirtualizingWrapPanel

4 posts, 0 answers
  1. mark
    mark avatar
    6 posts
    Member since:
    Mar 2011

    Posted 03 Aug 2012 Link to this post

    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

  2. mark
    mark avatar
    6 posts
    Member since:
    Mar 2011

    Posted 03 Aug 2012 Link to this post

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


    <Window x:Class="GalleryView3.MainWindow"
            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>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 06 Aug 2012 Link to this post

    Hello,

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

    Greetings,
    Vlad
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. mark
    mark avatar
    6 posts
    Member since:
    Mar 2011

    Posted 06 Aug 2012 Link to this post

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