blocks|key|952904|text|如果在布局中使用Canvas或Grid，请给要放在顶部的控件一个更高的ZIndex。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|952905|来自MSDN|952906|<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"/>

++++

++++<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>|code-block|syntax|javascript|952907|如果不指定ZIndex，面板的子项将按照指定的顺序呈现(即顶部的最后一个)。|952908|如果你想做一些更复杂的事情，你可以看看ChildWindow是如何在Silverlight中实现的。它覆盖了一个半透明的背景，并在你的整个RootVisual上弹出窗口。|952909|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx^0|8|6|F|4|Z|6|0|2|4|0|0|0|5|6|0|J|B|1X|A|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>If you are using a <code>Canvas</code> or <code>Grid</code> in your layout, give the control to be put on top a higher <code>ZIndex</code>.</p>

<p>From <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx" rel="noreferrer">MSDN</a>:</p>

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

    &lt;!-- Reverse the order to illustrate z-index property --&gt;

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

<p>If you don't specify <code>ZIndex</code>, the children of a panel are rendered in the order they are specified (i.e. last one on top).</p>

<p>If you are looking to do something more complicated, you can look at how <code>ChildWindow</code> is implemented in Silverlight. It overlays a semitransparent background and popup over your entire <code>RootVisual</code>.</p>


blocks|key|736874|text|Grid的同一单元格中的控件以从后到前的方式呈现。因此，将一个控件放在另一个控件之上的简单方法是将其放在同一个单元格中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|736875|下面是一个有用的示例，它会弹出一个面板，在执行长时间运行的任务时(即，当BusyMessage绑定属性不为空时)禁用视图中的所有内容(即用户控件)，并显示忙碌消息：|offset|length|style|CODE|736876|<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>|code-block|syntax|javascript|736877|entityMap^0|0|10|B|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Controls in the same cell of a Grid are rendered back-to-front.  So a simple way to put one control on top of another is to put it in the same cell.</p>

<p>Here's a useful example, which pops up a panel that disables everything in the view (i.e. the user control) with a busy message while a long-running task is executed (i.e. while the <code>BusyMessage</code> bound property isn't null):</p>

<pre><code>&lt;Grid&gt;

    &lt;local:MyUserControl DataContext="{Binding}"/&gt;

    &lt;Grid&gt;
        &lt;Grid.Style&gt;
            &lt;Style TargetType="Grid"&gt;
                &lt;Setter Property="Visibility"
                        Value="Visible" /&gt;
                &lt;Style.Triggers&gt;
                    &lt;DataTrigger Binding="{Binding BusyMessage}"
                                 Value="{x:Null}"&gt;
                        &lt;Setter Property="Visibility"
                                Value="Collapsed" /&gt;
                    &lt;/DataTrigger&gt;

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


blocks|key|953006|text|这是WPF中Adorners的一个常见功能。装饰器通常出现在所有其他控件之上，但提到z-order的其他答案可能更适合您的情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|953007|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/adorners-overview^0|6|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>This is a common function of <a href="https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/adorners-overview" rel="noreferrer">Adorners</a> in WPF. Adorners typically appear above all other controls, but the other answers that mention z-order may fit your case better.</p>


blocks|key|736995|text|Robert+Rossney有一个很好的解决方案。这是我过去使用的另一种解决方案，将“覆盖”从其余内容中分离出来。此解决方案利用附加的属性Panel.ZIndex将“覆盖图”放在其他所有内容的顶部。您可以在代码中设置"Overlay“的可见性，也可以使用DataTrigger。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|736996|<Grid+x:Name="LayoutRoot">

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

++++
++</Grid>

++
++<ContentControl+x:Name="MainContent"+/>

</Grid>|code-block|syntax|javascript|736997|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5450985/how-to-make-overlay-control-above-all-other-controls/5451095#5451095^0|1X|C|3J|B|0|E|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p><a href="https://stackoverflow.com/questions/5450985/how-to-make-overlay-control-above-all-other-controls/5451095#5451095">Robert Rossney</a> has a good solution. Here's an alternative solution I've used in the past that separates out the "Overlay" from the rest of the content. This solution takes advantage of the attached property <code>Panel.ZIndex</code> to place the "Overlay" on top of everything else. You can either set the Visibility of the "Overlay" in code or use a <code>DataTrigger</code>.</p>

<pre><code>&lt;Grid x:Name="LayoutRoot"&gt;

 &lt;Grid x:Name="Overlay" Panel.ZIndex="1000" Visibility="Collapsed"&gt;
    &lt;Grid.Background&gt;
      &lt;SolidColorBrush Color="Black" Opacity=".5"/&gt;
    &lt;/Grid.Background&gt;

    &lt;!-- Add controls as needed --&gt;
  &lt;/Grid&gt;

  &lt;!-- Use whatever layout you need --&gt;
  &lt;ContentControl x:Name="MainContent" /&gt;

&lt;/Grid&gt;
</code></pre>


blocks|key|953080|text|<Canvas+Panel.ZIndex="1"+HorizontalAlignment="Left"+VerticalAlignment="Top"+Width="570">
++
</Canvas>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|953081|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570"&gt;
  &lt;!-- YOUR XAML CODE --&gt;
&lt;/Canvas&gt;
</code></pre>


blocks|key|953112|text|将想要放在前面的控件放在xaml代码的末尾。也就是说。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953113|<Grid>
++<TabControl+...>
++</TabControl>
++<Button+Content="ALways+on+top+of+TabControl+Button"/>
</Grid>|code-block|syntax|javascript|953114|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Put the control you want to bring to front at the end of your xaml code. I.e.</p>

<pre><code>&lt;Grid&gt;
  &lt;TabControl ...&gt;
  &lt;/TabControl&gt;
  &lt;Button Content="ALways on top of TabControl Button"/&gt;
&lt;/Grid&gt;
</code></pre>


<p>I need to make a control appear above all other controls, so it will partially overlay them.</p>


How to make overlay control above all other controls?

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

问如何让overlay控件凌驾于所有其他控件之上？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让overlay控件凌驾于所有其他控件之上？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让overlay控件凌驾于所有其他控件之上？
EN