Avalonia UI 彈出式覆蓋

Question

我的問題很簡單：

如何使用 avalonia 實現疊加彈出效果？

我的意思是我想讓包含我的 UI 元素的整個面板變暗一點（嘗試了 opacity 屬性，但它看起來不太好，OpacityMask 似乎只支持“透明”作為顏色，但我如果可能的話，想要半透明甚至模糊）。 然后我想顯示一個小彈出框。 如果這是 CSS 我可以做position: absolute; ，但是我不知道如何使用 avalonia 做到這一點。

為了形象化我的意思是 Windows Forms 應用程序的一些屏幕截圖，我能夠達到預期的效果：

我的 UI 沒有疊加效果：

我的具有疊加效果的 UI：

如您所見，整個 UI 變暗了一點，而背景仍然可見（當使用 avalonia Opacity屬性時，效果不一樣且非常不一致，因為在給定的 position 上，更多的面板彼此重疊更少的背景似乎受到Opacity的影響，而且看起來不太好。如果你願意，我可以添加屏幕截圖來說明稍后看起來有多糟糕。）

把它們加起來：

1. 我如何使面板及其所有內容略微且一致地變暗（甚至模糊？），以使具有相同背景顏色的堆疊面板不會變得可見，只是因為透明度表現得很奇怪？

2、什么是avalonia相當於CSS position: absolute; 所以我可以把我的彈出窗口放在屏幕中間和其他所有東西之上？

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的背景會使內容的 rest 變暗。