プログラマーな日々

プログラマーをやっています。好きなツール:TaskChute Cloud・WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

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>