Windows Phone開發(12):認識一下獨具個性的磁貼

作者：junwong 2013-04-17 11:21:59

Windows Phone是微軟發布的一款手機操作系統，它將微軟旗下的Xbox Live游戲、Xbox Music音樂與獨特的視頻體驗整合至手機中。

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

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

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

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

磁貼的分類。

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

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

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

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

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

動手實戰。

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

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

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

#p#

當然，為了方便大家練習參考，我把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類，它并不復雜，成員不多，大家多玩幾次就熟了。

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

責任編輯：閆佳明來源： oschina

Windows Phone開發 Windows Phone磁貼