Avalonia 自动为元素设置一个蒙板

因为用到了代码绑定与 ReactieUi 作为例子记录一下
就是在指定的元素的后面自动添加一个占用全部空间的 Border

        // 为当前元素设置背景蒙板,当前元素可见时,背景蒙板可见, 点击背景蒙板时,关闭当前元素
        // 控制 IsOpen 属性控制当前元素是否可见
        // 下面代码对蒙板对象的的 Opcity 与 IsVisible 使用 ReactieUi 绑定与 IsOpen (使用 WhenAnyValue)
        //   例子: [!OpacityProperty] = this.WhenAnyValue(it => it.IsOpen).Select(it => it ? 0.3d : 0d).ToBinding(), // 根据 IsOpen 绑定透明度

        // 判断当前元素的父级是否是 grid
        if (this.Parent is not Grid grid)
        {
            return;
        }

        // 创建背景蒙板
        Border border = new()
        {
            Background = new SolidColorBrush(Colors.Black),
            IsVisible = this.IsOpen, // 将背景蒙板可见与 IsOpen 绑定, 当前元素可见时,背景蒙板可见
            ZIndex = this.ZIndex - 1, // 将背景蒙板设置为永远都在当前元素后面一层
            [!OpacityProperty] = this.WhenAnyValue(it => it.IsOpen).Select(it => it ? 0.3d : 0d).ToBinding(), // 根据 IsOpen 绑定透明度
            [!IsVisibleProperty] = this.WhenAnyValue(it => it.IsOpen).ToBinding(), // 根据 IsOpen 绑定可见性
            Transitions =
            [ // 这里针对透明度设置了一个动画, 让透明度动态变化 
                new DoubleTransition
                {
                    Duration = TimeSpan.FromSeconds(0.3),
                    Property = OpacityProperty,
                },
            ],
        };

        // 这里设置点击了蒙板,控制 IsOpen 属性,从而关闭当前元素
        border.PointerPressed += (_, _) => { this.IsOpen = false; };

        // 设置背景蒙板占用所有空间
        border.SetValue(Grid.RowProperty, 0);
        border.SetValue(Grid.ColumnProperty, 0);

        if (grid.RowDefinitions.Count > 0)
        {
            border.SetValue(Grid.RowSpanProperty, grid.RowDefinitions.Count);
        }

        if (grid.ColumnDefinitions.Count > 0)
        {
            border.SetValue(Grid.ColumnSpanProperty, grid.ColumnDefinitions.Count);
        }

        // 将背景蒙板添加到父级 grid 中
        grid.Children.Add(border);
上一篇
下一篇