Windows 8 Metro 学习笔记（二十）--SemanticZoom的使用

SemanticZoom是一种语义缩放控件，可以在两个相关视图之间切换：例如ZoomOutView视图显示标题信息，而ZoomInView视图显示详细信息。

先来看看它的简单使用，以下示例就是简单地实现开头字母与字母对应单词视图间的切换。

Xaml代码：

<SemanticZoom x:Name="sezo" ViewChangeStarted="sezo_ViewChangeStarted_1"  ViewChangeCompleted="sezo_ViewChangeCompleted_1">
            <SemanticZoom.ZoomedInView>
                <ListView x:Name="zoomedIn" 
                          Style="{StaticResource ZoomableListViewTemplate}"
                          ItemTemplate="{StaticResource ZoomedInItemTemplate}"
                          ItemContainerStyle="{StaticResource ZoomedInItemStyle}" />
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name='zoomedOut' ScrollViewer.ZoomMode="Disabled"
                          ItemTemplate="{StaticResource ZoomedOutItemTemplate}"
                          ItemContainerStyle="{StaticResource ZoomedOutItemStyle}"
                          ItemsPanel="{StaticResource ZoomedOutItemsPanelTemplate}"/>
            </SemanticZoom.ZoomedOutView>
</SemanticZoom>

上面代码结构非常清晰，两种视图下用ListView和GridView分别显示

后台.cs代码：

 

private void LoadData()
{
     zoomedIn.ItemsSource = DataHelper.CollectionOfFruits();
     zoomedOut.ItemsSource = DataHelper.CollectionOfFruitHeaders();
}
private void sezo_ViewChangeStarted_1(object sender, SemanticZoomViewChangedEventArgs e)
{
      if (e.IsSourceZoomedInView)
       {
          if (e.SourceItem.Item != null)
          {
             e.DestinationItem.Item = e.SourceItem.Item.ToString()[0];
          }
       }
       else
         {
            if (e.SourceItem.Item != null)
            {
               e.DestinationItem.Item = DataHelper.GetFirstFruitByFirstLetter(e.SourceItem.Item.ToString()[0]);
          }
 }
async private void sezo_ViewChangeCompleted_1(object sender, SemanticZoomViewChangedEventArgs e)
 {
            if (e.IsSourceZoomedInView)
            {
                MessageDialog mes = new MessageDialog("ZoomOutView!");
                await mes.ShowAsync();
            }
            else {
                MessageDialog mes = new MessageDialog("ZoomInView!");
                await mes.ShowAsync();
            }
        }
  }

 上面两个事件是SemanticZoom最常用的两个事件，ViewChangeStarted事件用于处理在视图改变时作出的响应，我们上面的操作是提供视图区域的信息给新的视图；ViewChangeCompleted事件用于处理在视图切换完成后作出的响应，上面e代表的是视图切换之前的对象。

上面的是一些最基本的使用，当然ListView与GridView也基本可以实现我们的功能，但在项目期间，需求需在SemanticZoom中的视图使用FlipView控件，当直接使用时，却被告知：“无法分配指定的值，应是以下类型ISemanticZoomInformation”，分析原因才知SemanticZoom中视图控件需要继承ISemanticZoomInformation类，FlipView是没有继承的，肿么办？

只有自己实现一个控件，这个控件继承FlipView和ISemanticZoomInformation，在MSDN上找到一个继承的控件，大家共享一下：

 

public class SeZoFlipView : FlipView, ISemanticZoomInformation
    {
        public SeZoFlipView() { }

        #region ISemanticZoomInformation

        public void CompleteViewChange()
        {
            // do nothing 
        }

        public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
        {
            // do nothing 
        }

        public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
        {
            // do nothing 
        }

        public void InitializeViewChange()
        {
            // do nothing 
        }

        public bool IsActiveView
        {
            get;
            set;
        }

        public bool IsZoomedInView
        {
            get;
            set;
        }

        public void MakeVisible(SemanticZoomLocation item)
        {
            if (item != null && item.Item != null)
            {
                this.SelectedItem = item.Item;
            }
        }

        public SemanticZoom SemanticZoomOwner
        {
            get;
            set;
        }

        public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
        {
            if (this.IsZoomedInView)
            {
                source.Item = this.SelectedItem;
                destination.Item = this.SelectedItem.ToString()[0].ToString();
                
            }
        }

        public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
        {
            // do nothing 
        }

        #endregion ISemanticZoomInformation
    }

这下再引用就ok啦： 

<SemanticZoom x:Name="sezo" Height="650" Width="850"
                      ViewChangeStarted="ViewChangeStarted" ViewChangeCompleted="ViewChangeCompleted">
            <SemanticZoom.ZoomedInView>
                <local:SeZoFlipView x:Name='zoomedIn' BorderBrush="White" BorderThickness="2"
                                    ScrollViewer.ZoomMode="Enabled" 
                                    ItemTemplate="{StaticResource FlipViewItemTemplate}"/>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name='zoomedOut' ScrollViewer.ZoomMode="Disabled"
                          ItemTemplate="{StaticResource ZoomedOutItemTemplate}"
                          ItemContainerStyle="{StaticResource ZoomedOutItemStyle}"
                          ItemsPanel="{StaticResource ZoomedOutItemsPanelTemplate}"/>
            </SemanticZoom.ZoomedOutView>
</SemanticZoom>

 这个控件看似容易，其实自己用一下也是容易的，嘿嘿~