Script 2: Tile control in Studio for WinRT XAML

image

  

Tile 

Create tiled displays and navigation hubs with ComponentOne Tiles for WinRT XAML. Tiles make it easy to replicate the Windows 8 start screen experience in your own app. Get several different tile controls that support sliding and flipping animations with live updates. Combine tiles with different containers to achieve endless layout possibilities

Features

  • Create Flipping and Sliding Tiles

With the C1FlipTile and C1SlideTile controls you can create tiles that display alternating content with a sliding or flipping animation. Simply design your template and provide content to the control. The updates and animations are handled automatically.

  • Familiar Windows 8 Live Tile Behavior

ComponentOne Tiles have been specially designed for Windows Store and Windows Phone apps. Each tile control exhibits the same interactive behavior as the start screen live tiles on Windows 8 and Windows Phone. This means your app will present familiar behavior to the user and you don’t have to lift a finger (except to select a tile).

  • Live Updates

ComponentOne Tiles can flip, slide, and show updated “live” content. You can easily control the update interval using the static C1TileService class and the UpdateInterval property.

  • Host in Any Container

ComponentOne Tiles can be hosted in any ItemsControl containers such as C1TileListBox, C1WrapPanel, or the standard GridView and ListBox controls. Thus you can use C1Tiles in data bound scenarios. Each container presents a different way to arrange multiple C1Tiles together giving you endless combinations and possibilities.

  • Support for Different Sizes

Not all tiles must be created equally. Combine tiles of different types and sizes together to create displays uniquely catered to your application.


 

Getting Started with Tile Control

We are going to build a Flickr viewer app, using the C1SlideTile control.

image

  

1)   Create a new project in VS2012 using the C# Windows Store Blank App Template. Call the project TileSamples.

image

  

2)   Open MainPage.XAML

3)   Drag a ScrollViewer control to the Grid to look like this…

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <ScrollViewer>

        </ScrollViewer>
    </Grid>

4)   Drag a C1WrapPanel control into the ScrollViewer This will give us a nice flowing layout for our tiles regardless of the screen resolution or orientation.

image

  

 

5)   Drag a C1SlideTile into the C1WrapPanel

 

image

 

 

 

6)   Add a name of tilePanel to the C1WrapPanel and replace the C1SlideTile control with several C1SlideTile controls to look like this below… using corresponding header properties:

  

            <Xaml:C1WrapPanel x:Name="tilePanel">
                <Tile:C1SlideTile Header="nature"/>
                <Tile:C1SlideTile Header="people"/>
                <Tile:C1SlideTile Width="484" Header="travel"/>
                <Tile:C1SlideTile Width="484" Header="architecture"/>
                <Tile:C1SlideTile Header="night"/>
                <Tile:C1SlideTile Header="traffic"/>
                <Tile:C1SlideTile Header="animals"/>
                <Tile:C1SlideTile Header="cars"/>
                <Tile:C1SlideTile Header="family"/>
                <Tile:C1SlideTile Header="summer"/>
            </Xaml:C1WrapPanel>

Add Page.Resources XAML right above the Grid. This will define the default style for our tiles:

    <Page.Resources>
        <Style TargetType="Tile:C1SlideTile">
            <Setter Property="Background" Value="DarkGreen"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="HeaderPadding" Value="5"/>
            <Setter Property="HeaderBackground" Value="#88000000"/>
            <Setter Property="HeaderForeground" Value="White"/>
            <Setter Property="HeaderFontSize" Value="20"/>
            <Setter Property="HorizontalHeaderAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Height" Value="240"/>
            <Setter Property="Width" Value="240"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Tile:C1TileService.PointerDownAnimation" Value="True"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding Author}" Foreground="White" VerticalAlignment="Top" Margin="4,2,0,2"/>
                            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" Margin="24, 24, 1, 1"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

You might be scratching your head at the C1TileService.PointerDownAnimation. What this does is turn on the tiny responsive animation that occurs when users tap or press on the edge of a tile. The tile will skew a bit to indicate it’s being touched. It’s a nice little way of making your tiles feel more alive!

7) Add a new folder to the project called Data

image

 

8) Add a class file to the Data folder and call it FlickrPhoto and add this code to the FlickrPhoto class so it looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net;
using System.Xml.Linq;

namespace Tile.Data
{
    class FlickrPhoto
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        public string Content { get; set; }
        public string Author { get; set; }

        static string flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
        static string AtomNS = "http://www.w3.org/2005/Atom";

        /// <summary>
        /// Loads public photos from flickr.
        /// </summary>
        /// <param name="tag">If set, method uses it to load photos only with this specific tag.</param>
        /// <returns></returns>
        public static async Task<List<FlickrPhoto>> Load(string tag)
        {

            List<FlickrPhoto> result = new List<FlickrPhoto>();
            try
            {
                string uri = string.IsNullOrEmpty(tag) ? flickrUrl : flickrUrl + "?tags=" + tag;
                var client = WebRequest.CreateHttp(uri);
                var response = await client.GetResponseAsync();

                #region ** parse flickr data
                using (System.IO.Stream stream = response.GetResponseStream())
                {
                    var doc = XDocument.Load(stream);
                    foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
                    {
                        var title = entry.Element(XName.Get("title", AtomNS)).Value;
                        var author = entry.Element(XName.Get("author", AtomNS)).Element(XName.Get("name", AtomNS)).Value;
                        var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault();
                        var contentUri = enclosure.Attribute("href").Value;
                        result.Add(new FlickrPhoto() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b", "_m"), Author = author });
                    }
                }
                #endregion
            }
            catch
            {
            }
            return result;
        }
    }
}

 

11)         Open MainPage.xaml.cs

12)         Create a Loaded event handler and have your code look like this:

 

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using C1.Xaml.TileSamples;
using Tile.Data;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace TileSamples
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            Loaded += MainPage_Loaded;
        }

       void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            LoadContent();
        }
        private async void LoadContent()
        {
            foreach (C1Tile tile in tilePanel.Children)
            {
                var content = await FlickrPhoto.Load((string)tile.Header);
                tile.ContentSource = content;
            }
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

 

 

16)         Press F5 to run the app ad see your sliding tiles for each header!

 

image

 

Click here for the code above and more Tile Control Code Samples

 

Next part in the blog series:

 

WinRT XAML (Part 3) Collection View Class

Tags: , , , , , ,