Metro Elements Weekly Update 5

This week in Metro Elements beta we bring you an interesting new control: the Windows 8 inspired TileGrid. This control provides layout logic, user interaction and nice animations that mimic the look and feel of the Win8 start menu. This control is great to use as a customizable navigation hub for your application that users will be familiar with. Here are some initial screen shots of this control:

Dragging a tile onto a group separator:

To use this control start with a TileGrid tag and populate it with one or more TileGroup objects which in-turn can be populated with Tile instances. Here’s an example used to create the images above:

<ms:TileGrid Margin="100" Grid.Row="1">
    <ms:TileGroup>
        <ms:Tile Background="#009FB0" Header="Mail" />
        <ms:Tile Background="#D34927" Header="People" />
        <ms:Tile Background="#A600AD" Header="Messaging" />
        <ms:Tile Background="#2F8EF0" Header="Weather" />
        <ms:Tile Background="#BC1E49" Header="News" />
        <ms:Tile Background="#0A5AC3" Header="Desktop" />
        <ms:Tile Background="#5F3BBA" Header="Calendar" />
        <ms:Tile Background="#0A5AC3" Header="Photos" />
        <ms:Tile Background="#BC1E49" Header="Video" />
        <ms:Tile Background="#009FB0" Header="Travel" />
        <ms:Tile Background="#5F3BBA" Header="Sport" />
        <ms:Tile Background="#008B17" Header="Games" />
        <ms:Tile Background="#2E8AF0" Header="Internet Explorer" IsLarge="False" />
        <ms:Tile Background="#008B17" Header="Store" IsLarge="False" />
        <ms:Tile Background="#A600AD" Header="Maps" IsLarge="False" />
        <ms:Tile Background="#D34927" Header="Music" />
        <ms:Tile Background="#008B17" Header="Finance" />
        <ms:Tile Background="#BC1E49" Header="Camera" IsLarge="False" />
    </ms:TileGroup>
    <ms:TileGroup>
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
        <ms:Tile Background="#2E8AF0" IsLarge="False" />
    </ms:TileGroup>
</ms:TileGrid>

Templating options, events and other improvements are on their way. If you have any questions, drop by the forum. Or if you have any control or feature requests, let us know in the think tank.

Get the latest beta update now!

• By Jason
• On 8 October 2012

4 Comments »

Tagged as Metro Elements

4 Responses to “Metro Elements Weekly Update 5”

• How about making this for WPF and Windows 7 :-)

  peter Oct 8th, 2012

• Hi Peter, thanks for the suggestion. We’ll look at bringing it to WPF Elements soon :-)

  John-Daniel Trask Oct 9th, 2012

• Is the position of the tiles persisted if the user moves themn around?

  Aaron Feb 14th, 2013

• Hello Aaron

  The position of the tiles are persistent throughout the lifetime of the control. If you lose the control by switching views in the application or restart the application, you’ll need your own mechanism for saving/loading the state of the control.

  Jason Feb 17th, 2013

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Notify me of followup comments via e-mail

Notify me of new posts by email.