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

[アーティクル]
09/13/2012

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はそんな感じで使っています）