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 >

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

秒客网

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

相关文章