WPF – Virtualization – VirutalizationStackPanel and ItemsPanelTemplate

20089 ワード

Topic: WPF – Virtualization – VirutalizationStackPanel and ItemsPanelTemplate
タイトル:WPF– コントロールの仮想化- VirutalizationStackPanelとItemsPanelTemplateについて簡単に説明します
ItemsPanelでの仮想化では、VirutalizationStackPanelと「ItemsPanelTemplate」を使用できます.以下は仮想化の例です.
Virtualization on the ItemsPanel, you can use the VirutalizationStackPanel, together with the “ItemsPanelTemplate”, here is a live use example of that .

                <cn:CustomListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel
                            cmbh:PixelBasedScrollingBehavior.IsEnabled="True"
                            VirtualizationMode="Recycling"/>
                    </ItemsPanelTemplate>
                </cn:CustomListView.ItemsPanel>

VirtualizingStackPanelとItemsPanelTemplateの2点に注目します
So we will focus on two parts, one is the VirtualizingStackPanel and the other is ItemsPanelTemplate

VirtualizingStackPanel
一般的に、標準的なレイアウトシステムは、各要素に要素コンテナとレイアウト要素を作成します.仮想化という言葉は、大量のデータから、ユーザーインタフェースの一部の要素しか表示されないテクニックを意味します.わずかな要素しか表示されていないが、多くのUI要素を生成する方法は、performance.VirtualizingStackPanelの計算に影響し、ItemsControl(ListBoxやListViewなど)のItemContainerGeneratorを制御してビジュアル部分要素を生成する.
So generally, the standard layout system create item containers and layout for each item associate with a list control, the word “virtualize” refers to a technique by which a subset of user interface (UI) elements are generated from a larger number of data items based on which items are visible on-screen. Generating many UI elements when only a few elements might be on the screen can adversely affect the performance of your application. The VirtualizingStackPanel calculates the number of visible items and works with the ItemContainerGenerator from an ItemsControl (such as ListBox or ListView) to create UI elements only for Visible items.

仮想化はpanel内のitems controlが独自のitem container.を生成するだけで、データバインドの方法で確保できます.item containerが表示された創立であれば、virtualizingStackPanelはvirtualizingStackPanelを使わないよりも効率的ではないという利点があります.
Virtualization in a StackPanel only occurs when the items control contained in the panel creates its own item container. You can ensure this happen by using DataBinding . In Scenarios where item container are created and added to the items control. A virtualizingStackPanel offers no performance advantage over a StackPanel.

VirtualizingStackPanelはListBox要素のデフォルト要素コンテナであり、デフォルトではIsVirtualizing属性値はtrueである.
VirtualizingStackPanel is the default items host for ListBox element, by default, the IsVirtualizing property is set to true.

IsVirtualizing属性値がfalseの場合、VirtualizingStackPanelを使用しない場合と同じ効果が得られます.
When isVirtualizing is set to false, a VirtualizingStackPanel behaves the same as an ordinary StackPanel.

次の例では、VirtualizingというIsattachedプロパティを使用して、ListBoxの仮想化を制御できます.
So an example of such, with the attached property, IsVirtualizing, you can Virtualizing on ListBox as such ..

<Page x:Class="DemoVirtualizingStackPanel.ListboxVirutalizationPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="ListboxVirutalizationPage"
      VerticalAlignment="Top"
      >
    <Page.Resources>
        <XmlDataProvider x:Key="Leagues" Source="Leagues.xml" XPath="Leagues/League" />
       
        <DataTemplate
            x:Key="NameDataStyle"
            >
            <TextBlock
                Text="{Binding XPath=@name}"
                FontFamily="Arial"      
                FontSize="8"
                Foreground="Black"
                       >
            </TextBlock>
        </DataTemplate>
    </Page.Resources>
   
   
    <Border
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        BorderBrush="Black"
        BorderThickness="2">
        <StackPanel
            DataContext="{StaticResource Leagues}"
            >
            <TextBlock
                Text="{Binding XPath=@name}"
                FontFamily="Arial"
                FontSize="18"
                Foreground="Black"
                ></TextBlock>
        <ListBox
            VirtualizingStackPanel.IsVirtualizing="True"
            ItemsSource="{Binding XPath=Team}"
            ItemTemplate="{DynamicResource NameDataStyle}"
            ></ListBox>
        </StackPanel>
    </Border>
</Page>

VirtualizationMode、値Recycling、Standardをさらに制御できます.
You can further control the VirtualizationMode, possible value are Recycling and Standard.

<Page x:Class="DemoVirtualizingStackPanel.RecyclingVirtualizationPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:src="clr-namespace:DemoVirtualizingStackPanel.ViewModels"
      Title="RecyclingVirtualizationPage">
 
   <StackPanel>
       <StackPanel.Resources>
           <src:LotsOfItems x:Key="data" />
       </StackPanel.Resources>
       <ListBox
           Height="150"
           ItemsSource="{StaticResource data}"
           VirtualizingStackPanel.VirtualizationMode="Recycling"
           ></ListBox>
   </StackPanel>
</Page>

興味がある場合は、ViewModelの定義は次のとおりです.
For your interest, the ViewModel is like this:

        public class LotsOfItems : ObservableCollection<string>
        {
             public LotsOfItems()
             {
                 for (int i = 0; i < 1000; i++)
                     this.Add("Item " + i.ToString());
             }
        }

Xml providerのデータxmlは以下の通りです.
And the Xml that provides the data is like this:

// Leagues.xml
<?xml version="1.0" encoding="utf-8" ?>
<Leagues>
  <League name="England League">
    <Team name="Liz"  />
    <Team name="Liverpool"  />
    <Team name="Manchester Union" />
    <Team name="Charls" />
    <Team name="Arsenal" />
    <Team name="Mancester City" />
    <Team name="New Castle" />
    <Team name="Cambridge U" />
    <Team name="Oxford U" />
    <Team name="East London" />
  </League>
</Leagues>

ItemsPanelTemplate
私たちが見た最初の例では、2番目に紹介する要素は「ItemsPanelTemplate」です.

And in the first example that we introduced, the second items that we may use is the “ItemsPanelTemplate”.
ItemsPanelTemplateはレイアウト要素であるpanelを定義し、GroupStyleにはpanel属性があり、彼のタイプはItemsPanelTemplateであり、ItemsControlタイプにはItemsPanel属性があり、値はItemsPanelTemplateである.各ItemsControlにはデフォルトのItemsPanelタイプがあり、ItemsControlのItemsPanelはStackPanelであり、ListBoxItemsPanelはVirtualizingStackPanelである.MenuItemの値はWrapPanel、StatusはDockPanelです.

The ItemsPanelTemplate specifies the panel that is used for the layout of items. GroupStyle has a Panel property that is of type ItemsPanelTemplate. ItemsControl types have an ItemsPanel property that is of type ItemsPanelTemplate.
Each ItemsControl type has a default ItemsPanelTemplate. For the ItemsControl class, the default ItemsPanel value is an ItemsPanelTemplate that specifies a StackPanel . For the ListBox , the default uses the VirtualizingStackPanel . For MenuItem , the default uses WrapPanel . For StatusBar , the default uses DockPanel .

次の例では、vertical ListBoxを作成する方法をいくつか紹介します.
In the following examples. We will introduce ways to create Vertical ListBox.

例1–ItemsPanelプロパティ

Example 1 – With the ItemsPanel property

        <Style TargetType="ListBox"
               >
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel
                            Orientation="Horizontal"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"></StackPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

組み立てて、「DataTemplate」and the「XmlDataProvider」を定義しました.全体のコードは以下の通りです.
To wire it up, we defined the “DataTemplate” and the “XmlDataProvider”. The overall code is as follow.

<Page x:Class="DemoItemsPanelTemplate.HorizontalListBoxPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="HorizontalListBoxPage">
    <Page.Resources>
        <XmlDataProvider x:Key="Leagues" Source="Leagues.xml" XPath="Leagues/League" />
        <DataTemplate
            x:Key="NameDataStyle"
            >
            <TextBlock
                Text="{Binding XPath=@name}"
                FontFamily="Arial"      
                FontSize="8"
                Foreground="Black"
                       >
            </TextBlock>
        </DataTemplate>
       
        <Style TargetType="ListBox"
               >
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel
                            Orientation="Horizontal"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"></StackPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <!-- style is the default Style specified in the Page.Resources -->
        <ListBox
            DataContext="{StaticResource Leagues}"
            ItemsSource="{Binding XPath=Team}"
            ItemTemplate="{DynamicResource NameDataStyle}"
            ></ListBox>
    </Grid>
</Page>

後述する例では、ListBox、XmlDataProvider、およびDataTemplate定義を多重化する.

We will reuse the ListBox, XmlDataProvider and DataTemplate definition in following examples.

例2
Example 2
ItemsPanelTemplateを使用する以外に、次の例ではControl Templateでhorizontal stackpanelを定義します.IsetmsHostプロパティを使用して、生成された要素がこのStackPanelに含まれることを示しています.
Instead of using the ItemsPanelTemplate, in this example, we specify a horizontal stackpanel within the ControlTemplate, note that we uses IsItemsHost property of the StackPanel, indicating that the generated items should go in the panel..

この方法の不足は,ControlTemplateを置き換えなければItemsPanelTemplateを置き換えることができないことである.Styleの定義は次の通りです.
The drawback is user cannot replace the ItemsPanelTemplate without using a ControlTemplate. So using this technique with care.
Style definition is as follow.

    <Style TargetType="ListBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border
                            CornerRadius="5"
                            Background="{TemplateBinding ListBox.Background}">
                        <ScrollViewer
                                HorizontalScrollBarVisibility="Auto">
                            <StackPanel
                                    Orientation="Horizontal"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    IsItemsHost="True"
                                    >
                            </StackPanel>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

例3
Example 3:
ItemsPanelとControl Templateを同時に置き換えることができます.コードは次のとおりです.
We can alternatively replace both the ItemsPanel and the Control Template, code as follow.

    <Style
        TargetType="{x:Type ListBox}">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel
                        Orientation="Horizontal"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"></StackPanel>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type ListBox}"
                    >
                    <Border
                        CornerRadius="5"
                        Background="{TemplateBinding ListBox.Background}">
                        <ScrollViewer
                            HorizontalScrollBarVisibility="Auto">
                            <ItemsPresenter /> <!-- The ItemsPresenter creates the Panels for the layout ofr hte Items based on what is specified by the ItemsPanelTemplate -->
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

主関数は次のとおりです.
In general, the Main code is as such

        [STAThread]
        [DebuggerNonUserCode]
        public static void Main(string[] args)
        {
            App app = new App();
            //app.InitializeComponent();
            app.Run(new MainWindow());
        }

メインウィンドウのコード種は、以下のようなPageコード(ListBoxはPageに書く).
And in the MainWindow, do things like this for the pages that contains the ListBox with Customizing Styles.

    <page:HorizontalListBoxPage
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        Height="300"
        Width="450"
        xmlns:page="clr-namespace:DemoItemsPanelTemplate"
        ></page:HorizontalListBoxPage>

    <page:HorizontalLisBoxWithControlTemplatePage
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Height="300"
        Width="450"
        xmlns:page="clr-namespace:DemoItemsPanelTemplate"></page:HorizontalLisBoxWithControlTemplatePage>

   <page:ControlAndItemsPanelTemplatePage
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Height="300"
        Width="450"
        xmlns:page="clr-namespace:DemoItemsPanelTemplate"
        ></page:ControlAndItemsPanelTemplatePage>

参照:
References:
VirtualizationStackPanel Class
ItemsPanelTemplate
VirtualizationMode Enumeration

Jackson-Javaシーケンス化と逆シーケンス化フレームワーク

X-Cart学習ノート(三)X-Cartフレームワーク2