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