<win8>（四）实例讲解win8(XAML+C#)开发--------课程表:Snapped模式和动态磁贴，徽章（badge）

　　免责声明：本文章由fengyun1989创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

　　到这里，我们已经拥有一个不错的程序，可以数据的增删改，可以看到当前的课表内容等。接下来，我们要实现Snapped模式，用磁贴来实现数据的显示，还有徽章（badge）的运用。

　　什么是Snapped模式呢，就是程序的分屏显示，Windows 8 Snap 要求至少 1366 * 768 的显示分辨率才能使用，其实程序本身就能够Snapped，只是显示效果不尽然如我们所愿。我们的目标就是实现按照我们的意愿的snapped模式。

　　那么怎么在模拟器启动snapped模式呢，使用手指模式，然后再模拟器屏幕上方，向中间划，就能看到程序变成缩略图，然后就向左或向右滑动就能进入snapped模式了。如下图：

如果不能看到，那么请修改模拟器的分辨率，点击右侧工具栏的小电脑按钮，选择1366 * 768以上的分辨率。

　　看上图的显示效果，看起来不太友好，虽然基本信息也出来了。那么我们可以用代码捕捉到程序的改变，然后进行布局调整。

 　　在MainPage的构造函数里面注册这么一个事件：

Window.Current.SizeChanged += Current_SizeChanged;

这个事件可以在程序显示大小改变的时候触发。另外，给MainPage的Grid设置一个Name的属性：

<Grid x:Name="GridLayout" Background="{StaticResource AppBackgroundColor}">

然后修改Current_SizeChanged方法如下：

        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            var currentViewState = Windows.UI.ViewManagement.ApplicationView.Value;
            if (currentViewState == ApplicationViewState.Snapped)
            {
                GridLayout.ColumnDefinitions[0].Width = new GridLength(e.Size.Width * 0.6);
                WeekdayListTitle.FontSize = 24;
                ItemDetailTitle.FontSize = 24;
            }
            else
            {
                GridLayout.ColumnDefinitions[0].Width = new GridLength(e.Size.Width / 2);
                WeekdayListTitle.FontSize = 56;
                ItemDetailTitle.FontSize = 56;
            }
        }

上面改变的时候就改变视图。Windows.UI.ViewManagement.ApplicationView有一个TryUnsnap方法，可以使snapped模式恢复为正常的全屏视图。

现在，我们的视图变成好看多了吧。当然，可以在XAML里面定义好VisualStateManager,在后台代码稍加控制state，也能达到效果。

这里提供微软的例子地址：http://code.msdn.microsoft.com/windowsapps/Snap-Sample-2dc21ee3

磁贴和徽章(Badge)

　　静态磁贴需要的是三种规模的图片。30*30，150*150，310*150三种像素的图片。如果大家没有这种大小的图片，请到这里下载：http://115.com/file/c2wvkr4f#TimetablePic.zip

　　  我把图片都放在了Assets文件夹，现在打开Package.appxmanifest,修改如下：

 

这样，如上图所示修改，编译运行就能看到结果了。在模拟器怎么实现宽磁贴变为小磁贴呢，按紧磁贴，稍微向下拖动，就能看到会有Appbar弹出，就能改变磁贴了。

在Package.appxmanifest里面有很多关于程序的设置，大家可以看下。

动态磁贴

　　磁贴的动态更新都要基于模板，模板都是一些微软定义好的枚举类型。详请看http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx。

　　模板系统是基于XML片段，比如下面这段模板：

<tile>
  <visual lang="en-US">
    <binding template="TileSquareText03">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

只有4行，我们就利用填充Xml的方式并传递给系统来更新磁贴。为了从所以数据中获取我们需要更新到磁贴的数据，我写了这么些方法添加到MainPage。算法简陋，勿见怪。

        ScheduleItem GetNowSchedule()
        {
            DateTime date = DateTime.Now;
            string weekday = date.DayOfWeek.ToString();
            string localWeekday = GetLocalWeekday(weekday);
            var weekdayList = viewModel.WeekdayList;
            int index = 0;
            for (int i = 0; i < weekdayList.