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

2023-12-18 20:56:28

问题场景：
界面上有个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;

    }

}

经测试，该方法可行！

小结：

码农公寓

相关文章