對“磁貼”的理解是一點(diǎn)也不抽象的，為什么呢？只要你愿意啟動(dòng)WP系統(tǒng)，無論你是在模擬器中還是在真機(jī)中，是的，桌面上那一塊塊像地板的玩意兒，就是磁貼了。
（圖：磁貼）

在上圖中，我們很直觀地看到磁貼圖塊的“真”面目，呵呵，其實(shí)很明顯，這個(gè)設(shè)計(jì)真的很有個(gè)性，老實(shí)說，WP剛推出的時(shí)候，很多人說它這個(gè)那個(gè)的，其實(shí)這些人只過是起起哄罷了。
我是挺喜歡桌面上那一塊塊的圖塊的，這也是WP第一次給我留下的深刻印象，畢竟在安卓和IOS上，我們看到的都是傳統(tǒng)手機(jī)的圖標(biāo)顯示方式，而WP總讓我覺得很有個(gè)性。

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

磁貼的一個(gè)圖塊基本上由三個(gè)元素組成——背景圖，標(biāo)題文字以及計(jì)數(shù)器，嗯，當(dāng)然了，圖塊最有意思的地方，就是它有正反兩面。
下圖為圖塊正反兩面的元素組成結(jié)構(gòu)圖。

磁貼的分類。

磁貼分為應(yīng)用程序磁貼和次要磁貼。
好不好理解呢？好，首先我們看看應(yīng)用程序磁貼，它是指通過用戶應(yīng)用程序列表中長按應(yīng)用程序來把應(yīng)用程序固定到“開始”屏幕。

那么，如何刪除呢？在“開始”屏幕上找到你要移除的圖塊，長按，圖塊左上角會出現(xiàn)一個(gè)小圖標(biāo)，我們點(diǎn)擊這小圖標(biāo)即可移除該磁貼。當(dāng)然了，如果你想把移動(dòng)到其它位置，在此時(shí)，你只需把圖標(biāo)拖到對應(yīng)的位置，然后在桌面上隨便點(diǎn)一下即可完成移動(dòng)操作。

次要磁貼就是相對于剛才的上面的應(yīng)用程序磁貼而言的，它是由應(yīng)用程序通過特定參數(shù)創(chuàng)建的，說直接一點(diǎn)嘛，就是通過我們開發(fā)者，用代碼來創(chuàng)建的。

這個(gè)好比我們Windows桌面上的快捷方式，有的是直接指向可執(zhí)行程序的，而有的是應(yīng)用程序創(chuàng)建的，它后面帶了命令行參數(shù)。舉個(gè)例子吧，最典型的 要數(shù)IE了，我經(jīng)常上新浪微博，我希望在桌面上創(chuàng)建一個(gè)IE的快捷方式圖標(biāo)，雙擊運(yùn)行IE的時(shí)候新打開新浪微博主頁，那怎么做呢？請看下圖。

這樣一來，你雙擊快捷方式啟動(dòng)IE就自動(dòng)打開新浪微博首頁。呵呵，次要磁貼也和這相類似。

動(dòng)手實(shí)戰(zhàn)。

下面，我們一起來動(dòng)手做一個(gè)稍微綜合一點(diǎn)的例子，嗯，現(xiàn)在，你可以坐下來，先喝幾口奶茶，然后啟動(dòng)VS，新建一個(gè)WP項(xiàng)目。 界面布局大致如下，你可以自由發(fā)揮。

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

別走開，下頁為您提供具體代碼

#p#

當(dāng)然，為了方便大家練習(xí)參考，我把XAML貼出來，希望大家不要直接復(fù)制，而是認(rèn)認(rèn)真真的在VS里面輸一遍，要多寫代碼多練習(xí)才會找到感覺的哦。

<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 是包含所有頁面內(nèi)容的根網(wǎng)格--> 
    <Grid x:Name="LayoutRoot" Background="Transparent"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
 
        <!--TitlePanel 包含應(yīng)用程序的名稱和頁標(biāo)題--> 
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
            <TextBlock x:Name="ApplicationTitle" Text="我的應(yīng)用程序" Style="{StaticResource PhoneTextNormalStyle}"/> 
            <TextBlock x:Name="PageTitle" Text="示例程序" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
        </StackPanel> 
 
        <!--ContentPanel - 在此處放置其他內(nèi)容--> 
        <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="正面標(biāo)題：" Style="{StaticResource textblStyle}" /> 
                    <TextBox x:Name="txtForeTitle" 
                             Style="{StaticResource textboxStyle}" 
                             Grid.Row="0" 
                             Grid.Column="1"/> 
                    <TextBlock Text="計(jì)數(shù)器：" Style="{StaticResource textblStyle}" 
                               Grid.Row="1" 
                               Grid.Column="0"/> 
                    <TextBox x:Name="txtCount" 
                             Grid.Column="1" 
                             Grid.Row="1" Style="{StaticResource textboxStyle}" > 
                        <!--只允許輸入數(shù)字--> 
                        <TextBox.InputScope> 
                            <InputScope > 
                                <InputScopeName NameValue="Number"/> 
                            </InputScope> 
                        </TextBox.InputScope> 
                    </TextBox> 
                    <TextBlock Text="背面標(biāo)題：" 
                               Grid.Row="2" 
                               Grid.Column="0" Style="{StaticResource textblStyle}" /> 
                    <TextBox x:Name="txtBackTitle" 
                             Grid.Row="2" 
                             Grid.Column="1" Style="{StaticResource textboxStyle}" /> 
                    <TextBlock Text="背景內(nèi)容：" 
                               Grid.Row="3" 
                               Grid.Column="0" Style="{StaticResource textblStyle}" /> 
                    <TextBox x:Name="txtBackContent" 
                             Grid.Row="3" 
                             Grid.Column="1" Style="{StaticResource textboxStyle}" /> 
                    <!--提示是以何種方式啟動(dòng)--> 
                    <CheckBox x:Name="chkStartType" 
                              IsChecked="False" 
                              Grid.Row="4" 
                              Grid.Column="0" 
                              Grid.ColumnSpan="2" 
                              FontSize="30" 
                              Content="通過應(yīng)用程序創(chuàng)建的磁貼啟動(dòng)" 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> 

好的，最后，當(dāng)然是把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"; 
        // 構(gòu)造函數(shù) 
        public MainPage() 
        { 
            InitializeComponent(); 
        } 
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) 
        { 
            base.OnNavigatedTo(e); 
            // 創(chuàng)建的磁貼的啟動(dòng)地址其實(shí)是指向 /MainPage.xaml?s=1 
            // s=1參數(shù)是為了區(qū)別用戶是不是通過程序所創(chuàng)建的磁貼來進(jìn)入啟動(dòng)當(dāng)前程序的， 
            // 就像面前例子中講到的把IE桌面快捷方式的參數(shù)指定為新浪微博的主頁一個(gè)道理。 
 
            // 檢測是否存在s=1來判斷是否通過程序創(chuàng)建的磁貼來啟動(dòng)。 
            ShellTile myTitle = ShellTile.ActiveTiles.FirstOrDefault(n => n.NavigationUri.ToString().Contains("s=1")); 
            if (myTitle != null) 
            { 
                this.chkStartType.IsChecked = true; 
            } 
            else 
            { 
                this.chkStartType.IsChecked = false; 
            } 
        } 
        // 創(chuàng)建圖塊 
        private void btnAddToShellTitle_Click(object sender, RoutedEventArgs e) 
        { 
            // 不管我們的程序是否創(chuàng)建“開始”屏幕磁貼，ActiveTiles的第一個(gè)元素必是當(dāng)前正在前臺運(yùn)行的 
            // 應(yīng)用程序。所以，在取出第一個(gè)ShellTile時(shí)，一定要通過判斷是否存在s=1。 
            // 這個(gè)s=1參數(shù)是隨便取的。 
            ShellTile myTitle = ShellTile.ActiveTiles.FirstOrDefault(m => m.NavigationUri.ToString().Contains("s=1")); 
            // 如果已經(jīng)創(chuàng)建就不建了。 
            if (myTitle != null) 
            { 
                MessageBox.Show("此應(yīng)用程序的磁貼已經(jīng)存在。"); 
            } 
            else 
            { 
                // 創(chuàng)建新磁貼 
                int Counter = 0; 
                // StandardTileData就是用來傳遞ShellTitle的屬性參數(shù)的， 
                // 如正面背景圖的URI，標(biāo)題，計(jì)數(shù)器等。 
                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方法的第一個(gè)參數(shù)是我們啟動(dòng)應(yīng)用程序時(shí)應(yīng)該導(dǎo)航到哪里。 
                // 因?yàn)楸臼纠饔幸粋€(gè)頁面，當(dāng)然是導(dǎo)航到主頁面， 
                // 因?yàn)槭菑奈覀儎?chuàng)建的磁貼來啟動(dòng)的，所以不要忘了帶上s=1參數(shù)。 
                ShellTile.Create(new Uri("/MainPage.xaml?s=1", UriKind.Relative), myData); 
                MessageBox.Show("磁貼圖塊創(chuàng)建成功。"); 
            } 
        } 
        // 更新磁貼信息 
        private void btnUpdateShellTitle_Click(object sender, RoutedEventArgs e) 
        { 
            // 同理，先要判斷是否從我們創(chuàng)建的磁貼啟動(dòng) 
            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("磁貼數(shù)據(jù)更新完成。"); 
            } 
        } 
        // 刪除磁貼 
        // 注意：我們使用代碼只可刪除次要磁貼，也就是我們用代碼創(chuàng)建的， 
        // 不要去刪除應(yīng)用程序磁貼，即通過在應(yīng)用程序項(xiàng)上長按創(chuàng)建的。 
        private void btnDeleteShellTitle_Click(object sender, RoutedEventArgs e) 
        { 
            // 記著，要先判斷是否找到通過我們代碼創(chuàng)建的磁貼。 
            ShellTile title = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("s=1")); 
            if (title != null) 
            { 
                title.Delete(); 
                MessageBox.Show("磁貼圖塊刪除成功。"); 
            } 
        } 
    } 
} 

示例中我們重點(diǎn)是使用了ShellTile類，它并不復(fù)雜，成員不多，大家多玩幾次就熟了。

運(yùn)行之后，我們在“開始”屏幕中創(chuàng)建我們的磁貼，然后回到桌面，我們盯著它別動(dòng)，你會發(fā)現(xiàn)，它的正面與反面會每隔幾秒鐘自動(dòng)輪回切換。