Basic Library for WPF/Silverlight
手順２：コントロールへの RadialMenu 項目の追加
製品の概要 > RadialMenu > RadialMenuクイックスタート > 手順２：コントロールへの RadialMenu 項目の追加

前の手順では、WPF/Silverlight プロジェクトを作成してC1RadialMenu コントロールを追加しました。この手順では、前の手順で追加したC1RadialMenu コントロールのプロパティを設定します。また、メインラジアルメニューにサブメニューとしていくつかのC1RadialMenuItem コントロールを追加します。マークアップに追加された各メニュー項目では、画像とTextBlockのラベルが含まれます。

  1. MainWindow.xaml で<Grid></Grid> と<Border></Border>タグの間にC1ContextMenuServiceのマークアップを追加します。        

     
    XAML CS
    コードのコピー

    <c1:C1ContextMenuService.ContextMenu>
        <c1:C1RadialMenu x:Name="contextMenu" Offset="-133,0" Opened="contextMenu_Opened" AccentBrush="ForestGreen"
                         ItemClick="contextMenu_ItemClick" ItemOpened="contextMenu_ItemOpened" BorderBrush="#FFC6DEC4">
            <c1:C1RadialMenuItem Header="UndoRedo" SelectedIndex="0" ShowSelectedItem="True"
                                 Command="{Binding UndoCommand, ElementName=page}">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e10e-Undo.48.png" />
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>

            <c1:C1RadialMenuItem Header="追加" SectorCount="6">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e109-Add.48.png"/>
                </c1:C1RadialMenuItem.Icon>
                <c1:C1RadialMenuItem Header="新しい" ToolTip="新しい項目">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/e1da-Folder.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
                <c1:C1RadialMenuItem Header="既存" ToolTip="既存項目">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/e132-File.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
                <c1:C1RadialMenuItem Header="フォルダ">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/e188-Folder.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
                <c1:C1RadialMenuItem Header="クラス">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/1f4c4-Document.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
            </c1:C1RadialMenuItem>

            <c1:C1RadialMenuItem Header="ファイル" SectorCount="6">
                <c1:C1RadialMenuItem Header="除外" ToolTip="プロジェクトから除外" DisplayIndex="2">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/e10a-Cancel.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
                <c1:C1RadialMenuItem Header="削除">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/e107-Delete.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
                <c1:C1RadialMenuItem Header="名前を変更します">
                    <c1:C1RadialMenuItem.Icon>
                        <Image Source="Menu/e104-Edit.48.png"/>
                    </c1:C1RadialMenuItem.Icon>
                </c1:C1RadialMenuItem>
            </c1:C1RadialMenuItem>

            <c1:C1RadialMenuItem Header="プロパティ">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e115-Settings.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
        </c1:C1RadialMenu>
    </c1:C1ContextMenuService.ContextMenu>

    C1ContextMenuService は、C1RadialMenu が任意のコントロールのコンテキストメニューとして動作できるようにします。コンテキストメニューは、親コントロールを右クリックまたは右タップすると自動的に表示されます。この場合、親コントロールは Grid です。次に、このコントロール内に C1RadialMenu を追加します。上のマークアップは、RadialMenu にメニュー項目を追加します。C1RadialMenu コントロールをプログラムによって表示する場合は、C1ContextMenuService を省略し、コードで単に Show メソッドを呼び出すことができます。

  2. </c1radial:C1ContextMenuService.ContextMenu> タグのすぐ下に次のマークアップを追加します。

    XAML
    コードのコピー 
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top"  Height="75" >
 <TextBlock Foreground="Sienna" TextAlignment="Center" FontSize="14" x:Name="text" Text="ここはコンテクストメニューのボタンを押してください (Windowsの場合右クリックする)。" TextWrapping="Wrap" />
</Grid>

    これは、</Border> タグの前後に１つずつ、合計２つの汎用 TextBlock コントロールをアプリケーションに追加します。最初の TextBlock には、C1RadialMenu の表示方法についての指示が入ります。２番目の TextBlock には、ユーザーがタップ、クリック、または開いた C1RadialMenuItem が表示されます。

  3. XAML
    コードのコピー 
    <TextBlock x:Name="txt" Foreground="Red" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />

  4. MainPage.xaml.cs ページを開き、プロジェクトに次の Click イベントハンドラを追加します。

    Private Sub contextMenu_ItemClick(sender As Object, e As SourcedEventArgs)
    txt.Text = "Item Clicked: " + DirectCast(e.Source, C1RadialMenuItem).Header.ToString()
    Dim str As String = "Item Clicked: " + DirectCast(e.Source, C1RadialMenuItem).Header.ToString()
End Sub
Private Sub contextMenu_ItemOpened(sender As Object, e As SourcedEventArgs)
    Dim item As C1RadialMenuItem = TryCast(e.Source, C1RadialMenuItem)
    txt.Text = "Item Opened: " + (If(item.Header, item.Name)).ToString()
    Dim str As String = "Item Opened: " + (If(item.Header, item.Name)).ToString()
End Sub
Private Sub contextMenu_Opened(sender As Object, e As EventArgs)
    contextMenu.Expand()
End Sub

    private void contextMenu_ItemClick(object sender, SourcedEventArgs e)
{
    txt.Text = "Item Clicked: " + ((C1RadialMenuItem)e.Source).Header.ToString();
    string str = "Item Clicked: " + ((C1RadialMenuItem)e.Source).Header.ToString();
}
private void contextMenu_ItemOpened(object sender, SourcedEventArgs e)
{
    C1RadialMenuItem item = e.Source as C1RadialMenuItem;
    txt.Text = "Item Opened: " + (item.Header ?? item.Name).ToString();
    string str = "Item Opened: " + (item.Header ?? item.Name).ToString();
}
private void contextMenu_Opened(object sender, EventArgs e)
{
    contextMenu.Expand();
}

この手順では、C1RadialMenu コントロールを追加しました。次の手順では、プロジェクトを実行して RadialMenu for WPF/Silverlight クイックスタートの結果を確認します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.