WPF MVVM LISTBOX批量多嵌套控件双向动态数据

Mvvm UI设计

本人在日常工作中记录的日记总结，希望能给大家带来一些乐趣！

Listbox

ListBox是我们在WPF中很常见功能很强大的一个控件，我们会经常使用它来生成符合项目需求的数据显示。以下就是我当前遇到的一种：

1. 界面存在多控件嵌套如何实现动态View，ViewModel绑定 :

分解功能

1.1.搭建Model
1.2.创建View
1.3.实现逻辑ViewModel

容易卡点的地方

2.在ViewModel中修改数据源后，由于嵌套控件的原因实时数据无法同步到前端
这个时候就需要使用到INotifyPropertyChanged接口，当属性发生改变时，捕获改变并同步变化。

2.1在ViewModel类中重写实现同步功能需要的方法并绑定数据源

namespace Client.ViewModels
{
    public class DataViewModel : ViewModelBase  //ViewModelBase(继承，请借鉴Model写法)INotifyPropertyChanged
    {
	    public DataViewModel ()
		{
	   
		}
        static DataViewModel  _instance;
        public static DataViewModel   Instance
        {
            private set
            {
                _instance = value;
            }
            get
            {
                if (_instance == null)
                {
                    _instance = new DataViewModel  ();
                }
                return _instance;
            }
        }
         private ObservableCollection<DataModel> _dataList;
		 public ObservableCollection<DataModel> DataList
		 {
			     get { return _dataList; }
			     set
			     {
			         _dataList= value;
			         OnPropertyChanged(nameof(DataList));
			     }
		 }
   }
}

2.2Model代码

将需要实时动态同步的属性绑定

//Description实时变化
namespace Client.Models
{
    public class DataModel: INotifyPropertyChanged
    {
        public string IsShow{ get; set; }
        public string Person { get; set; }
        public string Name { get; set; }
        private string _description;
		public string Description
		{
		    get { return _description; }
		    set
		    {
		        _description = value;
		        OnPropertyChanged(nameof(Description));
		    }
		}
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

View片段代码1

将需要实时动态同步的属性绑定

<UserControl x:Class="Client.Views.ListBoxDemoView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
             xmlns:local="clr-namespace:Client.Views"
             xmlns:vm="clr-namespace:Client.ViewModels"
             xmlns:prism="http://prismlibrary.com/"
             mc:Ignorable="d" 
            > 
    <UserControl.Resources>
        <share:BooleanToVisibleConverter x:Key="IsVisable"/>
        <share:BoolValueOppositeConverter x:Key="IsEnable"/>
    </UserControl.Resources>
  <ListBox  SelectedItem="{Binding SelectedItem}" 
	  MaxHeight="900" Background="#ECECEC" 
	  BorderThickness="1" BorderBrush="Black" 
	  ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" 
	  ItemsSource="{Binding DataList,NotifyOnSourceUpdated=True ,Mode=TwoWay}" >
  </ListBox>
 </UserControl>

View片段代码2

将需要实时动态同步的属性绑定

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="ListBox">
        <Setter Property="Background" Value="White" />
        <Setter Property="BorderThickness" Value="0" />
    </Style>
    <Style TargetType="ListBoxItem">
        <Setter Property="Margin" Value="0 8"/>
        <Setter Property="Background" Value="White" />
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="777" ></ColumnDefinition>
                            <ColumnDefinition MinWidth="200" ></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Border  Grid.Column="0" BorderBrush="#B3B3B3" BorderThickness="1 1 0 1" >                         
                        <Grid>
                                <TextBlock 
                                    FontSize="24"  
                                    Height="75"
                                    Padding="30 25 0 0"
                                    Text="{Binding Description}" />
                         </Grid>
                        </Border>
                       <Border  Grid.Column="1" BorderBrush="#B3B3B3" BorderThickness="1 1 0 1" >                   
                       <Grid>
                                <TextBlock 
                                    FontSize="24"  
                                    Height="75"
                                    Padding="30 25 0 0"
                                    Text="{Binding Name}" />
                       </Grid>
                       </Border>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        //设置显示条件
        <Style.Triggers>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=IsShow}" Value="True"/>
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.Setters>
                    <Setter Property="Background" Value="Gray"/>
                </MultiDataTrigger.Setters>
            </MultiDataTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

若使用其它控件包括但不限于Button、Combox 、CheckBox等command事件出现无法进入命令的情况，可以尝试在控件属性中设置

Command="{Binding  DataContext.NameCommand , RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, Mode=TwoWay}" 
CommandParameter="{Binding}" ## 标题

对于初学者容易忽略的地方

xaml.cs 中视图与数据绑定

namespace Client.Views
{
    /// <summary>
    /// ListBoxDemoView.xaml 的交互逻辑
    /// </summary>
    public partial class ListBoxDemoView: UserControl
    {
        public ListBoxDemoView()
        {
            InitializeComponent();
            DataContext = DataViewModel.Instance;
        }
    }
}

总结关键点

1.View与ViewModel 数据的绑定 .xaml.cs 与ViewModel的Context关联
2.ViewModel获取数据变化 继承INotifyPropertyChanged 重写OnPropertyChanged
3. Model中的属性变化获取
ps. 也可以使用 Button Combox 等控件批量生成噢。建议ViewModel 写一个底层通用ViewModelBase 继承必要的接口 降低代码重复率
4.本人水平有限，有不到之处请多指教！
[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/