1

我的问题很简单：

如何使用 avalonia 实现叠加弹出效果？

我的意思是我想让包含我的 UI 元素的整个面板变暗一点（尝试了 opacity 属性，但它看起来不太好，OpacityMask 似乎只支持“透明”作为颜色，但我如果可能的话，想要半透明甚至模糊）。然后我想显示一个小弹出框。如果这是 CSS，我可以做一个position: absolute;，但是我不知道如何使用 avalonia 做到这一点。

为了可视化我的意思，这里有一些 Windows 窗体应用程序的屏幕截图，我能够在其中达到预期的效果：

我的 UI 没有叠加效果： 在此处输入图像描述

我的具有叠加效果的 UI： 在此处输入图像描述

正如您所看到的，整个 UI 已经变暗了一点，而背景仍然可见（使用 avaloniaOpacity属性时，效果不一样而且非常不一致，因为在给定位置上重叠的面板越多越少背景似乎受到了影响，Opacity而且看起来不太好。如果你愿意，我可以添加屏幕截图来说明稍后看起来有多糟糕。）

把它们加起来：

1. 我如何使面板的所有内容略微且一致地变暗（甚至模糊？），以使具有相同背景颜色的堆叠面板不会变得可见，只是因为透明度表现得很奇怪？

2. 什么是 avalonia 等价于 CSS position: absolute;，所以我可以将弹出窗口放在屏幕中间和其他所有内容之上？

4

1 回答 1

4

您可以使用与 WPF 中相同的技术：

<Window>
   <Grid>
      <DockPanel x:Name="YourMainContentGoesHere"/>
      <Border IsVisible="{Binding IsPopupVisible}" Background="#40000000">
          <YourPopupControlHere Width="200" Height="200"/>
      </Border>   
   </Grid>
</Window>

UnconfiguredGrid将显示元素相互叠加， semi-transparentBorder的背景将使其余内容变暗。

于 2020-06-04T13:38:53.507 回答