以前、HTMLにSilverlightを表示するには、下記のようなJScriptを準備し、幅と高さを設定することを説明しました。

function createSilverlightPlugin()
{  
    Silverlight.createObject(
        "sample4_1.xaml",               // xamlファイルの参照先
        parentElement,                  // 親要素の定義
        "sample4_1",                    // SilverlightプロジェクトのユニークID
        {                               
            width:'300',                // Silverlightオブジェクトの幅
            height:'300',               // Silverlightオブジェクトの高さ
            inplaceInstallPrompt:false, // インストールプロンプトを適所に表示するかどうか決定
            background:'#FF0000',       // 背景色
            isWindowless:'false',       // Windowlessモードによるプラグインを表示するかどうか決定
            framerate:'24',             // フレームレート最大値
            version:'1.0'               // Silverlightのバージョン番号
        },
        {
            onError:null,               // OnErrorのときのfunction名
            onLoad:null                 // OnLoadのときのfunction名
        },
        null);                          // イベントハンドラ名
}

上記の場合はHTMLに300x300のSilverlightオブジェクト表示エリアが作成されます。

Canvasオブジェクトもまた、サイズを設定することが可能です。

以下はCanvasのサイズを200x200（要素HeightとWidthを指定）にします。またCanvasエリアがわかるようにBackground要素を使用して背景色をGrayにしておきます。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="200" Width="200">

</Canvas>

そしてこのCanvasに、Canvasのサイズを超える円(300x300)を表示したらどうなるか実験してみたいと思います。

XAMLファイルは以下の通りです。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="200" Width="200">
    
    <Ellipse
    Height="300" Width="300"
    Stroke="Black" StrokeThickness="3" Fill="Blue" />
    
</Canvas>

実行結果はこちらを参照してください。

青がSilverlight表示エリア、灰色がCanvasです。

円のサイズはCanvasより大きいのですが、クリッピングされることなく表示されることがわかります。

では、次に円のサイズをSilverlight表示エリアよりも大きくしたらどうなるか実験してみたいと思います。

円のサイズを400x400にします。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="200" Width="200">
    
    <Ellipse
    Height="400" Width="400"
    Stroke="Black" StrokeThickness="3" Fill="Blue" />
    
</Canvas>

実行結果はこちらを参照してください。

ごらんの通り、Silverlight表示領域を超えた部分はクリッピングされます。

上記のことから

Cavasオブジェクトに追加したオブジェクトは、Canvasサイズより大きなものを表示することができるが、Silverlight表示領域を超えたものはクリッピングされる、ということがわかります。

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