[WPF] DataBinding-進階篇(二)UserControl自定義屬性的綁定

 MainWindow中要與UserControl自定義的屬性作綁定使用方法和基礎篇內的一樣，

分為使Code綁定或在XAML內綁定。

在UserControl內，需要將內部原件的屬性再與自定義的屬性作綁定。

MainWindow原件屬性<=>自定義屬性<=>UserControl原件屬性

利用上一篇創建的UserControl中，

Label1使用Code作屬性綁定，

Label2使用XAML作屬性綁定。

由於在WPF中的屬性綁定必須是DependencyProperty，

所以必須將自定義屬性LabelValue註冊為DependencyProperty。

註冊方法(命名原則=>屬性+Property)：

    public object LabelValue
    {
        get => GetValue(LabelValueProperty);
        set => SetValue(LabelValueProperty, value);
    }

    public static readonly DependencyProperty LabelValueProperty =
        DependencyProperty.Register("LabelValue", typeof(object), typeof(UserControl1));

UserControl的Label1使用code綁定自定義屬性LabelValue

    public UserControl1()
    {
        InitializeComponent();
        Label1.SetBinding(ContentProperty, new Binding(nameof(LabelValue)) { Source = this });
        //上下為Binding的兩種建構式
        //DataContext = this;
        //Label1.SetBinding(Label.ContentProperty,nameof(LabelValue) );
    }

UserControl的Label2在XAML綁定自定義屬性LabelValue

    <Label x:Name="Label2"
        DataContext="{Binding RelativeSource={RelativeSource AncestorType=local:UserControl1}}"
        Content="{Binding LabelValue}"
        HorizontalAlignment="Stretch"
        Grid.Row="1" 
        VerticalAlignment="Stretch"
        VerticalContentAlignment="Center" 
        HorizontalContentAlignment="Center"
        FontSize="36" 
        Background="#FF60B646"
        Foreground="#FFFBF8F6"/>

執行結果：

[WPF] DataBinding-進階篇(一)創建UserControl

MainWindow：

MainWindow的XAML：

<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">
    <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"/>
        <local:UserControl1 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
    </Grid>
</Window>

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"
               Content="Label2"
               HorizontalAlignment="Stretch"
               Grid.Row="1" 
               VerticalAlignment="Stretch"
               VerticalContentAlignment="Center" 
               HorizontalContentAlignment="Center"
               FontSize="36" 
               Background="#FF60B646"
               Foreground="#FFFBF8F6"/>
        <Label x:Name="Label3"
               Content="Label3"
               HorizontalAlignment="Stretch"
               Grid.Row="2"
               VerticalAlignment="Stretch"
               VerticalContentAlignment="Center" 
               HorizontalContentAlignment="Center"
               FontSize="36"
               Background="#FF28389C"
               Foreground="#FFFBF8F6"/>
    </Grid>
</UserControl>

[WPF] DataBinding-基礎篇

 建置一個Label，再建置一個Slider當作輸入源。

XAML：

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label x:Name="Label1" 
               Content="Label1" 
               Grid.Row="0"
               Grid.Column="1"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               FontSize="36"/>
        <Slider x:Name="Slider1"
                Grid.Column="1" 
                HorizontalAlignment="Center"
                Grid.Row="1" 
                VerticalAlignment="Center"
                Width="200" 
                ValueChanged="Slider1_ValueChanged" SmallChange="1" Maximum="100"/>
  </Grid>

 WPF的DataBinding分兩種，一種是寫code，一種是寫在XAML，

最大的差異是XAML能即時預覽，使用code的只能在執行後才看得出效果。

使用Code：

      public MainWindow()
        {
            InitializeComponent();
            Label1.SetBinding(ContentProperty, new Binding("Value") { Source = Slider1 });
            //欲綁定的物件.SetBinding(欲綁定的屬性, new Binding(目標的屬性名稱){Source = 目標物件});      
            //PS.欲綁定的屬性必須是DependencyProperty(命名規則=>屬性+Property)
            //Binding物件有兩個建構式，另一個用法如下
            //Label1.SetBinding(ContentProperty, new Binding() { Source = Slider1, Path = new PropertyPath("Value") });      
        }

使用XAML：

 <Label x:Name="Label1" 
    Content="{Binding ElementName=Slider1, Path=Value}"
    Grid.Row="0"
    Grid.Column="1"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    FontSize="36"/>
    //欲綁定的屬性="{Binding ElementName=現有的物件, Path=物件上的屬性}"