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

Question

我有两个绑定了命令的按钮。 如果用户将鼠标悬停在 button1 上，它应该突出显示（边框颜色更改） textbox1 和 combobox1 仅当 button1 处于禁用状态时。

如果用户将鼠标悬停在按钮2上，它应该突出显示（边框颜色更改） textbox2、textbo3 和 combobox1 仅当 button2 处于 禁用状态时。

最后取消突出显示 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>