在c＃WPF中創建索引

Question

我正在嘗試創建一個像下面的屏幕截圖所示的索引。 這個是通過簡單地將編程方式的texbox添加到scrollviewer內的水平和垂直堆棧面板來完成的。 但這個解決方案非常緩慢。 綁定大約需要5秒鍾。

因此，我測試將包含整個數據的List<>直接綁定到ListBox 。 我嘗試了各種ItemTemplates組合，但即使使用VirtualizingPanel.IsVirtualizing="True" ，也無法加速綁定。 只有一個沒有任何分組嘗試的簡單ListBox才能完成這項工作。

這是我用於所有測試的唯一XML部分：

<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
    <TextBlock Text="{Binding Name}" Style="{DynamicResource HoverUnderlineStyle}" MouseLeftButtonUp="...">
        <TextBlock.ContextMenu>
            <ContextMenu>
                    <!-- ... -->
            </ContextMenu>
        </TextBlock.ContextMenu>
    </TextBlock>
    <TextBlock>
        <TextBlock.Text>
            <MultiBinding StringFormat=" ({0})">
                <Binding Path="Count"/>
            </MultiBinding>
        </TextBlock.Text>
    </TextBlock>
</StackPanel>

如果有人可以幫助我，真的很棒。 提前致謝！

Answer 1

我認為這應該工作：MainWindow.xaml

<Window.DataContext>
    <local:MainViewModel />
</Window.DataContext>
<Grid>
    <ListBox DisplayMemberPath="Value"
             ItemsSource="{Binding CollectionView}"
             ScrollViewer.HorizontalScrollBarVisibility="Visible"
             ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock FontWeight="Bold" Text="{Binding Name}" />
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </ListBox.GroupStyle>
    </ListBox>
</Grid>

視圖模型：

class MainViewModel
{
    private static readonly Random Random = new Random();

    public MainViewModel()
    {
        var list = new List<string>();
        for (int i = 0; i < 2000; i++)
        {
            list.Add(RandomString(8));
        }

        CollectionView =
            CollectionViewSource.GetDefaultView(list.OrderBy(x => x[0]).Select(x => new TestItem {Value = x}));
        CollectionView.GroupDescriptions.Add(new PropertyGroupDescription("Value", new FirstLetterConverter()));
    }

    public ICollectionView CollectionView { get; set; }

    public static string RandomString(int length)
    {
        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        return new string(Enumerable.Repeat(chars, length)
            .Select(s => s[Random.Next(s.Length)]).ToArray());
    }
}

public class TestItem
{
    public string Value { get; set; }
}

public class FirstLetterConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string s = value as string;
        if (!string.IsNullOrEmpty(s))
            return s.Substring(0, 1);
        return string.Empty;
    }

    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

如果這對您來說很慢，您可以搜索支持虛擬化的包裝面板，因為.net框架不支持。

預習：

Answer 2

在沒有看到其余代碼的情況下，我可以指出對您的Xaml進行一些改進：

1. 嘗試使用StaticResource而不是DynamicResource 。
2. 您不需要在第二個文本塊中使用MultiBinding 。 實際上，您可以使用單個TextBlock和多個Run ，並擺脫StackPanel 。

<TextBlock Style="{StaticResource HoverUnderlineStyle}" MouseLeftButtonUp="...">
    ...
    <Run Text="{Binding Name}"/>
    <Run Text="{Binding Count, StringFormat={} ({0})}"/>
</TextBlock>