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:

Tile Grid

Dragging a tile onto a group separator:

Dragging Tile

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!

Tagged as Metro Elements

4 Responses to “Metro Elements Weekly Update 5”

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

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

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

  • 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.

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top