注:本文由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