Creating a Metro UI Style Control

I set out to create a control that could help me build a Metro UI.  If you’ve used the Zune Software I’m sure you’ve noticed that when you enter a new section it animates in.  A typical animation floats in from the left while also fading in.  Lets dive into how we can create a ContentControl to accomplish this effect for us.

In this demo I’m using the Silverlight Cosmopolitan Theme.  You can download this theme as well as a few others from Microsoft.  Read Tim Heuer’s blog post for more information.

Download the sample project and source for this post: Metro Demo Source

I’ll give our control the awesome name of MetroContentControl.  When the control loads and unloads we want to run some animations, so lets kick off two Visual States.  We’ll call them AfterUnloaded and AfterLoaded, which are the same Layout State names that the ListBox in Silverlight 4 uses.

public class MetroContentControl : ContentControl
{
   public MetroContentControl()
   {
       this.DefaultStyleKey = typeof(MetroContentControl);

       this.Loaded += MetroContentControl_Loaded;
       this.Unloaded += MetroContentControl_Unloaded;
   }

   private void MetroContentControl_Unloaded(
       object sender, RoutedEventArgs e)
   {
       VisualStateManager.GoToState(this, "AfterUnLoaded", false);
   }

Read more:  joe.mcbride

Posted via email from .NET Info