WPF MVVM下 ItemsControl条目命令绑定传参

xaml:

XML 复制代码
  <ItemsControl x:Name="itemsControl" ItemsSource="{Binding TreeViewModelForFlowList}">
      <!--  定义ItemsPanel,设置项之间的间距  -->
      <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
              <StackPanel Margin="10" Orientation="Vertical" />
          </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>

      <!--  定义项模板  -->
      <ItemsControl.ItemTemplate>
          <DataTemplate>
              <!--  每个项的外边框  -->
              <Border
                  Margin="0,2"
                  Padding="8"
                  BorderThickness="1"
                  CornerRadius="4">
                  <Grid>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*" />
                          <!--  第一个按钮占剩余空间  -->
                          <ColumnDefinition Width="Auto" />
                          <!--  第二个按钮自适应内容  -->
                          <ColumnDefinition Width="5" />
                          <!--  间距  -->
                          <ColumnDefinition Width="Auto" />
                          <!--  第三个按钮自适应内容  -->
                      </Grid.ColumnDefinitions>

                      <!--  第一个大按钮  -->
                      <telerik:RadButton
                          Grid.Column="0"
                          Height="40"
                          Margin="0,0,5,0"
                          Command="{Binding DataContext.FlowControlCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                          CommandParameter="{Binding}"
                          Content="{Binding FlowDescription}"
                          FontSize="14"
                          FontWeight="SemiBold"
                          Foreground="White" />

                      <!--  第二个小按钮  -->
                      <Button
                          Grid.Column="1"
                          Width="60"
                          Height="30"
                          Background="#6C757D"
                          Content="{Binding TreeViewActionModel}"
                          FontSize="12"
                          Foreground="White" />
                  </Grid>
              </Border>
          </DataTemplate>
      </ItemsControl.ItemTemplate>
  </ItemsControl>

界面:

命令方法:

cs 复制代码
  private ObservableCollection<TreeViewModelForFlow> _treeViewModelForFlowList;

 /// <summary>
 /// 按钮界面配置列表
 /// </summary>
 public ObservableCollection<TreeViewModelForFlow> TreeViewModelForFlowList
 {
     get => _treeViewModelForFlowList;
     set { this.RaiseAndSetIfChanged(ref _treeViewModelForFlowList, value); }
 }

public void FlowControl(TreeViewModelForFlow flow)
{
    
}

要点,直接绑定命令会找不到,直接写命令绑定是在ItemsControl的每个项中绑定的,就像按钮的Content绑定一样,绑定的是每个项的属性,但想要的效果实际上是在主ViewModel中,需要使用 RelativeSource 找到父级DataContext,即为主ViewModel。

或者使用 ElementName 绑定

XML 复制代码
Command="{Binding ElementName=itemsControl, Path=DataContext.FlowControlCommand}"
相关推荐
枫叶林FYL8 小时前
项目九:异步高性能爬虫与数据采集中枢 —— 基于 Crawl<sub>4</sub>AI 与 Playwright 的现代化数据采集平台 项目总览
爬虫·python·深度学习·wpf
她说彩礼65万13 小时前
WPF 多值转换器
wpf
无心水17 小时前
【分布式利器:金融级】金融级分布式架构开源框架全景解读
人工智能·分布式·金融·架构·开源·wpf·金融级框架
她说彩礼65万17 小时前
WPF 转换器
wpf
WPF工业上位机1 天前
匠心研智造,同心赴新程-WPF硬件通讯之串口&Socket
wpf
爱炸薯条的小朋友2 天前
C#由窗体原子表溢出造成的软件闪退,根本原因补充
开发语言·c#·wpf
晚风一隅2 天前
阿里云盘古存储系统:EB级分布式存储的架构革命与技术突破
wpf
步步为营DotNet3 天前
深挖.NET 11:.NET Aspire 在云原生应用状态管理的创新与实践
云原生·.net·wpf
He BianGu3 天前
【项目】WPF VisionMaster 4.0 项目介绍和开发文档
c#·wpf·流程图·开发文档·机器视觉·visionmaster
He BianGu3 天前
【笔记】在WPF中PriorityBinding的详细介绍
笔记·wpf