Windows 8 Metro 學習筆記（二十）--SemanticZoom的使用

本文轉載自查看原文 2012-10-22 21:31 2933 Windows 8 Metro

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 >

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Windows 8 Metro 學習筆記（十六）--NFC Windows 8 學習筆記（十五）--.Windows 8 RP Metro 墓碑機制思考 Windows 8 Metro Stype App 學習筆記（五）--文件操作 Windows 8 學習筆記（二十二）--全球化資源 windows 8 metro 開發學習資源鏈接使用Windows8開發Metro風格應用二使用Windows8開發Metro風格應用三使用Windows8開發Metro風格應用四使用Windows8開發Metro風格應用五 Windows 8學習筆記(二十一)--C++ 文件異步操作