web-dev-qa-db-ja.com

他のすべてのコントロールの上にオーバーレイコントロールを作成する方法は？

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

wpfxamlcontrolsoverlay
147
user626528

レイアウトで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を指定しない場合、パネルの子は指定された順序でレンダリングされます（つまり、最後のパネルが上に表示されます）。

もっと複雑なことをしたい場合は、SilverlightでChildWindowがどのように実装されているかを確認できます。 RootVisual全体に半透明の背景とポップアップをオーバーレイします。

147
foson

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

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

長時間実行されるタスクが実行されている間（つまりBusyMessage boundプロパティが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>
38
Robert Rossney

Xamlコードの最後に前面に表示するコントロールを配置します。つまり.

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

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

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