WPF技术问询：如何实现椭圆点击切换透明度并关联IsRemoved属性

嘿，这事儿不难搞定！结合你现有的IsRemoved布尔属性和WPF的绑定/命令机制，咱们可以分几步实现点击切换透明度的效果：

1. 创建布尔转透明度的转换器 #

首先需要一个转换器，把IsRemoved的true/false转换成对应的透明度值（true对应0.2，false对应1）。在你的项目里添加一个转换器类：

using System;
using System.Globalization;
using System.Windows.Data;

public class BoolToOpacityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool isRemoved)
        {
            return isRemoved ? 0.2 : 1.0;
        }
        return 1.0; // 默认不透明
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException(); // 不需要反向转换
    }
}

记得在XAML的资源里注册这个转换器：

<Window.Resources>
    <!-- 你的其他转换器，比如FloatToCorConv -->
    <local:BoolToOpacityConverter x:Key="BoolToOpacityConv"/>
</Window.Resources>

2. 绑定椭圆的Opacity属性 #

把椭圆的Opacity绑定到IsRemoved属性，用上刚才的转换器：

<Ellipse Opacity="{Binding IsRemoved, Converter={StaticResource BoolToOpacityConv}}">
    <!-- 你原来的MultiBinding Fill代码保持不变 -->
    <Ellipse.Fill>
        <MultiBinding Converter="{StaticResource FloatToCorConv}">
            <Binding Path="FValue" Mode="OneWay" />
            <Binding Path="MValue" Mode="OneWay" />
            <Binding Path="GId" Mode="OneWay" />
            <Binding Source="{x:Static foo:Bar.Instance}" Path="IsLiked" Mode="OneWay" />
        </MultiBinding>
    </Ellipse.Fill>

3. 添加鼠标点击的交互触发器 #

在你现有的Interaction.Triggers里，新增一个MouseLeftButtonDown的事件触发器，绑定一个命令来切换IsRemoved的值：

<i:Interaction.Triggers>
    <!-- 你原来的MouseEnter和MouseLeave触发器保持不变 -->
    <i:EventTrigger EventName="MouseLeftButtonDown">
        <utils:InteractiveCommand Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.ToggleRemovedCommand}"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseEnter">
        <utils:InteractiveCommand Command="{Binding RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.MouseEnter}"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave">
        <utils:InteractiveCommand Command="{Binding RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.MouseLeave}"/>
    </i:EventTrigger>
</i:Interaction.Triggers>
</Ellipse>

4. 在ViewModel里实现命令和属性 #

确保你的ViewModel实现了INotifyPropertyChanged，并添加IsRemoved属性和切换命令：

private bool _isRemoved;
public bool IsRemoved
{
    get => _isRemoved;
    set
    {
        if (_isRemoved != value)
        {
            _isRemoved = value;
            OnPropertyChanged(nameof(IsRemoved));
        }
    }
}

public ICommand ToggleRemovedCommand { get; }

// 在ViewModel构造函数里初始化命令
public YourViewModel()
{
    ToggleRemovedCommand = new RelayCommand(() => IsRemoved = !IsRemoved);
}

// 实现INotifyPropertyChanged的OnPropertyChanged方法
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

如果你的项目里还没有RelayCommand，可以自己实现一个简单的版本：

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;

    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;

    public void Execute(object parameter) => _execute();

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

这样一来，每次点击椭圆时，ToggleRemovedCommand会把IsRemoved取反，通过转换器自动切换椭圆的透明度，完全不影响你原来的MultiBinding填充逻辑~

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