Tuesday, September 25, 2012

RadCustomHubTile from Telerik for Windows 8 UI



Telerik recently released their Windows 8 UI Controls to RC on September 18th (see post here), and this is probably on the first in a series of posts I will put out showing them off.

The first control here is the RadCustomHubTile.  I chose this because I am in the process of porting my Find Amber app from Windows Phone to Windows 8 and I wanted to transition the app without drifting too far from the spirit of the original app. 

RadControls from Telerik used here for
Current List and Search & Stats section
You can see from the screen shot that I had already used the RadControls for Windows Phone, so now I can bring some of the design through.

The controls do support both HTML and XAML design, if the current version of the controls do not include either or; I assure you the version you seek is in development and on its way.

Getting Started

The RadCustomHubTile allows any user-defined content rather than predefined parts that you may find in a RadHubTile or RadSlideTile, and as in most if not all of the Telerik controls; MVVM as well as code based binding is supported.

Prior to trying this example, please download the controls from Telerik and note that I am using MVVM Light as the MVVM Framework.  You can see how to install MVVM Light via nuget by opening the Package Manager console and running "Install-Package mvvmlight".  If you have any trouble with that please see http://mvvmlight.codeplex.com or contact me via twitter (@spboyer) OR see my blog post on how to get started with Windows 8 and MVVM Light.

In the following example you will see:
  • MVVM Binding
  • Content locally bound
  • Content bound from an internet URI
  • Complex front and back content for the tile
This is a moderately simply example.  I started with a Blank Solution in Visual Studio 2012 and called it RadCustomHubTile (in retrospect probably should have stuck with App1).

Install the MVVM Light Framework via nuget (see above), you will have to make a change to the App.xaml file.  When installing this, it adds the reference to the namespace in the old way


you need to change this to:


 A little house keeping to make it look nice. Yes I care what it looks like even for this. Go ahead and add the following below the <Grid> tag to add the header to the initial page.  You can change the title if you like and run (F5).

 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>

  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="*"/>
 <Button x:Name="backButton"  Style="{StaticResource BackButtonStyle}"/>
 <TextBlock x:Name="pageTitle" Text="Rad Custom Hub Tile" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Foreground="#FFADD808"/>

Title and Back button

Next, lets add the RadCustomHubTile Control, and the best way to do this is to simply drag it from the toolbox right into the spot within the XAML. This is something you could not do in Windows Phone which is a big step in my opinion.

It will add the namespace and the references to the project.

To clean it up a little and make sure that you are using within the design guidelines, wrap the RadHubControl with a Grid with the following settings.

<Grid Grid.Row="1" Margin="115,0,0,0">

  <Primitives:RadCustomHubTile />


If you are wondering why my RadCustomHubTile is prefixed, it is because I have changed or altered the declaration at the top of the page to be the following (this matches my Phone app stuff).


Setting Front and Back Content

The content for the front and back are defined by setting the content within the <RadCustomHubTile.FrontContent> and <RadCustomHubTile.BackContent> respectively.  Pretty simple, so here is an example:

<Primitives:RadCustomHubTile Height="300" Width="300">
   <Image x:Name="imgBlogger" 
        Source="{Binding Photo, Mode=TwoWay}" 
        Height="300" Width="300" 
        Stretch="UniformToFill" Margin="0" 
        VerticalAlignment="Center" />

   <Rectangle Height="65" Fill="#99000000" VerticalAlignment="Bottom" />

   <StackPanel Orientation="Horizontal">
    <TextBlock  Text="Blogger:" 
        Foreground="White" Width="126" Height="43" 
        Margin="10,0,0,14" Style="{StaticResource SubheaderTextStyle}" 
        HorizontalAlignment="Left" />

    <TextBlock  Text="{Binding UserName}" 
        Foreground="White" Height="43" 
        VerticalAlignment="Bottom" Margin="0,0,0,14" 
        Style="{StaticResource SubheaderTextStyle}"/>

   <Image x:Name="img" 
         Source="{Binding Thumbnail, Mode=TwoWay}" 
         Height="300" Width="300" 
         Stretch="UniformToFill" Margin="0" 
         VerticalAlignment="Center" />

   <Rectangle Height="65" Fill="#99000000" VerticalAlignment="Bottom" />

   <TextBlock  Text="{Binding Title, Mode=TwoWay}" 
        Foreground="White" Width="270" Height="30" 
        Margin="0,0,0,30" Style="{StaticResource BasicTextStyle}" />

   <TextBlock  Text="{Binding SubTitle, Mode=TwoWay}" 
        Foreground="White" Width="270" Height="30" 
        VerticalAlignment="Bottom" Margin="0,0,0,5" 
        Style="{StaticResource BasicTextStyle}"/>

Note that you will want to wrap your content with the FrontContent / BackContent tags in Grid, StackPanel etc as the designer will give you the "Content cannot be set more than once error".

Here is the MainViewModel that is bound. Note that the Blogger image (me), is pulled from an internet source uri and the back image is pulled from the project itself. The string properties are bound simply.

using GalaSoft.MvvmLight;
using System;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace RadHubTile.ViewModel
    public class MainViewModel : ViewModelBase
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel() { }

        public string Photo
            get { return "http://3.bp.blogspot.com/-yBHsXXtsWWo/UCkc916wnfI/AAAAAAAAAN0/FcKOE2P-gGQ/s1600/profilepic.png"; }

        public string UserName
            get { return "Shayne Boyer"; }

        public ImageSource Thumbnail
            get { return new BitmapImage(new System.Uri(new Uri("ms-appx:"), "/Assets/RadCustomHubTile.png"));}

        public string Title
            get { return "Telerik Windows 8 UI Controls"; }

        public string SubTitle
            get { return "RadCustomHubTile"; }

So what does it all look like?



One other item to note is that you can alter the duration of the flip/rotation by setting the UpdateInterval which is a TimeSpan. So setting the value to "0:0:5" would be equal to 5 seconds.  There is also FlowDirection and many other properties to customize the Tile to your liking.  I'd like to see what you can do with it.  Download the controls today and let me know what you working on and if you have any questions.

Read more →

Monday, September 24, 2012

User Groups - What do you want from them?

There are many user groups, meetups, developer groups, etc depending on where you live that are available to get involved in.  This is one of many ways to meet other developers, see what they are doing, what projects and so fourth are going on in your neck of the woods that you wouldn't necessarily know about.  But, one thing that I'll say is that the format is about the same from the 3-5 groups that I participate in the Central Florida Area.  I even run a Windows Phone/8 group here too, and the same could be said.

Now, one thing that I wanted to do was sponsor contests. So I started the Dark Sky App contest to try and put a little something different into the mix, but I wanted to throw the general question out to the world.  What do you as a developer, designer, etc. want out of these types of groups?

Typically it's a meeting where on or a few people present on a topic, there is some Q & A and generally some free stuff given away.  Now I'm always good for some free nerdy swag or a book, and I will never discount the general social interaction that I get from these groups. Not to mention I have made some pretty good friends and networked with really cool people along the way.  Is that all we are looking for?  Is there something else you "need" from these presentations or gatherings?

Please comment below and let me know...
Read more →

Thursday, September 20, 2012

Amber Alerts for Windows Phone - Find Amber: I built it!


Find Amber Available for Windows Phone

Find Amber has finally been approved and is now available in the Windows Phone Store! This project is close to me, and not in a "I have lost a child" way thank God. But I do have children and if something were to happen to any of them I can't imagine what it would be like.

There are ways to get this information but generally it is slow to deliver. Television, Radio, etc. but these delivery mechanisms are allow but allow for detail. In contrast, there is a text message service and/or the road signs that are available which solves the speed of delivery but the content is lacking. My solution was to give the user both speed of delivery and content.

I decided to combine the latest available technology and tools from Microsoft using Windows Azure, SQL Azure and ASP.NET Web API to build a robust system to get the data and deliver it to first the Windows Phone Platform but also create an API that allowed me to expand this to Windows 8 and the other mobility platforms.

The Windows Azure Services provide the necessary notifications to be sent to the phone when a new Amber Alert has been created. If the user has pinned the application tile to their home screen, they will be notified on the Live Tile if the Amber Alert has occurred in their state or near their location.  These notifications are sent within 1 minute of the notification being created at the National Center for Missing & Exploited Children® (NCMEC).

Other features of the application include
  • Most recent or open cases
  • Cases near you
  • Statistics
    • Case Type
    • Month of Year
    • U.S. Region
    • Year
    • Top 10 States
  • Cases by State
  • Case Details
    • Showing all pictures on file
    • Includes Abductor pictures where applicable
    • Map of last know location or missing from
    • Links to Actual Lost Child Poster
  • Social and Email Sharing integration

Screenshots of Find Amber
Current List

Other Options

Child Details

Poster View

Statistic Graphs

Other credits

Telerik - RadControls for Windows Phone

MVVM Light Toolkit by Laurent Bugnion (@LBugnion) : Great MVVM framework, supports Silverlight, WPF, Windows Phone and now Windows 8.  I blog about it and give talks a code camps and user groups.

PhoneFlipMenu by Scott Lovegrove (@scottisafool) : this is officially being moved to Coding4FunToolkit.


Read more →

Sunday, September 16, 2012

SimpleIoc and the Messenger Service in MVVM Light


The SimpleIoc addition in the most recent version of MVVMLight is a great add and really simplified the ViewModelLocator across all of the platforms supported in this framework.

If you are not familiar with MVVM Light or what you types of project platforms it supports please go to http://mvvmlight.codeplex.com or www.galasoft.ch/mvvm to learn more.

However if you are using the Messenger Service in MVVM Light to perform a set of actions to do the following:

  • User takes an action
  • Application changes views
  • Application send message to display or load data

then it is important to note that there are some differences in the way that the ViewModels are loaded in comparison to the previous version of MVVM Light.

Lets look at the ViewModelLocator in the new version:

    public class ViewModelLocator
        static ViewModelLocator()
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            if (ViewModelBase.IsInDesignModeStatic)
                SimpleIoc.Default.Register<IDataService, Design.DesignDataService>();
                SimpleIoc.Default.Register<IDataService, DataService>();

        /// <summary>
        /// Gets the Main property.
        /// </summary>
        Justification = "This non-static member is needed for data binding purposes.")]
        public MainViewModel Main
                return ServiceLocator.Current.GetInstance<MainViewModel>();

Notice that in comparison to what you may have seen in the past version, there is a single property to the ViewModel and a simple line in the constructor here to register the ViewModel with the Ioc Container and that is it.

The property for the ViewModel is Lazy, meaning that it is loaded on demand and is a singleton.  You can create multiple instances by passing in a key upon creation, but for this example I'll keep it simple.

Given the scenario above you will get the result of the secondary view not getting the message sent event though you have registered the message with the Message Service and have an action ready to handle it.  BUT the second time through it's fine and operates as it should.  What has happened?

Very simply, the examples you have seen in the past very rarely ever cover situations in the real world nor do they ever go far enough to look at the overloads in the constructor etc.

What has happened here is that the ViewModel MUST exist first in order to take action on the message. Moreover, the Messenger Service in MVVM Light does not operate like a Service Bus or Message Queue where the messages stay there until they are read.  It is more similar to Events, a fire and forget model.

In order to alleviate said problem, simple pass in "true" to the Register call in the SimpleIoc to create the instance of the ViewModel immediately and go on with your coding.


The previous version of MVVM Light created all of the ViewModels immediately, although not too much of an issue; there are instances where a user may not go to every view in the application and the idea here is to only load what is needed and keep the View and ViewModels loaded in memory when necessary.

If you have questions please comment and/or contact me on twitter @spboyer
Read more →

Monday, September 10, 2012

What are you looking for as a Mobile Developer in a Blog Post?

The mobile development industry has probably the greatest up swing in comparison to the other development paths over the last 5 years.  What I mean is that many more developers are focusing on either getting into mobile development (as in native apps), making sure their web apps are responsive and scale or adjust for a mobile viewport (html5) etc.

So, for those developers who blog like myself I am curious what you are looking for when reading our stuff...

Check out this survey and let me know what you want to get out of article related to mobile development.


Read more →

Thursday, September 6, 2012

Southwest Florida Code Camp


I will be giving two talks this Saturday at Southwest Florida Code Camp. If you are interested in hearing about ASP.NET WebAPI and/or MVVM Light, stop by either of my talks.

 8:30 - 9:40 AM (Room 128) - Introduction to ASP.NET WebAPI - Why you should be using it!

 9:40 - 10:40 AM  (Room 128)  - Building Windows Phone Apps w/ MVVM Light 

Hope to see you there, should be an exciting event!

Read more →
Powered by Blogger.
Creative Commons License
TattooCoder.com by Shayne Boyer is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.