كيفية القيام بما يلي: تبديل لون الخلفية للصفوف في ListView

يوضح هذا المثال ثلاث طرق يمكنك استخدام البديلة Background الألوان من أجل عمود في ListView.

مثال

توفر المقاطع التالية ثلاث طرق لإنشاء ListView مع الصفوف البديلة في Background اللون. تتناول المثال أيضًا أسلوب تحديث طريقة العرض عند إضافة أو إزالة الصفوف.

الطريقة الأولى: تعريف أنماط التي تستخدم IValueConverter إلى بديل اللون الخلفية

يظهر المثال التالي كيف يتم تعريف Style للحصول ListViewItem التحكم يربط القيمة Background الخاصية إلى IValueConverter.

<Style x:Key="myItemStyle" TargetType="{x:Type ListViewItem}">
  <Setter Property="Background">
    <Setter.Value>
      <Binding RelativeSource="{RelativeSource Self}" 
               Converter="{StaticResource myConverter}"/>
    </Setter.Value>
  </Setter>
</Style>

يعرّف المثال التالي ResourceKey لـ IValueConverter.

<namespc:BackgroundConverter x:Key="myConverter"/>

يظهر المثال التالي التعريف IValueConverter الذي يعين Background الخاصية استناداً إلى فهرس الصف.

    Public NotInheritable Class BackgroundConverter
        Implements IValueConverter
        Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
            Dim item As ListViewItem = CType(value, ListViewItem)
            Dim listView As ListView = TryCast(ItemsControl.ItemsControlFromItemContainer(item), ListView)
            ' Get the index of a ListViewItem
            Dim index As Integer = listView.ItemContainerGenerator.IndexFromContainer(item)

            If index Mod 2 = 0 Then
                Return Brushes.LightBlue
            Else
                Return Brushes.Beige
            End If
        End Function

public sealed class BackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, 
        CultureInfo culture)
    {
        ListViewItem item = (ListViewItem)value;
        ListView listView = 
            ItemsControl.ItemsControlFromItemContainer(item) as ListView;
        // Get the index of a ListViewItem
        int index = 
            listView.ItemContainerGenerator.IndexFromContainer(item);

        if (index % 2 == 0)
        {
            return Brushes.LightBlue;
        }
        else
        {
            return Brushes.Beige;
        }
    }

المثال التالي كيفية تعريف ListView يستخدم Style كـ به ItemContainerStyle بمن أجل توفير التخطيط المطلوب.

<ListView Name="theListView" 
          ItemsSource="{Binding Source={StaticResource EmployeeData}, 
                                        XPath=Employee}"
          ItemContainerStyle="{StaticResource myItemStyle}" >
  <ListView.View>
    <GridView>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}" 
                      Header="First Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}" 
                      Header="Last Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}" 
                      Header="Favorite City" Width="120"/>
    </GridView>
  </ListView.View>
</ListView>

الطريقة الثانية: ينحدر فئة جديدة من عرض قائمة إلى بديل خلفية اللون

المثال التالي كيفية تعريف فئة مشتقة من ListView. يتجاوز هذه الفئة PrepareContainerForItemOverride الأسلوب في ترتيب لإنشاء الصفوف التي تحتوي على المتبادلة Background الألوان.

    Public Class SubListView
        Inherits ListView
        Protected Overrides Sub PrepareContainerForItemOverride(ByVal element As DependencyObject, ByVal item As Object)
            MyBase.PrepareContainerForItemOverride(element, item)
            If TypeOf View Is GridView Then
                Dim index As Integer = ItemContainerGenerator.IndexFromContainer(element)
                Dim lvi As ListViewItem = TryCast(element, ListViewItem)
                If index Mod 2 = 0 Then
                    lvi.Background = Brushes.LightBlue
                Else
                    lvi.Background = Brushes.Beige
                End If
            End If
        End Sub
    End Class

public class SubListView : ListView
{
    protected override void
        PrepareContainerForItemOverride(DependencyObject element,
        object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        if (View is GridView)
        {
            int index = ItemContainerGenerator.IndexFromContainer(element);
            ListViewItem lvi = element as ListViewItem;
            if (index % 2 == 0)
            {
                lvi.Background = Brushes.LightBlue;
            }
            else
            {
                lvi.Background = Brushes.Beige;
            }
        }
    }
}

يوضح المثال التالي كيفية إنشاء مثيل من واستخدامها. namespc البادئة مخططات الى وقت تشغيل اللغة العامة (CLR) مساحة الاسم و التجميع المطابق حيث StyleSelector معرّفًا.

<namespc:SubListView
      ItemsSource="{Binding Source={StaticResource EmployeeData}, 
                                        XPath=Employee}">
  <namespc:SubListView.View>
    <GridView>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}" 
                      Header="First Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}" 
                      Header="Last Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}" 
                      Header="Favorite City" Width="120"/>
    </GridView>
  </namespc:SubListView.View>
</namespc:SubListView>

الطريقة الثالثة: استخدام StyleSelector لمتعاقبة اللون الخلفية

المثال التالي كيفية تعريف StyleSelector الذي يعرف Style الصف. يحدد هذا المثال Background طبقًال لون فهرس الصف.

    Public Class ListViewItemStyleSelector
        Inherits StyleSelector
        Public Overrides Function SelectStyle(ByVal item As Object, ByVal container As DependencyObject) As Style
            Dim st As New Style()
            st.TargetType = GetType(ListViewItem)
            Dim backGroundSetter As New Setter()
            backGroundSetter.Property = ListViewItem.BackgroundProperty
            Dim listView As ListView = TryCast(ItemsControl.ItemsControlFromItemContainer(container), ListView)
            Dim index As Integer = listView.ItemContainerGenerator.IndexFromContainer(container)
            If index Mod 2 = 0 Then
                backGroundSetter.Value = Brushes.LightBlue
            Else
                backGroundSetter.Value = Brushes.Beige
            End If
            st.Setters.Add(backGroundSetter)
            Return st
        End Function
    End Class

public class ListViewItemStyleSelector : StyleSelector
{
    public override Style SelectStyle(object item, 
        DependencyObject container)
    {
        Style st = new Style();
        st.TargetType = typeof(ListViewItem);
        Setter backGroundSetter = new Setter();
        backGroundSetter.Property = ListViewItem.BackgroundProperty;
        ListView listView = 
            ItemsControl.ItemsControlFromItemContainer(container) 
              as ListView;
        int index = 
            listView.ItemContainerGenerator.IndexFromContainer(container);
        if (index % 2 == 0)
        {
            backGroundSetter.Value = Brushes.LightBlue;
        }
        else
        {
            backGroundSetter.Value = Brushes.Beige;
        }
        st.Setters.Add(backGroundSetter);
        return st;
    }
}    

المثال التالي كيفية تعريف ResourceKey للحصول StyleSelector. namespc البادئة مخططات الى CLR مساحة الاسم و التجميع المطابق حيث StyleSelector معرّفًا. لمزيد من المعلومات، راجع مساحات الاسم XAML وتعيين مساحة الاسم ل XAML WPF.

<namespc:ListViewItemStyleSelector x:Key="myStyleSelector"/>

يُظهر المثال التالي كيفية تعيين خاصية ItemContainerStyleSelector التابعة لـListView إلى المورد StyleSelector.

<ListView 
      ItemsSource="{Binding Source={StaticResource EmployeeData}, 
                                        XPath=Employee}"
      ItemContainerStyleSelector="{DynamicResource myStyleSelector}" >      
  <ListView.View>
    <GridView>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}" 
                      Header="First Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}" 
                      Header="Last Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}" 
                      Header="Favorite City" Width="120"/>
    </GridView>
  </ListView.View>
</ListView>

تحديث ListView بعد تغيير في مجموعة ListViewItem

في حالة إضافة أو إزالة ListViewItem من ListView عنصر التحكم، يجب عليك تحديث ListViewItem عناصر التحكم في ترتيب لإعادة التبديل في Background اللون. المثال التالي كيفية تحديث ListViewItem عناصر التحكم.

          Dim dataView As ICollectionView = CollectionViewSource.GetDefaultView(theListView.ItemsSource)
          dataView.Refresh()

ICollectionView dataView =
  CollectionViewSource.GetDefaultView(theListView.ItemsSource);
dataView.Refresh();

راجع أيضًا:

المرجع

GridView

ListView

المبادئ

نظرة عامة على ListView

نظرة عامة حول GridView

موارد أخرى

مواضيع إجرائية لل ListView