HubTile control for Windows 8

Using a Windows Phone or Windows 8 application, it’s easy to notice the characteristic interface element- HubTile. The control displays an animated tile, which usually contains graphic and text. In this post I’ll show you how to create your own HubTile in steps. Ready?

Lately our team finished one of the biggest projects – LubimyCzytać.pl. Two apps for Windows Phone and Windows 8. We used HubTiles to create the main page (see below).

We wanted the graphic and Grid (contains text and icon) to slide.

We wanted the graphic and Grid (contains text and icon) to slide.

At the beginning the issue seemed easy for us. But after short research of our Telerik’s and Syncfuzon’s controls, we realized, it’s a tough nut to crack, because none of them satisfied our needs. We ended up creating our own HubTile, which will serve me as example in this guide.

1)      There are many types of HubTiles:

SlideHubTile – Two elements slide up and down.

hub2

RotateHubTile – a tile rotates, interchangeably showing 2 contents. Used for notifications (for example new e-mails).

hub3

MozaicHubTile – a tile composed of miniatures, known from Windows Phone – a tile for contacts

 hub4

1) Firstly we have to decide which type of the control to create instead of using a Telerik’s control.

Our problem was the lack of customization, because neither Telerik’s nor Syncfuzon’s control could define the percentage (point), to which an element should slide. Besides we had to create the random sliding by hand. In addition, we couldn’t determine the order of animations.

But cutting to the chase…

2. Creating your own control, you have to define, what effect you expect from it.

I wanted to create such HubTile, which could enable me to add many different animations (not only up and down). In other words we cannot create animations inside of a control, instead they have to be taken from outside. On this level, it’s still easy to notice, that an interface, which defines the relationship between classes and animations, is needed.

Let’s build the interface, which will be called „IHubTileTransistion”

3. We need two methods:

  •  The Method „GetPreparedStoryBoard”, which will create storyboards, based on the passed element and size.
  • PrepareElementForAnimation – prepares the element to start an animation. It’s necessary, that the animated property (for example UIElement.Projection) has a default object instance (for example PlanProjection). If the item doesn’t possess the set value of the property, which we want to animate, an exception will be thrown.

4. It’s time to add the class, which will implement the already created interface – IHubTileTransition. The class slides elements up and down.

5. It would be perfect, if creating a control in XAML, we would be able to define elements of the animation in form of a list and enable them to adjust the parameters such as the length of animation. As you see in the code below…

Those parameters are more than usual properties, they are DependencyProperties. The class, which wants to possess such properties, has to inherit from the DependancyObject class.

6. The most important property of SlideUpDownTransition is PercentSlide – a percentage declaration of distance, by which the elements slide up and down. Create a static field PercentSlideProperty, which the DependencyProperty (PercentSlide) is registered on. The piece of code in bold indicates, that the default value amounts to 50 (if XAML doesn’t determine a different value).

7. Now it’s time for the most important function – creating the animation.

The animation will consist of sliding an element by using the Projection property (automatically changing the value of Plane.Projection.GlobalOffsetY). After the animation, if you want the target value to be preserved, remember to set FillBehaviour to HoldEnd.

Preparing object to animation we have to set the new instance of PlaneProjection into Projection property.

8. When we already have the IHubTIleTransition interface and SlideUpDownTransition class, it’s time to start working on the HubTile itself. Now you will use all the previously built elements.

At the very beginning we start the HubTile class, which will inherit from the Control class. In the constructor we have to define, which style the control should use (HubTile style). It will exist in the Generic.xaml file (the file is created automatically in the Themes catalog when we create a control by using the Add New Item menu in Visual Studio).

9. Firstly we define, which DependencyProperty we need.

The first property is IsActive, which is responsible for enabling or disabling the animation. It’s important to notice, that we insert a callback function IsActivePropertyChanged, which will inform us when the value changes. We never check for changes in getter or setter. We should use the CallbackPropertyChanged to see new value of this DependancyProperty.

10. Analogically we create the properties, which will be responsible for keeping the two displayed elements.

FirstContent – the first element of a HubTile can be anything, starting from plain text to object, which inherits from FrameworkElement (for example: Grid, Image, TextBlock).

SecondContent –  the second element of a HubTile

FirstContentTemplateProperty – template DataTemplate of displayed object – FirstContent. Now we can bind the FirstContent property to the data model in XAML and display it using this template.

SecondContentTemplateProperty –  template DataTemplate of displayed object SecondContent.

Now we can define properties, which will allow us to set the delay at the beginning. This delay is either set by us or chosen randomly from the predefined intervals of time.

IsRandomDelayStart – defines, if the delay is random or not

DelayStart – the delay is set, the default value is null

MaxRandomDelay – maximal random delay

MinRandomDelay – minimal random delay

11. The next big thing are properties, which will concern the animations.

Transitions – the list of IHubTileTransition interfaces

IsRandomTransition – describes, if the transitions are triggered randomly or in a specific order.

Finally, the last property – Command. We will create a button in the style and then we will bind the property of the Command button to the property of the control – Command. Going further, our HubTile will be clickable.

12. We will use a Timer to change the animation after the previously supplied time has elapsed. It will start a proper transition (chosen in step 10) once in a while. The RunningTransitionIndex field will contain the currently done TRANSITION (index from the list). Similarly, RunningStoryBoard will contain the current done ACTION.

13. To determine the random time, we will use the RandomTimeSpan function, which generates a random TimeSpan using the Random class.

The Timer executes a function, which chooses a random or subsequent transition from the list.  The transitions provides the animation, which is then started. The grid called PART_AnimationGrid is animated and defined in the control’s template.

After the event is completed, we start the Timer again.

We will create a GetControlSize to get the control’s size. If the control’s size is fixed in XAML, the properties Height and Width will be other than the special value – double NaN. Otherwise the size has to be taken from the properties ActualHeight and ActualWidth. You have to remember, that this properties are set only at the moment, when the events Loaded or Sizechanged have been raised.

For the right animation of two HubTile elements we have to define their size so, that it is the same as the control’s size. In one of the grids (in the control), we set the property Clip, which task is to crop the moving 2 elements so, that they don’t exceed the control’s area. We will include both these elements in the method, which will be attached to event Loaded.

Take a look at this piece of code once more:

Using the function GetTemplateChild we get the access to elements from the template, which is assigned to the control. Pass the name of the element as an argument. The object, which we have to cast to a specific class, is returned. Remember, that if there is no element with this name, the function will return a null.

At the end we add just two lines of code responsible for attaching to the Loaded event and setting the transition list’s default value in the class’s constructor.

It’s time to create the control’s template.

At the very beginning we create the style, which will be assigned to the HubTile type – our control. We put a button on top, so that the HubTile will be like a button. There is a common convention, which sats that the named element in the default template of a control should be called “Part_Name”.

We insert the container – Grid (PART_MainGrid) in the Button, which Clip properties contain a RectangleGeometry called PART_ClipRectangle.

At the very end we add two ContentPresenters, which will display the bound objects and their templates.

End of story. I hope I helped you by building your first HubTile.

Here’s an example showing you how to use it:

If you want to see my HubTile working, download these apps:

hub10

qr1wp

Windows Phone

Windows 8

Windows 8

As you can see, HubTile allows you for bigger customization and provides more possibilities than other popular controls on the market. I know, that my long guide is quite complicated, so if you don’t understand anything, feel free to contact me : mateusz [ . ] pluciak [ at ] whallalabs [ dot ] com

Podziel się tym artykułem