<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 |
|