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>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
好的,最后,当然是把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("磁贴图块删除成功。");
}
}
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
示例中我们重点是使用了ShellTile类,它并不复杂,成员不多,大家多玩几次就熟了。
运行之后,我们在“开始”屏幕中创建我们的磁贴,然后回到桌面,我们盯着它别动,你会发现,它的正面与反面会每隔几秒钟自动轮回切换。
文章来源:http://blog.csdn.net/tcjiaan/article/details/7313866
Windows Phone开发(12):认识一下独具个性的磁贴(转)的更多相关文章
- Windows Phone开发(12):认识一下独具个性的磁贴
原文:Windows Phone开发(12):认识一下独具个性的磁贴 对"磁贴"的理解是一点也不抽象的,为什么呢?只要你愿意启动WP系统,无论你是在模拟器中还是在真机中,是的,桌面 ...
- Windows Phone开发-开发环境和结构
Windows Phone 7.1的开发工具发布了,一直对WP7很关注,现在终于可以开始学习了.其实09年就学习过silverlight,看过3的SDK文档,当时因为工作,断断续续也没有坚持下来,所以 ...
- Kinect for Windows SDK开发入门(15):进阶指引 下
Kinect for Windows SDK开发入门(十五):进阶指引 下 上一篇文章介绍了Kinect for Windows SDK进阶开发需要了解的一些内容,包括影像处理Coding4Fun K ...
- Windows 10开发基础——文件、文件夹和库(一)
原文:Windows 10开发基础--文件.文件夹和库(一) 主要内容: 1.枚举查询文件和文件夹 2.文本文件读写的三种方法——创建写入和读取文件 3.获得文件的属性 枚举查询文件和文件夹 先了解一 ...
- Windows Phone开发(48):不可或缺的本地数据库
原文:Windows Phone开发(48):不可或缺的本地数据库 也许WP7的时候,是想着让云服务露两手,故似乎并不支持本地数据库,所有数据都上传上"云"数据库中.不过呢,在SD ...
- Windows Phone开发(47):轻松调用Web Service
原文:Windows Phone开发(47):轻松调用Web Service 众所周知(除了没用过VS的),在VS里面调用Web Service是一件很愉快的事情,不解释,相信很多朋友在以前的项目中肯 ...
- Windows Phone开发(46):与Socket有个约会
原文:Windows Phone开发(46):与Socket有个约会 不知道大家有没有"谈Socket色变"的经历?就像我一位朋友所说的,Socket这家伙啊,不得已而用之.哈,S ...
- Windows Phone开发(45):推送通知大结局——Raw通知
原文:Windows Phone开发(45):推送通知大结局--Raw通知 为什么叫大结局呢?因为推送通知服务就只有三种,前面扯了两种,就剩下一种--Raw通知. 前面我们通过两节的动手实验,相信大家 ...
- Windows Phone开发(43):推送通知第一集——Toast推送
原文:Windows Phone开发(43):推送通知第一集--Toast推送 好像有好几天没更新了,抱歉抱歉,最近"光荣"地失业,先是忙于寻找新去处,唉,暂时没有下文.而后又有一 ...
随机推荐
- IDC机房网络测试要求
IDC机房网络质量要求: 我司项目目前覆盖目标机房是国内BGP机房.三线机房.电信机房.联通机房. 要求XXXX IDC机房到目标机房的网络质量,平均丢包≤0.5%,网络延迟≤50ms;高峰期平均丢包 ...
- 在VMware虚拟机中配置DOS汇编开发环境!!
操作系统:win7 32位 DOS环境:DosBox 下载:http://www.dosbox.com/ 选择当前适合自己版本,下载就可以了. 汇编编译器:MASM 5.0 下载:http://do ...
- Nginx+Tomcat+Keepalived+Memcache 负载均衡动静分离技术
一.概述 Nginx 作负载均衡器的优点许多,简单概括为: ①实现了可弹性化的架构,在压力增大的时候可以临时添加Tomcat服务器添加到这个架构里面去; ②upstream具有负载均衡能力,可以自动判 ...
- C++学习39 异常处理入门(try和catch)
编译器能够保证代码的语法是正确的,但是对逻辑错误和运行时错误却无能为力,例如除数为 0.内存分配失败.数组越界等.这些错误如果放任不管,系统就会执行默认的操作,终止程序运行,也就是我们常说的程序崩溃( ...
- [Flex] ButtonBar系列——控制ButtonBar菜单是否可用
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- java GUI之事件处理
常见事件及相应事件源类型 事件源 用户操作 事件 JButton 点击按钮 ActionEvent JTextField 在文本域按回车键 ActionEvent JCheckBox 点击复选框 Ac ...
- 使用mustache.js 模板引擎输出html
看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...
- [SQL]SUTFF内置函数的用法
STUFF 删除指定长度的字符并在指定的起始点插入另一组字符. 语法 STUFF ( character_expression , start , length , character_express ...
- 查看mysql表结构的几种方法
desc 表名; show columns from 表名; describe 表名; show create table 表名; use information_schemaselect * fro ...
- 安装配置opensips
opensips提供了一个视频教程(这个页面有下载链接,90M),参考教程 wget http://opensips.org/pub/opensips/1.9.1/src/opensips-1.9.1 ...