Avalonia UI Pop-Up Overlay

Question

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?

Answer 1

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.