# WrapPanel Quick Start

Learn how to create a simple quickstart application using WrapPanel.

## Content



The following quick start guide is intended to get you up and running with **WrapPanel for WPF**. In this quick start, you'll create a new project in Visual Studio, add styled **HyperlinkButtons** that can be wrapped, and change the orientation for the buttons.

### Set up the Application

1.  In Visual Studio, select **File | New | Project**.
2.  In the **New Project** dialog box, select **WPF** **Application**.
3.  Enter a **Name** and **Location** for your project and click **OK** to create the new application.

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

### Add, Style and Wrap Hyperlinks

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.

1.  First, remove the Grid tags from your project.
2.  From the Visual Studio Toolbox, drag a **C1WrapPanel** control to the page.
3.  Place your cursor in between the **<c1:C1WrapPanel>** tags and add the **HyperlinkButtons** using the following XAML:

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

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

### Run 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:![WrapPanel application 1](https://cdn.mescius.io/document-site-files/images/0fd6e12b-d324-40d6-9d0f-d56e7bea0ba7/images/layoutpanels/wrappanelqs1.png)
2.  Click the Stop Debugging button to close the application.
3.  Go back to MainPage.xaml. In the <c1:C1WrapPanel> tag, set the Orientation property to Vertical; the XAML will look like the following:

```xml
<c1:C1WrapPanel Orientation="Vertical">
```

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

![WrapPanel application 2](https://cdn.mescius.io/document-site-files/images/0fd6e12b-d324-40d6-9d0f-d56e7bea0ba7/images/layoutpanels/wrappanelqs2.png)

Notice how the buttons are stacked vertically.

Congratulations! You have successfully completed the **WrapPanel for WPF** quick start.