Script 10: Layout Panels in Studio for WinRT XAML

Layout Panels

Control the flow and positioning of the content in your Windows Store apps with ComponentOne Layout Panels™ for WinRT XAML. Wrap content vertically or horizontally using C1WrapPanel. Dock content along the edges of the panel with C1DockPanel. Display content neatly in a grid using C1UniformGrid.

Features

• Create Flowing Layouts

Create flow type layouts that wrap content vertically or horizontally using the C1WrapPanel control. This can be very useful for handling flow of items when the user rotates your app into portrait orientation.

• Create Docked Layouts

Dock content along the top, left, right and bottom edges of the screen with the C1DockPanel control. Child elements are positioned in the dock panel in the order that they are declared in XAML.

• Create Uniform Grid Layouts

Neatly display child elements in columns and rows with the C1UniformGrid control. By setting the ColumnSpan property you can span columns. Or, span rows by setting the RowSpan property. This resembles the built-in Microsoft Grid. Using C1UniformGrid you can also show or hide an entire column or row

Getting Started

Step 1 of 3: Creating an Application

In this step you'll begin in Visual Studio to create a WinRT-style application using ComponentOne WrapPanel for WinRT XAML.

To set up your project, 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, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

3. Open MainPage.xaml if it isn't already open.

In the next step, you'll add, style, and wrap several HyperlinkButtons.

Step 2 of 3: Adding a C1WrapPanel to the Application

We're going to use simple HyperlinkButtons to show how content can be wrapped vertically or horizontally. This is the typical scenario to create a TagCloud view; very commonly used in Web applications.

Complete the following steps:

1. First, remove the Grid tags from your project.

2. In the Visual Studio Toolbox, drag a C1WrapPanel control to the page. This adds the panel and a reference to the page.

   <Xaml:C1WrapPanel HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>

3. Edit the Xaml:C1WrapPanel tags and add the HyperlinkButtons so the markup looks like the following:

   Xaml:C1WrapPanel

       <HyperlinkButton Foreground="White" Content="Example Text" FontSize="25"/>
       <HyperlinkButton Foreground="White" Content="Longer sentences can be used for wrapping scenarios." />
       <HyperlinkButton Foreground="White" Content="Let's insert a break." />
       <HyperlinkButton Foreground="White" Xaml:C1WrapPanel.BreakLine="After" Content="Break After" />
       <HyperlinkButton Foreground="White" Content="C1WrapPanel" />
       <HyperlinkButton Foreground="White" Content="Wrap Vertically" />
       <HyperlinkButton Foreground="White" Content="Wrap Horizontally" FontSize="20"  />
       <HyperlinkButton Foreground="White" Xaml:C1WrapPanel.BreakLine="Before" Content="Break Before" />
       <HyperlinkButton Foreground="White" Content="Controls" FontSize="8" />
       <HyperlinkButton Foreground="White" Content="WinRT" />
       <HyperlinkButton Foreground="White" Content="Components" FontSize="18" />
       <HyperlinkButton Foreground="White" Xaml:C1WrapPanel.BreakLine="AfterAndBefore" Content="Break After and Before" />
       <HyperlinkButton Foreground="White" Content="Create flow type layouts that wrap content vertically or horizontally." />
       <HyperlinkButton Foreground="White" Content="Small font size is not recommended." FontSize="6" />
       <HyperlinkButton Foreground="White" Content="The End" FontSize="24" />
   </Xaml:C1WrapPanel>
   

In the next step, you'll run the application.

Step 3 of 3: Running the Application

Now you're ready to run the application. Complete the following steps:

1. From the Debug menu, select Start Debugging. Your application will look similar to the following:

2. Click the Stop Debugging button to close the application.

3. Go back to MainPage.xaml. In the Xaml:C1WrapPanel tag, set the Orientation property to Vertical; the XAML will look like the following:

<Xaml:C1WrapPanel Orientation="Vertical">

4. Click Start Debugging again in the Debug menu. Your application will now look like this:

Notice how the buttons are stacked vertically.

Congratulations! You have successfully completed the WrapPanel for WinRT XAML quick start.

Next: Blog Series (Part 11) FlexGrid: Windows 8 Studio for WinRT XAML