[源码下载]

与众不同 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. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

  2. IISExpress 调试使用学习,使用附加到进程进行快速调试

    IIS8.0 Express已经推出了,大家可以通过Microsoft Web Platform Installer 进行安装.(VS2012,VS2013已经内置了,不需安装了) 1.IIS Exp ...

  3. HTML5 十大新特性(一)——语义标签

    说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...

  4. [Issue]repo/repo init-解决同步源码Cannot get http://gerrit.googlesource.com/git-repo/clone.bundle

    1. 前两天想搭建freescale L3.0.35_4.1.0_BSP包,结果LTIB环境搭建好,也编译出rootfs/uboot/kernel的Image了,但是准备移植uboot的时候发现ubo ...

  5. java String对象的创建(jvm).

    本人目前也开始学习虚拟机,在java中,有很多种类型的虚拟机,其中就以sum公司(当然现在已经是oracle了)的虚拟机为例,介绍可能在面试的时候用到的,同时对自己了解String有很大帮助,这里仅仅 ...

  6. 参加公司工作总结会要准备的内容 IT 技术部

    季度总结PPT内容: 1.工作总概述:在总结期内完成的具有代表性的工作内容(最好是直观的实现界面或功能演示截图,而不是苍白的文字描述): 2.问题总结:操作有难度或者难以把握的问题,在和相关人员沟通后 ...

  7. 【转】Java并发编程:并发容器之CopyOnWriteArrayList

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...

  8. 2017/05/08 java 基础 随笔

    1.null pointer exception 指针变量obj 没有指向任何空间 你调用它的方法和属性就会出错 2.基本数据类型值传递,不改变原值,调用后就会弹栈,局部变量随时消失 引用数据类型值传 ...

  9. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  10. C#数字类型输出字符串时保留指定小数位数的方法

    1.使用占位符: 1)float f = 321.12345F;f.ToString("0.00");这样做无论f是不是整数,都将加上2位小数. 2)float f = 321.1 ...