他のすべてのコントロールの上にオーバーレイコントロールを作成するにはどうすればよいですか?


166

コントロールを他のすべてのコントロールの上に表示する必要があるので、コントロールを部分的にオーバーレイします。

回答:


162

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キャンバスとは異なります。これは直接描画を目的としたものではありませんが、絶対的な配置コンテキストを提供します(通常は直接図形を配置します)。
Paul

73

ロバート・ロスニーは良い解決策を持っています。これは、過去に使用した代替ソリューションで、「オーバーレイ」を残りのコンテンツから分離するものです。このソリューションは、添付されたプロパティ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>

このオーバーレイは、特定の領域だけでなく、ウィンドウ全体をカバーします。
メトロスマーフ

これまでで最高のソリューション!ありがとうございました!
開発者

アプリウィンドウ全体に「プライバシー画面」を配置するために必要なもの(たとえば、ユーザーが自分の机から離れた場合に機密情報を非表示にするため)。驚くばかり!
Whitzz

39

グリッドの同じセル内のコントロールは、前から後ろにレンダリングされます。したがって、1つのコントロールを別のコントロールの上に配置する簡単な方法は、同じセルに配置することです。

実行時間の長いタスクが実行されている間(つまり、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>

23

前面に表示するコントロールをxamlコードの最後に置きます。すなわち

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

13

これは、WPF のAdornersの一般的な機能です。装飾者は通常、他のすべてのコントロールの上に表示されますが、Zオーダーについて言及している他の回答の方がケースに適している場合があります。


3
<Canvas Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="570">
  <!-- YOUR XAML CODE -->
</Canvas>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.