8

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 では、これはトリガー付きのスタイルを使用して行われます -このページを参照してください。

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() を使用して、コレクションが変更されるたびにインデックス値を常に更新する必要がないようにします。

4

4 に答える 4

5

コンバーターを使用できます-アイテムから行インデックスを取得し、それをブラシに変換します。また、ItemTemplate で十分な制御ができない場合は、ItemContainerStyle を使用して、ListViewItem テンプレート レベルでブラシを変更します。

もう 1 つのオプションは、アイテムに応じて異なるブラシを持つ異なるテンプレートを提供する ItemTemplateSelector を指定することです。ただし、行インデックスを生成するか、何らかの方法でセレクターを有効にして、アイテムが偶数または奇数の位置にあるかどうかを判断する必要があります。

于 2012-08-17T17:18:49.453 に答える
1

このようなスタイリングを試みたことはありませんが、次の場合はどうでしょうか。

背景色をいくつかのプロパティにバインドすると、そのプロパティはリストビューの現在のアイテムのインデックスに応じて IValueConverter を介して設定されます。

意味があれば。

編集：

面白いことに、私が回答を書いているときに、Filip Skakun がまったく同じアイデアを思いつきました。

于 2012-08-17T17:21:09.753 に答える
0

オンラインで検索したところ、問題のモデルにインデックス プロパティを追加してから、DataTemplate にコンバーターを追加する手法を見つけました。リスト項目の内容を変更しただけなので、これは理想的ではありませんでした。そのため、パディングと内容の配置によっては、行の背景に隙間ができてしまいます。また、データ モデル オブジェクトを UI コードで変更するコードの匂いも好きではありませんでした。

これを試してみてください 。 http://www.bendewey.com/index.php/523/alternating-row-color-in-windows-store-listview

于 2015-06-08T13:19:10.707 に答える