[源码下载]

与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile

作者:webabcd

介绍
与众不同 windows phone 8.0 之 新的瓷贴

  • FlipTileData - 翻转瓷贴。继承了 wp7 时代的 StandardTileData
  • CycleTileData - 循环瓷贴
  • IconicTileData - 图标瓷贴

示例
1、演示 FlipTileData 的应用
Tile/FlipTile.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.Tile.FlipTile"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <ScrollViewer>
            <StackPanel>
                <Button Name="btnPin" Content="pin the flip tile" Margin="0 0 0 10" Click="btnPin_Click" />
                <Image Source="/Tile/FlipTile1.png" />
                <Image Source="/Tile/FlipTile2.png" />
                <Image Source="/Tile/FlipTile3.png" />
            </StackPanel>
        </ScrollViewer>
    </Grid>

</phone:PhoneApplicationPage>

Tile/FlipTile.xaml.cs

/*
 * FlipTileData - 翻转瓷贴。继承了 wp7 时代的 StandardTileData
 *     Title - 正面标题
 *     SmallBackgroundImage - 小图块正面背景
 *     BackgroundImage - 中图块正面背景
 *     WideBackgroundImage - 宽图块正面背景
 *     Count - 正面显示的 badge (徽章),范围 1 - 99
 *     BackTitle - 背面标题
 *     BackBackgroundImage - 中图块背面背景
 *     WideBackBackgroundImage - 宽图块背面背景
 *     BackContent - 中图块背面内容
 *     WideBackContent - 宽图块背面内容
 *
 * 小图块大小:159 × 159
 * 中图块大小:336 × 336
 * 宽图块大小:691 × 336
 *
 * 另:application icon 的大小是 100 × 100
 *
 * 关于 Tile 的更多内容参见:
 * http://www.cnblogs.com/webabcd/archive/2012/06/27/2564975.html
 * http://www.cnblogs.com/webabcd/archive/2012/07/05/2577190.html
 */

using System;
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace Demo.Tile
{
    public partial class FlipTile : PhoneApplicationPage
    {
        public FlipTile()
        {
            InitializeComponent();
        }

        private void btnPin_Click(object sender, RoutedEventArgs e)
        {
            FlipTileData flipTile = new FlipTileData()
            {
                Title = "title",
                BackTitle = "backTitle",
                BackContent = "backContent",
                WideBackContent = "wideBackContent",
                Count = ,
                SmallBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                BackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                WideBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                BackBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                WideBackBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
            };

            // 最后一个参数为是否支持宽图块
            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), flipTile, true);
        }
    }
}

/*
通过 xml 方式构造 flip tile 数据
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
  <wp:Tile Id="[Tile ID]" Template="FlipTile">
    <wp:SmallBackgroundImage [Action="Clear"]>[small Tile size URI]</wp:SmallBackgroundImage>
    <wp:WideBackgroundImage Action="Clear">[front of wide Tile size URI]</wp:WideBackgroundImage>
    <wp:WideBackBackgroundImage Action="Clear">[back of wide Tile size URI]</wp:WideBackBackgroundImage>
    <wp:WideBackContent Action="Clear">[back of wide Tile size content]</wp:WideBackContent>
    <wp:BackgroundImage Action="Clear">[front of medium Tile size URI]</wp:BackgroundImage>
    <wp:Count Action="Clear">[count]</wp:Count>
    <wp:Title Action="Clear">[title]</wp:Title>
    <wp:BackBackgroundImage Action="Clear">[back of medium Tile size URI]</wp:BackBackgroundImage>
    <wp:BackTitle Action="Clear">[back of Tile title]</wp:BackTitle>
    <wp:BackContent Action="Clear">[back of medium Tile size content]</wp:BackContent>
  </wp:Tile>
</wp:Notification>
*/

2、演示 CycleTile 的应用
Tile/CycleTile.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.Tile.CycleTile"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <ScrollViewer>
            <StackPanel>
                <Button Name="btnPin" Content="pin the cycle tile" Margin="0 0 0 10" Click="btnPin_Click" />
                <Image Source="/Tile/CycleTile1.png" />
                <Image Source="/Tile/CycleTile2.png" />
                <Image Source="/Tile/CycleTile3.png" />
            </StackPanel>
        </ScrollViewer>
    </Grid>

</phone:PhoneApplicationPage>

Tile/CycleTile.xaml.cs

/*
 * CycleTileData - 循环瓷贴
 *     Title - 标题
 *     smallBackgroundImage - 小图块背景
 *     Count - badge (徽章),范围 1 - 99
 *     CycleImages - 中图块和宽图块所循环显示的背景图片的集合(最多 9 张图片)
 *
 * 小图块大小:159 × 159
 * 中图块大小:336 × 336
 * 宽图块大小:691 × 336
 *
 * 另:application icon 的大小是 100 × 100
 *
 * 关于 Tile 的更多内容参见:
 * http://www.cnblogs.com/webabcd/archive/2012/06/27/2564975.html
 * http://www.cnblogs.com/webabcd/archive/2012/07/05/2577190.html
 */

using System;
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace Demo.Tile
{
    public partial class CycleTile : PhoneApplicationPage
    {
        public CycleTile()
        {
            InitializeComponent();
        }

        private void btnPin_Click(object sender, RoutedEventArgs e)
        {
            CycleTileData cycleTile = new CycleTileData()
            {
                Title = "title",
                Count = ,
                SmallBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                CycleImages = new Uri[]
                {
                    new Uri("/Assets/AppTile.png", UriKind.Relative),
                    new Uri("/Assets/AppTile.png", UriKind.Relative),
                    new Uri("/Assets/AppTile.png", UriKind.Relative),
                    new Uri("/Assets/AppTile.png", UriKind.Relative),
                    new Uri("/Assets/AppTile.png", UriKind.Relative),
                    new Uri("/Assets/AppTile.png", UriKind.Relative),
                    new Uri("/Assets/AppTile.png", UriKind.Relative)
                }
            };

            // 最后一个参数为是否支持宽图块
            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), cycleTile, true);
        }
    }
}

/*
通过 xml 方式构造 cycle tile 数据
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
  <wp:Tile Id="[Tile ID]" Template="CycleTile">
    <wp:SmallBackgroundImage [Action="Clear"]>[small Tile size URI]</wp:SmallBackgroundImage>
    <wp:CycleImage1 Action="Clear">[photo 1 URI]</wp:CycleImage1>
    <wp:CycleImage2 Action="Clear">[photo 2 URI]</wp:CycleImage2>
    <wp:CycleImage3 Action="Clear">[photo 3 URI]</wp:CycleImage3>
    <wp:CycleImage4 Action="Clear">[photo 4 URI]</wp:CycleImage4>
    <wp:CycleImage5 Action="Clear">[photo 5 URI]</wp:CycleImage5>
    <wp:CycleImage6 Action="Clear">[photo 6 URI]</wp:CycleImage6>
    <wp:CycleImage7 Action="Clear">[photo 7 URI]</wp:CycleImage7>
    <wp:CycleImage8 Action="Clear">[photo 8 URI]</wp:CycleImage8>
    <wp:CycleImage9 Action="Clear">[photo 9 URI]</wp:CycleImage9>
    <wp:Count Action="Clear">[count]</wp:Count>
    <wp:Title Action="Clear">[title]</wp:Title>
  </wp:Tile>
</wp:Notification>
*/

3、演示 IconicTile 的应用
Tile/IconicTile.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.Tile.IconicTile"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <ScrollViewer>
            <StackPanel>
                <Button Name="btnPin" Content="pin the iconic tile" Margin="0 0 0 10" Click="btnPin_Click" />
                <Image Source="/Tile/IconicTile1.png" />
                <Image Source="/Tile/IconicTile2.png" />
                <Image Source="/Tile/IconicTile3.png" />
            </StackPanel>
        </ScrollViewer>
    </Grid>

</phone:PhoneApplicationPage>

Tile/IconicTile.xaml.cs

/*
 * IconicTileData - 图标瓷贴
 *     Title - 标题
 *     Count - badge (徽章),范围 1 - 99
 *     SmallIconImage - 小图块和大图块的图标部分
 *     IconImage - 中图块的图标部分
 *     WideContent1 - 宽图块的第一行的文本
 *     WideContent2 - 宽图块的第二行的文本
 *     WideContent3 - 宽图块的第三行的文本
 *     BackgroundColor - 图块的背景颜色,默认为主题色
 *         注:如果需要指定背景色,其 alpha 必须是 255,否则无效
 *
 * 注:对于图标来说只有白色和透明的概念,也就是说图标中的所有非透明的颜色都会被转换为白色
 *
 * 小图块和大图块的图标部分的大小:110 × 110
 * 中图块的图标部分的大小:202 × 202
 *
 * 另:application icon 的大小是 100 × 100
 *
 * 关于 Tile 的更多内容参见:
 * http://www.cnblogs.com/webabcd/archive/2012/06/27/2564975.html
 * http://www.cnblogs.com/webabcd/archive/2012/07/05/2577190.html
 */

using System;
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Windows.Media;

namespace Demo.Tile
{
    public partial class IconicTile : PhoneApplicationPage
    {
        public IconicTile()
        {
            InitializeComponent();
        }

        private void btnPin_Click(object sender, RoutedEventArgs e)
        {
            IconicTileData iconicTile = new IconicTileData()
            {
                Title = "title",
                Count = ,
                WideContent1 = "wideContent1",
                WideContent2 = "wideContent2",
                WideContent3 = "wideContent3",
                SmallIconImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                IconImage = new Uri("/Assets/AppTile.png", UriKind.Relative),
                BackgroundColor = , R = , G = , B =  } // alpha 必须是 255,否则无效
            };

            // 最后一个参数为是否支持宽图块
            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), iconicTile, true);
        }
    }
}

/*
通过 xml 方式构造 iconic tile 数据
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
  <wp:Tile Id="[Tile ID]" Template="IconicTile">
    <wp:SmallIconImage [Action="Clear"]>[small Tile size URI]</wp:SmallIconImage>
    <wp:IconImage Action="Clear">[medium/wide Tile size URI]</wp:IconImage>
    <wp:WideContent1 Action="Clear">[1st row of content]</wp:WideContent1>
    <wp:WideContent2 Action="Clear">[2nd row of content]</wp:WideContent2>
    <wp:WideContent3 Action="Clear">[3rd row of content]</wp:WideContent3>
    <wp:Count Action="Clear">[count]</wp:Count>
    <wp:Title Action="Clear">[title]</wp:Title>
    <wp:BackgroundColor Action="Clear">[hex ARGB format color]</wp:BackgroundColor>
  </wp:Tile>
</wp:Notification>
*/

OK
[源码下载]

与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile的更多相关文章

  1. 与众不同 windows phone (34) - 8.0 新的控件: LongListSelector

    [源码下载] 与众不同 windows phone (34) - 8.0 新的控件: LongListSelector 作者:webabcd 介绍与众不同 windows phone 8.0 之 新的 ...

  2. 与众不同 windows phone (35) - 8.0 新的启动器: ShareMediaTask, SaveAppointmentTask, MapsTask, MapsDirectionsTask, MapDownloaderTask

    [源码下载] 与众不同 windows phone (35) - 8.0 新的启动器: ShareMediaTask, SaveAppointmentTask, MapsTask, MapsDirec ...

  3. 与众不同 windows phone (43) - 8.0 相机和照片: 镜头的可扩展性, 图片的可扩展性, 图片的自动上传扩展

    [源码下载] 与众不同 windows phone (43) - 8.0 相机和照片: 镜头的可扩展性, 图片的可扩展性, 图片的自动上传扩展 作者:webabcd 介绍与众不同 windows ph ...

  4. 与众不同 windows phone (44) - 8.0 位置和地图

    [源码下载] 与众不同 windows phone (44) - 8.0 位置和地图 作者:webabcd 介绍与众不同 windows phone 8.0 之 位置和地图 位置(GPS) - Loc ...

  5. 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复

    [源码下载] 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复 作者:webabcd 介绍与众不同 win ...

  6. 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件

    [源码下载] 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件 作者:w ...

  7. 与众不同 windows phone (38) - 8.0 关联启动: 使用外部程序打开一个文件或URI, 关联指定的文件类型或协议

    [源码下载] 与众不同 windows phone (38) - 8.0 关联启动: 使用外部程序打开一个文件或URI, 关联指定的文件类型或协议 作者:webabcd 介绍与众不同 windows ...

  8. 与众不同 windows phone (39) - 8.0 联系人和日历

    [源码下载] 与众不同 windows phone (39) - 8.0 联系人和日历 作者:webabcd 介绍与众不同 windows phone 8.0 之 联系人和日历 自定义联系人存储的增删 ...

  9. 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能

    [源码下载] 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能 作者:webabcd 介绍与众不同 windows ...

随机推荐

  1. 站在巨人的肩膀上---重新自定义 android- ExpandableListView 收缩类,实现列表的可收缩扩展

    距离上次更新博客,时隔略长,诸事繁琐,赶在去广州答辩之前,分享下安卓 android 中的一个 列表收缩 类---ExpandableListView 先上效果图: 如果想直接看实现此页面的代码请下滑 ...

  2. SQL盲注之正则攻击

    我们都已经知道,在MYSQL 5+中 information_schema库中存储了所有的 库名,表明以及字段名信息.故攻击方式如下: 1. 判断第一个表名的第一个字符是否是a-z中的字符,其中bli ...

  3. 【服务器防护】VPN的ip变更,导致无法连接服务器,解决方法【阿里云ECS】

    在阿里云的管理控制台,云服务器ECS - 对应服务器 - 选“管理” - “连接管理终端” 通过这个入口,可以进入Linux云服务器,修改防火墙限制的IP即可

  4. python 抓取javascript 动态数据

    1. 新安装一个python库 :~$ sudo pip install seleniumhq 2. 编写代码: 以获取百度百科点赞数为例 import selenium from selenium ...

  5. The 500 Most Commonly Used Words in the English Language

    Based on the combined results of British English, American English and Australian English surveys of ...

  6. php缩放gif和png格式透明背景变成黑色的解决方法

    在对gif或png格式的图片进行缩放等操作时,原本透明背景的图片最后都变成黑色的,解决办法 $img = imagecreatetruecolor(, ); //2.上色 $color=imageco ...

  7. 搭建一个BS 的简单SOA 架构(直接通过jquery 调用后台的 wcf 服务的架构)(第一天)

    亲们!还在用传统的三层架构吗?你还在对SOA架构 不了解吗? 那就赶快来学习下一个 比较简单的SOA的架构吧!我会手把手的 教会你们怎么搭建这个 简单的SOA的架构. 其中用的技术点保证  WCF,a ...

  8. Maven快速搭建GUI项目

    一.eclipse安装好maven插件,并将maven集成到eclipse之后,用maven的archetype,搭建好一个maven-archetype-queckstart项目的骨架. 二.可执行 ...

  9. JAVA连接数据库后,对数据库进行增删改查

    1.Statement 增删改: 方法:execute(String SQL) String url="jdbc:Access:///E://A//shop.mdb"; Conne ...

  10. xlistview长按

    //XListView的长摁事件 xlistview.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() { @O ...