Basic Library for UWP
手順2:アプリケーションへの C1Menu の追加
Basic Library for UWP > Menu for UWP > クイックスタート > 手順2:アプリケーションへの C1Menu の追加

前の手順では、Windows ストアアプリケーションを作成しました。この手順では、C1Menu コントロールを追加します。

  1. MainPage.xaml で、<Grid> タグと </Grid> タグの間にカーソルを置き、1回クリックします。
  2. C1DockPanel コントロールのマークアップを追加します。
    マークアップ
    コードのコピー
    <C1:C1DockPanel Grid.Row="1" LastChildFill="False"></C1:C1DockPanel>
    このコントロール内に C1Menu を追加します。
  3. </C1:C1DockPanel> タグの直後に TextBlock のマークアップを追加します。
    マークアップ
    コードのコピー
    <TextBlock x:Name="txt" Foreground="Red" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />
    実行時には、選択したメニュー項目の名前がこの TextBlock に表示されます。
  4. <C1:C1DockPanel> タグ内に次のマークアップを追加します。
    マークアップ
    コードのコピー
    <C1:C1Menu x:Name="VisualStudioMenu" C1:C1DockPanel.Dock="Top" DetectBoundaries="True" MinWidth="200" ItemClick="Menu_ItemClick">
        <C1:C1Menu.ItemContainerTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </C1:C1Menu.ItemContainerTransitions>
    </C1:C1Menu>
    これにより、C1Menu コントロールが追加されます。
  5. </c1:C1Menu> タグの直前に次のマークアップを追加します。
    マークアップ
    コードのコピー
    </c1:C1Menu> タグの直前に次のマークアップを追加します。
    <C1:C1MenuItem Header="ファイル">
    <C1:C1MenuItem Header="新規作成">
        <C1:C1MenuItem Header="プロジェクト..." IsCheckable="True" IsChecked="True" >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE188;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="ウェブサイト..." >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE12B;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="チームプロジェクト..." >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE125;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="ファイル..." >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE132;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="開く">
        <C1:C1MenuItem Header="プロジェクト..." >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE19C;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="ウェブサイト..." >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE12B;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="ファイル..." >
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE19C;" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
    </C1:C1MenuItem>
    <C1:C1Separator />
    <C1:C1MenuItem Header="閉じる" />
    <C1:C1MenuItem Header="ソリューションを閉じる">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE10A;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1Separator />
    <C1:C1MenuItem Header="保存" >
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE105;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="すべてを保存" />
    <C1:C1Separator />
    <C1:C1MenuItem Header="ページセットアップ">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE160;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="印刷">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#x2399;" FontWeight="ExtraBold" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1Separator />
    <C1:C1MenuItem Header="終了"/>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="編集">
    <C1:C1MenuItem Header="元に戻す">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE10E;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="やり直し">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE10D;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1Separator />
    <C1:C1MenuItem Header="切り取り">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE16B;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="コピー">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE16F;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="貼り付け">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE16D;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="削除" Width="100">
        <C1:C1MenuItem.Icon>
            <TextBlock Text="&#xE106;" />
        </C1:C1MenuItem.Icon>
    </C1:C1MenuItem>
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="ウィンドウ">
    <C1:C1MenuItem Header="ドキュメント 1" IsCheckable="True" IsChecked="True" />
    <C1:C1MenuItem Header="ドキュメント 2" IsCheckable="True" IsChecked="True" />
    <C1:C1MenuItem Header="ドキュメント 3" IsCheckable="True" />
    <C1:C1MenuItem Header="ドキュメント 4" IsCheckable="True" />
    <C1:C1Separator />
    <C1:C1MenuItem Header="排他的なチェック 1" GroupName="Exclusives" IsCheckable="True" IsChecked="True" />
    <C1:C1MenuItem Header="排他的なチェック 2" GroupName="Exclusives" IsCheckable="True" IsChecked="True" />
    <C1:C1MenuItem Header="排他的なチェック 3" GroupName="Exclusives" IsCheckable="True" />
    </C1:C1MenuItem>
    <C1:C1MenuItem Header="アイテム">
    <C1:C1MenuItem Header="サブアイテム 1">
        <C1:C1MenuItem Header="サブアイテム 2">
            <C1:C1MenuItem Header="サブアイテム 3">
                <C1:C1MenuItem Header="サブアイテム 4">
                    <C1:C1MenuItem Header="サブアイテム 5">
                    </C1:C1MenuItem>
                </C1:C1MenuItem>
            </C1:C1MenuItem>
        </C1:C1MenuItem>
    </C1:C1MenuItem>
    </C1:C1MenuItem>
    上のマークアップは、メニュー構造のマークアップを追加します。
  6. MainPage.xaml.cs(または MainPage.xaml.vb)ページを開き、プロジェクトに次の Click イベントハンドラを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー
    Private Sub Menu_ItemClick(sender As Object, e As C1.Xaml.SourcedEventArgs)
       txt.Text = "クリックされたアイテム: " & DirectCast(e.Source, C1.Xaml.C1MenuItem).Header.ToString()
    End Sub

    C# コードの書き方

    C#
    コードのコピー
    private void Menu_ItemClick(object sender, C1.Xaml.SourcedEventArgs e)
            {
                txt.Text = "クリックされたアイテム: " + ((C1.Xaml.C1MenuItem)e.Source).Header.ToString();
            }

この手順では、C1Menu コントロールを追加しました。次の手順では、C1ContextMenu コントロールをアプリケーションに追加します。

関連トピック