原文: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类,它并不复杂,成员不多,大家多玩几次就熟了。

运行之后,我们在“开始”屏幕中创建我们的磁贴,然后回到桌面,我们盯着它别动,你会发现,它的正面与反面会每隔几秒钟自动轮回切换。

Windows Phone开发(12):认识一下独具个性的磁贴的更多相关文章

  1. Windows Phone开发(12):认识一下独具个性的磁贴(转)

    对"磁贴"的理解是一点也不抽象的,为什么呢?只要你愿意启动WP系统,无论你是在模拟器中还是在真机中,是的,桌面上那一块块像地板的玩意儿,就是磁贴了.(图:磁贴) 在上图中,我们很直 ...

  2. Windows Phone开发-开发环境和结构

    Windows Phone 7.1的开发工具发布了,一直对WP7很关注,现在终于可以开始学习了.其实09年就学习过silverlight,看过3的SDK文档,当时因为工作,断断续续也没有坚持下来,所以 ...

  3. Kinect for Windows SDK开发入门(15):进阶指引 下

    Kinect for Windows SDK开发入门(十五):进阶指引 下 上一篇文章介绍了Kinect for Windows SDK进阶开发需要了解的一些内容,包括影像处理Coding4Fun K ...

  4. Windows 10开发基础——文件、文件夹和库(一)

    原文:Windows 10开发基础--文件.文件夹和库(一) 主要内容: 1.枚举查询文件和文件夹 2.文本文件读写的三种方法——创建写入和读取文件 3.获得文件的属性 枚举查询文件和文件夹 先了解一 ...

  5. Windows Phone开发(48):不可或缺的本地数据库

    原文:Windows Phone开发(48):不可或缺的本地数据库 也许WP7的时候,是想着让云服务露两手,故似乎并不支持本地数据库,所有数据都上传上"云"数据库中.不过呢,在SD ...

  6. Windows Phone开发(47):轻松调用Web Service

    原文:Windows Phone开发(47):轻松调用Web Service 众所周知(除了没用过VS的),在VS里面调用Web Service是一件很愉快的事情,不解释,相信很多朋友在以前的项目中肯 ...

  7. Windows Phone开发(46):与Socket有个约会

    原文:Windows Phone开发(46):与Socket有个约会 不知道大家有没有"谈Socket色变"的经历?就像我一位朋友所说的,Socket这家伙啊,不得已而用之.哈,S ...

  8. Windows Phone开发(45):推送通知大结局——Raw通知

    原文:Windows Phone开发(45):推送通知大结局--Raw通知 为什么叫大结局呢?因为推送通知服务就只有三种,前面扯了两种,就剩下一种--Raw通知. 前面我们通过两节的动手实验,相信大家 ...

  9. Windows Phone开发(43):推送通知第一集——Toast推送

    原文:Windows Phone开发(43):推送通知第一集--Toast推送 好像有好几天没更新了,抱歉抱歉,最近"光荣"地失业,先是忙于寻找新去处,唉,暂时没有下文.而后又有一 ...

随机推荐

  1. 【Demo 0002】Java基础-语句

    本章学习要点:        1.  掌握Java关健语句使用方法;          2.  理解与语句相关的关键字用法; 一.Java 关键语句        Java语句以及关联关键字与C完全相 ...

  2. 【Android UI设计与开发】第17期:滑动菜单栏(二)开源项目SlidingMenu的示例

    通过上一篇文章的讲解,相信大家对于开源项目SlidingMenu都有了一个比较初步的了解(不了解的可以参考上 一篇文章),那么从这一章开始,博主将会以SlidingMenu为重心,给大家带来非常丰富的 ...

  3. 代码写解压zip文件

    最近项目中服务器方返回了zip文件类型的文件,在网上搜了好多资料做成一个Demo,这里用来详解一下. ZipArchive类来源于网络.还望多多交流. 1.首先添加libz.dylib框架 2.前往h ...

  4. Cocos2d-x CCProgressTimer

    CCProgressTimer,创建使用这个节点可以大致实现两个作用的效果: 其一:在游戏中几乎大部分的游戏启动界面都是游戏加载画面,那么用到的一般是进度条提示加载进度,其使用的就是CCProgres ...

  5. 在toolbar里动态创建多个button(ext.net)

    private void setOneMenu() { string sql = "select id,name,gids from Config where name<>'高级 ...

  6. Bootstrap表格的使用

    先定义前端table <table class="table table-striped table-bordered table-hover" id="expan ...

  7. JAVA编程心得-JAVA实现CRC-CCITT(XMODEM)算法

    CRC即循环冗余校验码(Cyclic Redundancy Check):是数据通信领域中最常用的一种差错校验码,其特征是信息字段和校验字段的长度可以任意选定. 1 byte checksum CRC ...

  8. Delphi XE中类成员的访问权限(新增了strict private和strict protected,还有automated)

    Delphi XE中类成员的访问权限共提供了6个关键词来用于限定访问权限:public.private.protected.published.automated strict private . s ...

  9. chrome查看headers

    F12-> network标签, 刷新网页-> 找到该网页url,选择headers

  10. spring-security3.2.5实现中国式安全管理(转)

    最近公司要做开发平台,对安全要求比较高:SPRING SECURTIY框架刚好对所有安全问题都有涉及,框架的作者最近还做了spring-session项目实现分布式会话管理,还有他的另一个开源项目sp ...