WinUI3 資料綁定 示範

安裝套件

先使用 NuGet 安裝 CommunityToolkit.Mvvm 套件，或是使用 .NET CLI 執行以下指令安裝

	
dotnet add package CommunityToolkit.Mvvm
    

在 C# 使用 CommunityToolkit.Mvvm 套件更簡單實現屬性變更通知 這篇中有簡單的示範使用 CommunityToolkit.Mvvm 套件，本篇一樣會使用到此套件來簡化程式碼，但實際不安裝也可以透過手動實作 INotifyPropertyChanged 介面達成和 CommunityToolkit.Mvvm 套件一樣的功能。

建立資料物件

建立一個 Settings 類別，繼承 ObservableObject (CommunityToolkit.Mvvm 套件)，放一個屬性 CanClickButton ，用來儲存按鈕可不可以被按下：

    
using CommunityToolkit.Mvvm.ComponentModel;

public class Settings : ObservableObject
{
    private bool _canClickButton = true;

    public bool CanClickButton
    {
        get => _canClickButton;
        set => SetProperty(ref _canClickButton, value);
    }
}
    

實例化資料物件和更新

實例化 Settings ，命名為 Settings 。在預設範本中會自動建立 myButton 這個按鈕，預設有綁定 myButton_Click 事件，我們在 myButton_Click 事件中增加一行程式碼，讓他點擊時就會變更 CanClickButton 狀態。

    
public sealed partial class MainWindow : Window
{
    public Settings Settings { get; set; }= new();

    public MainWindow()
    {
        this.InitializeComponent();
    }

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        Settings.CanClickButton = !Settings.CanClickButton;
        myButton.Content = $"{Settings.CanClickButton}";
    }
}
    

產生按鈕

本文的重點就在這裡，在 MainWindow.xaml 中建立一個 Button ，在 IsEnabled 屬性中填入: "{x:Bind Settings.CanClickButton,Mode=OneWay}"

    
<?xml version="1.0" encoding="utf-8"?>

<Window
    x:Class="AppTest1120.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"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
        <Button x:Name="myButton2" IsEnabled="{x:Bind Settings.CanClickButton,Mode=OneWay}">Button2</Button>
    </StackPanel>
</Window>
    

Mode 是代表資料綁定的方式， OneWay 代表單向綁定，還有 TwoWay 雙向綁定和 OneTime 綁定一次(預設)可以設定。

動態綁定

假設目前在 MainWindow.xaml 中已經有一個 myButton2 按鈕了，該如何動態的實現動態綁定呢？

    
<Button x:Name="myButton2">Button2</Button>
    

非常簡單：

    
myButton2.SetBinding(ButtonBase.IsEnabledProperty, new Binding()
{
    Source = Settings,
    Path = new PropertyPath(nameof(Settings.CanClickButton)),
    Mode = BindingMode.OneWay
});
    

參考資料：
GitHub - microsoft/WindowsAppSDK
Microsoft.Learn - UWP Data binding and MVVM
Microsoft.Learn - {x:Bind} markup extension