重要なヒント

以下のヒントを活用することで、ListBox のコントロールを使用する際に、パフォーマンスを最大限に高めることができます。

PreviewTemplate の使用 – レイアウトによる負荷が高まることを避けるには、PreviewTemplate を使用して、ズームアウト中や高速スクロール中などのプレビュー状態のときにサイズの小さなテンプレートをレンダリングします。たとえば、PreviewTemplate でサムネイル画像を表示し、完全な ItemTemplate で大きな画像を表示することができます。

	コードのコピー
<Xaml:C1ListBox x:Name="listBox" ItemsSource="{Binding}" RefreshWhileScrolling="False"> <Xaml:C1ListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> </Grid> </DataTemplate> </Xaml:C1ListBox.PreviewItemTemplate> <Xaml:C1ListBox.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding Content}" Stretch="UniformToFill"/> </Grid> </DataTemplate> </Xaml:C1ListBox.ItemTemplate> </Xaml:C1ListBox>

コードのコピー

<Xaml:C1ListBox x:Name="listBox"
                  ItemsSource="{Binding}"
                  RefreshWhileScrolling="False">
    <Xaml:C1ListBox.PreviewItemTemplate>
        <DataTemplate>
            <Grid Background="Gray">
                <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
            </Grid>
        </DataTemplate>
    </Xaml:C1ListBox.PreviewItemTemplate>
    <Xaml:C1ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding Content}" Stretch="UniformToFill"/>
            </Grid>
        </DataTemplate>
    </Xaml:C1ListBox.ItemTemplate>
</Xaml:C1ListBox>

ViewportGap プロパティと ViewportPreviewGap プロパティの調整 – これらの係数値は、あらかじめレンダリングするビューポート外の項目のサイズを決定します。値が大きくなるほど、画面外の項目が現れてレンダリングされる速度は上がりますが、毎回コントロールがレイアウトパスを受け取るためにかかる時間は長くなります。たとえば、これを 0.5 に設定した場合は、ビューポートが元のビューポートの両側に合わせて画面の半分だけ大きくなるように拡大されます。
RefreshWhileScrolling を False に設定 – スクロール中にビューポートを更新するかどうかを決定します。False に設定した場合は、ユーザーが高速にスクロール操作すると、項目が停止してレンダリングできるようになるまで、項目は空白で表示されるか、「読み込み中」と表示されます。