x:Phase 属性x:Phase attribute

ListViewGridView の項目を段階的にレンダリングし、パン エクスペリエンスを向上させるには、x:Phase{x:Bind} マークアップ拡張と共に使用します。Use x:Phase with the {x:Bind} markup extension to render ListView and GridView items incrementally and improve the panning experience. x:Phase では、宣言的な方法により、ContainerContentChanging イベントを使ってリスト項目のレンダリングを手動で制御するのと同じ結果を得ることができます。x:Phase provides a declarative way of achieving the same effect as using the ContainerContentChanging event to manually control the rendering of list items. GridView と ListView の項目を段階的に更新する」もご覧ください。Also see Update ListView and GridView items incrementally.

XAML 属性の使用方法XAML attribute usage

<object x:Phase="PhaseValue".../>

XAML 値XAML values

用語Term 説明Description
PhaseValuePhaseValue 要素が処理されるフェーズを示す数値。A number that indicates the phase in which the element will be processed. 既定値は 0 です。The default is 0.  


タッチ操作でリストをすばやくパンした場合やマウス ホイールを使用した場合、データ テンプレートの複雑さによっては、リスト項目をすばやくレンダリングできず、スクロール速度に追いつかないことがあります。If a list is panned fast with touch, or using the mouse wheel, then depending on the complexity of the data template, the list may not be able to render items fast enough to keep up with the speed of scrolling. これは、電話やタブレットなど、電力効率に優れた CPU を搭載したポータブル デバイスに特に当てはまります。This is particularly true for a portable device with a power-efficient CPU such as a phone or a tablet.

フェージングにより、データ テンプレートを段階的にレンダリングできるので、コンテンツに優先順位を付け、最も重要な要素を最初にレンダリングできます。Phasing enables incremental rendering of the data template so that the contents can be prioritized, and the most important elements rendered first. これにより、すばやくパンした場合でも各項目のコンテンツの一部をリストに表示でき、時間が許す限り各テンプレートの要素がより多くレンダリングされます。This enables the list to show some content for each item if panning fast, and will render more elements of each template as time permits.


<DataTemplate x:Key="PhasedFileTemplate" x:DataType="model:FileItem">
    <Grid Width="200" Height="80">
           <ColumnDefinition Width="75" />
            <ColumnDefinition Width="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        <Image Grid.RowSpan="4" Source="{x:Bind ImageData}" MaxWidth="70" MaxHeight="70" x:Phase="3"/>
        <TextBlock Text="{x:Bind DisplayName}" Grid.Column="1" FontSize="12"/>
        <TextBlock Text="{x:Bind prettyDate}"  Grid.Column="1"  Grid.Row="1" FontSize="12" x:Phase="1"/>
        <TextBlock Text="{x:Bind prettyFileSize}"  Grid.Column="1"  Grid.Row="2" FontSize="12" x:Phase="2"/>
        <TextBlock Text="{x:Bind prettyImageSize}"  Grid.Column="1"  Grid.Row="3" FontSize="12" x:Phase="2"/>

データ テンプレートには、以下の 4 つのフェーズが記述されます。The data template describes 4 phases:

  1. DisplayName テキスト ブロックを表示する。Presents the DisplayName text block. フェーズが指定されていないコントロールはすべて、フェーズ 0 に含まれるものと暗黙的に見なされます。All controls without a phase specified will be implicitly considered to be part of phase 0.
  2. PrettyDate のテキスト ブロックを表示する。Shows the prettyDate text block.
  3. PrettyFileSize および prettyImageSize テキスト ブロックを表示する。Shows the prettyFileSize and prettyImageSize text blocks.
  4. 画像を表示する。Shows the image.

フェージングは、{x:Bind} の機能の 1 つであり、ListViewBase から派生したコントロールを操作し、データ バインディングの項目テンプレートを段階的に処理します。Phasing is a feature of {x:Bind} that works with controls derived from ListViewBase and that incrementally processes the item template for data binding. リスト項目をレンダリングする場合、ListViewBase は、ビューのすべての項目の 1 つのフェーズをレンダリングし、それから次のフェーズに進みます。When rendering list items, ListViewBase renders a single phase for all items in the view before moving onto the next phase. レンダリング処理は、リストのスクロール時、必要な処理を再割り当てできるようにタイム スライス バッチで実行されます。表示できなくなった項目に対しては、実行されません。The rendering work is performed in time-sliced batches so that as the list is scrolled, the work required can be re-assessed, and not performed for items that are no longer visible.

x:Phase 属性は、{x:Bind} を使用するデータ テンプレートのどの要素に対しても指定できます。The x:Phase attribute can be specified on any element in a data template that uses {x:Bind}. 要素のフェーズが 0 以外の場合、その要素は、フェーズが処理され、バインディングが更新されるまで、ビューから隠されます (Visibility ではなく、Opacity により)。When an element has a phase other than 0, the element will be hidden from view (via Opacity, not Visibility) until that phase is processed and bindings are updated. ListViewBase 派生コントロールがスクロールされると、画面に表示されなくなった項目からの項目テンプレートがリサイクルされ、新しい表示可能な項目がレンダリングされます。When a ListViewBase-derived control is scrolled, it will recycle the item templates from items that are no longer on screen to render the newly visible items. テンプレート内の UI 要素は、再びデータ バインドされるまで古い値を保持します。UI elements within the template will retain their old values until they are data-bound again. フェージングにより、そのデータ バインディング ステップは遅延されます。したがって、フェージングでは、UI 要素が古くなった場合は、その UI 要素を隠す必要があります。Phasing causes that data-binding step to be delayed, and therefore phasing needs to hide the UI elements in case they are stale.

各 UI 要素に指定されているフェーズが 1 つだけの場合があります。Each UI element may have only one phase specified. その場合、そのフェーズは要素のすべてのバインディングに適用されます。If so, that will apply to all bindings on the element. フェーズが指定されていない場合は、フェーズ 0 と見なされます。If a phase is not specified, phase 0 is assumed.

フェーズ番号は、連続している必要はなく、ContainerContentChangingEventArgs.Phase の値と同じです。Phase numbers do not need to be contiguous and are the same as the value of ContainerContentChangingEventArgs.Phase. ContainerContentChanging イベントは、x:Phase バインディングが処理される前に各フェーズで生成されます。The ContainerContentChanging event will be raised for each phase before the x:Phase bindings are processed.

フェージングは、 {x:Bind} バインディングにのみ影響し、 {Binding} バインディングには影響しません。Phasing only affects {x:Bind} bindings, not {Binding} bindings.

フェージングが適用されるのは、フェージングを認識するコントロールを使用して項目テンプレートがレンダリングされるときのみです。Phasing will only apply when the item template is rendered using a control that is aware of phasing. Windows 10、つまり ListView GridViewします。For Windows 10, that means ListView and GridView. フェージングは、他の項目コントロールで使用されるデータ テンプレートには適用されません。また、ContentTemplate または Hub セクション (この場合、すべての UI 要素が同時にデータ バインドされる) などの他のシナリオでも適用されません。Phasing will not apply to data templates used in other item controls, or for other scenarios such as ContentTemplate or Hub sections—in those cases, all the UI elements will be data bound at once.