次の方法で共有

x:Phase 属性

{x:Bind} マークアップ拡張機能と共に x:Phase を使用して、ListView および GridView 項目を段階的にレンダリングし、パンエクスペリエンスを向上させます。 x:Phase は、 ContainerContentChanging イベントを使用してリスト アイテムのレンダリングを手動で制御するのと同じ効果を実現する宣言型の方法を提供します。 ListView 項目と GridView 項目を段階的に更新する方法も参照してください。

XAML 属性の使用方法

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

XAML 値

任期 Description
フェーズ値 要素が処理されるフェーズを示す数値。 既定値は 0 です。

注釈

リストがタッチまたはマウス ホイールを使用して高速にパンされた場合、データ テンプレートの複雑さに応じて、スクロールの速度に追いつくために項目を十分に高速にレンダリングできない可能性があります。 これは、タブレットなどの電力効率の高い CPU を備えたポータブル デバイスに特に当てはまります。

段階的なレンダリングにより、データ テンプレートの増分レンダリングが可能になり、コンテンツに優先順位を付けることができ、最も重要な要素が最初にレンダリングされます。 これにより、パンが速い場合はリストに各項目のコンテンツがいくつか表示され、時間が許す限り各テンプレートのより多くの要素がレンダリングされます。

Example

<DataTemplate x:Key="PhasedFileTemplate" x:DataType="model:FileItem">
    <Grid Width="200" Height="80">
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="75" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <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"/>
    </Grid>
</DataTemplate>

データ テンプレートでは、次の 4 つのフェーズについて説明します。

  1. DisplayName テキスト ブロックを表示します。 フェーズが指定されていないすべてのコントロールは、暗黙的にフェーズ 0 の一部と見なされます。
  2. prettyDate テキスト ブロックを表示します。
  3. prettyFileSize テキスト ブロックと prettyImageSize テキスト ブロックを表示します。
  4. 画像を表示します。

Phasing は {x:Bind} の機能で、 ListViewBase から派生したコントロールで動作し、データ バインディング用の項目テンプレートを段階的に処理します。 リスト アイテムをレンダリングする場合、 ListViewBase は、次のフェーズに進む前に、ビュー内のすべての項目に対して 1 つのフェーズをレンダリングします。 レンダリング作業は、リストがスクロールされるときに必要な作業を再評価でき、表示されなくなった項目に対しては実行されないように、タイムスライスされたバッチで実行されます。

x:Phase 属性は、{x:Bind} を使用するデータ テンプレート内の任意の要素で指定できます。 要素に 0 以外のフェーズがある場合、そのフェーズが処理され、バインドが更新されるまで、要素は非表示になります (Visibility ではなく Opacity を使用)。 ListViewBase 派生コントロールがスクロールされると、画面に表示されなくなった項目から項目テンプレートがリサイクルされ、新しく表示される項目がレンダリングされます。 テンプレート内の UI 要素は、データバインドが再び行われるまで、古い値を保持します。 段階的に行うと、データ バインディングステップが遅延するため、期限切れになった場合に UI 要素を非表示にする必要があります。

各 UI 要素には、1 つのフェーズのみを指定できます。 その場合は、要素のすべてのバインドに適用されます。 フェーズが指定されていない場合は、フェーズ 0 が想定されます。

フェーズ番号は連続している必要はありません。 これは ContainerContentChangingEventArgs.Phase の値と同じです。 ContainerContentChanging イベントは、x:Phase バインドが処理される前に、フェーズごとに発生します。

段階的変更は {x:Bind} バインドにのみ影響し、 {Binding} バインドには影響しません。

フェージングは、段階的な処理を認識するコントロールを使用して項目テンプレートがレンダリングされる場合にのみ適用されます。 Windows 10 の場合、これは ListView と GridView を意味 します。 フェーズは、他の項目コントロールで使用されるデータ テンプレートや、 ContentTemplate や Hub セクションなどの他のシナリオでは適用されません。そのような場合、すべての UI 要素は一度にデータバインドされます。

  • Last updated on