因为用到了代码绑定与 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);