Zインデックスで重なりの順序を指定する

Zインデックス指定なし

アプリ実行

ソースコード

• App.xaml

<Application x:Class="HelloWorld.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
</Application>

• MainWindow.xaml

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <WrapPanel Width="200">
        <!--マージンをマイナスにして重なりあうようにする -->
        <Ellipse Width="100" Height="30" Fill="Red" Margin="-5" />
        <Ellipse Width="100" Height="30" Fill="Blue" Margin="-5" />
        <Ellipse Width="100" Height="30" Fill="Yellow" Margin="-5" />
        <Ellipse Width="100" Height="30" Fill="Green" Margin="-5" />
    </WrapPanel>
</Window>

Zインデックス指定あり

アプリ実行

ソースコード

• App.xaml

同じです。

• MainWindow.xaml

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <WrapPanel Width="200">
        <!--マージンをマイナスにして重なりあうようにする -->
        <Ellipse Panel.ZIndex="2" Width="100" Height="30" Fill="Red" Margin="-5" />
        <Ellipse Width="100" Height="30" Fill="Blue" Margin="-5" />
        <Ellipse Panel.ZIndex="1" Width="100" Height="30" Fill="Yellow" Margin="-5" />
        <Ellipse Width="100" Height="30" Fill="Green" Margin="-5" />
    </WrapPanel>
</Window>