縮放視圖 SemanticZoom

縮放視圖 SemanticZoom

相信用過 Windows Phone 或者 Windows 8/8.1/10 的朋友對下面這張截圖肯定不陌生。這就是通過 SemanticZoom 來實現(xiàn)的，當數(shù)據(jù)過多時，這種控件尤其適用。它有一個放大視圖 ZoomedInView 和一個縮小試圖 ZoomedOutView，前者主要用來顯示當前頁面的詳細信息，后者則致力于快速導航。

那么我就自己來動手實踐咯，首先我們在 XAML 中添加大致的界面，就像畫畫要先畫輪廓一樣。

<Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Center" HorizontalAlignment="Center">   
            <SemanticZoom.ZoomedOutView>            
            </SemanticZoom.ZoomedOutView>
            <SemanticZoom.ZoomedInView>             
            </SemanticZoom.ZoomedInView>
        </SemanticZoom>
    </Grid>

然后分別在這兩個視圖中添加你想要加入的東西。這里的核心就是，ZoomedOutView 和 ZoomedInView 都是使用的同一個 CollectionViewSource 對象作為自己的數(shù)據(jù)集的。而這個屬性我們在“為 ListView 和 GridView 分組”談到過。

我們先把后臺代碼寫好，我就像一篇那樣裝模作樣寫一個類吧。

    public class Alarm
    {
        public string Title { get; set; }
        public DateTime AlarmClockTime { get; set; }
        public string Description { get; set; }         
    }

然后用一個函數(shù)來添加一大堆數(shù)據(jù)……一大堆數(shù)據(jù)。

private Alarm[] AddAlarmData()
{
     return new Alarm[]
     {
          new Alarm {Title="Alarm 1",AlarmClockTime=globalTime.AddHours(17),Description="First Alarm for Study" },
          new Alarm {Title="Alarm 2",AlarmClockTime=globalTime.AddHours(2),Description="Second Alarm for Study" },
         new Alarm {Title="Alarm 3",AlarmClockTime=globalTime.AddHours(7),Description="Third Alarm for Study" },
         new Alarm {Title="Alarm 4",AlarmClockTime=globalTime.AddHours(4),Description="4th Alarm for Study" },
         new Alarm {Title="Alarm 5",AlarmClockTime=globalTime.AddHours(5),Description="First Alarm for Fun" },
         new Alarm {Title="Alarm 6",AlarmClockTime=globalTime.AddHours(1),Description="First Alarm for Fun" },
         new Alarm {Title="Alarm 7",AlarmClockTime=globalTime.AddHours(15),Description="Second Alarm for Fun" },
         new Alarm {Title="Alarm 8",AlarmClockTime=globalTime.AddHours(9),Description="Third Alarm for Fun" },
         new Alarm {Title="Alarm 9",AlarmClockTime=globalTime.AddHours(20),Description="4th Alarm for Fun" },
         new Alarm {Title="Alarm 10",AlarmClockTime=globalTime.AddHours(14),Description="Second Alarm for Sleep" },
         new Alarm {Title="Alarm 11",AlarmClockTime=globalTime.AddHours(9),Description="First Alarm for Sleep" }
     };
}

因為我們最后要把放大視圖變成縮小視圖，記得縮小視圖上面有一些 ABCD 之類的字母么，這里我們用的是時間，就分成中午晚上等好啦。就通過下面這樣的一個函數(shù)來搞定。其用了一個鍵值對，用 time 作為參數(shù)。后面再將這些數(shù)據(jù)篩選出來，綁定到新添加的 CollectionViewSource 中。至于 gridView1 和 gridView2 是即將添加到 XAML 中，這里可以先不填，一回再補上。

Func<int, string> SwitchTime = (time) =>
{
    if (time <= 10 && time >= 6)
         return "上午";
    else if (time > 10 && time < 14)
         return "中午";
    else if (time >= 14 && time <= 20)
         return "下午";
    else
         return "晚上";      
};
var varTime = from t in AddAlarmData()
              orderby t.AlarmClockTime.Hour
              group t by SwitchTime(t.AlarmClockTime.Hour);
CollectionViewSource collectionVS = new CollectionViewSource();
collectionVS.IsSourceGrouped = true;
collectionVS.Source = varTime;
this.gridView1.ItemsSource = collectionVS.View.CollectionGroups;
this.gridView2.ItemsSource = collectionVS.View;

我們先來寫主視圖（也就是放大視圖）。

<GridView x:Name="gridView2" IsSwipeEnabled="True" HorizontalAlignment="Center"   
 VerticalAlignment="Center" ScrollViewer.IsHorizontalScrollChainingEnabled="False"  
 Width="1800" Height="1000">
 <GridView.ItemTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" Background="White">
  <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Foreground="Red"  
  FontFamily="Harrington" Width="150" Height="100" FontSize="26" FontWeight="Light"/>
  <TextBlock Text="{Binding AlarmClockTime}"  Foreground="Red" TextWrapping="Wrap"  
  Width="150"  Height="100"  FontFamily="Harrington" FontSize="26" FontWeight="Light"/>
  <TextBlock Text="{Binding Description}"  Foreground="Red" TextWrapping="Wrap"  
  Width="150"  Height="100"  FontFamily="Harrington" FontSize="26" FontWeight="Light"/>
  </StackPanel>
  </DataTemplate>
  </GridView.ItemTemplate>
  <GridView.ItemsPanel>
   <ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
   </ItemsPanelTemplate>
  </GridView.ItemsPanel>
  <GridView.GroupStyle>
   <GroupStyle>
 <GroupStyle.HeaderTemplate>
  <DataTemplate>
   <TextBlock Text='{Binding Key}' Foreground="{StaticResource  
  ApplicationForegroundThemeBrush}" Margin="12" FontSize="30" FontFamily="華文彩云"  
   FontWeight="ExtraBold" />
  </DataTemplate>
 </GroupStyle.HeaderTemplate>
</GroupStyle>
  </GridView.GroupStyle>
</GridView>

相信大家都能看得懂，另外稍后我會在截圖中添加一些注釋的哦。然后是縮小視圖。

<GridView Name="gridView1" Background="Wheat"  
ScrollViewer.IsHorizontalScrollChainingEnabled="False" HorizontalAlignment="Center"  
VerticalAlignment="Center" Width="600" Height="200">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Width="100" Height="100" Text="{Binding Group.Key}" FontFamily="華文行楷"  
FontWeight="Normal" FontSize="24" />
 </DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
 <ItemsPanelTemplate>
  <ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="2"/>
  </ItemsPanelTemplate>
 </GridView.ItemsPanel>
 <GridView.ItemContainerStyle>
  <Style TargetType="GridViewItem">
  <Setter Property="Margin" Value="12" />
  <Setter Property="Padding" Value="3" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Background" Value="Green"/>
  </Style>
 </GridView.ItemContainerStyle>
</GridView>

那么代碼就到這里為止了，接下來自然就是截圖了。

（這種圖片如果看不清的話可以保存到電腦上再看。）

想了解字體相關(guān)的信息，可以看第九章的“使用更多字體”。