建立一個ViewModel並自定義屬性取代UserControl中的自定義屬性
ViewModel.cs：
class ViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private int _labelValue; public int LabelValue { get => _labelValue; set { _labelValue = value; Console.WriteLine(_labelValue); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("LabelValue")); } } }
INotifyPropertyChanged主要作用是通蜘UI介面對應的屬性值有改變了。
MainWindow中Slider的Value<=>ViewModel的LabelValue<=>UserControl中Label3的Content
在MainWindow要綁定ViewModel屬性方式跟綁定UserControl的屬性一樣，
分為使用code綁定或是在XAML內綁定。
MainWindow使用code綁定ViewModel屬性：
public MainWindow() { InitializeComponent(); DataContext = new ViewModel(); Slider1.SetBinding(Slider.ValueProperty, new Binding("LabelValue")); }
MainWindow的XAML內綁定ViewModel屬性：
<Window x:Class="WpfApp3.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:WpfApp3" mc:Ignorable="d" Title="MainWindow" Height="400" Width="300"> <Window.DataContext> <local:ViewModel/> </Window.DataContext> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Slider x:Name="Slider1" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Width="250" ValueChanged="Slider1_ValueChanged" SmallChange="1" Maximum="100" Value="{Binding LabelValue}"/> <local:UserControl1 x:Name="UserControl_Labels" HorizontalAlignment="Center" VerticalAlignment="Center" LabelValue1="{Binding ElementName=Slider1, Path=Value}" LabelValue2="{Binding ElementName=Slider1, Path=Value}"/> </Grid> </Window>
以上這兩個方式是等效的。
設定DataContext為ViewModel，然後將Slider1的Value與ViewModel的LabelValue綁定。
UserControl用code做綁定：
public partial class UserControl1 : UserControl { public UserControl1() { InitializeComponent(); Label1.SetBinding(ContentProperty, new Binding(nameof(LabelValue1)) { Source = this }); Label3.SetBinding(ContentProperty, new Binding() {Path = new PropertyPath(nameof(ViewModel.LabelValue))}); //這邊不需設定DataContext，會自動參考到ViewModel的LabelValue //但如果在這或是XAML內有設定全域性的DataContext，則這裡的綁定會失效。 } public object LabelValue1 { get => GetValue(LabelValue1Property); set => SetValue(LabelValue1Property, value); } public static readonly DependencyProperty LabelValue1Property = DependencyProperty.Register("LabelValue1", typeof(object), typeof(UserControl1)); public object LabelValue2 { get => (object)GetValue(LabelValue2Property); set => SetValue(LabelValue2Property, value); } public static readonly DependencyProperty LabelValue2Property = DependencyProperty.Register("LabelValue2", typeof(object), typeof(UserControl1), new PropertyMetadata(3.0)); }
UserControl的XAML內做綁定：
<UserControl x:Class="WpfApp3.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label x:Name="Label1"
Content="Label1"
HorizontalAlignment="Stretch"
Grid.Row="0"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
FontSize="36"
Background="#FFAA2525"
Foreground="#FFFBF8F6"/>
<Label x:Name="Label2"
d:DataContext="{d:DesignInstance Type=local:UserControl1}"
DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:UserControl1}}"
Content="{Binding LabelValue2}"
HorizontalAlignment="Stretch"
Grid.Row="1"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
FontSize="36"
Background="#FF60B646"
Foreground="#FFFBF8F6"/>
<Label x:Name="Label3"
d:DataContext="{d:DesignInstance Type=local:ViewModel}"
Content="{Binding LabelValue}"
HorizontalAlignment="Stretch"
Grid.Row="2"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
FontSize="36"
Background="#FF28389C"
Foreground="#FFFBF8F6">
</Label>
</Grid>
</UserControl>
這比較不一樣的是 d:DataContext="{d:DesignInstance Type=local:UserControl1}"
以及d:DataContext="{d:DesignInstance Type=local:ViewModel}"，
這兩行的效果是在設計階段引用參考實例，
在UI上顯示綁定後的值，如果是數值就顯示數字、如果是物件就顯示物件名稱。
PS.Label3不需設定DataContext。
DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:UserControl1}}"
屬於區域性的DataContext設定，如果設定全域性的DataContext會影響Label3綁定ViewModel的LabelValue。
PS.Label2綁定UserControl的LabelValue2，而Label3綁定的是ViewModel的LabelValue。
簡單說就是Label2是綁定自身屬性，Label3是綁定其他物件的屬性。
如果是參考單一ViewModel屬性或是自身屬性的話，只需設定全域性的DataContext。
