Metro 应用程序 - 列表视图 - 如何替换 ListView 项目的背景颜色答案

【问题标题】：Metro app - ListView - how to alternate background colour of ListViewItemsMetro 应用程序 - 列表视图 - 如何替换 ListView 项目的背景颜色
【发布时间】：2012-08-17 17:07:08
【问题描述】：

在我用于 Windows 8 的 Metro 风格应用程序中，我将 Listview 绑定到 ObservableCollection，并且我希望每个 ListViewItem 的背景颜色交替显示（白色、灰色、白色等）

   <ListView x:Name="stopsListView" ItemsSource="{Binding}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="66" >
                    <TextBlock Text="{Binding Title}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

在 WPF 中，这是使用带触发器的样式完成的 - 请参阅 this page。

您如何在 Metro 应用程序中完成此操作？

更新：

在下面给出正确答案后，我离开并实际编码。这里有一些代码供需要的人使用：

值转换器类的代码：

public class AltBackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (!(value is int)) return null;
        int index = (int)value;

        if (index % 2 == 0)
            return Colors.White;
        else
            return Colors.LightGray;
    }

    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

XAML 列表视图的代码：

    <ListView x:Name="stopsListView" ItemsSource="{Binding}">

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="250" Height="66" Margin="5">
                    <Grid.Background>
                        <SolidColorBrush Color="{Binding IndexWithinParentCollection, Mode=OneWay, Converter={StaticResource AltBGConverter}}" />
                    </Grid.Background>

...并且，在向集合中添加项目或修改集合时，请记住在集合中设置它们的索引：

myCollection.add(item);
item.IndexWithinParentCollection = myCollection.Count;

当然，如果您的集合经常更改，这种方法的维护成本很高，因为您必须重新索引您的项目，所以我发现在每个项目中存储对父集合的引用更容易，然后计算使用 .IndexOf() 即时索引，以避免每次集合更改时都必须不断更新索引值。

【问题讨论】：

标签： .net xaml windows-runtime windows-store-apps winrt-xaml

【解决方案1】：

您可以使用转换器 - 从项目中获取行索引并将其转换为画笔。此外 - 如果 ItemTemplate 没有给您足够的控制权 - 使用 ItemContainerStyle 在 ListViewItem 模板级别修改画笔。

另一个选项可能是指定一个 ItemTemplateSelector，它会根据项目为您提供具有不同画笔的不同模板。您仍然需要生成行索引，或者以某种方式启用选择器来确定项目是在偶数还是奇数位置。

【讨论】：

我自己也想知道，但是您如何将行索引传递给转换器？是否有一些 XAML 语法可以做到这一点，或者我必须明确告诉每个对象它在集合中的索引是什么？
您需要向对象添加一个属性，是的。然后执行类似 Background="{Binding ItemIndex, Converter={StaticResource ItemIndexToBackgroundConverter}}"
这是正确答案，谢谢。没有 XAML 语法将项目索引传递给转换器，真是太遗憾了。也许我可以设置项目来引用他们自己的父集合并只使用 .indexOf - 这种方法感觉它可能违反了各种规则。
这里没有规则——你应该使用适合你的东西。 :) 如果您不想更改模型，则可以对数据创建某种视图。或者为列表创建一个附加行为，自动执行您想要的操作。

【解决方案2】：

我相信这里的代码示例很有用 https://msdn.microsoft.com/en-us/library/ms750769(v=vs.85).aspx

【讨论】：

【解决方案3】：

从未尝试过这样的样式，但如果：

您将背景颜色绑定到某个属性，该属性将根据列表视图中当前项目的索引通过 IValueConverter 设置。

如果我有任何意义。

编辑：

有趣的是，当我写答案时，Filip Skakun 提出了完全相同的想法。

【讨论】：

好吧，我在输入我的想法，因为压力太慢了（如果我错了怎么办），然后我注意到弹出窗口显示“有人在你玩慢动作时已经回答了”:)跨度>
StackOverflow 很有趣。 :)

【解决方案4】：

我在网上搜索并找到了一种技术，其中包括将索引属性添加到相关模型中，然后将转换器添加到 DataTemplate。这并不理想，因为它只更改了列表项的内容，因此根据填充和内容对齐，您会看到行背景周围的间隙。我也不喜欢用 UI 代码修改我的数据模型对象的代码味道。

试试这个会有所帮助， http://www.bendewey.com/index.php/523/alternating-row-color-in-windows-store-listview

【讨论】：