• WPF属性绑定实现双向变化


      WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面;同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的效果。属性绑定使得UI更新非常的方便,下面分享一个小栗子说明使用的方式。

    1、先做了一个有一个TextBlock和一个Button的UI,想要实现点击后TextBlock发生变化。

    <Window x:Class="WPFDemo.Window1"
            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:WPFDemo"
            mc:Ignorable="d"
            Title="Window1" Height="300" Width="300">
        
        <Grid>
            <Button Name="Button_OK" MaxWidth="50" MaxHeight="20" Click="Button_OK_Click">OK</Button>
            <TextBlock MaxWidth="50" MaxHeight="20" VerticalAlignment="Top"  HorizontalAlignment="Left" Text="{Binding Text}"></TextBlock>
        </Grid>
    </Window>

    2、创建UI更新类(现在是测试,所以属性比较少,正常开发建议一个UI创建一个UI更新类专门用于UI更新),如下为完整代码

    public class PropertyToUI : INotifyPropertyChanged
        {
            #region 私有变量
                  
            /// <summary>
            /// 状态栏显示文本
            /// </summary>
            private string text = "";
    
            #endregion
    
            #region 属性
                  
            /// <summary>
            /// 属性-显示文本
            /// </summary>
            public string Text
            {
                get { return text; }
                set 
                { 
                    text = value;
                    OnPropertyChanged("Text");
                }
            }
    
            #endregion
    
            #region 属性变化通知事件
            
            /// <summary>
            /// 属性变化通知事件
            /// </summary>
            public event PropertyChangedEventHandler PropertyChanged;
    
            /// <summary>
            /// 属性变化通知
            /// </summary>
            /// <param name="e"></param>
            public void OnPropertyChanged(PropertyChangedEventArgs e)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, e);
                }
            }
    
            /// <summary>
            /// 属性变化通知事件
            /// </summary>
            /// <param name="PropertyName"></param>
            public void OnPropertyChanged(string PropertyName)
            {
                PropertyChangedEventArgs e = new PropertyChangedEventArgs(PropertyName);
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, e);
                }
            }
    
            #endregion
        }

    这个部分有如下几个关键点:

    (1)、需要实现INotifyPropertyChanged接口,这是一个属性更新接口,可以看一下它的实现,有一个属性更新事件,所以要说声明该事件。

    namespace System.ComponentModel
    {
        //
        // 摘要:
        //     Notifies clients that a property value has changed.
        public interface INotifyPropertyChanged
        {
            //
            // 摘要:
            //     Occurs when a property value changes.
            event PropertyChangedEventHandler PropertyChanged;
        }
    }

    (2)、创建属性更新函数

         /// <summary>
            /// 属性变化通知
            /// </summary>
            /// <param name="e"></param>
            public void OnPropertyChanged(PropertyChangedEventArgs e)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, e);
                }
            }

    参数为某个属性的更新事件,而后触发PropertyChanged(this, e)通知UI更新指定属性

    (3)、包装属性

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

    在设置器中调用属性更新事件,即当后台设置值时(想要更新UI值),就会触发属性更新事件,通知前台绑定的依赖项属性进行更新(事件中带有属性的身份标识和值进行传递)。

    3、前台依赖项属性对属性更新类中的属性进行绑定(Binding语法)

    <TextBlock MaxWidth="50" MaxHeight="20" VerticalAlignment="Top"  HorizontalAlignment="Left" Text="{Binding Text}"></TextBlock>

    属性名绑定即可

    4、绑定数据源的说明(这是比较容易忘记的地方)

    PropertyToUI UI = new PropertyToUI();
    this.DataContext = UI;  //事件绑定数据源

    以上就是属性绑定的必要步骤了,如果没什么问题基本就成功了,没成功的再好好检查一下。

    如下为完整的后台代码:

    /// <summary>
        /// Window1.xaml 的交互逻辑
        /// </summary>
        public partial class Window1 : Window
        {
    
            /// <summary>
            /// UI更新类对象
            /// </summary>
            PropertyToUI UI = new PropertyToUI();
    
            /// <summary>
            /// 构造函数
            /// </summary>
            public Window1()
            {
                InitializeComponent();
    
                this.DataContext = UI;  //事件绑定数据源
    
                UI.Text = "程序开启";
            }
    
            /// <summary>
            /// OK按键点击事件
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void Button_OK_Click(object sender, RoutedEventArgs e)
            {
                UI.Text = "我更新了";
                MessageBox.Show(UI.Text);
            }
           
        }

    运行效果如下:

    点击OK按键后:

  • 相关阅读:
    Chrome开发者工具详解(1)Elements、Console、Sources面板
    在Mac下运行ASP.NET Core应用程序
    网络性能优化实战
    Chrome开发者工具详解(5)Application、Security、Audits面板
    Chrome开发者工具详解(3)Timeline面板
    Chrome开发者工具详解(2)Network面板
    Chrome开发者工具详解(4)Profiles面板
    1.1专题介绍「深入浅出ASP.NET Core系列」
    1.2环境安装「深入浅出ASP.NET Core系列」
    1.3创建项目「深入浅出ASP.NET Core系列」
  • 原文地址:https://www.cnblogs.com/xiaomengshan/p/11564368.html
Copyright © 2020-2023  润新知