前回までの説明で、オブジェクトの配置方法についてはご理解いただけたかと思います。

今回はオブジェクトのZ-Order(前後関係)について説明したいと思います。

円や矩形、テキストなのオブジェクトは<Canvas>～</Canvas>に追加するのですが、複数のオブジェクトを追加する際は、一番最初に追加したオブジェクトが一番下に表示されます。

下記XAMLは2つの円（赤と青）が表示されるようになっていますが、最初追加した赤い円のオブジェクトが一番下に表示されます。

実行結果はこちらをご覧ください。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Ellipse
    Height="100" Width="100" Canvas.Left="50" Canvas.Top="50"
    Stroke="Black" StrokeThickness="3" Fill="Red" />

    <Ellipse
    Height="100" Width="100" Canvas.Left="80" Canvas.Top="80"
    Stroke="Black" StrokeThickness="3" Fill="Blue" />
</Canvas>

このように通常は、追加した順にZ-Orderが設定されるのですが、ZIndex要素を使用することで、オブジェクトの追加順に関係なくZ-Orderを変更することができます。

下記はZIndex要素を指定して、先ほどのXAMLの赤と青の円のZ-Orderを変更しています。ZIndexは値が大きいほど上に表示されます。

実行結果はこちらをご覧ください。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Ellipse
    Height="100" Width="100" Canvas.Left="50" Canvas.Top="50" Canvas.ZIndex="2"
    Stroke="Black" StrokeThickness="3" Fill="Red" />

    <Ellipse
    Height="100" Width="100" Canvas.Left="80" Canvas.Top="80" Canvas.ZIndex="1"
    Stroke="Black" StrokeThickness="3" Fill="Blue" />
</Canvas>

サンプルは、こちらからダウンロードできます。