通常Silverlight表示エリアには、キャンバスを1つ用意します。

実は、このキャンバスオブジェクトは入れ子にして使用することが可能です。

下記は Canvasオブジェクトを入れ子にした例です。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="300" Background="Gray">
    
    <Canvas
        Canvas.Left="50" Canvas.Top="50"
        Width="50" Height="50" Background="Red" />

    <Canvas
        Canvas.Left="150" Canvas.Top="50"
        Width="50" Height="50" Background="Red" />
</Canvas>

上記の場合は300x300のキャンバスオブジェクトの中に、50x50のキャンバスオブジェクトが2個配置してあります。実行結果はこちら。

子のキャンバスオブジェクトの中でCanvas.LeftやCanvas.Topを使用していますが、これは親のキャンバスオブジェクトからの位置を表しています。

次に、この2つのキャンバスオブジェクトサイズを少し大きくして円を追加してみたいと思います。左側のキャンバスには青い円、右側には緑の円を追加しました。

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

    <Canvas
        Canvas.Left="140" Canvas.Top="50"
        Width="100" Height="100" Background="Red">
        
        <Ellipse
        Height="50" Width="50" Canvas.Left="0" Canvas.Top="0"
        Stroke="Black" StrokeThickness="3" Fill="Green" />
        
    </Canvas>
</Canvas>

上記を実行すると、各円は子のキャンバスのエリアの左上に表示されていることがわかります。実行結果はこちら。

これは、Ellipseの要素Canvas.TopとCanvas.Leftが子のキャンバスを意味しているからです。

このように、各オブジェクトには親子関係があることを覚えておいてください。

一番外側のCanvasがおじいちゃん（おばあちゃん）、その中のCanvasがお父さん（お母さん）、一番内側のEllipseが子供といったところです。　

次に、子供のCanvasオブジェクトに追加した円（Ellipse）の移動についてみてみましょう。

左側に配置したCanvasにある円をキャンバスオブジェクト超えるあたりに配置したXAMLを準備してみました。

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

    <Canvas
        Canvas.Left="140" Canvas.Top="50"
        Width="100" Height="100" Background="Red">
        
        <Ellipse
        Height="50" Width="50" Canvas.Left="0" Canvas.Top="0"
        Stroke="Black" StrokeThickness="3" Fill="Green" />
        
    </Canvas>
</Canvas>

実行結果はこちらです。

これはEllipseの親であるCanvas（お父さん）の左上を起点として、X方向に80, Y方向に80動いており、クリッピングはされていません。

このように、各オブジェクトの移動範囲は、そのオブジェクトが属する親からの絶対移動となることも覚えておくと良いでしょう。

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