拖放后的UWP ListView更新行背景

Question

I am currently doing this to make my ListView have an alternating row background.

    private void SongsListView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
    {
        if (AlternatingRowColor)
            args.ItemContainer.Background = args.ItemIndex % 2 == 0 ? Helper.WhiteSmokeBrush : Helper.WhiteBrush;
    }

Additionally, I also allow my ListView to be able to drag and drop items. However, the row color doesn't update its color after dropping even though I do this:

    private void SongsListView_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args)
    {
        sender.UpdateLayout(); // Refresh Row Color
    }

meaning that my ListView does not have an alternating background after drag and drop.

How should I update its background?

Answer 1

ContainerContentChanging is the initialization rendering, and UpdateLayout is used to ensure that the element has been rendered instead of re-rendering the entire list.

For your situation, I recommend using IValueConverter for background color conversion. You can add an Index property to the data type to identify where it is now.

This is a simple example:

TestModel.cs

public class TestIndex:INotifyPropertyChanged
{
    private int _index;
    public int Index
    {
        get => _index;
        set
        {
            _index = value;
            OnPropertyChanged();
        }
    }

    // other properties

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName]string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

converter.cs

public class BackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if(value is int index)
        {
            // You can change color here.
            if (index % 2 == 0)
                return new SolidColorBrush(Colors.Red);
            else
                return new SolidColorBrush(Colors.Blue);
        }
        return new SolidColorBrush(Colors.Red);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

xaml

<Page ...>
    <Page.Resources>
        <local:BackgroundConverter x:Key="BackgroundConverter"/>
        <DataTemplate x:Key="DefaultRow" x:DataType="local:TestIndex">
            <Grid Background="{x:Bind Index,Converter={StaticResource BackgroundConverter}, Mode=OneWay}" Height="50">
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <ListView ItemsSource="{x:Bind TestCollection}"
                  IsItemClickEnabled="True"
                  AllowDrop="True"
                  CanReorderItems="True"
                  IsSwipeEnabled="True"
                  ItemTemplate="{StaticResource DefaultRow}"
                  >
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Grid>
</Page>

xaml.cs

private ObservableCollection<TestIndex> TestCollection = new ObservableCollection<TestIndex>();
public ListViewPage()
{
    this.InitializeComponent();
    for (int i = 0; i < 10; i++)
    {
        TestCollection.Add(new TestIndex()
        {
            Index = i
        });
    }
    TestCollection.CollectionChanged += CollectionChanged;
}

private void CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    for (int i = 0; i < TestCollection.Count; i++)
    {
        TestCollection[i].Index = i;
    }
}

This is because the DragItemsCompleted event is not triggered when you drag and drop items inside the ListView. Because it is essentially the deletion and addition of collection elements, you need to register the CollectionChanged event for the collection.

Best regards.

Answer 2

An easier solution is this:

    private void SongsListView_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args)
    {
        for(int i = 0; i < sender.Items.Count; i++)
        {
            var container = sender.ContainerFromIndex(i) as ListViewItem;
            container.Background = i % 2 == 0 ? Helper.WhiteSmokeBrush : Helper.WhiteBrush;
        }
    }