Click here to Skip to main content
Click here to Skip to main content
Go to top

A WPF TileView Control

, 29 Nov 2011
Rate this:
Please Sign up or sign in to vote.
A simple WPF TileView control.

TileView control

The TileView control lets you arrange a collection of items (Tiles) in a tile fashion, and one among the rest of the Tiles become active and is shown in a relatively larger area. Activation and deactivation of a Tile is animated. This behaves more or less like a Carousel control, but they are different.

Preview.png

Choosing the base

TileView presents a collection of tiles and arranges them in a different fashion. When it comes to presenting a collection of items, ItemsControl is the best pick, and most of the controls we often use are derived from ItemsControl, ListView, TreeView, or Menu and each of them have their own Items as well. TileView simply presents a collection so it derives from ItemsControl, and each Tile presents content. Obviously we one can go for ContentControl so we can present any content, but for the needs that may arise in future, Tile is derived from HeaderedContentControl. By ‘future needs’ I mean one may want to show a header, or buttons to activate / deactivate a tile.

Primary (simple) requirements

The behavior of the control is well known, and is defined in the introduction part of it. Here is the list of requirements to achieve this behavior.

  1. Tiles need to be arranged in a uniform manner, and the active one gains more space.
  2. Given that a field is required to keep track of the active tile, we have ActiveTile.

    A layout mechanism is needed to proportionally divide the space between the ActiveTile and the others, all the other tiles equally share the remaining space.

  3. One of the Tiles becomes active on load, and any other Tile can be activated using the mouse.
  4. A tile must be aware of the mouse events, and notify the TileView when activated, and for this, we need the Activated event.

  5. Activation and deactivation should be animated and smooth. ActiveTile is relatively large so an inactive Tile needs two transformations: ScallingTransform - to make it larger, TranslateTransform - to move it to the active position.

Bringing the words into action

Let's see how these requirements are achieved in reverse order.

Animating the tiles

As stated, two transforms are involved in activating a tile which operates on four different properties of a Tile. To move a Tile to the active position, TranslateTransform is used and it operates on the X and Y values of it, and to make the Tile larger, ScaleTransform is used and it acts on the width and height values. The following code demonstrates how this is done. This is just for representation of the values and the actual implementations differ from the representation.

tile.RenderTransform = new TranslateTransform();

/* defining StoryBoard and animations */
Storyboard tileActivator = new Storyboard();
DoubleAnimation translateX = 
  new DoubleAnimation { From = 0, To = 10, Duration = TimeSpan.FromSeconds(1) };

/* Sets the target and the target property for the animation to operate */
Storyboard.SetTarget(translateX, tile);
Storyboard.SetTargetProperty(translateX, 
  new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));

/* Adds the animation to the StoryBorad and initiate the activation */
tileActivator.Children.Add(translateX);
tileActivator.Begin();

The same approach is used in all four properties of the Tile to make it active from an inactive state.

Tile activation notification

The TileView must be notified when a user activates it by a mouse click, this implementation defines an event Activated and just overrides the mouse down event to raise the Activated event. TileView listens for this Activated event and sets the sender as the new ActiveTile.

public event RoutedEventHandler Activated;

protected override void OnMouseDown(System.Windows.Input.MouseButtonEventArgs e)
{
    base.OnMouseDown(e);

    if (Activated != null)
        Activated(this, new RoutedEventgArgs());
}

TileView listens to this event, casts the sender as Tile, and activates it.

tile.Activated += new RoutedEventHandler(OnTileActivated);

void OnTileActivated(object sender, RoutedEventArgs e)
{
    ActivateTile(sender as Tile);
}

Arranging the tiles

The layout process in WPF happens in two passes: MeasureOverride and ArrageOverride, both of these are explained well in many articles. The former lets the child know the space available for it and asks the child the space it would take. And the former gives the space it can take.

protected override Size MeasureOverride(Size constraint)
{
    var sz = base.MeasureOverride(constraint);

        foreach (Tile tile in Items)
    {
            /* size is the value TileView gives to each tiles */
            tile.Measure(size)
        }
        return sz;
}

protected override Size ArrangeOverride(Size arrangeBounds)
{
    foreach (Tile tile in OrderedItems)
        {
            /* rect is the value TileView layout 
               mechanism gives to each Tile */
            tile.Arrange(rect);
        }
        return arrangeBounds;
}

History

  • 16/11/2011 - Initial post.
  • 30/11/2011 - Added the TileState API, source and demo files updated.

Hope this helps !!! Happy coding !!!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

VallarasuS
Software Developer
India India
I code, learn, listen, and some day in a near future be a proud farmer.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 2 PinmemberMember 103088232-Dec-13 2:04 
GeneralRe: My vote of 2 PinmemberVallarasuS2-Dec-13 8:07 
QuestionList Scrolling PinmemberMember 194432025-Jul-13 2:30 
AnswerRe: List Scrolling PinmemberVallarasuS25-Jul-13 4:01 
QuestionSizing PinmemberPatrick Blackman3-Apr-13 18:08 
When the tileview is place in a custom content control, unless the width and height is specified you get an error indicating the width and height cannot be negative or height cannot be infinity. Any ideas on this. Seem as if you have to specifically set the height & width of the tileview.
SuggestionRe: Sizing PinmemberVallarasuS3-Apr-13 20:03 
GeneralRe: Sizing PinmemberPatrick Blackman4-Apr-13 13:22 
QuestionA few questions PinmemberDoublej61925-Oct-12 17:24 
AnswerRe: A few questions [modified] PinmemberVallarasuS25-Oct-12 19:01 
GeneralInteresting ! PinmemberMazen el Senih7-Apr-12 2:32 
QuestionVery good! Pinmemberraistu30-Nov-11 22:15 
AnswerRe: Very good! PinmemberVallarasuS30-Nov-11 22:31 
GeneralRe: Very good! Pinmemberraistu1-Dec-11 1:49 
GeneralMy vote of 4 PinmemberKanasz Robert29-Nov-11 22:44 
GeneralRe: My vote of 4 PinmemberVallarasuS29-Nov-11 23:45 
QuestionSuggestion PinmemberPatrick Blackman29-Nov-11 7:47 
AnswerRe: Suggestion PinmemberVallarasuS29-Nov-11 20:23 
AnswerRe: Suggestion PinmemberVallarasuS29-Nov-11 23:54 
GeneralRe: Suggestion PinmemberPatrick Blackman30-Nov-11 3:34 
GeneralMy vote of 4 PinmemberEspiritu28-Nov-11 15:51 
GeneralRe: My vote of 4 PinmemberVallarasuS28-Nov-11 16:54 
QuestionFixed Title height and width PinmemberPatrick Blackman28-Nov-11 7:14 
AnswerRe: Fixed Title height and width PinmemberVallarasuS28-Nov-11 7:27 
GeneralRe: Fixed Title height and width PinmemberPatrick Blackman28-Nov-11 8:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 30 Nov 2011
Article Copyright 2011 by VallarasuS
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid