WPF UserControl的Command按钮Click绑定实现咨询及代码解析

Alright, let's walk through how to properly set up command binding for your WPF UserControl's button. I'll break this down step by step to fit with your existing code structure:

First, you need to define Command and optional CommandParameter dependency properties in your UserControl's code-behind. These properties let external views bind to the command, and also let your internal button reference it.

Here's the updated code-behind for your Header control:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace MyApp
{
    public partial class Header : UserControl
    {
        // Existing LabelContent dependency property (I assume you already have this)
        public static readonly DependencyProperty LabelContentProperty =
            DependencyProperty.Register(nameof(LabelContent), typeof(string), typeof(Header));

        public string LabelContent
        {
            get => (string)GetValue(LabelContentProperty);
            set => SetValue(LabelContentProperty, value);
        }

        // New Command dependency property for button binding
        public static readonly DependencyProperty CommandProperty =
            DependencyProperty.Register(nameof(Command), typeof(ICommand), typeof(Header));

        public ICommand Command
        {
            get => (ICommand)GetValue(CommandProperty);
            set => SetValue(CommandProperty, value);
        }

        // Optional: CommandParameter to pass data with the command
        public static readonly DependencyProperty CommandParameterProperty =
            DependencyProperty.Register(nameof(CommandParameter), typeof(object), typeof(Header));

        public object CommandParameter
        {
            get => GetValue(CommandParameterProperty);
            set => SetValue(CommandParameterProperty, value);
        }

        public Header()
        {
            InitializeComponent();
        }
    }
}

WPF doesn't include a built-in implementation of ICommand for simple use cases, so you'll need a basic RelayCommand class to connect your view model logic to the button. If you're using a framework like Prism or MVVM Light, you can skip this and use their built-in command types instead.

Here's a standard RelayCommand implementation:

using System;
using System.Windows.Input;

namespace MyApp
{
    public class RelayCommand : ICommand
    {
        private readonly Action<object> _executeAction;
        private readonly Predicate<object> _canExecutePredicate;

        public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
        {
            _executeAction = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecutePredicate = canExecute;
        }

        public event EventHandler CanExecuteChanged
        {
            add => CommandManager.RequerySuggested += value;
            remove => CommandManager.RequerySuggested -= value;
        }

        public bool CanExecute(object parameter)
        {
            return _canExecutePredicate?.Invoke(parameter) ?? true;
        }

        public void Execute(object parameter)
        {
            _executeAction(parameter);
        }
    }
}

Now, update your XAML to include the button and bind it to the UserControl's Command and CommandParameter properties. I'll assume you want the label and button side by side, so I've added a Grid with columns:

<UserControl x:Class="MyApp.Header"
             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"
             mc:Ignorable="d"
             d:DesignHeight="40" d:DesignWidth="300"
             DataContext="{Binding Mode=OneWay, RelativeSource={RelativeSource Self}}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        
        <!-- Your existing Label bound to LabelContent -->
        <Label Content="{Binding LabelContent}" 
               VerticalAlignment="Center" 
               Margin="8,0"/>
        
        <!-- Button bound to the UserControl's Command properties -->
        <Button Grid.Column="1"
                Content="Action"
                Command="{Binding Command}"
                CommandParameter="{Binding CommandParameter}"
                Margin="8,0"
                Padding="8,2"/>
    </Grid>
</UserControl>

Finally, when you use your Header control in a parent view (like MainWindow), you can bind it to a command in your view model.

First, create a view model with your command logic:

using System.Windows;
using System.Windows.Input;

namespace MyApp
{
    public class MainViewModel
    {
        public ICommand HeaderActionCommand { get; }

        public MainViewModel()
        {
            HeaderActionCommand = new RelayCommand(ExecuteHeaderAction);
        }

        private void ExecuteHeaderAction(object parameter)
        {
            // Replace this with your actual command logic
            MessageBox.Show("Header button clicked! Parameter: " + parameter);
        }
    }
}

Then, in your parent window's XAML, set the data context and bind the command:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MyApp"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    
    <Grid>
        <!-- Use the Header control and bind its Command property -->
        <local:Header LabelContent="My Application Header"
                      Command="{Binding HeaderActionCommand}"
                      CommandParameter="SomeOptionalData"/>
    </Grid>
</Window>

• Using dependency properties for Command ensures proper WPF binding behavior, including change notifications and support for parent view bindings.
• The RelayCommand acts as a bridge between your view model's business logic and the WPF button's command system.
• By setting the UserControl's DataContext to itself, you avoid conflicts with the parent view's data context while still allowing internal element bindings.

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