眠るシーラカンスと水底のプログラマー

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

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

 

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

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

 

 

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

 

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側で提供する機能を使う作法などがあって、マスターするのが大変そうですが、頑張って良いデベロッパーになりましょうー。