如何将命令绑定到 ItemsControl 的模板答案

【问题标题】：How to bind a Command to ItemsControl's template如何将命令绑定到 ItemsControl 的模板
【发布时间】：2020-12-21 08:23:03
【问题描述】：

我必须创建一个如下所示的ItemsControl 和一个带有点击命令的视图模型。如何将命令绑定到其模板？

<ItemsControl Name="connStatusList" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#e0e0e0" Margin="0,0,0,0"  MinHeight="325" Width="1700" ItemsSource="{Binding }"  >
   <ItemsControl.Template>
      <ControlTemplate  TargetType="{x:Type ItemsControl}">
         <Border>
            <ItemsPresenter/>
         </Border>
      </ControlTemplate>
   </ItemsControl.Template>
   <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <WrapPanel  Name="wp" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Background="#ededed"  />
      </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
   <ItemsControl.ItemTemplate>
      <DataTemplate>
         <WrapPanel Width="135" Height="160" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,1,0,0" >
            <WrapPanel Background="{StaticResource connRectangle}"  Width="133" Height="128">
               <Image Source="{Binding WifiImage}" Width="70" Height="53"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,2,0,0"/>
               <Image Source="{Binding ConnectedImage}"  Width="43" Height="63"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="45,7,0,0" />
            </WrapPanel>
            <WrapPanel>
               <Label Content="{Binding ItemNO}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="35,0,0,0" FontWeight="Bold" FontSize="18"></Label>
               <Label Content="{Binding Connected}" Name="lblconnected" Visibility="Collapsed"></Label>
            </WrapPanel>
         </WrapPanel>
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

【问题讨论】：

您可能错过了填写您的ItemsControl 的属性ItemsSource="{Binding }。您的 View 的 DataContext 应该具有要绑定到 ItemsSource DP 的属性，并且它应该是您的 ViewModel 的 ObservableCollection，它应该具有类似 WifiImage 或 ConnectedImage 的属性
项目视图模型是否包含例如WifiImage 还包含ClickCommand?

标签： wpf xaml mvvm command

【解决方案1】：

由于您实际上是在创建按钮列表，因此请在模板中使用Button 来绑定命令。我假设您的命令属性称为ClickCommand。您可能需要调整按钮的样式，例如处于鼠标悬停状态以适合您的应用程序。

<DataTemplate>
   <Button Command="{Binding ClickCommand}">
      <Button.Content>
         <WrapPanel Width="135" Height="160" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,1,0,0" >
            <WrapPanel Background="{StaticResource connRectangle}"  Width="133" Height="128">
               <Image Source="{Binding WifiImage}" Width="70" Height="53"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,2,0,0"/>
               <Image Source="{Binding ConnectedImage}"  Width="43" Height="63"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="45,7,0,0" />
            </WrapPanel>
            <WrapPanel>
               <Label Content="{Binding ItemNO}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="35,0,0,0" FontWeight="Bold" FontSize="18"></Label>
               <Label Content="{Binding Connected}" Name="lblconnected" Visibility="Collapsed"></Label>
            </WrapPanel>
         </WrapPanel>
      </Button.Content>
   </Button>
</DataTemplate>

或者，您可以使用Microsoft.Xaml.Behaviors.Wpf NuGet 包中的事件触发器。使用这种方法，ClickCommand 会在鼠标按下时被调用，它不会改变任何样式。

<DataTemplate>
   <WrapPanel Width="135" Height="160" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,1,0,0">
      <b:Interaction.Triggers>
         <b:EventTrigger EventName="MouseLeftButtonUp">
            <b:InvokeCommandAction Command="{Binding ClickCommand}"/>
         </b:EventTrigger>
      </b:Interaction.Triggers>
      <WrapPanel Background="{StaticResource connRectangle}"  Width="133" Height="128">
         <Image Source="{Binding WifiImage}" Width="70" Height="53"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="35,2,0,0"/>
         <Image Source="{Binding ConnectedImage}"  Width="43" Height="63"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="45,7,0,0" />
      </WrapPanel>
      <WrapPanel>
         <Label Content="{Binding ItemNO}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="35,0,0,0" FontWeight="Bold" FontSize="18"></Label>
         <Label Content="{Binding Connected}" Name="lblconnected" Visibility="Collapsed"></Label>
      </WrapPanel>
   </WrapPanel>
</DataTemplate>

【讨论】：