WPF中根据ComboBox选项控制TextBlock永久/鼠标悬停显示

需求说明 #

• 选中ComboBox的Permanent选项时，TextBlock永久显示
• 选中Hover选项时，仅当Rectangle处于鼠标悬停（MouseOver）状态时，TextBlock才显示

完整实现代码 #

XAML 部分

<StackPanel HorizontalAlignment="Center">
    <ComboBox ItemsSource="{Binding Modes}" 
              SelectedItem="{Binding SelectedMode}"/>
    <Rectangle x:Name="RectangleControl" Width="20" Height="20" Fill="Yellow"/>
    <TextBlock x:Name="TextBlockControl" Text="ABC" Visibility="Collapsed">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <!-- 选中Permanent时永久显示 -->
                <DataTrigger Binding="{Binding SelectedMode}" Value="{x:Static local:Mode.Permanent}">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
                <!-- 选中Hover且Rectangle鼠标悬停时显示 -->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding SelectedMode}" Value="{x:Static local:Mode.Hover}"/>
                        <Condition Binding="{Binding IsMouseOver, ElementName=RectangleControl}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Visibility" Value="Visible"/>
                </MultiDataTrigger>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</StackPanel>

ViewModel 部分

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MainViewModel : INotifyPropertyChanged
{
    private Mode _selectedMode;

    public ObservableCollection<Mode> Modes { get; set; } = new() { Mode.Hover, Mode.Permanent };

    public Mode SelectedMode
    {
        get => _selectedMode;
        set
        {
            _selectedMode = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public enum Mode
{
    Hover,
    Permanent
}

代码说明 #

1. ComboBox绑定：通过SelectedItem="{Binding SelectedMode}"将选中的模式同步到ViewModel，确保UI选择能触发逻辑判断。
2. TextBlock默认状态：默认设置Visibility="Collapsed"，仅在满足触发条件时切换为可见。
3. DataTrigger：监听SelectedMode值，当选中Permanent时直接显示TextBlock。
4. MultiDataTrigger：同时校验两个条件——选中模式为Hover、Rectangle处于鼠标悬停状态，满足时才显示TextBlock。

内容的提问来源于stack exchange，提问作者Easdev