如何在 UWP 中将 UI 元素始终置于顶部

Question

我正在开发 UWP 应用程序，它的浏览量很少，只有横幅广告浏览量。我希望横幅广告视图始终位于顶部，不应隐藏在任何其他元素后面。

我的设置： 我有一个堆栈面板，其中有其他元素，横幅是以编程方式添加的，如下面的代码片段所示。

<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>

我正在添加如下横幅

_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);

到目前为止我尝试了什么 我曾尝试在 canvas 上设置 z-index，例如 Canvas.SetZIndex(_banner, 30000);，但它不起作用。即使在添加 z-index 之后，semi-transparent 矩形仍显示在顶部，横幅隐藏在它后面。当我在 semi-transparent 矩形的堆栈面板 > z-index 上添加 z-index 时，只有横幅显示在顶部。

无论 parent 还是 parent 的兄弟姐妹，我应该怎么做才能让横幅始终位于顶部？

Answer 1

z-index 仅适用于面板元素内的元素 - 因此，即使您设置 30000，它也仅适用于添加它的 StackPanel。由于 Rectangle 是在 StackPanel 之后添加的，它将继续位于顶部。

您的解决方案是在 StackPanel 之前添加 Rectangle 或从 StackPanel

中取出 Banner 对象

Answer 2

Grid 控件按照在 XAML 中声明的升序将子元素放在另一个元素之上。你把 Rectangle 放在之后 StackPanel... 这意味着 StackPanel 本身将永远落后于 Rectangle.

此致

如何在 UWP 中将 UI 元素始终置于顶部

How to put UI Element always on the top in UWP

c#

z-index

uwp

uwp-xaml

windows-community-toolkit