Avalonia UI 弹出叠加 [英] Avalonia UI Pop-Up Overlay

问题描述

我的问题很简单:

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

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

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

我的 UI 没有叠加效果:

我的带有叠加效果的 UI:

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

总结一下:

1.我如何轻微且持续地使面板及其所有内容变暗(甚至模糊?)，以使具有相同背景颜色的堆叠面板不可见，仅仅因为透明度表现得很奇怪?>

2.什么 avalonia 等同于 CSS position: absolute; 这样我就可以将弹出窗口放在屏幕中间和其他所有内容的顶部?

解决方案

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

<网格><DockPanel x:Name="YourMainContentGoesHere"/><Border IsVisible="{Binding IsPopupVisible}" Background="#40000000"><YourPopupControlHere Width="200" Height="200"/></边框></网格></窗口>

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

My question is pretty straight forward:

How do I achieve an Overlay Pop-Up effect using avalonia?

What I mean by this is I want to darken the whole Panel that contains my UI elements a little bit (tried the opacity attribute, but it didn't look good and the OpacityMask only seems to support "Transparent" as a color, but I want semi-transparency or even blur if that's possible). Then I want to display a little popup box. If this were CSS I'd be able to do a position: absolute;, however I couldn't figure out how to do this using avalonia.

To visualize what I mean here are some screenshots of a Windows Forms Application where I was able to achieve the desired effect:

My UI without overlay effect:

My UI with overlay effect:

As you can see the whole UI has been darkened a bit while the background is still visible (when using the avalonia Opacity property the effect is not the same and quite inconsistent, as the more panels are on top of each other on a given position the less the background seems to be affected by the Opacity and it just doesn't look good. I can add screenshots of how bad it would look later if you want.)

To sum it up:

1. How do I slightly and consistently darken (or even blur?) a panel with all of its contents, so that stacked panels with the same background color don't become visible, just because the transparency is acting weird?

2. What is the avalonia equivalent to the CSS position: absolute; so I can put my Pop-Up in the middle of the screen and on top of everything else?

解决方案

You can use the same technique as in WPF:

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

Unconfigured Grid will display elements on top of each other, semi-transparent Border's background will darken the rest of the content.

这篇关于Avalonia UI 弹出叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！