Semantic Zoom - Windows 8 ストアアプリテンプレート

  • Article

Entertainment PhotoとBasic Photoは、トップページでセマンティックズームに対応しています。

Basic Photoの場合
　

Entertainment Photoの場合
　

Semantic Zoomは、SemanticZoomコントロールを使って実現しています。Basic PhotoのGroupedItemsPage.xamlを例に説明すると、元々のGridViewを<SemanticZoom>...</SemanticZoom>で囲み、

        <SemanticZoom x:Name="itemGridView"
                      Grid.RowSpan="2"
                      Padding="116,137,40,46">
            <SemanticZoom.ZoomedInView>
                <GridView
・・・・・・・・ このパートは、元々のGridViewをそのまま流用
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView
・・・・・・・・ このパートは、元々のGridViewのスタイルを変更
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

 ZoomedInViewに元々のGridViewを埋め込んで、スタイルを変えたGridViewをZoomedOutViewを埋め込んで作っています。

ZoomedInViewのパートがデフォルトで表示されるもの、ZoomedOutViewがピンチして縮小した時の表示です。両者を並べて違う点を比較してみましょう。

 

ZoomedInView側 ZoomedOutView側

<GridView    AutomationProperties.AutomationId="ItemGridView"    AutomationProperties.Name="Grouped Items"    ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"    SelectionMode="None"    IsSwipeEnabled="false"    IsItemClickEnabled="True"    ItemClick="ItemView_ItemClick">    <GridView.ItemsPanel>        <ItemsPanelTemplate>            <VirtualizingStackPanel Orientation="Horizontal"/>        </ItemsPanelTemplate>    </GridView.ItemsPanel>    <GridView.GroupStyle>        <GroupStyle>            <GroupStyle.HeaderTemplate>                <DataTemplate>                    <Grid Margin="1,0,0,6">                         <Button                              AutomationProperties.Name="Group Title"                               Click="Header_Click"                               Style="{StaticResource TextPrimaryButtonStyle}" >                               <StackPanel Orientation="Horizontal">                                   <TextBlock Text="{Binding Title}" Margin="3,-7,10,10"                                           Style="{StaticResource GroupHeaderTextStyle}" />                                   <TextBlock Text="{StaticResource ChevronGlyph}"                                         FontFamily="Segoe UI Symbol"                                          Margin="0,-7,0,10"                                         Style="{StaticResource GroupHeaderTextStyle}"/>                               </StackPanel>                           </Button>                     </Grid>                 </DataTemplate>           </GroupStyle.HeaderTemplate>            <GroupStyle.Panel>                <ItemsPanelTemplate>                    <VariableSizedWrapGrid Orientation="Vertical"                                              Margin="0,0,80,0"/>                 </ItemsPanelTemplate>           </GroupStyle.Panel>        </GroupStyle>    </GridView.GroupStyle> </GridView>

 <GridView    AutomationProperties.AutomationId="ItemGridView"    AutomationProperties.Name="Grouped Items"    ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"    SelectionMode="None"    IsSwipeEnabled="false"    IsItemClickEnabled="True"    ItemClick="ItemView_ItemClick">    <GridView.ItemsPanel>        <ItemsPanelTemplate>           <VirtualizingStackPanel Orientation="Horizontal"/>        </ItemsPanelTemplate>    </GridView.ItemsPanel>    <GridView.GroupStyle>        <GroupStyle>            <GroupStyle.HeaderTemplate>                <DataTemplate>                    <Grid Margin="0,0,0,0" Width="225" Height="225">                         <Border                           Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">                             <Image Source="{Binding Image}" Stretch="UniformToFill"                                 AutomationProperties.Name="{Binding Title}" Tapped="Group_Tapped"/>                         </Border>                         <StackPanel VerticalAlignment="Bottom"                                  Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">                             <TextBlock Text="{Binding Title}"                                  Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"                                  Style="{StaticResource TitleTextStyle}"                                  TextWrapping="NoWrap" Margin="15,0,15,0"/>                             <TextBlock Text="{Binding Items.Count}"                                  Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"                                  Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"                                  Margin="15,0,15,10" HorizontalAlignment="Center"/>                         </StackPanel>                     </Grid>                </DataTemplate>            </GroupStyle.HeaderTemplate>            <GroupStyle.Panel>                <ItemsPanelTemplate>                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,40,0"                           MaxWidth="225" MaximumRowsOrColumns="0" Height="0" MaxHeight="0"/>                 </ItemsPanelTemplate>            </GroupStyle.Panel>        </GroupStyle>    </GridView.GroupStyle><GridView>

と、赤で示したところが異なっています。右側のXAMLがZoomed Outした時に表示するデザインになっていて、青字で書いた辺りが、表示しているタイトルやアイテム数等になります。

各アプリではこの辺を変えてみてください。

なお、SemanticZoomコントロールそのものは、ピンチ等の操作でZoomedInViewとZoomedOutViewを切り替える部品なので、意味的な拡張縮小が必要な場合には、活用可能なので、ページのある一部分だけ対応したいというときにも使い出があります。（Entertainment Photoはそんな感じで使っています）