Avalonia UI 弹出式覆盖

Posted 2023-03-31

【中文标题】Avalonia UI 弹出式覆盖

【英文标题】：Avalonia UI Pop-Up Overlay

【发布时间】：2020-09-23 09:37:49

【问题描述】：

我的问题很直接：

如何使用 avalonia 实现 Overlay Pop-Up 效果？

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

为了形象化我在这里的意思是一些 Windows 窗体应用程序的屏幕截图，我能够在其中实现预期的效果：

我的 UI 没有叠加效果：

我的带有叠加效果的 UI：

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

总结一下：

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

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

【参考方案1】：

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

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

未配置的Grid 将显示元素相互叠加，半透明Border 的背景将使其余内容变暗。