SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

ComponentOne Studioのラジアルメニューを使いこなそう

  • X ポスト
  • このエントリーをはてなブックマークに追加

円形メニューを加工する

 簡単にできたといっても、円盤状のものが表示されるだけでメニューとしてはまだ利用できないので、追加のXAMLを記述して円形メニューを完成させましょう。このサンプルでは次のような円形メニューを想定しています。

図4 メニュー項目を割り当てる

 かなり複雑な動きをしていますが、どのようなXAMLを記述すればよいかを確認してみましょう。

1階層目の定義

 C1RadialMenuタグの中にC1RadialMenuItemタグを列挙すると、それが1階層目として円形に配置されます。例えば、「元に戻す」「切り取り」「追加」「除外」「削除」「名前の変更」「プロパティ」「色」を列挙すると次のようになります。

図5 1階層目の表示
図5 1階層目の表示
リスト3 1階層目の表示
<Xaml:C1RadialMenu x:Name="contextMenu" Offset="-130,0" 
                    Opened="contextMenu_Opened">
    <Xaml:C1RadialMenuItem Header="UndoRedo" SelectedIndex="0" ShowSelectedItem="True"
                             Command="{Binding UndoCommand, ElementName=page}">
        <Xaml:C1RadialMenuItem Header="元に戻す" 
                            Command="{Binding UndoCommand, ElementName=page}">
            <Xaml:C1RadialMenuItem.Icon>
                <TextBlock Text="&#xE10E;" Style="{StaticResource TextIconStyle}" />
            </Xaml:C1RadialMenuItem.Icon>
        </Xaml:C1RadialMenuItem>
    </Xaml:C1RadialMenuItem>
    <Xaml:C1RadialMenuItem AutoSelect="True" ShowSelectedItem="True" Header="Clipboard"
                         SectorCount="8">
        <Xaml:C1RadialMenuItem Header="切り取り">
            <Xaml:C1RadialMenuItem.Icon>
                <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" />
            </Xaml:C1RadialMenuItem.Icon>
        </Xaml:C1RadialMenuItem>
    </Xaml:C1RadialMenuItem>
                :
             (中略)
                :
</Xaml:C1RadialMenu>

2階層目の定義

 1階層目のC1RadialMenuItemタグの中にC1RadialMenuItemを記述すると2階層目のメニューが定義できます。「色」「元に戻す」「切り取り」「追加」など円形の外枠に△が表示されているところがそれにあたります。

 2階層目が定義されているメニュー項目をクリックやタップすると2階層目の表示に円形メニューが切り替わりメニューの中心は戻るという意味である「←」が表示されます。

図6 2階層目の表示
図6 2階層目の表示
リスト4 2階層目の表示
            :
         (中略)
            :
<Xaml:C1RadialMenuItem AutoSelect="True" ShowSelectedItem="True" Header="Clipboard"
                        SectorCount="8">
    <Xaml:C1RadialMenuItem Header="切り取り">
        <Xaml:C1RadialMenuItem.Icon>
            <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" />
        </Xaml:C1RadialMenuItem.Icon>
    </Xaml:C1RadialMenuItem>
    <Xaml:C1RadialMenuItem Header="コピー">
        <Xaml:C1RadialMenuItem.Icon>
            <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" />
        </Xaml:C1RadialMenuItem.Icon>
    </Xaml:C1RadialMenuItem>
    <Xaml:C1RadialMenuItem Header="貼り付け">
        <Xaml:C1RadialMenuItem.Icon>
            <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" />
        </Xaml:C1RadialMenuItem.Icon>
    </Xaml:C1RadialMenuItem>
</Xaml:C1RadialMenuItem>
            :
         (中略)
            :

まとめ

 ComponentOneの円形メニューはWindowsストアアプリらしいメニューです。ストアアプリではこの「らしさ」が重要であり、意識や視点が途切れないようなアプリを実現する1つの方法ともいえるでしょう。

 通常、このようなUIは効果が高いことが分かっていても定義などが難しく、最終的には実現せずに終わってしまうケースが多いのです。しかし、ComponentOneを導入することでその難しさも隠れ、コストパフォーマンス的にも良い結果が得られるのではないでしょうか。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7715 2014/11/07 15:22

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング