WPF设计标准学习记录20

发布于:2025-04-12 ⋅ 阅读:(36) ⋅ 点赞:(0)
<Grid>
    <Button Content="打开"
            Click="Button_Click" 
            Command="{Binding OpenCommand}" 
            CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</Grid>
元素类型/属性 属性值/技术说明 功能解析与扩展说明
Button元素 - WPF基础交互控件,支持事件驱动与命令绑定双模式
Content "打开" 显示按钮文本(支持任意UIElement内容,如StackPanel复合布局)
Click "Button_Click" 直接绑定后台代码事件处理器(违反MVVM模式,但适合快速原型开发)
Command {Binding OpenCommand} 绑定ViewModel的ICommand实现(推荐MVVM解耦方案)
CommandParameter {Binding RelativeSource={RelativeSource Mode=Self}} 将按钮自身作为参数传递(用于动态获取控件状态或上下文)
RelativeSource Mode=Self 绑定源指向当前控件实例(常用于获取自身属性或传递给命令)
graph TD 
    A[用户点击按钮] --> B{事件处理模式}
    B -->|触发Click事件| C[执行Button_Click方法]
    B -->|触发Command绑定| D[调用OpenCommand.Execute]
 
    subgraph 事件驱动模式 
        C --> C1[访问后台代码逻辑]
        C1 --> C2[直接操作UI元素]
    end 
 
    subgraph MVVM模式 
        D --> D1[ViewModel接收参数]
        D1 --> D2[执行业务逻辑]
        D2 --> D3[通过INotifyPropertyChanged更新UI]
    end 
 
    A --> E[参数传递]
    E --> F[CommandParameter=按钮实例]
    F -->|ViewModel| G[获取控件属性: IsEnabled/DataContext等]
public class RelayCommand : ICommand
{
    public event EventHandler CanExecuteChanged;
    
    private Action action;
    private Action<object> objectAction;
    public RelayCommand(Action action)
    {
        this.action = action;
    }
 
    public RelayCommand(Action<object> objectAction)
    {
        this.objectAction = objectAction;
    }
    public bool CanExecute(object parameter)
    {
        return true;
    }
 
    public void Execute(object parameter)
    {
        action?.Invoke();
        objectAction?.Invoke(parameter);
    }
}
// 实现ICommand接口的命令中继类,用于将UI操作与业务逻辑解耦 
public class RelayCommand : ICommand 
{
    // 当命令的可执行状态改变时触发事件(需要手动调用触发)
    public event EventHandler CanExecuteChanged;
    
    // 存储无参数和有参数的动作委托 
    private Action action;          // 无参数执行委托 
    private Action<object> objectAction; // 带参数执行委托 
 
    // 构造函数:接收无参数Action委托 
    public RelayCommand(Action action)
    {
        this.action  = action;  // 初始化无参数命令 
    }
 
    // 构造函数:接收带参数的Action<object>委托 
    public RelayCommand(Action<object> objectAction)
    {
        this.objectAction  = objectAction;  // 初始化带参数命令 
    }
 
    // 判断命令是否可执行(默认始终返回true)
    public bool CanExecute(object parameter)
    {
        return true;  // 实际开发中可添加业务逻辑判断条件 
    }
 
    // 执行命令的核心方法 
    public void Execute(object parameter)
    {
        // 使用空条件运算符安全调用委托 
        action?.Invoke();              // 执行无参数委托 
        objectAction?.Invoke(parameter); // 执行带参数委托 
        
        // 注意:同时存储两个委托类型可能引发意外行为 
        // 建议:应该分开为两个独立命令类,或使用单一委托类型 
    }
}

<StackPanel VerticalAlignment="Center">
    <Button Width="100" Height="30" Content="打开" Command="{Binding OpenCommand}" />
    <Button Width="100" Height="30" 
            Content="打开" 
            Command="{Binding OpenParamCommand}" 
            CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</StackPanel>

 

元素类型/属性 属性值/技术说明 功能解析与扩展说明
StackPanel - 垂直布局容器,子元素按顺序排列
VerticalAlignment Center 容器内容垂直居中
Button(第一个) - 基础命令按钮,无参数传递
Width 100 固定按钮宽度
Height 30 固定按钮高度
Content "打开" 按钮显示文本
Command {Binding OpenCommand} 绑定ViewModel的OpenCommand命令(无参数)
Button(第二个) - 支持参数传递的高级按钮
Width 100 与第一个按钮对齐
Height 30 高度一致性设计
Content "打开" 同功能按钮复用文本
Command {Binding OpenParamCommand} 绑定带参数的OpenParamCommand命令
CommandParameter

网站公告

今日签到

点亮在社区的每一天
去签到