首页 > 代码库 > Win10系列：C#应用控件基础20
Win10系列：C#应用控件基础20
SemanticZoom控件
SemanticZoom控件由相互关联的缩小视图和放大视图所组成，缩小视图用来显示内容的索引，放大视图可以用来显示内容的详细信息，用户可以根据阅读需要在两种视图之间自由切换。
在XAML文件中，SemanticZoom控件的用法如下所示：
<SemanticZoom ...>
<SemanticZoom.ZoomedOutView>
<!--添加缩小的视图内容-->
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!--添加放大的视图内容-->
</SemanticZoom.ZoomedInView>
</SemanticZoom>
下面介绍一下SemanticZoom控件的几个常用属性：
- IsZoomedInViewActive属性，获取或设置SemanticZoom控件的放大视图是否为活动视图。当属性值为True，放大视图为活动视图，运行程序首先显示的将是放大视图内容。当属性值为False，运行程序首先显示的是缩小视图内容。
- ZoomedInView属性，获取或设置SemanticZoom控件的放大视图内容。
- ZoomedOutView属性，获取或设置SemanticZoom控件的缩小视图内容。
介绍完常用属性，接着来看一下SemanticZoom控件的常用事件：
- ViewChangeCompleted事件，当视图改变完成时触发。
- ViewChangeStarted事件，当视图开始发生改变时触发。
接下来使用SemanticZoom控件设计一个可以显示放大视图和缩小视图的应用，在缩小视图中放置一个索引图片，而放大视图中将放置与缩小视图中的索引图片相关的详细展示图片。
新建一个Windows应用商店的空白应用程序项目，并命名为SemanticZoomDemo，在项目中添加一个名为"Images"的文件夹，并在此文件夹中添加6张蔬菜图片，其中1张用于表示蔬菜类别，另外5张表示与此类别相关的5种不同的蔬菜。双击打开MainPage.xaml文件，在Grid元素中添加如下代码。
<SemanticZoom IsZoomedInViewActive="False">
<SemanticZoom.ZoomedOutView>
<!--在缩小的视图中添加ListView控件并在此控件内添加1张图片-->
<ListView VerticalAlignment="Center" Width="200" ScrollViewer.IsVerticalScrollChainingEnabled="False" HorizontalAlignment="Center">
<Image Source="Images/Vegetables.jpg" Width="180" Height="180"/>
</ListView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!--在放大的视图中添加ListView控件并在此控件中添加5张图片-->
<ListView VerticalAlignment="Center" ScrollViewer.IsVerticalScrollChainingEnabled="False" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Image Source="Images/BaiCai.jpg" Width="80" Height="80"/>
<Image Source="Images/BoCai.jpg" Width="80" Height="80"/>
<Image Source="Images/QinCai.jpg" Width="80" Height="80"/>
<Image Source="Images/SuanMiao.jpg" Width="80" Height="80"/>
<Image Source="Images/YouCai.jpg" Width="80" Height="80"/>
</StackPanel>
</ListView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
在上面的代码中，添加了一个SemanticZoom控件并设置其IsZoomedInViewActive属性值为False，使SemanticZoom控件先展示缩小视图内容。在SemanticZoom控件的缩小视图元素SemanticZoom.ZoomedOutView内添加一个ListView控件，在ListView控件中放置一个显示蔬菜类别图片的Image控件。
在放大视图元素SemanticZoom.ZoomedInView内添加一个ListView控件，在ListView控件中添加五个表示具体蔬菜图片的Image控件，并使用StackPanel元素对这五个Image控件进行布局，定义StackPanel的Orientation属性值为Horizontal将五张图片以水平方式排列。
运行程序，在屏幕上首先以缩小视图显示蔬菜种类的图片，效果如图4-32所示。单击此图片将以放大视图显示五种不同蔬菜的图片，效果如图4-33所示，单击放大视图中右下角的缩小按钮，将切换回缩小视图。
图4-32 SemanticZoom控件的缩小视图 图4-33 SemanticZoom控件的放大视图
Win10系列：C#应用控件基础20