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>

 這個控制項看似容易，其實自己用一下也是容易的，嘿嘿~