8天入門wpf—— 第五天 數據綁定

     

       在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參數為綁定參數的附帶值。

  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}" 
 7 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方法，其中的邏輯，你懂的。

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上，最后大功告成。

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