如何将 UI 元素始终放在 UWP 中的顶部答案

【问题标题】：How to put UI Element always on the top in UWP如何将 UI 元素始终放在 UWP 中的顶部
【发布时间】：2019-12-13 09:08:48
【问题描述】：

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

我的设置： 我有一个堆栈面板，其中还有其他元素，并且横幅是通过编程方式添加的，如下面的 sn-ps 所示。

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

到目前为止我所尝试的 我曾尝试在画布上设置 z-index，例如 Canvas.SetZIndex(_banner, 30000);，但它不起作用。即使添加了 z-index，半透明矩形也会显示在顶部，而横幅会隐藏在其后面。当我在堆栈面板上添加 z-index > 半透明矩形的 z-index 时，顶部仅显示横幅。

我应该怎么做才能使横幅始终位于顶部而不管父母的父母或父母的兄弟姐妹是谁？

【问题讨论】：

我已经提供了答案，如果您也觉得正确，请接受。

标签： c# uwp z-index uwp-xaml windows-community-toolkit

【解决方案1】：

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

您的解决方案是在StackPanel 之前添加Rectangle 或从StackPanel 中取出Banner 对象

【讨论】：

【解决方案2】：

Grid 控件根据在 XAML 中声明它们的升序将子元素置于另一个元素之上。您将Rectangle AFTER 放在StackPanel... 这意味着StackPanel 本身将始终位于Rectangle 之后。

最好的问候

【讨论】：

那么我应该怎么做才能让我的横幅始终保持在顶部