コンテキストメニューを持ったSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1ContextMenuコントロールを使ったWebページの作成

メニューが選択された時の処理

　続いて、メニューがクリックされた時の処理をコンテキストメニューに組み込みます。グリッドの右側にCanvasを配置し、ここにグラフィックスクラスのPolygonで三角形を描画します。そして、コンテキストメニューを設定し、描画した三角形を回転させます。

Canvasにコンテキストメニューを設定する

　まず、XAMLでCanvas内にPolygonクラスを設定します。コードから操作するため、オブジェクトに名前を付けておきます。その下に、TextBoxコントロールの時と同じように、C1ContextMenuコントロールを設定します。TextBoxコントロールのコンテキストメニューとデザインを変え、メニュー項目の文字色とコンテキストメニューの枠線の色と太さを変えます。そして、イベントハンドラ「cmenu2_ItemClick」を設定します。

<Canvas Grid.Column="1">
            <Polygon x:Name="poly1"
                     Points="300,200 400,125 400,275 300,200"
                     Stroke="Purple"
                     StrokeThickness="2">
                <Polygon.Fill>
                    <SolidColorBrush Color="Blue" Opacity="0.4"/>
                </Polygon.Fill>
            </Polygon>
        
            <c1:C1ContextMenuService.ContextMenu>
                <c1:C1ContextMenu x:Name="cmenu2" ItemClick="cmenu2_ItemClick" 
                                  Foreground="Tomato" 
                                  BorderBrush="LimeGreen" BorderThickness="4" >
                </c1:C1ContextMenu>
            </c1:C1ContextMenuService.ContextMenu>
</Canvas>

　C1MenuItemオブジェクトでメニュー項目を2つ作成します。メニューは「右45度」と「左45度」の2つで、それぞれイメージファイルを組み込みます。

<c1:C1MenuItem Header="右45度">
    <c1:C1MenuItem.Icon>
        <Image Source="cw.png" Width="16" Height="16"/>
    </c1:C1MenuItem.Icon>
</c1:C1MenuItem >    
<c1:C1MenuItem Header="左45度" >
    <c1:C1MenuItem.Icon>
        <Image Source="ccw.png" Width="16" Height="16"/>
    </c1:C1MenuItem.Icon>
</c1:C1MenuItem >

イベントハンドラの処理

　ビハインドコードのイベントハンドラ「ItemClick」では、2つのメニュー項目に合わせて三角形を回転させます。まず、グラフィックスオブジェクトを回転させる準備をします（詳しくはMicrosoft Silverlight デベロッパー センターを参照）。

　次に、イベントハンドラの引数「e」の「Source」プロパティから、クリックされたメニュー項目を取得します。どのメニューがクリックされたのかは、このオブジェクトのHeaderプロパティを見れば分かるので、それぞれのメニューに合わせてグラフィックスオブジェクトの回転角を変えます。

Visual Basic

Imports C1.Silverlight
...
...
Private Sub cmenu2_ItemClick(ByVal sender As System.Object, ByVal e As C1.Silverlight.SourcedEventArgs)
        Dim rt As New RotateTransform
        poly1.RenderTransform = rt
        rt.CenterX = 300
        rt.CenterY = 200
        Dim item As C1MenuItem = e.Source

        Select Case item.Header
            Case "右45度"
                rt.Angle = 45
            Case "左45度"
                rt.Angle = -45
        End Select
    End Sub

C#

using C1.Silverlight;
...
...
private void cmenu2_ItemClick(object sender, C1.Silverlight.SourcedEventArgs e)
        {
            RotateTransform rt = new RotateTransform();
            poly1.RenderTransform = rt;
            rt.CenterX = 300;
            rt.CenterY = 200;

            C1MenuItem item = (C1MenuItem)e.Source;
            string s = (String)item.Header;
            switch(s)
            {
                case "右45度":
                    rt.Angle = 45;
                    break;
                case "左45度":
                    rt.Angle = -45;
                    break;
            }
        }

まとめ

　C1ContextMenuコントロールは、WindowsフォームのContextMenuコントロールを使ったことがあれば違和感なく使いこなせるので、XAMLによるオブジェクト設定さえ覚えれば、簡単にWebページに実装できます。使いやすいUIを求めている方は、ぜひ導入を検討してみてはいかがでしょうか。

参考文献

• Microsoft Silverlight デベロッパー センター

製品情報

• ComponentOne Studio