WPF 零基础入门笔记（3）：数据绑定详解（更新中）-Toy模板网

这篇具有很好参考价值的文章主要介绍了WPF 零基础入门笔记（3）：数据绑定详解（更新中）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章合集

WPF基础知识博客专栏
WPF微软文档
WPF控件文档

B站对应WPF数据绑定视频教程

数据绑定

我们在之前的文章中，详细解释了数据模版和控件模板。简单来说数据模板和控件模板就是为了解决代码重复的问题。我们可以回顾一下之前的所有内容。

为了不写重复的样式，WPF提供了样式设置
为了减少业务代码和界面之间的沟通，WPF将简单的交互逻辑设计到了触发器
为了重复使用复杂控件，WPF开发了控件模板
- 控件模板又分为
- 多标签复合
- 标签元素拆分
- 标签子项重写

这个时候，为了数据的高效绑定，为了实现事件驱动到数据驱动的转变，我们要进行数据绑定。

数据绑定实战

WPF 零基础入门笔记（3）：数据绑定详解（更新中）
基础样式

        <StackPanel>
            <Slider x:Name="sd" Width="200" />
            <TextBox x:Name="txt" HorizontalAlignment="Center"  Text="50"/>
        </StackPanel >

事件通知型

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

xml代码

        <StackPanel>
            <Slider x:Name="sd" Width="200" ValueChanged="sd_ValueChanged"/>
            <TextBox x:Name="txt" HorizontalAlignment="Center"  Text="50"/>
        </StackPanel >

cs代码

        private void sd_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            txt.Text = e.NewValue.ToString();
        }

实现效果

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

数据驱动，双向绑定

我们这里还是事件驱动，就是一个滑块移动事件来设置属性。WPF为了将这种简单的交互脱离业务逻辑，我们可以直接页面元素之间进行数据绑定。

        <StackPanel>
            <Slider x:Name="sd" Width="200" />
            <TextBox x:Name="txt" HorizontalAlignment="Center"  Text="{Binding ElementName=sd, Path=Value}"/>
        </StackPanel >

这个代码实现了双向绑定，而且没有在CS代码中写逻辑。这个是纯数据驱动事件。让我们的业务代码专心于业务。

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

	功能
Default	同TowWay。双向绑定
OneTime	只响应一次
OneWay	单向正绑定
OneWayToSource	单向负绑定
TwoWay	双向绑定

这里推荐大家用双向绑定，而且大部分业务也是双向绑定的业务。如果有特殊需求再更改。

资源绑定

我们还可以绑定静态资源

<Window.Resources>
        <TextBox x:Key="txt">Hello WPF!</TextBox>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBox FontSize="50" Text="{Binding Source={StaticResource txt},Path=Text}"/>
        </StackPanel >
    </Grid>

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

数据源绑定

我们之前都是前端的数据交互，我们希望直接绑定后端数据。通过使用dataContext来实现

        <StackPanel>
            <TextBox x:Name="txt" FontSize="50" Text="{Binding Name}"/>
        </StackPanel >

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ///获取前端名为txt的数据，传入数据源
            txt.DataContext = new Person()
            {
                Name = "Hello C#"
            };


        }

    }
     public class Person
    {
        public string Name { get; set; }
    }

WPF 零基础入门笔记（3）：数据绑定详解（更新中）
注意，这里一定是传入一个类，这样才能绑定这个类的某个值。而且不能用已经存在的关键字命名。

全局数据源

我们一个一个绑定数据源太麻烦，所以我们可以设置全局数据源，把整个窗体的数据源都绑定上去。
新建一个MainViewModel类
WPF 零基础入门笔记（3）：数据绑定详解（更新中）

    public class MainViewModel
    {
        public MainViewModel() {
            Name = "Hello WPF!";
        }
        public string Name { get; set; }
    }

在MainWindow.xmal.cs中引入MainViewModel


    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //给整个窗口设置数据源
            this.DataContext = new MainViewModel();
        }

    }

直接绑定

    <Grid>
        <StackPanel>
            <TextBox FontSize="50"
                     Text="{Binding Name}" />
            <TextBox FontSize="50"
                     Text="{Binding Name}" />
            <TextBox FontSize="50"
                     Text="{Binding Name}" />

            <TextBox FontSize="50"
                     Text="{Binding Name}" />

        </StackPanel >
    </Grid>

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

后端和前端绑定问题

这里是单向绑定，后端代码更新是不影响前端的，要主动渲染。前端代码更新影响后端。

前端不重新渲染示例代码

    <Grid>
        <StackPanel>
            <TextBox FontSize="50"
                     Text="{Binding Name}" />
            <TextBox FontSize="50"
                     Text="{Binding Name}" />
            <TextBox FontSize="50"
                     Text="{Binding Name}" />

            <TextBox FontSize="50"
                     Text="{Binding Name}" />
            <Button Click="Button_Click" Height="100" FontSize="50" Content="按钮"/>

        </StackPanel >
    </Grid>

    public partial class MainWindow : Window
    {
        MainViewModel data = new MainViewModel();

        public MainWindow()
        {
            InitializeComponent();
            //给整个窗口设置数据源
            this.DataContext = data;



        }
		//我们添加按钮事件同时打印值
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            data.Name = "data change!";
            MessageBox.Show(data.Name);
        }
    }

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

继承事件通知，刷新数据

在原来的基础上

    /// <summary>
    /// 继承INotifyPropertyChanged
    /// </summary>
    public class MainViewModel: INotifyPropertyChanged
    {
        public MainViewModel() {
            Name = "Hello WPF!";
        }


        /// <summary>
        /// 使用public类，不然无法双向绑定
        /// </summary>
        public string Name { get;set; }

        /// <summary>
        /// 重载事件类,不然会报错
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;


    }

成功改变

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

我们将MainWindow.xmal.cs的点击按钮改造一下，看看多次点击会不会改变


   public partial class MainWindow : Window
    {
        MainViewModel data = new MainViewModel();

        public MainWindow()
        {
            InitializeComponent();
            //给整个窗口设置数据源
            this.DataContext = data;



        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            data.Name += "!";
            MessageBox.Show(data.Name);
        }
    }

事件通知强制刷新（无效）

我把代码修改了一下，发现并不是强制通知，而是触发了事件，或者有点点击事件之后才会触发通知

MainViewModel代码

        public MainViewModel() {
            Name = "Hello WPF!";
            Task.Run(async () =>
            {
                await Task.Delay(3000);
                Name = "I have been changed!";

                MessageBox.Show(Name);

            });
        }


        /// <summary>
        /// 使用public类，不然无法双向绑定
        /// </summary>
        public string Name { get;set; }

        /// <summary>
        /// 重载事件类,不然会报错
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

WPF 零基础入门笔记（3）：数据绑定详解（更新中）
如果你鼠标不动，则最多停留10s钟才会刷新，如果鼠标动一动就立刻刷新

 public class MainViewModel: INotifyPropertyChanged
    {
        public MainViewModel() {
            Name = "Hello WPF!";
            //Name = "I have been changed!";

            Task.Run(async () =>
            {
                await Task.Delay(3000);
                Name = "I have been changed!";

                //MessageBox.Show(Name);

            });
        }


        /// <summary>
        /// 使用public类，不然无法双向绑定
        /// </summary>
        private string _name;

        /// <summary>
        /// 当修改时触发
        /// </summary>
        public string Name
        {
            get { return _name; }
            set { _name = value; OnPropertyChanged("Name"); }
        }


        /// <summary>
        /// 重载事件类,不然会报错
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;
        /// <summary>
        /// 强制事件通知
        /// </summary>
        /// <param name="propertyName"></param>

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }


    }

结果还是一样。我估计是懒重载吧，就是WPF认为这个不是活动窗口，所以刷新频率低一点,这个其实是个优化吧，多窗口默认优化。

补充说明：2023年7月15日

根据我的测试。如果想要实先列表的数据绑定，比如我传入一个List<Student>类，Student有Name，Age参数。需要注意一下几点。

使用ObservableCollection

ObservableCollection是集成了INotifyPropertyChanged的集合，会在Count即个数出现变化的时候进行通知

在Student里面设置通知

进入如下参数设置

 public class MyListBoxItem : INotifyPropertyChanged
    {
        public string Text
        {
            get { return text; }
            set
            {
                text = value;
                OnPropertyChanged("Text");
            }
        }

        public event PropertyChangedEventHandler? PropertyChanged;
		
		//通知函数
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

安装prism框架，使用封装好的更新

Nuget安装

WPF 零基础入门笔记（3）：数据绑定详解（更新中）

    public class MyListBoxItem : BindableBase
    {
        private string text;
        public string Text
        {
            get { return text; }
            set {  SetProperty(ref text, value);}//此方法为Prism提供
        }
    }