MetroStyleApp入門 vol13.セマンティックズーム

日曜日 , 29, 4月 2012 Leave a comment

 Windows8のメトロUIにはセマンティックズームという概念があります。

 リストビューなどの一画面に表示しきれないようなページをズームアウトすることで一覧性を高めるような場合に使用しますが、そのままズームするのではなく目的に適した表示に変更することが可能なのが特徴です。

 

 たとえばWindows8のスタートページですが、

 タッチ操作の場合はピンチで、マウス+キーボードの場合はCntrolキー+マイナスキーでセマンティックズームを行うことが可能です。

 

通常のスタート画面、ピンチ操作かCtr+マイナスキーで・・・

 

セマンティックズーム画面へ

 スタート画面の場合セマンティックズームで一覧の確認と、ブロックごとのレイアウト編集が可能です。

 

SemanticZoomの実装

 

 SemanticZoomはXAML上でSemanticZoomタグを持ちいて定義します。

 (コードビハインドでも可能だとは思いますが・・・ちょっと面倒)

 

 通常の表示はSemanticZoom.ZoomedInViewタグ内で、

 ズームした場合の表示はSemanticZoom.ZoomedOutViewに挟んで記述します。

 

 サンプルは以下

 

        <SemanticZoom x:Name="semanticZoom" >
            <SemanticZoom.ZoomedOutView>
                <ListView Grid.Row="1" 
                  ItemsSource="{Binding}" Margin="0,203,0,192" Width="664"
                >
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="Aqua">
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Assets/Logo.png" Width="60" Height="60"/>
                                    <Button Content="{Binding button_name}" Width="200"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </SemanticZoom.ZoomedOutView>
            <SemanticZoom.ZoomedInView>

                <GridView Grid.Row="1" 
                  Width="1356"            
                  ItemsSource="{Binding}"
                >
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid ItemWidth="300" ItemHeight="400" MaximumRowsOrColumns="3" VerticalChildrenAlignment="Center" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemTemplate>
                            <DataTemplate>
                            <Grid Background="Aqua">
                                <StackPanel Orientation="Vertical">
                                    <Image Source="Assets/Logo.png" Width="200" Height="200"/>
                                    <Button Content="{Binding button_name}" Width="200"/>
                                </StackPanel>
                            </Grid>
                            </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>

            </SemanticZoom.ZoomedInView>
        </SemanticZoom>

 上記サンプルの場合グリッドビュー表示からセマンティックズームでリストビュー表示に変わります。

 

 

デフォルトの画像、ズームアウトで・・・

リスト表示に変更になります

 

Windows8のメトロスタイルアプリって、セマンティックズームとかSide by Side時のレイアウトも考えないといけないから、ページ数は多くなりそう。

 

補足:Windows8のデザインガイドライン

 

 

見た目が変わりすぎるのはたぶんガイドライン的にNG。サンプルということでf(^^; #win8 #metro #wddjp QT @coelacanth: ブログ書きました MetroStyleApp入門 vol13.セマンティックズーム bit.ly/JQ7KN3

— 山本康彦@BluewaterSoftさん (@biac) 4月 28, 2012

 

 というアドバイスを@biacさんから頂きました。いつも、ありがとうございます!!

 

 Windows8のメトロアプリのガイドラインについては私も勉強中ですが、WindowsPhoneと基本は共通しています。

 アプリのユーザー エクスペリエンスのデザイン

 というページにいろいろ情報がありますので参考にすると良いと思います。

 

 Windows8はUIのガイドラインやコントラクタなどのOS側で提供する機能を使う作法などがあって、マスターするのが大変そうですが、頑張って良いデベロッパーになりましょうー。

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください