WinRT XAML (Part 6) TileView

Script 6: TileView in Studio for WinRT XAML

image

TileView

Interactively browse through your data with ComponentOne TileView™ for WinRT XAML. Expand and collapse tiles to view more or less information. Show-off the true touch-first and fast-and-fluid nature of Windows 8 in your apps with this highly visual and interactive control. Create dashboards, detail views, photo galleries and more!

  • Gesture-based Interaction and Animation

The C1TileView control is a very interactive control. Each tile can be viewed in three different states and users can toggle between states by simply tapping the tile header. Users can also rearrange tiles by simply sliding or flicking tiles in any direction. Smooth animations occur as tiles transition from one state to another.

  • Three Tile States

Each tile can be viewed in three states: Maximized, Minimized and Default. Show more or less information for each tile easily using any of the item templates. Default state is when all tiles are displayed at the same size.

  • Minimize Position

Tiles can be minimized to the top, left, bottom or right side of the C1TileView control by just setting one property. You can also specify the number of rows and columns when in the default state.

  • Flexible Data Binding

C1TileView is an items control which can be bound to any collection of business objects. Specify element bindings inside item templates as you would for any items control.

  • UI Virtualization

The C1TileView control supports UI virtualization so it can load and display hundreds of items without affecting performance.

Getting Started with TileView

Step 1 of 3: Creating the C1TileView Application

In this step you'll create a WinRT XAML application using TileView for WinRT XAML. When you add a C1TileView control to your application, you'll have a interface that you can display content in. To set up your project and add a C1TileView control to your application, complete the following steps:

  1. In Visual Studio 2012 Select File | New | Project.

  2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Store style, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

  3. Navigate to the Toolbox and drag the C1TileView icon to add the control to the grid. This will add the reference and XAML namespace automatically. The XAML markup resembles the following:

    <TileView:C1TileView />
    1. Inside the Grid, initialize the C1TileView control and give it a name by adding x:Name="C1TileView1" to the TileView:C1TileView tag and add tags for AllowDrop="True" so that it appears similar to the following:
    <TileView:C1TileView HorizontalAlignment="Left" Margin="124,351,0,0" VerticalAlignment="Top" Width="800" Height="500" AllowDrop="True"> </TileView:C1TileView>

This will add a C1TileView control named "C1TileView1" to the application.

You've successfully set up your application's user interface, but if you run your application now you'll see that the C1TileView control currently contains no content. In the next steps you'll add content to the C1TileViewcontrol, and then you'll observe some of the run-time interactions possible with the control.

Step 2 of 3: Customizing the C1TileView Control

In the previous step you created a WinRT XAML application and added the C1TileView control to your project. To customize your application, complete the following steps:

1. Add three C1TileViewItems within the C1TileView tags so the XAML markup appears similar to the following with Background and Header properties to each of the C1TreeViewItems:

<TileView:C1TileView HorizontalAlignment="Left" Margin="124,351,0,0" VerticalAlignment="Top" Width="800" Height="500" AllowDrop="True"> <TileView:C1TileViewItem Background="Red" Header="Red"></TileView:C1TileViewItem> <TileView:C1TileViewItem Background="Blue" Header="Blue"></TileView:C1TileViewItem> <TileView:C1TileViewItem Background="Yellow" Header="Yellow"></TileView:C1TileViewItem> </TileView:C1TileView>

Each item will now appear a different color and have text in the header.

In this step you added content to the C1TileView control. In the next step you'll view some of the run-time interactions possible in the control.

Step 3 of 3: Running the C1TileView Application

Now that you've created a WinRT XAML application and customized the C1TileView control, the only thing left to do is run your application. To run your application and observe TileView for WinRT XAML's run-time behavior, complete the following steps:

  1. From the Debug menu, select Start Debugging to view how your application will appear at run time.

The application will appear similar to the following:

image

Notice that the C1TileView control appears with three C1TileViewItems.

  1. Click on the red item's header and drag the item to towards the blue item. The items will trade places.

  2. Click on the yellow item's header to maximize the item. Note that the other two items are minimized:

image

Congratulations! You've completed the TileView for WinRT XAML quick start and created a simple WinRT XAML application, added and customized a TileView for WinRT XAML control, and viewed some of the run-time capabilities of the control.

Next part in this series:

Blog Series (Part 7) PDF Viewer: Windows 8 Studio for WinRT XAML

MESCIUS inc.

comments powered by Disqus