【WPF】MVVM动态修改Bingding的另一种思路——用Style样式

原文: 【WPF】MVVM动态修改Bingding的另一种思路——用Style样式

问题场景：
界面上有个ListBox控件，它的内容Item绑定了一个列表，即 ItemsSource =”{Binding StudentList}”。这个StudentList列表在该界面View对应的ViewModel中赋值。ListBox中每个元素Item都是一个Student实体类对象，核心代码如下：

View：

<ListBox 
    x:Name="studentLB" Margin="0" 
    VerticalAlignment="Top"
    HorizontalAlignment="Left"
    HorizontalContentAlignment="Stretch"
    ScrollViewer.CanContentScroll="False"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    ScrollViewer.VerticalScrollBarVisibility="Visible"
    ItemsSource="{Binding StudentList}">

     <!-- 流式布局，左对齐 -->
     <ListBox.ItemsPanel>
         <ItemsPanelTemplate>
             <WrapPanel HorizontalAlignment="Left"/>
         </ItemsPanelTemplate>
     </ListBox.ItemsPanel>

    <!-- 条目的模板 -->
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Bingding FirstName}" />
        </DataTemplate>
    </ListBox.ItemTemplate>

</ListBox>

ViewModel：

private ObservableCollection<Student> studentList;
public ObservableCollection<Student> StudentList    // 前台ListBox的ItemsSource绑定该列表
{
    get { return studentList; }
    set { SetProperty(ref studentList, value); }
}

Student.cs实体类

public Class Student
{
    public int Id { get; set; } // 唯一标识符
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

---

需求：现在条目中TextBlock 绑定的是Student对象的FirstName属性，如何将其改为绑定到LastName属性？

思路：

• 思路一：
  由于ItemsSource绑定到ViewModel中的StudentList列表，在Controller层从服务端获取到列表数据后，先进行加工，再赋值给StudentList。如先用一个临时列表TempList记录服务端返回的数据，然后遍历并修改该列表中的内容，想修改后的内容赋值给StudentList，如下：

// 由于前台TextBlock绑定的是FirstName属性，现将FirstName的值改为LastName的值，即保持前台绑定不变的情况下，动态修改被绑定的属性的值。
foreach(Student item in TempList)
{
    //sourceList是从服务端获取的列表数据
    foreach(Student source in SourceList) 
    {
        if (item.id == source.id)
        {
            item.FirstName = source.LastName;
        }
    }
}

经过测试，虽然数据层的确发生了改变，但显示层却并没有更新。说好的MVVM呢？怎么会数据变了不自动更新界面的？？

• 思路二：
  将ListBox的界面改为采用Style样式，准备两种样式，区别仅在于TextBlock绑定到的是FirstName还是LastName。在Controller层动态修改ListBox使用的样式！如可以用一个按钮，每次点击都来回切换这两种样式。

新建样式文件StudentStyle.xaml：

<!-- ListBox样式 切换显示学生的FirstName/LastName -->
<!-- 这两种样式仅有ListBoxItem中的TextBlock绑定到FirstName/LastName的不同 -->

<ResourceDictionary  x:Class="YourProjectName.Presentation.Style.ListBox_StudentStyle"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008">

    <!-- 样式1：显示FirstName -->
    <Style x:Key="firstNameStyle" TargetType="{x:Type ListBox}">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="ItemsSource" Value="{Binding SpacePlansList}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>

        <!-- 流式布局 左对齐 -->
        <Setter Property="ListBox.ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel HorizontalAlignment="Left"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="ListBox.ItemTemplate">
              <Setter.Value>
                  <DataTemplate>
                      <TextBlock Text="{Binding FirstName}"/>
                  </DataTemplate>
              </Setter.Value>
          </Setter>
      </Style>

      <!-- 样式2：显示LastName -->
      <Style x:Key="lastNameStyle" TargetType="{x:Type ListBox}">
          <Setter Property="Margin" Value="0"/>
          <Setter Property="ItemsSource" Value="{Binding SpacePlansList}"/>
          <Setter Property="BorderThickness" Value="0"/>
          <Setter Property="VerticalAlignment" Value="Top"/>
          <Setter Property="HorizontalAlignment" Value="Left"/>
          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
          <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
          <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>

          <!-- 流式布局 左对齐 -->
          <Setter Property="ListBox.ItemsPanel">
              <Setter.Value>
                  <ItemsPanelTemplate>
                      <WrapPanel HorizontalAlignment="Left"/>
                  </ItemsPanelTemplate>
              </Setter.Value>
          </Setter>

          <Setter Property="ListBox.ItemTemplate">
              <Setter.Value>
                  <DataTemplate>
                      <TextBlock Text="{Binding LastName}"/>
                  </DataTemplate>
              </Setter.Value>
          </Setter>
      </Style>

</ResourceDictionary>

View：

<!-- 引入样式资源 -->
<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Presentation/Style/ListBox_StudentStyle.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

<!-- 使用样式，默认使用显示FirstName的样式 -->
<ListBox x:Name="studentLB" Style="{StaticResource firstNameStyle}"/>

控制层动态修改ListBox的样式：

private Style listbox_FirstNameSytle;   // 显示FirstName的样式
private Style listbox_LastNameSytle;    // 显示LastName的样式

// 在控制层的初始化方法中，获取这两种样式
public void Initialize()
{
    var listBoxStyle = new ResourceDictionary
    {
        Source = new Uri("/YourProjectName;component/Presentation/Style/ListBox_StudentStyle.xaml", UriKind.RelativeOrAbsolute) // 指定样式文件的路径
    };

    listbox_FirstNameSytle = listBoxStyle["firstNameStyle"] as Style;
    listbox_LastNameSytle = listBoxStyle["lastNameStyle"] as Style;
}

private void btn_Click(object sender, RoutedEventArgs e)
{
    // 根据按钮的状态，切换ListBox的样式
    if (view.btn.IsChecked == true)
    {
        view.studentLB.Sytle = listbox_LastNameSytle;
    }
    else
    {
        view.studentLB.Sytle = listbox_FirstNameSytle;
    }
}

经测试，该方法可行！

---

小结：

准备多套样式，通过动态修改样式来实现类似于动态修改绑定的效果。