AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

8天入门wpf—— 第五天 数据绑定

2016-04-13 2729
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

     

       在webform中，如果提到“绑定”二字，相信大家都不会陌生，绑定，让我们的代码更加的简洁优美，在wpf中也存在各种神马的绑定，

当然使用上都是行隔理不隔。

     

一： 控件到控件的绑定

     既然是绑定，那么肯定就有”源对象“和”目标对象“两种状态实体，从图的角度上来说存在三种状态：

确实在wpf中存在这三种模式的对应方式，

1：OneWay

    正如图A所说，Source影响着Target，但是Target却影响不到Source。

2：OneWayToSource

   也正如图B中所表述的一样，Target影响Source，而Source却影响不到Target。

3：TwoWay

   这个也就相当于无向图的边，Source与Target相互影响。

4：OneTime

   在OneWay的基础上延伸了一个OneTime，仅绑定一次。如果大家属性Jquery中的one函数我想就可以不用表述了。

<Window x:Class="WpfApplication1.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <ScrollBar Height="24" Name="scrollBar1" Width="237" Orientation="Horizontal" Canvas.Left="103" Canvas.Top="51"  Minimum="1" Maximum="100" SmallChange="1" />
        <Label Canvas.Left="41" Canvas.Top="121" Content="OneWay" Height="28" Name="label1" />
        <TextBox Canvas.Left="165" Canvas.Top="121" Height="23"
                 Text="{Binding ElementName=scrollBar1, Path=Value, Mode=OneWay}"
                 Name="textBox1" Width="120" />
        <Label Canvas.Left="41" Canvas.Top="160" Content="OneWayToSource" Height="28" Name="label2" />
        <TextBox Canvas.Left="165" Canvas.Top="160" Height="23"
                   Text="{Binding ElementName=scrollBar1, Path=Value, Mode=OneWayToSource}"
                 Name="textBox2" Width="120" />
        <Label Canvas.Left="41" Canvas.Top="202" Content="TwoWay" Height="28" Name="label3" />
        <TextBox Canvas.Left="165" Canvas.Top="202" Height="23"
                   Text="{Binding ElementName=scrollBar1, Path=Value, Mode=TwoWay}"
                 Name="textBox3" Width="120" />
        <Label Canvas.Left="41" Canvas.Top="231" Content="OneTime" Height="28" Name="label4" />
        <TextBox Canvas.Left="165" Canvas.Top="231" Height="23" 
                   Text="{Binding ElementName=scrollBar1, Path=Value, Mode=OneTime}"
                 Name="textBox4" Width="120" />
    </Canvas>
</Window>

最终的结果，还是大家自己拖拖滚动条吧，有图有真相。

 

二：.net对象与控件的绑定

     这种绑定还是经常使用的，在WebForm中我们常用的Eval就是此种绑定，因为俺从数据库里好不容易捞了点数据总要呈现在UI上面吧，

好，不多说，上代码说话。

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication3"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListView  Height="287" HorizontalAlignment="Left" Margin="62,12,0,0" Name="listView1" VerticalAlignment="Top" Width="331">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="姓名"  DisplayMemberBinding="{Binding Name}"/>
                        <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

 

首先谢天谢地，我们的数据出来了，好，现在我们有需求了，我现在需要给奇偶行填充不同底色，并且age=22的这行数据标红，那在wpf中该

怎么做呢？我们依稀的记得在webform中我们会在“行事件”上做手脚，在数据的绑定上wpf给我们提供了一个口子，也就是在绑定时可以插入自

己的”事件处理代码“,但必须要继承自IValueConverter。

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication3"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:ColorConvert x:Key="myConvert"/>
        <Style x:Key="item" TargetType="{x:Type ListViewItem}">
            <Setter Property="Background">
                <Setter.Value>
                    <Binding RelativeSource="{RelativeSource Self}" 
Converter="{StaticResource myConvert}"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ListView ItemContainerStyle="{StaticResource ResourceKey=item}" Height="287" HorizontalAlignment="Left" Margin="62,12,0,0" Name="listView1" VerticalAlignment="Top" Width="331">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="姓名"  DisplayMemberBinding="{Binding Name}"/>
                        <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication3
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<Student> list = new List<Student>();

            for (int i = 20; i < 30; i++)
            {
                list.Add(new Student() { Name = "hxc" + i, Age = i });
            }

            listView1.ItemsSource = list;
        }
    }

    public class ColorConvert : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //这里的value既为当前的行对象
            var item = value as ListViewItem;

            //获取当前的item在当前的Listview中的位置
            var view = ItemsControl.ItemsControlFromItemContainer(item) as ListView;

            var index = view.ItemContainerGenerator.IndexFromContainer(item);

            //当Age=22是红色标示
            if ((view.Items[index] as Student).Age ==22)
                return Brushes.Red;

            if (index % 2 == 0)
                return Brushes.Pink;
            else
                return Brushes.Blue;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }


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

        public int Age { get; set; }
    }
}

快看，效果出来了，这里要稍微解释下IValueConverter的使用步骤：

①：自定义一个类继承自IValueConverter，其中Convert方法的value 为绑定参数，parameter参数为绑定参数的附带值。


1   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

②：我们需要在xaml中引用并写入资源。


<Window.Resources>
        <local:ColorConvert x:Key="myConvert"/>
        <Style x:Key="item" TargetType="{x:Type ListViewItem}">
            <Setter Property="Background">
                <Setter.Value>
                    <Binding RelativeSource="{RelativeSource Self}" 
Converter="{StaticResource myConvert}"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>


③：最后也就是在Binding中使用Convert,wpf在绑定数据的时候会自动调用我们自定义的myConvert方法。
<Window.Resources>
        <local:ColorConvert x:Key="myConvert"/>
        <Style x:Key="item" TargetType="{x:Type ListViewItem}">
            <Setter Property="Background">
                <Setter.Value>
                    <Binding RelativeSource="{RelativeSource Self}" 
Converter="{StaticResource myConvert}"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

 

三： .net方法与控件的绑定

    在做wpf时，有时我们需要在xaml中绑定.net中的方法，当然这在实际开发中也是很常用的，不过方法必要由ObjectDataProvider来封装。

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication5"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ObjectDataProvider x:Key="Test" ObjectType="{x:Type local:Student}" MethodName="GetName">
        </ObjectDataProvider>
    </Window.Resources>
    <Grid>
        <TextBlock Text="{Binding Source={StaticResource ResourceKey=Test}, Mode=OneWay}"/>
    </Grid>
</Window>


namespace WpfApplication5
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class Student
    {
        //前台要引用的方法
        public string GetName()
        {
            return "一线码农";
        }
    }
}

 

四：wpf中的验证

    我们知道不管在什么体系架构中都有属于自己的一套验证体系，比如webform中的验证控件，mvc中的特性验证，当然wpf也是有的，为了

验证的灵活性，实际开发中我们用的比较多的还是”自定义验证“，其实只需要实现ValidationRule接口就行了，然后写上自定义的验证逻辑。

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:WpfApplication4"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:Student x:Key="student"/>
    </Window.Resources>
    <Grid>
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="97,54,0,0" Name="textBlock1" Text="姓名" VerticalAlignment="Top" />
        <TextBox DataContext="{StaticResource ResourceKey=student}" Height="23" HorizontalAlignment="Left" Margin="153,54,0,0" Name="textBox1" VerticalAlignment="Top" Width="120">
            <TextBox.Text>
                <Binding Path="Name" UpdateSourceTrigger="PropertyChanged">
                    <!-- 自定义的验证规格，当然可以是多个Check -->
                    <Binding.ValidationRules>
                        <local:NameCheck />
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>
            <TextBox.ToolTip>
                <!--将当前的错误信息显示在tooltip上-->
                <Binding RelativeSource="{RelativeSource Self}"  Path="(Validation.Errors)[0].ErrorContent"/>
            </TextBox.ToolTip>
        </TextBox>
    </Grid>
</Window>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication4
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class NameCheck : ValidationRule
    {
        public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
        {
            var name = Convert.ToString(value);

            //如果名字长度大于4则是非法
            if (name.Length > 4)
                return new ValidationResult(false, "名字长度不能大于4个长度！");

            return ValidationResult.ValidResult;
        }
    }

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

        public int Age { get; set; }
    }
}

 

同样这里也需要注意的就是：

①   实现ValidationRule接口，重写Validate方法，其中的逻辑，你懂的。



1 public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)

② 然后我们在需要验证的控件上追加Rule验证, 其中的UpdateSourceTrigger设定为字段改变时触发，当然可选值有很多...


<TextBox.Text>
                <Binding Path="Name" UpdateSourceTrigger="PropertyChanged">
                    <!-- 自定义的验证规格，当然可以是多个Check -->
                    <Binding.ValidationRules>
                        <local:NameCheck />
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>


③ 最后要将实体写入到验证控件的DataContext上，最后大功告成。



1   <TextBox DataContext="{StaticResource ResourceKey=student}" Height="23" HorizontalAlignment="Left" Margin="153,54,0,0" Name="textBox1" VerticalAlignment="Top" Width="120">



文章标签：
C#
关键词：
wpf入门
wpf数据绑定
一线码农
目录
相关文章
mingupup
|
4月前
|
C#
通过Demo学WPF—数据绑定（一）
通过Demo学WPF—数据绑定（一）
mingupup
42 1
长梦
|
3月前
|
C# 开发者 Windows
WPF 应用程序开发：一分钟入门
本文介绍 Windows Presentation Foundation (WPF)，这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架，支持 XAML 语言，方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例，并深入探讨常见问题及解决方案，包括数据绑定、控件样式与模板、布局管理等方面，帮助开发者高效掌握 WPF 开发技巧。
长梦
170 65
广州爱奇迪-伍华聪
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
138 15
mingupup
|
4月前
|
存储 开发框架 .NET
通过Demo学WPF—数据绑定（二）
通过Demo学WPF—数据绑定（二）
mingupup
41 1
土木林森
|
4月前
|
安全 C# 数据安全/隐私保护
WPF安全加固全攻略：从数据绑定到网络通信，多维度防范让你的应用固若金汤，抵御各类攻击
【8月更文挑战第31天】安全性是WPF应用程序开发中不可或缺的一部分。本文从技术角度探讨了WPF应用面临的多种安全威胁及防护措施。通过严格验证绑定数据、限制资源加载来源、实施基于角色的权限管理和使用加密技术保障网络通信安全，可有效提升应用安全性，增强用户信任。例如，使用HTML编码防止XSS攻击、检查资源签名确保其可信度、定义安全策略限制文件访问权限，以及采用HTTPS和加密算法保护数据传输。这些措施有助于全面保障WPF应用的安全性。
土木林森
60 0
土木林森
|
4月前
|
C# 开发者 Windows
全面指南：WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用，从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性，开发者需关注无障碍设计原则。这不仅是法律要求，更是社会责任，旨在让技术更人性化，惠及包括视障、听障及行动受限等用户群体。
土木林森
88 0
土木林森
|
4月前
|
数据处理 开发者 C#
WPF数据绑定实战：从零开始，带你玩转数据与界面同步，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，数据绑定是核心技能之一，它能实现界面元素与数据源的同步更新。本文详细介绍了WPF数据绑定的概念与实现方法，包括属性绑定、元素绑定及路径绑定等技术，并通过示例代码展示了如何创建数据绑定。通过数据绑定，开发者不仅能简化代码、提高可维护性，还能提升用户体验。无论初学者还是有经验的开发者，都能从中受益，更好地掌握WPF数据绑定技巧。
土木林森
97 0
土木林森
|
4月前
|
C# Windows IDE
WPF入门实战：零基础快速搭建第一个应用程序，让你的开发之旅更上一层楼！
【8月更文挑战第31天】在软件开发领域，WPF（Windows Presentation Foundation）是一种流行的图形界面技术，用于创建桌面应用程序。本文详细介绍如何快速搭建首个WPF应用，包括安装.NET Framework和Visual Studio、理解基础概念、创建新项目、设计界面、添加逻辑及运行调试等关键步骤，帮助初学者顺利入门并完成简单应用的开发。
土木林森
142 0
mingupup
|
4月前
|
C#
WPF/C#：数据绑定到方法
WPF/C#：数据绑定到方法
mingupup
44 0
步、步、为营
|
前端开发 C# 数据库
WPF MVVM系统入门-下
本文详细讲解WPF，MVVM开发，实现UI与逻辑的解耦。
步、步、为营
233 0