WPF数据绑定

跟着视频操作——WPF入门基础教程合集_哔哩哔哩_bilibili

自己还是写下来，方便日后查阅

1.元素绑定

通过元素名字绑定数值

<Window x:Class="Wpf_BV1mJ411F7zG.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_BV1mJ411F7zG"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <StackPanel>
            <Slider x:Name="sd" Width ="200" />
            <TextBox Text ="{Binding ElementName=sd, Path=Value}" />
        </StackPanel>
    </Grid>
</Window>

2.非元素绑定（绑定到静态资源）

<Window x:Class="Wpf_BV1mJ411F7zG.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_BV1mJ411F7zG"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400">
    <Window.Resources>
        <TextBox x:Key="txt">Hello,WPF</TextBox>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBox Text ="{Binding Source={StaticResource txt},Path=Text}" FontSize="60"/>
        </StackPanel>
    </Grid>
</Window>

3.绑定到数据上下文

3.1正确示范

 要求：1.属性名称正确(完全相同，区分大小写)

2.属性公开能访问

<Window x:Class="Wpf_BV1mJ411F7zG.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_BV1mJ411F7zG"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <StackPanel>
            <TextBox x:Name="txt" FontSize="60" Text="{Binding Name}" />
        </StackPanel>
    </Grid>
</Window>

using System.Windows;

namespace Wpf_BV1mJ411F7zG
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            txt.DataContext = new Person() { Name = "ABC" };
        }
    }

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

}

3.2错误示范

Name打成Name1

<Window x:Class="Wpf_BV1mJ411F7zG.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_BV1mJ411F7zG"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <StackPanel>
            <TextBox x:Name="txt" FontSize="60" Text="{Binding Name1,FallbackValue='Not Found'}" />
        </StackPanel>
    </Grid>
</Window>

 4.为窗口设置数据上下文绑定

业务代码写到MainViewModel.cs中，这又叫解耦，MvvM模式

MainWindow

<Window x:Class="Wpf_BV1mJ411F7zG.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_BV1mJ411F7zG"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <StackPanel>
            <TextBox FontSize="60" Text="{Binding Name,FallbackValue='Not Found'}" />
            <TextBox FontSize="60" Text="{Binding Name,FallbackValue='Not Found'}" />
        </StackPanel>
    </Grid>
</Window>

using System.Windows;

namespace Wpf_BV1mJ411F7zG
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainViewModel();
        }
    }
}

MainViewModel.cs

using System;

namespace Wpf_BV1mJ411F7zG
{
    class MainViewModel
    {
        public MainViewModel()
        {
            Name = "Hello";
        }
        public string Name { get; set; }
    }
}

 5.数据上下文内容修改

修改MainViewModel.cs代码，实现接口INotifyPropertyChanged

using System;
using System.ComponentModel;
using System.Threading.Tasks;

namespace Wpf_BV1mJ411F7zG
{
    class MainViewModel:INotifyPropertyChanged
    {
        public MainViewModel()
        {
            Name = "Hello";
            Task.Run(async () =>
            {
                await Task.Delay(3000);
                Name = "No";
            });
        }

        private string name { get; set; }
        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        /// 通知
        protected void OnPropertyChanged(string properName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(properName));
        }
    }
}

3秒后

 6.使用MvvMlight包，快速实现绑定操作

6.1添加NuGet包—mvvmlight

 6.2.安装成功，多了一个ViewModel文件夹

6.3.删除多余内容

 6.4.修改MainViewModel.cs代码，实现相同效果

using GalaSoft.MvvmLight;
using System.Threading.Tasks;

namespace Wpf_BV1mJ411F7zG
{
    class MainViewModel: ViewModelBase
    {
        public MainViewModel()
        {
            Name = "Hello";
            Task.Run(async () =>
            {
                await Task.Delay(3000);
                Name = "No";
            });
        }

        private string name { get; set; }
        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                RaisePropertyChanged();
            }
        }

    }
}

7.按钮绑定—解耦业务代码与UI代码分开

7.1.MainViewModel.cs代码

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System.Threading.Tasks;

namespace Wpf_BV1mJ411F7zG
{
    class MainViewModel: ViewModelBase
    {
        public MainViewModel()
        {
            Name = "Hello";
            SaveCommand = new RelayCommand(() =>
            {
                Name = "No";
            });
        }

        private string name { get; set; }
        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                RaisePropertyChanged();
            }
        }

        // 代替点击事件
        public RelayCommand SaveCommand { get; set; }
    }
}

7.2.修改MainWindow.xaml代码

<Window x:Class="Wpf_BV1mJ411F7zG.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_BV1mJ411F7zG"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <StackPanel>
            <TextBox FontSize="30" Text="{Binding Name}" />
            <Button Command="{Binding SaveCommand}" Height="40" />
        </StackPanel>
    </Grid>
</Window>