将鼠标悬停在某个按钮上并在满足条件时突出显示多个控件（MVVM）

Question

我有两个按钮，其中绑定了命令。 如果用户将鼠标悬停在按钮1上，则只有在按钮1处于禁用状态时，它才会突出显示（边框颜色更改） textbox1和combobox1。

如果用户将鼠标悬停在BUTTON2更应突出（边框的颜色变化）仅当BUTTON2是禁用状态 TextBox2中，textbo3和combobox1 。

最后，不重视mouseleave上的控件。

这是纯粹的XAML，这是可能的，因为风格应该应用于其他控件，而不是触发事件的按钮本身，只有当条件满足？ 这怎么可能呢？

我在SO上发现了很多例子，但它们不适用于这个特定的情况。

我开始以编程方式做到这一点：

<Button Name="btnGenerateHash" 
     IsEnabled="{Binding VM.IsGenerateButtonEnabled}" 
     Command="{Binding GenerateCommand}" 
     Content="{Binding VM.GenerateHashButtonLabel}" Width="160"      
     Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10" > 
    <i:Interaction.Triggers> 
     <i:EventTrigger EventName="MouseEnter"> 
      <i:InvokeCommandAction Command="{Binding HighlightFieldsCommand}" CommandParameter="{Binding Source='generate,enter'}"></i:InvokeCommandAction> 
     </i:EventTrigger> 
     <i:EventTrigger EventName="MouseLeave"> 
      <i:InvokeCommandAction Command="{Binding HighlightFieldsCommand}" CommandParameter="{Binding Source='generate,leave'}"></i:InvokeCommandAction> 
     </i:EventTrigger> 
    </i:Interaction.Triggers> 
</Button> 

修改的版本：

<StackPanel Orientation="Vertical"> 
<CheckBox 
x:Name="EnableButton1CheckBox" 
Content="Enable Button1" 
Margin="4" 
/> 

<Grid Margin="4"> 

<Button Click="button1_Click" 
Content="Button1" 
x:Name="button1" 
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}"> 

</Button> 



<Border 
x:Name="Button1MouseDetector" 
Background="Transparent" 
> 
    <Border.Style> 
     <Style TargetType="Border"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Tag" Value="MouseOver" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Border.Style> 
</Border> 


    <!-- 
When button1 is disabled, it can't receive mouse events, so we create a 
coextensive control that's explicitly transparent. If it merely had no 
background specified, it wouldn't get mouse events either. 
--> 

</Grid> 


<Grid Margin="4"> 
<Button 
Content="Button2" 
x:Name="button2" 
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}"> 

</Button> 



<Border 
x:Name="Button2MouseDetector" 
Background="Transparent" 
> 
    <Border.Style> 
     <Style TargetType="Border"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Tag" Value="MouseOver" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Border.Style> 
</Border> 


    <!-- 
When button1 is disabled, it can't receive mouse events, so we create a 
coextensive control that's explicitly transparent. If it merely had no 
background specified, it wouldn't get mouse events either. 
--> 

</Grid>  

<TextBox 
Text="tb1" 
x:Name="tb1" 
Margin="4" 
> 
<TextBox.Style> 
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}"> 
    <Style.Triggers> 
     <MultiDataTrigger> 
      <MultiDataTrigger.Conditions> 
       <Condition 
       Binding="{Binding Tag, ElementName=Button1MouseDetector}" 
       Value="MouseOver" 
       /> 
       <Condition 
       Binding="{Binding IsEnabled, ElementName=button1}" 
       Value="False" 
       /> 
      </MultiDataTrigger.Conditions> 
      <Setter Property="BorderBrush" Value="Red" /> 
     </MultiDataTrigger> 
     <MultiDataTrigger> 
      <MultiDataTrigger.Conditions> 
       <Condition 
       Binding="{Binding Tag, ElementName=Button2MouseDetector}" 
       Value="MouseOver" 
       /> 
       <Condition 
       Binding="{Binding IsEnabled, ElementName=button2}" 
       Value="False" 
       /> 
      </MultiDataTrigger.Conditions> 
      <Setter Property="BorderBrush" Value="Green" /> 
     </MultiDataTrigger> 
    </Style.Triggers> 
</Style> 
</TextBox.Style> 
</TextBox> 
</StackPanel> 

Answer 1

这是局部的，但说明了如何

1. 公开一个可能禁用的鼠标悬停状态控制到其他控件上的XAML风格触发器，并且

2. 这些其他XAML触发器如何才能在两种不同条件都为真时才能执行某些操作。

XAML：

<StackPanel Orientation="Vertical"> 
    <CheckBox 
     x:Name="EnableButton1CheckBox" 
     Content="Enable Button1" 
     Margin="4" 
     /> 
    <Grid 
     Margin="4" 
     > 
     <Button 
      Content="Button1" 
      x:Name="button1" 
      IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}" 
      > 
     </Button> 
     <!-- 
     When button1 is disabled, it can't receive mouse events, so we create a 
     coextensive control that's explicitly transparent. If it merely had no 
     background specified, it wouldn't get mouse events either. 
     --> 
     <Border 
      x:Name="Button1MouseDetector" 
      Background="Transparent" 
      > 
      <Border.Style> 
       <Style TargetType="Border"> 
        <Style.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Tag" Value="MouseOver" /> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </Border.Style> 
     </Border> 
    </Grid> 

    <Button 
     Content="Button2" 
     x:Name="button2" 
     Margin="4" 
     > 
     <Button.Style> 
      <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"> 
       <Style.Triggers> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition 
           Binding="{Binding Tag, ElementName=Button1MouseDetector}" 
           Value="MouseOver" 
           /> 
          <Condition 
           Binding="{Binding IsEnabled, ElementName=button1}" 
           Value="False" 
           /> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="BorderBrush" Value="Red" /> 
        </MultiDataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button> 
</StackPanel>