locked
How to use virtualization of ItemsControl? RRS feed

  • Question

  • I have ItemsControl in ScrollViewer follow this:

            <ScrollViewer HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled">
                <ItemsControl ItemsSource="{Binding Current.ListItems}"  Height="200">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}" Width="200"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </ScrollViewer>

    but the VirtualizingStackPanel not virtualization.

    How I fix it?

    Thank you.

    Thursday, August 22, 2013 6:05 AM

Answers

  • Hi,Korawit

    As I know,UI virtualization by default doesn't kick in for ItemsControl.If you want to make the

    ItemsControl enable virtualization,You should follow up two steps below:

    1、You should replace ItemsControl's default ItemsPanelTemplate, and place

    VirtualizingStackPanel into it.

    2、You also need to introduce ScrollViewer into ItemsControl's control template, and set he

    ItemsPresenter as the child of ScrollViewer, UI Virtualization needs ScrollViewer to do its

    magic.

    There are some codes below you can refer to:

    In XAML:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="grid" >
            <ItemsControl ItemsSource="{Binding }"   Width="300">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}" Height="200"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Template>
                    <ControlTemplate TargetType="ItemsControl">
                        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
          </Grid>

    Code Behind:

    public sealed partial class BlankPage3 : Page
        {
            public BlankPage3()
            {
                this.InitializeComponent();
                List<ListItem> ListItems = new List<ListItem>();
                ListItems.Add(new ListItem("Assets/psu45.jpg"));
                ListItems.Add(new ListItem("Assets/psu45.jpg"));
                ListItems.Add(new ListItem("Assets/psu45.jpg"));
                grid.DataContext = ListItems;
            }
    
        }
        public class ListItem
        {
            public ListItem(string image)
            {
                this.Image = image;
            }
            public string Image
            {
                get;
                set;
            }
        }

    I hope this can help you!

    Best Wishes!


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    • Edited by Anne Jing Tuesday, August 27, 2013 3:09 PM from
    • Marked as answer by Anne Jing Friday, August 30, 2013 1:41 PM
    Tuesday, August 27, 2013 3:08 PM

All replies

  • Hi,Korawit

    You must restrict the ScrollViewer container's viewport size, so that you can perform the control virtualization.

    You can define ScrollViewer viewport size in XAML like this:

     <ScrollViewer x:Name="scrollViewer" Width="480" Height="270" >

    Best Wishes!

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    • Edited by Anne Jing Friday, August 23, 2013 6:01 AM from
    Friday, August 23, 2013 2:12 AM
  • I do follow that, but it's still not perform the control virtualization. T_T

    Please send me full example.

    Thanks

    Monday, August 26, 2013 8:03 AM
  • Hi,Korawit

    As I know,UI virtualization by default doesn't kick in for ItemsControl.If you want to make the

    ItemsControl enable virtualization,You should follow up two steps below:

    1、You should replace ItemsControl's default ItemsPanelTemplate, and place

    VirtualizingStackPanel into it.

    2、You also need to introduce ScrollViewer into ItemsControl's control template, and set he

    ItemsPresenter as the child of ScrollViewer, UI Virtualization needs ScrollViewer to do its

    magic.

    There are some codes below you can refer to:

    In XAML:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="grid" >
            <ItemsControl ItemsSource="{Binding }"   Width="300">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}" Height="200"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Template>
                    <ControlTemplate TargetType="ItemsControl">
                        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
          </Grid>

    Code Behind:

    public sealed partial class BlankPage3 : Page
        {
            public BlankPage3()
            {
                this.InitializeComponent();
                List<ListItem> ListItems = new List<ListItem>();
                ListItems.Add(new ListItem("Assets/psu45.jpg"));
                ListItems.Add(new ListItem("Assets/psu45.jpg"));
                ListItems.Add(new ListItem("Assets/psu45.jpg"));
                grid.DataContext = ListItems;
            }
    
        }
        public class ListItem
        {
            public ListItem(string image)
            {
                this.Image = image;
            }
            public string Image
            {
                get;
                set;
            }
        }

    I hope this can help you!

    Best Wishes!


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    • Edited by Anne Jing Tuesday, August 27, 2013 3:09 PM from
    • Marked as answer by Anne Jing Friday, August 30, 2013 1:41 PM
    Tuesday, August 27, 2013 3:08 PM