Windows Phone development and learning-talk about tile [WP8]

As we all know, after Microsoft kidnapped Nokia, it began to build a Windows phone8 operating system. Although the system interface looks similar to Windows phone7, the underlying layer has undergone major changes. For users, the most eye-catching is the change in the size of the tile on the desktop. Originally, there was only one tile, and now the size has changed to three, and there are also three types of tile, it seems that Microsoft has opened up more things.

If you need to learn more about the tile information please see msdn, http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202948 (V = vs.105). aspx here is just roughly speaking of the creation process of the three tile. The three magnetic stickers are as follows:

• Flip: A tile with a flip effect, similar to the one in the oldest version.
• Iconic
• Cycle

The following describes how to create these three kinds of magnetic stickers. The premise is that the windows phone8 platform first creates a class for each tile and a series of get set functions to update data. Here we use filptile as an example:

using System;
using Microsoft.Phone.Shell;

namespace Mangopollo.Tiles
{
    // Summary:
    // Describes a Tile template that flips from the front to the back side. Allows
    // customization of the background image and text for both the front and back
    // Tile.
    public class FlipTileData
    {
        private readonly object _shelltiledata;

        public FlipTileData ()
        {
            Type tileDataType = Type.GetType ("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");
            _shelltiledata = tileDataType.GetConstructor (new Type [] {}). Invoke (null);
        }

        // Summary:
        // Gets or sets the text that displays on the front side of the medium and wide
        // tile sizes.
        //
        // Returns:
        // The text that displays on the front side of the medium and wide tile sizes.
        public string Title
        {
            get {return (string) Utils.GetProperty (_shelltiledata, "Title");}
            set {Utils.SetProperty (_shelltiledata, "Title", value);}
        }

        // Summary:
        // Gets or sets a background image of the back of the Tile. If this property
        // is an empty URI, the background image of the back of the Tile will not change
        // during an update.
        //
        // Returns:
        // The background image of the back of the Tile.
        public Uri BackBackgroundImage
        {
            get {return (Uri) Utils.GetProperty (_shelltiledata, "BackBackgroundImage");}
            set {Utils.SetProperty (_shelltiledata, "BackBackgroundImage", value);}
        }

        //
        // Summary:
        // Gets or sets the text to display on the back of the Tile, above the title.
        // If this property is an empty string, the content on the back of the Tile
        // will not change during an update.
        //
        // Returns:
        // The text to display on the back of the Tile, above the title.
        public string BackContent
        {
            get {return (string) Utils.GetProperty (_shelltiledata, "BackContent");}
            set {Utils.SetProperty (_shelltiledata, "BackContent", value);}
        }

        //
        // Summary:
        // Gets or sets the background image of the front of the Tile. If this property
        // is an empty URI, the background image of the front of the Tile will not change
        // during an update.
        //
        // Returns:
        // The background image of the front of the Tile.
        public Uri BackgroundImage
        {
            get {return (Uri) Utils.GetProperty (_shelltiledata, "BackgroundImage");}
            set {Utils.SetProperty (_shelltiledata, "BackgroundImage", value);}
        }

        //
        // Summary:
        // Gets or sets the title to display at the bottom of the back of the Tile.
        // If this property is an empty string, the title on the back of the Tile will
        // not change during an update.
        //
        // Returns:
        // The title to display at the bottom of the back of the Tile.
        public string BackTitle
        {
            get {return (string) Utils.GetProperty (_shelltiledata, "BackTitle");}
            set {Utils.SetProperty (_shelltiledata, "BackTitle", value);}
        }

        //
        // Summary:
        // Gets or sets a value between 1 and 99 will be displayed in the Count field
        // of the Tile. A value of 0 means the Count will not be displayed. If this
        // property is not set, the Count display will not change during an update.
        //
        // Returns:
        // A value between 1 and 99 will be displayed in the Count field of the Tile.
        public int? Count
        {
            get {return (int?) Utils.GetProperty (_shelltiledata, "Count");}
            set {Utils.SetProperty (_shelltiledata, "Count", value);}
        }

        // Summary:
        // Gets and sets the front-side background image for the small Tile size.
        //
        // Returns:
        // The front-side background image for the small Tile size.
        public Uri SmallBackgroundImage
        {
            get {return (Uri) Utils.GetProperty (_shelltiledata, "SmallBackgroundImage");}
            set {Utils.SetProperty (_shelltiledata, "SmallBackgroundImage", value);}
        }

        //
        // Summary:
        // Gets and sets the back-side background image for the wide Tile size.
        //
        // Returns:
        // The back-side background image for the wide Tile size.
        public Uri WideBackBackgroundImage
        {
            get {return (Uri) Utils.GetProperty (_shelltiledata, "WideBackBackgroundImage");}
            set {Utils.SetProperty (_shelltiledata, "WideBackBackgroundImage", value);}
        }

        //
        // Summary:
        // Gets and sets the text that displays above the title, on the back-side of
        //the wide Tile size.
        //
        // Returns:
        // The text that displays above the title, on the back-side of the wide Tile
        // size.
        public string WideBackContent
        {
            get {return (string) Utils.GetProperty (_shelltiledata, "WideBackContent");}
            set {Utils.SetProperty (_shelltiledata, "WideBackContent", value);}
        }

        //
        // Summary:
        // Gets and sets the front-side background image for the wide Tile size.
        //
        // Returns:
        // The front-side background image for the wide Tile size.
        public Uri WideBackgroundImage
        {
            get {return (Uri) Utils.GetProperty (_shelltiledata, "WideBackgroundImage");}
            set {Utils.SetProperty (_shelltiledata, "WideBackgroundImage", value);}
        }


        public static implicit operator ShellTileData (FlipTileData data)
        {
            return (ShellTileData) data._shelltiledata;
        }

        public ShellTileData ToShellTileData ()
        {
            return (ShellTileData) _shelltiledata;
        }
    }
}
Then create ShellTileExt.cs class, which is used to create Tile
using System;
using System.Reflection;
using Microsoft.Phone.Shell;

namespace Mangopollo.Tiles
{
    public static class ShellTileExt
    {
        public static void Create (Uri uri, ShellTileData tiledata, bool usewide)
        {
            Type shellTileType = Type.GetType ("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");
            MethodInfo createmethod = shellTileType.GetMethod ("Create", new [] {typeof (Uri), typeof (ShellTileData), typeof (bool)});
            createmethod.Invoke (null, new object [] {uri, tiledata, usewide});
        }
    }
}
Finally, just like the old version of creating tiles, just set a few parameters and pass in. The following is part of the code in main.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Media;
using Mangopollo.Tasks;
using Mangopollo.Tiles;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Microsoft.Phone.Tasks;

namespace Mangopollo.Sample
{
    public partial class MainPage: PhoneApplicationPage
    {
        // Constructor
        public MainPage ()
        {
            InitializeComponent ();
        }

        // Test whether it is wp8 device
        private void TestIfWP8_Click (object sender, RoutedEventArgs e)
        {
            if (Utils.IsWP8)
            {
                MessageBox.Show ("It's a Windows Phone 8!");
            }
            else
            {
                MessageBox.Show ("It's a Windows Phone 7!");
            }
        }

        // judge whether it is 7.8 device
        private void TestIfWP78_Click (object sender, RoutedEventArgs e)
        {
            if (Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("It's a Windows Phone 7.8 or sup!");
            }
            else
            {
                MessageBox.Show ("It's a Windows Phone 7!");
            }
        }


        // Create an ordinary circular tile
        private void CreateCycleTile_Click (object sender, RoutedEventArgs e)
        {
            // Dynamic tiles
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }
            try
            {
                var mytile = new CycleTileData
                    {
                        Title = "cyclic tile",
                        Count = 42,
                        SmallBackgroundImage = new Uri ("/ Assets / logo159x159.png", UriKind.Relative),
                        CycleImages = new List <Uri> {new Uri ("/ Assets / Image1.png", UriKind.Relative), new Uri ("/ Assets / Image2.png", UriKind.Relative), new Uri ("/ Assets / Image3 .png ", UriKind.Relative)}
                    };
#if ALTERNATIVE_SOLUTION
                var mytile = Mangopollo.Tiles.TilesCreator.CreateCyclicTile ("cyclic tile", 42, new Uri ("/ Assets / logo159x159.png", UriKind.Relative), new List <Uri> () {new Uri ("/ Assets / Image1.png ", UriKind.Relative), new Uri (" / Assets / Image2.png ", UriKind.Relative), new Uri (" / Assets / Image3.png ", UriKind.Relative)});
#endif
                ShellTileExt.Create (new Uri ("/ MainPage.xaml? Msg = from% 20cycle% 20tile", UriKind.Relative), mytile, false);
            }
            catch
            {
                MessageBox.Show ("remove tile before create it again");
            }
        }

        // Create a wide loop tile
        private void CreateCycleTileWide_Click (object sender, RoutedEventArgs e)
        {
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }

            try
            {
                var mytile = new CycleTileData
                    {
                        Title = "cyclic wide tile",
                        Count = 42,
                        SmallBackgroundImage = new Uri ("/ Assets / logo159x159.png", UriKind.Relative),
                        CycleImages = new List <Uri> {new Uri ("/ Assets / Image1.png", UriKind.Relative), new Uri ("/ Assets / Image2.png ", UriKind.Relative), new Uri (" / Assets / Image3.png ", UriKind.Relative)}
                    };

#if ALTERNATIVE_SOLUTION
                var mytile = Mangopollo.Tiles.TilesCreator.CreateCyclicTile ("cyclic wide tile", 42, new Uri ("/ Assets / logo159x159.png", UriKind.Relative), new List <Uri> () {new Uri ("/ Assets /Image1.png ", UriKind.Relative), new Uri (" / Assets / Image2.png ", UriKind.Relative), new Uri (" / Assets / Image3.png ", UriKind.Relative)});
#endif
                ShellTileExt.Create (new Uri ("/ MainPage.xaml? Msg = from% 20wide% 20cycle% 20tile", UriKind.Relative), mytile, true);
            }
            catch
            {
                MessageBox.Show ("remove tile before create it again");
            }
        }


        // Create ordinary icon tiles
        private void CreateIconicTile_Click (object sender, RoutedEventArgs e)
        {
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }

            try
            {
                var mytile = new IconicTileData
                    {
                        Title = "iconic tile",
                        Count = 8,
                        BackgroundColor = Colors.Purple,
                        IconImage = new Uri ("/ Assets / logo202x202.png", UriKind.Relative),
                        SmallIconImage = new Uri ("/ Assets / logo110x110.png", UriKind.Relative)
                    };

#if ALTERNATIVE_SOLUTION
                var mytile = Mangopollo.Tiles.TilesCreator.CreateIconicTile ("iconic tile", 8, Colors.Purple, new Uri ("/ Assets / logo202x202.png", UriKind.Relative), new Uri ("/ Assets / logo110x110.png" , UriKind.Relative));
#endif
                ShellTileExt.Create (new Uri ("/ MainPage.xaml? Msg = from% 20iconic% 20tile", UriKind.Relative), mytile, false);
            }
            catch
            {
                MessageBox.Show ("remove tile before create it again");
            }
        }

        // Create a wide icon tile
        private void CreateIconicTileWide_Click (object sender, RoutedEventArgs e)
        {
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }

            try
            {
                var mytile = new IconicTileData
                    {
                        Title = "iconic wide tile",
                        Count = 8,
                        BackgroundColor = Color.FromArgb (255, 200, 10, 30),
                        IconImage = new Uri ("/ Assets / logo202x202.png", UriKind.Relative),
                        SmallIconImage = new Uri ("/ Assets / logo110x110.png", UriKind.Relative),
                        WideContent1 = "Mangopollo Library",
                        WideContent2 = "use Windows Phone 8 features",
                        WideContent3 = "on Windows Phone 7 apps"
                    };

#if ALTERNATIVE_SOLUTION
                var mytile = Mangopollo.Tiles.TilesCreator.CreateIconicTile ("iconic wide tile", 8, Colors.Gray, new Uri ("/ Assets / logo202x202.png", UriKind.Relative), new Uri ("/ Assets / logo110x110.png ", UriKind.Relative)," Mangopollo Library "," created by "," Rudy Huyn ");
#endif
                ShellTileExt.Create (new Uri ("/ MainPage.xaml? Msg = from% 20wide% 20iconic% 20tile", UriKind.Relative), mytile, true);
            }
            catch
            {
                MessageBox.Show ("remove tile before create it again");
            }
        }

        // Create a normal flip tile
        private void CreateFlipTile_Click (object sender, RoutedEventArgs e)
        {
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }

            try
            {
                var mytile = new FlipTileData
                    {
                        Title = "flip tile",
                        BackTitle = "created by",
                        BackContent = "Rudy Huyn",
                        Count = 9,
                        SmallBackgroundImage = new Uri ("/ Assets / logo159x159.png", UriKind.Relative),
                        BackgroundImage = new Uri ("/ Assets / Background336x336_1.png", UriKind.Relative),
                        BackBackgroundImage = new Uri ("/ Assets / Background336x336_2.png", UriKind.Relative)
                    };


#if ALTERNATIVE_SOLUTION
                var mytile = Mangopollo.Tiles.TilesCreator.CreateFlipTile ("wide flip tile", "created by", "Rudy Huyn", 9, new Uri ("/ Assets / logo159x159.png", UriKind.Relative), new Uri (" /Assets/Background336x336_1.png ", UriKind.Relative), new Uri (" / Assets / Background336x336_2.png ", UriKind.Relative));
#endif
                ShellTileExt.Create (new Uri ("/ MainPage.xaml? Msg = from% 20flip% 20tile", UriKind.Relative), mytile, false);
            }
            catch
            {
                MessageBox.Show ("remove tile before create it again");
            }
        }

        // Create a wide flip tile
        private void Create FlipTileWide_Click (object sender, RoutedEventArgs e)
        {
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }

            try
            {
                var mytile = new FlipTileData
                    {
                        Title = "wide flip tile",
                        BackTitle = "created by",
                        BackContent = "Rudy Huyn",
                        Count = 9,
                        SmallBackgroundImage = new Uri ("/ Assets / logo159x159.png", UriKind.Relative),
                        BackgroundImage = new Uri ("/ Assets / Background336x336_1.png", UriKind.Relative),
                        BackBackgroundImage = new Uri ("/ Assets / Background336x336_2.png", UriKind.Relative),
                        WideBackContent = "This is a very long long text to demonstrate the back content of a wide flip tile",
                        WideBackgroundImage = new Uri ("/ Assets / Background691x336_1.png", UriKind.Relative),
                        WideBackBackgroundImage = new Uri ("/ Assets / Background691x336_2.png", UriKind.Relative)
                    };

#if ALTERNATIVE_SOLUTION
                var mytile = Mangopollo.Tiles.TilesCreator.CreateFlipTile ("flip tile", "created by", "Rudy Huyn", "This is a very long long text to demonstrate the back content of a wide flip tile", 9, new Uri ("/Assets/logo159x159.png", UriKind.Relative), new Uri ("/ Assets / Background336x336_1.png", UriKind.Relative), new Uri ("/ Assets / Background336x336_2.png", UriKind.Relative), new Uri ("/ Assets / Background691x336_1.png", UriKind.Relative), new Uri ("/ Assets / Background691x336_2.png", UriKind.Relative));
#endif
                ShellTileExt.Create (new Uri ("/ MainPage.xaml? Msg = from% 20wipe% 20flip% 20tile", UriKind.Relative), mytile, true);
            }
            catch
            {
                MessageBox.Show ("remove tile before create it again");
            }
        }

        private void UpdateMainTile_Click (object sender, RoutedEventArgs e)
        {
            if (! Utils.CanUseLiveTiles)
            {
                MessageBox.Show ("This feature needs Windows Phone 8");
                return;
            }

            var maintile = new FlipTileData
                {
                    Title = "main tile",
                    BackTitle = "this is main tile",
                    BackContent = "main tile",
                    Count = 3,
                    SmallBackgroundImage = new Uri ("/ Assets / logo159x159.png", UriKind.Relative),
                    BackgroundImage = new Uri ("/ Assets / Background336x336_2.png", UriKind.Relative),
                    BackBackgroundImage = new Uri ("/ Assets / Background336x336_1.png", UriKind.Relative),
                    WideBackContent = "This is a very long long text to demonstrate the back content of a wide flip tile",
                    WideBackgroundImage = new Uri ("/ Assets / Background691x336_2.png", UriKind.Relative),
                    WideBackBackgroundImage = new Uri ("/ Assets / Background691x336_1.png", UriKind.Relative)
                };

#if ALTERNATIVE_SOLUTION
            var maintile = Mangopollo.Tiles.TilesCreator.CreateFlipTile ("main tile", "This is", "main tile", "This is a very long long text to demonstrate the back content of a wide flip tile", 9, new Uri ("/Assets/logo159x159.png", UriKind.Relative), new Uri ("/ Assets / Background336x336_1.png", UriKind.Relative), new Uri ("/ Assets / Background336x336_2.png", UriKind.Relative), new Uri ("/ Assets / Background691x336_1.png", UriKind.Relative), new Uri ("/ Assets / Background691x336_2.png", UriKind.Relative));
#endif
            ShellTile.ActiveTiles.First (). Update (maintile);
        }
The files of the whole project are as follows

Note: The source code here is from an open source project on CodePlex, the address is located at http://mangopollo.codeplex.com/ If you need to view the source code, please go to download it yourself. The program also includes some functions of maps and tasks, but because of the The topic of the tile is irrelevant and will not be repeated here. It should also be mentioned that tiles should be used in different occasions, not all tiles can be used in any occasion. This article on MSDN has detailed the scope of use of each tile: http://msdn.microsoft. com / en-us / library / windowsphone / design / jj662926 (v = vs.105) .aspx