Windows Store apps开发[39]Windows 8中的Semantic Zoom(语义缩放)之二：SemanticZoom控件的使用

注：本文由BeyondVincent(破船)原创首发

        转载请注明出处：BeyondVincent(破船)@DevDiv.com

更多内容请查看下面的帖子

[DevDiv原创]Windows 8 开发Step by Step

    

    本文介绍如何使用SemanticZoom控件

1、SemanticZoom控件是什么？

    SemanticZoom控件可以让用户缩放具有相同内容的两个不同视图。其中有一个是主视图。另外一个视图可以让用户进行快速导航。例如，当用户查看地址簿时，用户可以放大某个字母以查看与该字母相关的内容。

2、如何使用SemanticZoom控件

    SemanticZoom控件需要包含两个其它控件(GridView或ListView)：一个控件提供放大视图，另外一个提供缩小视图。

<SemanticZoom>
<SemanticZoom.ZoomedOutView>
        <!-- 在这里放置GridView(或ListView)以表示缩小视图 -->   
    </SemanticZoom.ZoomedOutView>
    <SemanticZoom.ZoomedInView>
        <!-- 在这里放置GridView(或ListView)以表示放大视图 -->   
 </SemanticZoom.ZoomedInView>
</SemanticZoom>

需要注意的是：这里使用到的两个控件需要实现ISemanticZoomInformation接口。

3、代码示例

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
    <SemanticZoom.ZoomedOutView>
        <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Blue" Width="150" Height="300">
                        <TextBlock
            			Text="{Binding Group.Key}"
           			 FontFamily="Segoe UI Light"
           			FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
		    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid ItemWidth="150" ItemHeight="300" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Margin" Value="4" />
                    <Setter Property="Padding" Value="10" />
                    <Setter Property="BorderBrush" Value="Gray" />
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                </Style>
            </GridView.ItemContainerStyle>
        </GridView>
    </SemanticZoom.ZoomedOutView>
    <SemanticZoom.ZoomedInView>
        <GridView ItemsSource="{Binding Source={StaticResource cvs2}}" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="10,10,0,0" HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
                        <Image Source="{Binding Image}" Height="300" Width="300" VerticalAlignment="Center" Margin="0,0,10,0"/>
                        <TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="200" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI" />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GroupItem">
                                        <StackPanel Orientation="Vertical">
                                            <ContentPresenter Content="{TemplateBinding Content}" />
                                            <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <Button Visibility="Collapsed"/>
        </GridView>
    </SemanticZoom.ZoomedInView>
</SemanticZoom>

注意，关于GridView的具体使用方法，请参考下面的链接：
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780618.aspx

4、效果图

第一张是zoom out，第二张是zoom in

5、代码下载