How to Create Sliding Tiles in Your WPF Application

A tile is just a square with some text or graphics inside - how hard can it be?

It’s not difficult to create a colored square in WPF (just add a Border element with a background color). But if you have a WPF Tile component in your toolbox, you can use it to save time figuring out the spacing and layout. A simple WPF Tile component may also provide built-in sliding animation and data binding to help replicate that Windows start menu style.

In this quick how-to, we’ll show you the ComponentOne Tiles for WPF. A control as simple as a tile should not require much digging, so this is designed to be a super quick resource!

Ready to Test it Out? Download ComponentOne Today!

Using the ComponentOne Tiles for WPF

If you already have ComponentOne WPF Edition, you already have a tile component called C1Tile (part of C1.WPF.Tile).

You can set the Content, Header, Width, Height, Padding, and Background Color.

<c1:C1Tile Content="1" Header="C1Tile" Padding="10" Background="#ffeddd46" Width="280" Height="200" />

Create a Simple Sliding Tile

To make a simple, sliding WPF tile, use the C1SlideTile component. The WPF sliding tile component can be used in two ways:

Slide between the front and back sides of the tile. This is useful if you want to show more details of a tile item. The tile will randomly slide during runtime to give an “alive” feeling.

<c1:C1SlideTile Header="C1SlideTile">
   <c1:C1SlideTile.Content>
     <!-- Front Content -->
   </c1:C1SlideTile.Content>
   <c1:C1SlideTile.BackContent>
     <!-- Back Content -->
   </c1:C1SlideTile.BackContent>
</c1:C1SlideTile>

Populate the C1SlideTile with a content source to display any number of data-bound items, like an image gallery. In the snippet below, the custom object would have a Background and Header property.

<c1:C1SlideTile ContentSource="{Binding CustomObjects, ElementName=root}">
      <c1:C1SlideTile.ContentTemplate>
          <DataTemplate>
              <Grid Background="{Binding Background}">
                  <TextBlock Text="{Binding Header}"/>
              </Grid>
          </DataTemplate>
      </c1:C1SlideTile.ContentTemplate>
</c1:C1SlideTile>

Tiles not only let you replicate the Windows start menu, but they can be used as navigation buttons in your application. For example, use the tiles to display information or alert the user from the tile button. You can access some full samples on GitHub, and note that the C1Tile controls support .NET Framework only.

Ready to Test it Out? Download ComponentOne Today!