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

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

図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　実行例

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　実行例