Windows Phone開發（12）：認識一下獨具個性的磁貼

對“磁貼”的理解是一點也不抽象的，為什麼呢？只要你願意啟動WP系統，無論你是在模擬器中還是在真機中，是的，案頭上那一塊塊像地板的玩意兒，就是磁貼了。
（圖：磁貼）

在中，我們很直觀地看到磁貼圖塊的“真”面目，呵呵，其實很明顯，這個設計真的很有個性，老實說，WP剛推出的時候，很多人說它這個那個的，其實這些人只過是起起鬨罷了。
我是挺喜歡案頭上那一塊塊的圖塊的，這也是WP第一次給我留下的深刻印象，畢竟在安卓和IOS上，我們看到的都是傳統手機的表徵圖顯示方式，而WP總讓我覺得很有個性。

好的，看完了整體的，我們來看看局部的，好嗎？別小看這些正方形的圖塊，裡面可是大有文章的哦。不信？一起去瞧瞧。

磁貼的一個圖塊基本上由三個元素組成——背景圖，標題文字以及計數器，嗯，當然了，圖塊最有意思的地方，就是它有正反兩面。
為圖塊正反兩面的元素組成結構圖。

 

=> 磁貼的分類。

磁貼分為應用程式磁貼和次要磁貼。
好不好理解呢？好，首先我們看看應用程式磁貼，它是指通過使用者應用程式列表中長按應用程式來把應用程式固定到“開始”螢幕。

 

那麼，如何刪除呢？在“開始”螢幕上找到你要移除的圖塊，長按，圖塊左上方會出現一個小表徵圖，我們點擊這小表徵圖即可移除該磁貼。當然了，如果你想把移動到其它位置，在此時，你只需把表徵圖拖到對應的位置，然後在案頭上隨便點一下即可完成移動操作。

 

次要磁貼就是相對於剛才的上面的應用程式磁貼而言的，它是由應用程式通過特定參數建立的，說直接一點嘛，就是通過我們開發人員，用代碼來建立的。

這個好比我們Windows案頭上的捷徑，有的是直接指向可執行程式的，而有的是應用程式建立的，它後面帶了命令列參數。舉個例子吧，最典型的要數IE了，我經常上新浪微博，我希望在案頭上建立一個IE的捷徑表徵圖，雙擊運行IE的時候新開啟新浪微博首頁，那怎麼做呢？請看。

 

這樣一來，你雙擊捷徑啟動IE就自動開啟新浪微博首頁。呵呵，次要磁貼也和這相類似。

=> 動手實戰。

下面，我們一起來動手做一個稍微綜合一點的例子，嗯，現在，你可以坐下來，先喝幾口奶茶，然後啟動VS，建立一個WP項目。介面布局大致如下，你可以自由發揮。

 

準備好兩張美圖，圖片內容你喜歡，但要鍵康哦，尺寸為173*173像素，.jpg或.png都行，一張作為磁貼的正面背景，另一張作為磁貼的背面背景。
注意：把圖片的產生操作改為“內容”。

 

當然，為了方便大家練習參考，我把XAML貼出來，希望大家不要直接複製，而是認認真真的在VS裡面輸一遍，要多寫代碼多練習才會找到感覺的哦。

<phone:PhoneApplicationPage     x:Class="ShellTitleApp.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="Portrait" Orientation="Portrait"    shell:SystemTray.IsVisible="True">        <phone:PhoneApplicationPage.Resources>        <Style x:Key="textblStyle" TargetType="TextBlock">            <Setter Property="FontSize" Value="28"/>            <Setter Property="Margin" Value="0,12,5,6"/>            <Setter Property="HorizontalAlignment" Value="Right"/>        </Style>        <Style x:Key="textboxStyle" TargetType="TextBox">            <Setter Property="FontSize" Value="28"/>            <Setter Property="Width" Value="300"/>            <Setter Property="Height" Value="auto"/>            <Setter Property="HorizontalAlignment" Value="Left"/>        </Style>    </phone:PhoneApplicationPage.Resources>    <!--LayoutRoot 是包含所有頁面內容的根網格-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <!--TitlePanel 包含應用程式的名稱和網頁標題-->        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">            <TextBlock x:Name="ApplicationTitle" Text="我的應用程式" Style="{StaticResource PhoneTextNormalStyle}"/>            <TextBlock x:Name="PageTitle" Text="樣本程式" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>        </StackPanel>        <!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Margin="0" Grid.Row="1">            <Grid.RowDefinitions>                <RowDefinition Height="*" />                <RowDefinition Height="auto" />            </Grid.RowDefinitions>            <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Row="0">                <Grid Margin="1">                    <Grid.RowDefinitions>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                        <RowDefinition Height="auto"/>                    </Grid.RowDefinitions>                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="auto"/>                        <ColumnDefinition Width="*"/>                    </Grid.ColumnDefinitions>                    <TextBlock Grid.Row="0"                               Grid.Column="0"                               Text="正面標題：" Style="{StaticResource textblStyle}" />                    <TextBox x:Name="txtForeTitle"                             Style="{StaticResource textboxStyle}"                             Grid.Row="0"                             Grid.Column="1"/>                    <TextBlock Text="計數器：" Style="{StaticResource textblStyle}"                               Grid.Row="1"                               Grid.Column="0"/>                    <TextBox x:Name="txtCount"                             Grid.Column="1"                             Grid.Row="1" Style="{StaticResource textboxStyle}" >                        <!--只允許輸入數字-->                        <TextBox.InputScope>                            <InputScope >                                <InputScopeName NameValue="Number"/>                            </InputScope>                        </TextBox.InputScope>                    </TextBox>                    <TextBlock Text="背面標題："                               Grid.Row="2"                               Grid.Column="0" Style="{StaticResource textblStyle}" />                    <TextBox x:Name="txtBackTitle"                             Grid.Row="2"                             Grid.Column="1" Style="{StaticResource textboxStyle}" />                    <TextBlock Text="背景內容："                               Grid.Row="3"                               Grid.Column="0" Style="{StaticResource textblStyle}" />                    <TextBox x:Name="txtBackContent"                             Grid.Row="3"                             Grid.Column="1" Style="{StaticResource textboxStyle}" />                    <!--提示是以何種方式啟動-->                    <CheckBox x:Name="chkStartType"                              IsChecked="False"                              Grid.Row="4"                              Grid.Column="0"                              Grid.ColumnSpan="2"                              FontSize="30"                              Content="通過應用程式建立的磁貼啟動" IsEnabled="False" />                </Grid>            </ScrollViewer>            <StackPanel Grid.Row="1" Orientation="Horizontal">                <Button x:Name="btnAddToShellTitle"                        Content="添加磁貼" Click="btnAddToShellTitle_Click" />                <Button x:Name="btnUpdateShellTitle"                        Content="更新" Click="btnUpdateShellTitle_Click" />                <Button x:Name="btnDeleteShellTitle"                        Content="刪除" Click="btnDeleteShellTitle_Click" />            </StackPanel>        </Grid>    </Grid> </phone:PhoneApplicationPage>

好的，最後，當然是把C#代碼也寫完。

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;using System.Windows.Threading;namespace ShellTitleApp{    public partial class MainPage : PhoneApplicationPage    {        // 要用的圖片的相對路徑        private const string FORE_PIC = "images/a.png";        private const string BACK_PIC = "images/b.png";        // 建構函式        public MainPage()        {            InitializeComponent();        }        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)        {            base.OnNavigatedTo(e);            // 建立的磁貼的啟動地址其實是指向 /MainPage.xaml?s=1            // s=1參數是為了區別使用者是不是通過程式所建立的磁貼來進入啟動當前程式的，            // 就像面前例子中講到的把IE案頭捷徑的參數指定為新浪微博的首頁一個道理。            // 檢測是否存在s=1來判斷是否通過程式建立的磁貼來啟動。            ShellTile myTitle = ShellTile.ActiveTiles.FirstOrDefault(n => n.NavigationUri.ToString().Contains("s=1"));            if (myTitle != null)            {                this.chkStartType.IsChecked = true;            }            else            {                this.chkStartType.IsChecked = false;            }        }        // 建立圖塊        private void btnAddToShellTitle_Click(object sender, RoutedEventArgs e)        {            // 不管我們的程式是否建立“開始”螢幕磁貼，ActiveTiles的第一個元素必是當前正在前台啟動並執行            // 應用程式。所以，在取出第一個ShellTile時，一定要通過判斷是否存在s=1。            // 這個s=1參數是隨便取的。            ShellTile myTitle = ShellTile.ActiveTiles.FirstOrDefault(m => m.NavigationUri.ToString().Contains("s=1"));            // 如果已經建立就不建了。            if (myTitle != null)            {                MessageBox.Show("此應用程式的磁貼已經存在。");            }            else            {                // 建立新磁貼                int Counter = 0;                // StandardTileData就是用來傳遞ShellTitle的屬性參數的，                // 如正面背景圖的URI，標題，計數器等。                StandardTileData myData = new StandardTileData()                {                    Title = string.IsNullOrEmpty(txtForeTitle.Text) == true ? string.Empty : txtForeTitle.Text,                    Count = int.TryParse(txtCount.Text, out Counter) == true ? Counter : 0,                    BackTitle = string.IsNullOrEmpty(txtBackTitle.Text) == true ? string.Empty : txtBackTitle.Text,                    BackContent = string.IsNullOrEmpty(txtBackContent.Text) == true ? string.Empty : txtBackContent.Text,                    BackgroundImage = new Uri(FORE_PIC, UriKind.Relative),                    BackBackgroundImage = new Uri(BACK_PIC, UriKind.Relative)                };                // ShellTile.Create方法的第一個參數是我們啟動應用程式時應該導航到哪裡。                // 因為本樣本主有一個頁面，當然是導航到首頁面，                // 因為是從我們建立的磁貼來啟動的，所以不要忘了帶上s=1參數。                ShellTile.Create(new Uri("/MainPage.xaml?s=1", UriKind.Relative), myData);                MessageBox.Show("磁貼圖塊建立成功。");            }        }        // 更新磁貼資訊        private void btnUpdateShellTitle_Click(object sender, RoutedEventArgs e)        {            // 同理，先要判斷是否從我們建立的磁貼啟動            ShellTile myTitle = ShellTile.ActiveTiles.FirstOrDefault(m => m.NavigationUri.ToString().Contains("s=1"));            if (myTitle != null)            {                int Counter = 0;                StandardTileData data = new StandardTileData();                if (!string.IsNullOrEmpty(txtForeTitle.Text))                {                    data.Title = txtForeTitle.Text;                }                if (int.TryParse(txtCount.Text,out Counter))                {                    data.Count = Counter;                }                if (!string.IsNullOrEmpty(txtBackTitle.Text))                {                    data.BackTitle = txtBackTitle.Text;                }                if (!string.IsNullOrEmpty(txtBackContent.Text))                {                    data.BackContent = txtBackContent.Text;                }                myTitle.Update(data);                MessageBox.Show("磁貼資料更新完成。");            }        }        // 刪除磁貼        // 注意：我們使用代碼只可刪除次要磁貼，也就是我們用代碼建立的，        // 不要去刪除應用程式磁貼，即通過在應用程式項上長按建立的。        private void btnDeleteShellTitle_Click(object sender, RoutedEventArgs e)        {            // 記著，要先判斷是否找到通過我們代碼建立的磁貼。            ShellTile title = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("s=1"));            if (title != null)            {                title.Delete();                MessageBox.Show("磁貼圖塊刪除成功。");            }        }    }}

樣本中我們重點是使用了ShellTile類，它並不複雜，成員不多，大家多玩幾次就熟了。

運行之後，我們在“開始”螢幕中建立我們的磁貼，然後回到案頭，我們盯著它別動，你會發現，它的正面與反面會每隔幾秒鐘自動輪迴切換。