在 ListView UWP 中显示行号答案

【问题标题】：Display row numbers in ListView UWP在 ListView UWP 中显示行号
【发布时间】：2021-02-16 07:48:37
【问题描述】：

我正在寻找一种解决方案来显示 ListView 中每个元素的行号。更重要的是，从列表中删除某些元素或将元素移动到另一个位置后，需要更新行号。我正在使用 UWP (C++)。

【问题讨论】：

【解决方案1】：

如果您想在ListView 中显示行号，我们建议您使用数据绑定。数据绑定的详细代码可以参考文档：XAML controls; bind to a C++/WinRT property和XAML items controls; bind to a C++/WinRT collection。

以上述文档中实现的项目Bookstore为例，我们需要使用DataTemplate来改变ListView中每一项的内容，并在IObservableVector时更新每一项的索引实例（这是ListView的数据绑定源）通过添加IObservableVector<T>.VectorChanged事件发生变化。

例如：

在ListView 中添加一个表示每个项目索引的属性。

BookSku.idl

    runtimeclass BookSku : Windows.UI.Xaml.Data.INotifyPropertyChanged
    {
        ……
        Int16 Index;
    }

BookSku.h

struct BookSku : BookSkuT<BookSku>
{
    ……
    int16_t Index();
    void Index(int16_t value);

private:
    ……
    int16_t m_index = 0;
};

BookSku.cpp

int16_t BookSku::Index()
{
    return m_index;
}
void BookSku::Index(int16_t value)
{
    if (m_index != value)
    {
        m_index = value;
        m_propertyChanged(*this, Windows::UI::Xaml::Data::PropertyChangedEventArgs{ L"Index" });
    }
}

在启动m_bookSkus的时候启动Index属性，并为m_bookSkus添加VectorChanged事件，以在m_bookSkus的项目发生变化时更新索引。

BookstoreViewModel.cpp

    BookstoreViewModel::BookstoreViewModel()
    {
        m_bookSkus = winrt::single_threaded_observable_vector<Bookstore::BookSku>();
        m_bookSkus.VectorChanged([](IObservableVector<Bookstore::BookSku> const& sender, IVectorChangedEventArgs const& args) {

        for (int16_t i = 0; i < sender.Size(); i++)
        {
             auto item = sender.GetAt(i);
             item.Index(i+1);
        }

        });

    int16_t index=0;
    
    m_bookSku = winrt::make<Bookstore::implementation::BookSku>(L"Title1");
    index = m_bookSkus.Size() + 1;
    m_bookSku.Index(index);

    m_bookSkus.Append(m_bookSku);

    m_bookSku = winrt::make<Bookstore::implementation::BookSku>(L"Title2");
    index = m_bookSkus.Size() + 1;
    m_bookSku.Index(index);

    m_bookSkus.Append(m_bookSku);

    m_bookSku = winrt::make<Bookstore::implementation::BookSku>(L"Title3");
    index = m_bookSkus.Size() + 1;
    m_bookSku.Index(index);

    m_bookSkus.Append(m_bookSku);
}

在 XAML 中使用DataTemplate 显示ListView 的每一项中的索引。

MainPage.xaml

    <ListView ItemsSource="{x:Bind MainViewModel.BookSkus}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:BookSku">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind Index,Mode=OneWay}" Margin="0,0,10,0"/>
                    <TextBlock Text="{x:Bind Title, Mode=OneWay}"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

您可以参考document 了解有关 DataTemplate 的更多信息，并参考document 了解有关在 C++/WinRT 中使用委托处理事件的更多信息。

【讨论】：