如何使用 ToggleButton 更改 ListBoxItem 中的命令

Question

我想使用ToggleButton ( DevMode ) 更改命令，例如：

• 如果IsChecked為true執行命令 (1)
• 如果IsChecked為false執行命令 (2)

這是我的代碼：

<DockPanel>
   <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
      <ToggleButton x:Name="DevMode" HorizontalAlignment="Right" Width="120" Height="30" Content="Developer Mode"/>
   </StackPanel>

   <ListBox DockPanel.Dock="Bottom" ItemsSource="{Binding Tiles}" SelectedItem="{Binding SelectedTile}">
      <ListBox.ItemsPanel>
         <ItemsPanelTemplate>
            <UniformGrid Width="600" Height="600" RenderTransformOrigin="0.5, 0.5"
                             Rows="{Binding Path=GetRows}"
                             Columns="{Binding Path=GetCols}">
            </UniformGrid>
         </ItemsPanelTemplate>
      </ListBox.ItemsPanel>

      <ListBox.ItemTemplate>
         <DataTemplate>
            <Image Source="{Binding Path=ImagePath}">
               <i:Interaction.Triggers>
                  <i:EventTrigger EventName="MouseUp">
                     <i:InvokeCommandAction 
                                    <!--the command which I need to change-->
                        Command="{Binding DataContext.Command1, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"
                                    CommandParameter="{Binding DataContext.SelectedTile, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"/>
                  </i:EventTrigger>
               </i:Interaction.Triggers>
            </Image>
         </DataTemplate>
      </ListBox.ItemTemplate>
   </ListBox>
</DockPanel>

Answer 1

您可以將ToggleButton的IsChecked屬性綁定到您的視圖模型，但可能在視圖模型的上下文中給它一個比IsChecked更有意義的名稱。

<ToggleButton x:Name="DevMode" HorizontalAlignment="Right" Width="120" Height="30" Content="Developer Mode" IsChecked="{Binding IsChecked}"/>

由於您想根據標志執行兩個不同的命令或操作，您應該為此創建一個單獨的命令。 讓我們假設它是MyCommand 。 我認為您甚至不需要傳遞命令參數，因為無論如何都可以在您的視圖模型中使用SelectedTile屬性。

<i:InvokeCommandAction Command="{Binding DataContext.MyCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"
                       CommandParameter="{Binding DataContext.SelectedTile, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"/>

在您的視圖模型中，您可以根據IsChecked狀態決定執行哪種方法。 如果您有一個可以執行的委托，您也應該對其進行調整。

private bool CanExecuteMyCommand(object item)
{
   return IsChecked && Command1.CanExecute(item) || !IsChecked && Command2.CanExecute(item);
}

private void ExecuteMyCommand(object item)
{
   if (IsChecked && Command1.CanExecute(item))
      Command1.Execute(item);
   else if (!IsChecked && Command2.CanExecute(item))
      Command2.Execute(item);
}

請注意，代碼假定您也在其他地方重用Command1和Command2 。 如果沒有，您可以刪除它們，而只使用它們的Execute和CanExecute委托。

Answer 2

在不破壞 MVVM 的情況下執行此操作的最佳方法是使用具有如下數據觸發器的樣式：

<ListBox DockPanel.Dock="Bottom" ItemsSource="{Binding Tiles}" SelectedItem="{Binding SelectedTile}">
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Width="600" Height="600" RenderTransformOrigin="0.5, 0.5" Rows="{Binding Path=GetRows}" Columns="{Binding Path=GetCols}">
        </UniformGrid>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Style>
    <Style TargetType="ListBox">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Image Source="{Binding Path=ImagePath}">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseUp">
                                    <i:InvokeCommandAction Command="{Binding CommandB}"/>
                                    <!--Your other command-->
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Image>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=DevMode, Path=IsCecked}" Value="True">
                <!--Your trigger linked to the btn-->
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Image Source="{Binding Path=ImagePath}">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="MouseUp">
                                        <i:InvokeCommandAction Command="{Binding CommandA}"/>
                                        <!--Your command-->
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </Image>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ListBox.Style>