如何将ToggleSwitch与Button拆分到独立UserControl并保留数据绑定

要实现拆分同时保留原有绑定逻辑，核心是通过依赖属性在UserControl与外部之间建立数据通道，以下是具体实现步骤：

1. 创建ToggleSwitch的独立UserControl（ToggleControl） #

XAML 代码（ToggleControl.xaml） #

<UserControl
    x:Class="YourAppNamespace.ToggleControl"
    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">
    <!-- 内部封装ToggleSwitch -->
    <ToggleSwitch x:Name="InnerToggle" OffContent="Off" OnContent="On"/>
</UserControl>

IDL 定义（ToggleControl.idl） #

暴露可供外部绑定的IsOn属性：

namespace YourAppNamespace
{
    [default_interface]
    runtimeclass ToggleControl : Microsoft.UI.Xaml.Controls.UserControl
    {
        ToggleControl();
        Boolean IsOn{ get; set; };
    }
}

后台逻辑（ToggleControl.xaml.cs） #

实现依赖属性，同步内部ToggleSwitch的状态：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace YourAppNamespace
{
    public sealed partial class ToggleControl : UserControl
    {
        public ToggleControl()
        {
            this.InitializeComponent();
            // 监听内部Toggle状态变化，同步到外部属性
            InnerToggle.IsOnChanged += (s, e) => IsOn = InnerToggle.IsOn;
        }

        // 定义依赖属性，支持绑定通知
        public bool IsOn
        {
            get => (bool)GetValue(IsOnProperty);
            set => SetValue(IsOnProperty, value);
        }

        public static readonly DependencyProperty IsOnProperty =
            DependencyProperty.Register(nameof(IsOn), typeof(bool), typeof(ToggleControl), 
                new PropertyMetadata(false, (d, e) =>
                {
                    if (d is ToggleControl control)
                    {
                        control.InnerToggle.IsOn = (bool)e.NewValue;
                    }
                }));
    }
}

2. 创建Button的独立UserControl（ActionButton） #

XAML 代码（ActionButton.xaml） #

将Button的IsEnabled绑定到UserControl的自定义属性：

<UserControl
    x:Class="YourAppNamespace.ActionButton"
    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">
    <!-- 内部Button绑定到UserControl的属性 -->
    <Button IsEnabled="{x:Bind IsButtonEnabled, Mode=OneWay}" Content="Click Me"/>
</UserControl>

IDL 定义（ActionButton.idl） #

暴露可供外部绑定的IsButtonEnabled属性：

namespace YourAppNamespace
{
    [default_interface]
    runtimeclass ActionButton : Microsoft.UI.Xaml.Controls.UserControl
    {
        ActionButton();
        Boolean IsButtonEnabled{ get; set; };
    }
}

后台逻辑（ActionButton.xaml.cs） #

定义依赖属性，接收外部的状态值：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace YourAppNamespace
{
    public sealed partial class ActionButton : UserControl
    {
        public ActionButton()
        {
            this.InitializeComponent();
        }

        // 定义依赖属性，支持绑定通知
        public bool IsButtonEnabled
        {
            get => (bool)GetValue(IsButtonEnabledProperty);
            set => SetValue(IsButtonEnabledProperty, value);
        }

        public static readonly DependencyProperty IsButtonEnabledProperty =
            DependencyProperty.Register(nameof(IsButtonEnabled), typeof(bool), typeof(ActionButton), new PropertyMetadata(false));
    }
}

3. 在MainWindow中组合控件并绑定 #

MainWindow.xaml #

引用两个UserControl，通过x:Bind建立和原逻辑一致的绑定关系：

<StackPanel xmlns:local="using:YourAppNamespace">
    <local:ToggleControl x:Name="MyToggleControl"/>
    <local:ActionButton IsButtonEnabled="{x:Bind MyToggleControl.IsOn, Mode=OneWay}"/>
</StackPanel>

关键说明 #

• 替换YourAppNamespace为你项目的实际命名空间
• 依赖属性是实现跨控件绑定的核心，它自带属性变更通知机制，确保状态同步

内容的提问来源于stack exchange，提问作者Tom Huntington