列表视图项 UWP 的替代颜色

Question

我有一个类来改变项目的背景颜色，但是如果我删除一个项目，背景颜色不会更新。 有没有办法在删除项目后刷新背景颜色？

替代颜色的代码。 类列表视图：

public class AlternatingRowListView : ListView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if (index % 2 == 0)
            {
                listViewItem.Background = new SolidColorBrush(Colors.LightBlue);
            }
            else
            {
                listViewItem.Background = new SolidColorBrush(Colors.Transparent);
            }
        }

    }
}

代码 xaml：

<local:AlternatingRowListView x:Name="listview">
        <ListViewItem>item 1</ListViewItem>
        <ListViewItem>item 2</ListViewItem>
        <ListViewItem>item 3</ListViewItem>
        <ListViewItem>item 4</ListViewItem>
        <local:AlternatingRowListView.ItemTemplate>
            <DataTemplate>

            </DataTemplate>
        </local:AlternatingRowListView.ItemTemplate>
</local:AlternatingRowListView>

提前致谢。

Answer 1

您只需要扩展您已经扩展的AlternatingRowListView 控件即可实现您所需要的。

您可以通过订阅Items 的VectorChanged 事件来监控何时从列表中删除项目，然后您只需遍历所有已经实现的项目下面（视觉上）移除的项目并相应地更改其背景颜色。

这样的事情会做 -

public AlternatingRowListView()
{
    DefaultStyleKey = typeof(ListView);

    Items.VectorChanged += OnItemsVectorChanged;
}

private void OnItemsVectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs args)
{
    // When an item is removed from the list...
    if (args.CollectionChange == CollectionChange.ItemRemoved)
    {
        var removedItemIndex = (int)args.Index;

        // We don't really care about the items that are above the deleted one, so the starting index
        // is the removed item's index.
        for (var i = removedItemIndex; i < Items.Count; i++)
        {
            if (ContainerFromIndex(i) is ListViewItem listViewItem)
            {
                listViewItem.Background = i % 2 == 0 ? 
                    new SolidColorBrush(Colors.LightBlue) : new SolidColorBrush(Colors.Transparent);
            }
            // If it's null, it means virtualization is on and starting from this index the container
            // is not yet realized, so we can safely break the loop.
            else
            {
                break;
            }
        }
    }
}

Answer 2

如果您正在搜索交替的奇数/偶数行颜色：

在 app.xml 中

<Application
  ...
  <Application.Resources>
    <AlternateColorConverterx:Key="AlternateColorConverter" />
   ...
  </Application.Resources>

生成一个新类，即 AlternateColorConverter.cs
（修改你的十六进制颜色。）

  class AlternateColorConverter : IValueConverter
{
    private static int idx_=-1;
    private static int odd_=0;
    private static int idx(int offset)
    {
        int idx_before = idx_;
        idx_ = (idx_ + 1) % (offset);

        if (idx_ < idx_before) odd_=(odd_+1)%2;
        return odd_;
    }

    public static Color GetColorFromHex(string hexString)
    {
        Color x = (Color)XamlBindingHelper.ConvertValue(typeof(Color), hexString);
        return x;
    }

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        int param = System.Convert.ToInt32(parameter);
        return new SolidColorBrush(ColorUtils.GetColorFromHex((idx(param) == 0) ? "#F24C27" : "#FBBA42"));
    }

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

在 yourpage.xml.cs 中：
（其中 ConverterParameter(offset) 取决于列数。通常为 2）

<ListView HorizontalAlignment="Stretch" Style="{StaticResource ListViewStyle}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="MaxHeight" Value="20"/>
                <Setter Property="MinHeight" Value="20"/>
                <Setter Property="Padding" Value="0"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="Models:YourObservableArray">
                <Grid HorizontalAlignment="Stretch" Margin="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="180*"/>
                        <ColumnDefinition Width="100*"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="{Binding Converter={StaticResource AlternateColorConverter},ConverterParameter=2}" HorizontalAlignment="Stretch" Grid.Column="0"  Margin="0">
                        <TextBlock Text="{x:Bind Field1}" HorizontalAlignment="Stretch"/>
                    </Border>
                    <Border Background="{Binding Converter={StaticResource AlternateColorConverter},ConverterParameter=2}" HorizontalAlignment="Stretch" Grid.Column="0"  Margin="0">
                        <TextBlock Text="{x:Bind Field2}" HorizontalAlignment="Stretch"/>
                    </Border>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>