9

ItemsControl を使用して、重要なアイテムのリストを表示したいと考えています。

私が ItemsControl を使用している理由は、私が取り組んでいるアプリケーションでは DataTemplate がはるかに複雑だからです。提供されているサンプル コードは、私が抱えているサイジングの問題のみを反映しています。

をお願いします ：

  • 表示する項目が多いため、仮想化する ItemsControl

  • 親コンテナー (グリッド) に自動的に拡張するサイズ

    <Grid>
    <ItemsControl x:Name="My" ItemsSource="{Binding Path=Names}">
        <ItemsControl.Template>
            <ControlTemplate>
                <StackPanel>
                    <StackPanel>
                        <TextBlock Text="this is a title" FontSize="15" />
                        <TextBlock Text="This is a description" />
                    </StackPanel>
                    <ScrollViewer CanContentScroll="True" Height="400px">
                        <VirtualizingStackPanel IsItemsHost="True" />
                    </ScrollViewer>
                </StackPanel>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

背後にあるコードは次のとおりです。

public partial class Page1: Page
{
    public List<string> Names { get; set; }
    public Page1()
    {
        InitializeComponent();

        Names = new List<string>();
        for(int i = 0; i < 10000; i++)
            Names.Add("Name : " + i);

        My.DataContext = this;
    }
}

ScrollViewer の高さを 400px に強制すると、ItemsControl の仮想化は期待どおりに機能します。ItemsControl は、リストに含まれるアイテムの数に関係なく、非常に迅速にリストを表示します。

ただし、Height="400px" を削除すると、親コンテナーの高さに関係なく、リストの高さが拡張されてリスト全体が表示されます。さらに悪いことに、コンテナの背後に表示されます。

スクロールビューアを ItemsControl の周りに配置すると、期待どおりの視覚的な結果が得られますが、仮想化がなくなり、リストの表示に時間がかかりすぎます。

ItemsControl の自動高さ拡張と仮想化の両方を実現するにはどうすればよいですか?

4

1 に答える 1

8

問題は ItemsControl.Template にあります。そこで StackPanel を使用すると、子供たちに必要な高さを与えることができます。次のようなものに置き換えます

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel>
        <TextBlock Text="this is a title" FontSize="15" />
        <TextBlock Text="This is a description" />
    </StackPanel>
    <ScrollViewer CanContentScroll="True" Grid.Row="1">
        <VirtualizingStackPanel />
    </ScrollViewer>
</Grid>

そして、それはうまくいくはずです。

それが役に立てば幸い。

于 2009-10-16T14:34:35.260 に答える