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

zhangpengfei00

　　SemanticZoom是一种语义缩放控件，可以在两个相关视图之间切换：例如ZoomOutView视图显示标题信息，而ZoomInView视图显示详细信息。
　　先来看看它的简单使用，以下示例就是简单地实现开头字母与字母对应单词视图间的切换。

Xaml代码：

            
               
            
            
               
            

上面代码结构非常清晰，两种视图下用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啦：



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