WPF MVVM基礎教程（五）RelativeSource屬性綁定_2

RelativeSource屬性綁定

• 介紹
• RelativeSource屬性介紹
• • RelativeSource的Mode屬性有四種模式：
• 四種模式用法
• • Self模式
  • FindAncestor模式
  • • 使用規則：
  • TemplatedParent模式
  • PreviousData模式
• 特殊用法
• • • 綁定到其他ViewModel上的命令

介紹

RelativeSource 是一個標記擴展，擴展描述相對于綁定目標位置的綁定源位置。

RelativeSource 作用是改變綁定指向的源，默認使用綁定的源是對應的DataContext對象中的屬性，如果想要綁定源為其他元素，比如自身、其他父級控件、其他ViewModel，就需要用RelativeSource 進行標記。它表示在綁定表達式中引用另一個元素的屬性。它使開發人員可以根據元素的位置和類型來查找綁定源。

RelativeSource屬性介紹

屬性解釋

AncestorLevel	以 FindAncestor 模式獲取或設置要查找的上級級別。 使用 1 指示最靠近綁定目標元素的項。
AncestorType	指定查找的上級節點的類型。
Mode	獲取或設置 RelativeSourceMode 值，該值描述相對于綁定目標的位置的綁定源的位置。Mode屬性是一個RelativeSourceMode 枚舉
PreviousData	一個靜態值，效果等同于 Mode=PreviousData。該值用于返回為 RelativeSource 模式構造的 PreviousData。
Self	一個靜態值，效果等同于 Mode=Self。該值用于返回為 RelativeSource 模式構造的 Self。
TemplatedParent	一個靜態值，效果等同于 Mode=TemplatedParent。該值用于返回為 RelativeSource 模式構造的 TemplatedParent。

RelativeSource的Mode屬性有四種模式：

RelativeSource屬性有四種模式：

FindAncestor：查找指定類型的父元素，和 AncestorType 或 AncestorLevel 一起使用。

PreviousData：使用數據提供程序中的前一個數據項。

Self：使用當前元素。

TemplatedParent：查找元素的模板父級。

四種模式用法

Self模式

綁定控件本身的屬性

示例：

實現正方形控件（寬和高相等），通過RelativeSource 實現，使用Self將Width綁定到Height上。

Width="{Binding RelativeSource={RelativeSource Self}, Path=Height}"//或者 Width="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Height}"

控件的Xaml代碼：

<ButtonWidth="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Height}"Height="100"Margin="40,67,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Content="Button"/>

效果：

只需要修改Height值，Width就會跟著變化

FindAncestor模式

綁定控件父元素及更上一級的元素，使用Mode=FindAncestor和AncestorType 、 AncestorLevel配合實現。

使用規則：

必須要設置AncestorType 屬性，只要設置了Mode=FindAncestor 和 AncestorLevel值，就必須要設置AncestorType 屬性，否則會報錯。

如果未顯式設置屬性 Mode，則設置AncestorType 或 AncestorLevel屬性會將屬性值隱式鎖定 Mode 為 FindAncestor。（Mode=FindAncestor可省略）

AncestorLevel設置為1就是默認找到的第一個指定類型的父元素，2就是第二個

綁定成功的還有一點，對應父元素相關屬性必須有值，如果對應父元素對應屬性無值，則無效果。

如下幾種定義效果是相同的

RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType=Grid} RelativeSource={RelativeSource AncestorLevel=1, AncestorType=Grid} RelativeSource={RelativeSource AncestorType=Grid}

示例：

通過設置一個Button的Width和不同父級布局控件的寬度綁定來演示FindAncestor模式

當前界面代碼：

<Windowx:Class="WpfRelativeSourceExample.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:local="clr-namespace:WpfRelativeSourceExample"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="MainWindow"Width="800"Height="450"mc:Ignorable="d"><Grid><StackPanel Background="LightGray"><GridWidth="768"Height="380"Margin="0,27,0,0"HorizontalAlignment="Left"Background="Gray"><GridWidth="396"Height="344"Margin="0,36,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Linen"><Canvas Margin="0,53,173,0" Background="DarkCyan" ><ButtonCanvas.Top="56"Height="100"HorizontalAlignment="Center"VerticalAlignment="Top"Content="Button" /></Canvas></Grid></Grid></StackPanel></Grid> </Window>

將Button的Width設置和Canvas一樣，增加下面的綁定

Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}}"

此時并未生效

因為規則4中說明對應Canvas未定義，對應的Width屬性，所有無法生效，只要對應Canvas設置了Width屬性，RelativeSource就生效了。

然后依次跟上面兩級的Grid的綁定

第一級：

<ButtonCanvas.Top="56"Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"Height="100"HorizontalAlignment="Center"VerticalAlignment="Top"Content="Button" />//等效 <ButtonCanvas.Top="56"Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType=Grid}}"Height="100"HorizontalAlignment="Center"VerticalAlignment="Top"Content="Button" />

第二級：

<ButtonCanvas.Top="56"Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=2, AncestorType=Grid}}"Height="100"HorizontalAlignment="Center"VerticalAlignment="Top"Content="Button" />

TemplatedParent模式

TemplatedParent模式主要用在重寫或者定義控件模板Template中，用于將模板中的屬性和控件本身的屬性綁定，類似TemplateBinding，可以對TemplateBinding進行擴展，利用Converter實現一些TemplateBinding不支持的屬性綁定

示例：

<ButtonMargin="49,60,0,0"Padding="10"HorizontalAlignment="Left"VerticalAlignment="Top"Content="Button"><Button.Style><Style TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}"><ContentPresenter Margin="{Binding Path=Padding, RelativeSource={RelativeSource TemplatedParent}}" Content="{TemplateBinding Content}" /></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button>

PreviousData模式

PreviousData可以在數據綁定表達式中使用前一個數據項。通常在ItemsControl中使用，用于根據前一個項的屬性計算當前項的屬性。PreviousData只能在ItemsControl或其派生類中使用。

使用場景，暫無示例

特殊用法

使用RelativeSource改變綁定的ViewModel對象。在嵌套的ViewModel中，命令一定要寫在對應的VIewModel（或者Model）中才能實現綁定，這時可以通過RelativeSource綁定到其父級的ViewModel中的命令上。

比如在DataGrid列中有按鈕事件，就必須對應的命令需要寫在對應的Model中增加命令

正常下一個DataGird（在用戶控件UserManageUC.xaml中）

<DataGridWidth="605"Height="341"Margin="59,74,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"AutoGenerateColumns="False"ItemsSource="{Binding Users}"><DataGrid.Columns><DataGridTextColumn Binding="{Binding Id}" Header="序號" /><DataGridTextColumn Binding="{Binding Name}" Header="姓名" /><DataGridTextColumn Binding="{Binding Age}" Header="年齡" /><DataGridTemplateColumn Header="操作"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Button Command="{Binding ModifyCmd}" Content="修改" /><Button Content="刪除" /></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid>

對應的數據模型UserModel

public class UserModel{public int Id { get; set; }public string Name { get; set; }public int Age { get; set; }public CommandBase ModifyCmd{get{return new CommandBase(o =>{MessageBox.Show($"UserModel Modify:{Name}");});}}} }

在對應的ViewModel創建集合并初始化

public class UserManageUCViewModel : ViewModelBase{public ObservableCollection<UserModel> Users{ get; set; }public UserManageUCViewModel(){Users= new ObservableCollection<UserModel>();Users.Add(new UserModel() { Id=1,Name="張三",Age=11});Users.Add(new UserModel() { Id=2,Name="李四",Age=22});}}

此時效果，正常使用命令

綁定到其他ViewModel上的命令

在UserManageUCViewModel 上添加命令

public CommandBase ModifyCmd {get{return new CommandBase(o =>{var user=o as UserModel;MessageBox.Show($"UserManageUCViewModel Modify:{user.Name}");});} }

改變按鈕Command的綁定，使用RelativeSource的FindAncestor模式RelativeSource={RelativeSource AncestorType=local:UserManageUC}幫綁定對象改為UserManageUC用戶控件，然后目標改為DataContext.ModifyCmd，然后增加CommandParameter，將該行綁定的數據作為命令參數傳入

<ButtonCommand="{Binding DataContext.ModifyCmd, RelativeSource={RelativeSource AncestorType=local:UserManageUC}}"CommandParameter="{Binding}"Content="修改" />

效果：