Avalonia UI 弹出窗口覆盖

Question

我的问题很直接：

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

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

为了形象化我的意思，这里有一些 Windows 表单应用程序的屏幕截图，我可以在其中实现预期的效果：

我的UI无叠加效果：

我的UI有叠加效果：

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

总结一下：

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

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

Answer 1

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

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

未配置 Grid 将在彼此之上显示元素，半透明 Border 的背景会使其余内容变暗。

Avalonia UI 弹出窗口覆盖

Avalonia UI Pop-Up Overlay

c#

reactiveui

avaloniaui