HIRO's.NET

VB.NET, C#, PowerShell, Silverlight, WPF, LINQ Tipsサイト

 VB.NET, C#, PowerShell, Silverlight, WPF, LINQを使用しているエンジニアのためのサイト。

 基本的な使用方法から開発で役立つTipsまで幅広く取り扱っています。

HIRO's.NET RSSHIRO's.NET RSS

Silverlightの開発でお困りのことはありませんか？
そんな悩みは当サイトで解決！！

HOME > Silverlight Tips > 入門 Tips メニュー

05.オブジェクトの配置方法 その2

 
UPDATE:2008/06/04    
 



オブジェクトの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>

今回のサンプルファイルのダウンロードはこちらからどうぞ。