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


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

 

Comments (0)

Skip to main content