如何使覆盖控件高于所有其他控件？答案

【问题标题】：How to make overlay control above all other controls?如何使覆盖控件高于所有其他控件？
【发布时间】：2011-07-23 23:40:31
【问题描述】：

我需要让一个控件出现在所有其他控件之上，这样它就会部分覆盖它们。

【问题讨论】：

标签： wpf xaml controls overlay

【解决方案1】：

如果您在布局中使用Canvas 或Grid，请将控件置于更高的ZIndex 之上。

来自MSDN：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="ZIndex Sample">
  <Canvas>
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/>
    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/>
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/>

    <!-- Reverse the order to illustrate z-index property -->

    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/>
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/>
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/>
  </Canvas>
</Page>

如果您不指定ZIndex，则面板的子项将按照指定的顺序呈现（即最后一个在顶部）。

如果您想要做一些更复杂的事情，您可以查看ChildWindow 在 Silverlight 中是如何实现的。它覆盖了一个半透明的背景，并在您的整个RootVisual 上弹出。

【讨论】：

注意：这不像我预期的 HTML Canvas。它不是用来直接绘制的，而是提供一个绝对定位上下文（您通常会直接将形状放入其中）。
为什么当我使用 Canvas 或 Grid 时，WebBrowser 标签总是出现在所有儿童中

【解决方案2】：

这是Adorners在WPF中的常用功能。 Adorners 通常出现在所有其他控件之上，但其他提到 z 顺序的答案可能更适合您的情况。

【讨论】：

【解决方案3】：

将您想要放在前面的控件放在 xaml 代码的末尾。即

<Grid>
  <TabControl ...>
  </TabControl>
  <Button Content="ALways on top of TabControl Button"/>
</Grid>

【讨论】：

【解决方案4】：

<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570">
  <!-- YOUR XAML CODE -->
</Canvas>

【讨论】：

【解决方案5】：

Robert Rossney 有一个很好的解决方案。这是我过去使用的另一种解决方案，它将“覆盖”与其余内容分开。此解决方案利用附加属性Panel.ZIndex 将“覆盖”放置在其他所有内容之上。您可以在代码中设置“覆盖”的可见性，也可以使用DataTrigger。

<Grid x:Name="LayoutRoot">

 <Grid x:Name="Overlay" Panel.ZIndex="1000" Visibility="Collapsed">
    <Grid.Background>
      <SolidColorBrush Color="Black" Opacity=".5"/>
    </Grid.Background>

    <!-- Add controls as needed -->
  </Grid>

  <!-- Use whatever layout you need -->
  <ContentControl x:Name="MainContent" />

</Grid>

【讨论】：

此叠加层将覆盖整个窗口，而不仅仅是特定区域。
有史以来最好的解决方案！谢谢！
正是我需要在我的整个应用程序窗口上放置一个“隐私屏幕”（例如，如果用户离开他的办公桌时隐藏敏感信息），只需很少的代码。太棒了！

【解决方案6】：

Grid 的同一单元格中的控件从后到前呈现。因此，将一个控件放在另一个控件之上的一种简单方法是将它放在同一个单元格中。

这是一个有用的示例，它会弹出一个面板，在执行长时间运行的任务时（即 BusyMessage 绑定属性不为 null ):

<Grid>

    <local:MyUserControl DataContext="{Binding}"/>

    <Grid>
        <Grid.Style>
            <Style TargetType="Grid">
                <Setter Property="Visibility"
                        Value="Visible" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding BusyMessage}"
                                 Value="{x:Null}">
                        <Setter Property="Visibility"
                                Value="Collapsed" />
                    </DataTrigger>

                </Style.Triggers>
            </Style>
        </Grid.Style>
        <Border HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Background="DarkGray"
                Opacity=".7" />
        <Border HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="White"
                Padding="20"
                BorderBrush="Orange"
                BorderThickness="4">
            <TextBlock Text="{Binding BusyMessage}" />
        </Border>
    </Grid>
</Grid>

【讨论】：