SHOEISHA iD

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

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

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

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

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

 Windowsストアアプリで業務アプリを作成する場合、ネックになってくることの一つがコンテキストメニューを始めとするメニュー項目のデザインです。Windowsストア[業務]アプリの利用シーンは机上だけではありません。そのため、タッチ操作などもなるべく少ない移動距離で確実に操作できるようなデザインが求められます。また、従来のデスクトップアプリではアプリ上部に階層メニューというのが一般的でしたが、Windowsストアアプリの場合、例えば、Windowsストアアプリ版OneNoteでは円形メニューにより従来の階層メニューの一部を実装しています。

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

図1 円形メニューの実行例

 一見しただけではそれほど便利には思えないのですが、実際にSurfaceなどのタッチ&キーボードデバイスで使用してみると、キーボードで文字を打ちつつタッチでメニュー操作というのは非常に良いテンポを生むことが分かります。単純な混在ではこの心地良さにはならないと思われるので、円形メニューがその効果を発揮しているのだと推測できます。

 そうなってくると自分のアプリに円形メニューを加えたくなりますが、いざ実装しようとすると、なかなか一筋縄ではいかない細かい動きを実装しなければなりません。

 そこで登場するのが「ComponentOne Studio for WinRT XAML」です。このコンポーネント集には、そのものずばりのRadialMenuコントロールが付随しているのです。

RadialMenuを追加する

円形メニュー実装前のアプリ

 それでは、どれくらい簡単に後付で円形メニューを入れられるのかを確認するために、Facebookにログインし、自分のタイムラインを取得して表示する簡単なサンプルアプリを作成してみましょう。

 Facebookとのやりとりは、円形メニューの追加とは関係が薄いので細かい説明は省きますが、XAML定義と実行例だけ確認してみましょう。

リスト1 MainPage.xaml
<Grid Grid.Row="1" Margin="120,0,40,40">
    <ListView Margin="0,0,0,0"
                SelectionMode="None"
                IsSwipeEnabled="False"
                IsItemClickEnabled="True"
                ItemsSource="{Binding Feeds}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="10" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border VerticalAlignment="Top"
                        Width="50" Height="50">
                        <Image Source="{Binding From_user_image}" 
                                Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel Grid.Column="1" 
                        VerticalAlignment="Top" 
                        Margin="10,0,0,0">
                        <TextBlock Text="{Binding From_name}" 
                                    FontSize="18"
                                    TextWrapping="NoWrap"/>
                        <TextBlock Text="{Binding Created_at}"
                                    FontSize="16"
                                    TextWrapping="NoWrap"/>
                    </StackPanel>
                    <StackPanel Grid.Row="1" Grid.ColumnSpan="2"
                        VerticalAlignment="Top">
                        <TextBlock Text="{Binding Message}"
                            FontSize="18"
                            TextWrapping="Wrap"/>
                        <Border MaxWidth="150" MaxHeight="150" 
                                HorizontalAlignment="Left">
                            <Image Source="{Binding Picture}" 
                                    Stretch="UniformToFill"/>
                        </Border>
                        <TextBlock Text="{Binding Discription}"
                            FontSize="18"
                            TextWrapping="Wrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <ProgressBar x:Name="progressBar" Margin="0,0,0,0" Height="10"
        Foreground="{StaticResource ApplicationForegroundThemeBrush}"
        IsIndeterminate="{Binding IsProgress}" 
        Visibility="{Binding IsIndeterminate, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=progressBar}"/>
</Grid>
図2 実行例
図2 実行例

RadialMenuを追加する

 それではListViewのコンテキストメニュー(右クリックで出てくるメニュー)に円形メニューを追加してみましょう。

 Visual StudioでMainPage.xamlを表示しておき、ツールボックスから「C1RadialMenu」をxaml上にドラッグ&ドロップします。そうすれば、Page属性として新たに「xmlns:Xaml="using:C1.Xaml"」が追加され、ページ定義中にも「<Xaml:C1RadialMenu />」が追加されます。

 ここまで完成したら、</ListView>行の直前に次のような記述を加え、RadialMenuタグを移動しましょう。

リスト2 円形メニューの追加
        </ListView.ItemTemplate>
        <Xaml:C1ContextMenuService.ContextMenu>
            <Xaml:C1RadialMenu />
        </Xaml:C1ContextMenuService.ContextMenu>
    </ListView>
図3 実行例

次のページ
円形メニューを加工する

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング