首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何让overlay控件凌驾于所有其他控件之上?

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

Stack Overflow用户
提问于 2011-03-28 01:37:29
回答 6查看 259.2K关注 0票数 185

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

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-03-28 01:39:01

如果在布局中使用CanvasGrid,请给要放在顶部的控件一个更高的ZIndex

来自MSDN

代码语言:javascript
复制
<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上弹出窗口。

票数 183
EN

Stack Overflow用户

发布于 2011-03-28 04:27:18

Robert Rossney有一个很好的解决方案。这是我过去使用的另一种解决方案,将“覆盖”从其余内容中分离出来。此解决方案利用附加的属性Panel.ZIndex将“覆盖图”放在其他所有内容的顶部。您可以在代码中设置"Overlay“的可见性,也可以使用DataTrigger

代码语言:javascript
复制
<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>
票数 85
EN

Stack Overflow用户

发布于 2011-03-28 01:54:00

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

下面是一个有用的示例,它会弹出一个面板,在执行长时间运行的任务时(即,当BusyMessage绑定属性不为空时)禁用视图中的所有内容(即用户控件),并显示忙碌消息:

代码语言:javascript
复制
<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>
票数 41
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5450985

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档