How to put UI Element always on the top in UWP

Question

I am working on UWP app which has few views and a banner ad view. I want the banner ad view to be on the top always, it should not hide behind any other elements.

My setup: I have a stack panel in which there are other elements and the banner is added programmatically as shown in the below snippets.

<Grid>
    <StackPanel x:Name="stckPnl" Orientation="Vertical" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <TextBox x:Name="plcTextbox" Header="PLACEMENT:" Text="123456" TextAlignment="Center"
                 Margin="0,40,0,0" Height="60" Width="240" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button x:Name="loadBannerBtn" Content="Load Banner" Click="LoadBanner" 
                Margin="0,40,0,0" Height="40" Width="240" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ProgressRing x:Name="LoadingIndicator" 
                Margin="0,40,0,0" Height="40" Width="240" Visibility="Collapsed" />
    </StackPanel>
    <Rectangle Width="400" Height="400" Fill="Chocolate" Opacity="0.5" Canvas.ZIndex="40" Margin="20"/>
</Grid>

And I am adding banner as below

_banner = new Banner(plcTextbox.Text.Trim(), AdSize.Banner320x50);
_banner.Margin = new Thickness(0, 40, 0, 0);
_banner.LoadAd();
Canvas.SetZIndex(_banner, 30000);
stckPnl.Children.Add(_banner);

What I have tried so far I have tried setting z-index on the canvas like Canvas.SetZIndex(_banner, 30000); but it doesn't work. Even after adding the z-index, the semi-transparent rectangle is shown on the top and the banner gets hidden behind it. When I add z-index on the stack panel > z-index of the semi-transparent rectangle then only the banner is shown on the top.

What should I do to have the banner always on the top irrespective of the parent or siblings of the parent?

I've provided an answer, kindly accept, if you find it right too. — prabodhprakash, Dec 13 '19 at 09:43

score 2 · Answer 1 · answered Dec 13 '19 at 19:51

2

The Grid control puts the children elements on top of another respecting the ascending order by which they are declared in XAML. You put the Rectangle AFTER the StackPanel... it means that the StackPanel itself will always be behind the Rectangle.

Best regards

answered Dec 13 '19 at 19:51

Luca Lindholm

813
1
9
23

So what should I do to keep my banner on the top always – Raj Suvariya Dec 13 '19 at 20:06

score 1 · Accepted Answer · answered Dec 13 '19 at 09:33

z-index works only works for elements within panel elements - thus, even if you set 30000, it would only work for StackPanel in which it is added. And since the Rectangle is added after StackPanel it would continue to be on the top.

The solution for you would be to add Rectangle before StackPanel or take Banner object out of StackPanel

How to put UI Element always on the top in UWP

2 Answers2