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:

First, remove the Grid tags from your project.

Drag and drop C1WrapPanel control on the page. This adds the panel and a reference to the page.

Edit the <Xaml:C1WrapPanel> tags and add the HyperlinkButtons so the markup looks like the following:

Markup	Copy Code
<Xaml:C1WrapPanel> <HyperlinkButton Content="Example Text" FontSize="25" /> <HyperlinkButton Content="Longer sentences can be used for wrapping scenarios." /> <HyperlinkButton Content="Let's insert a break." /> <HyperlinkButton Xaml:C1WrapPanel.BreakLine="After" Content="Break After" /> <HyperlinkButton Content="C1WrapPanel" /> <HyperlinkButton Content="Wrap Vertically" /> <HyperlinkButton Content="Wrap Horizontally" FontSize="20" /> <HyperlinkButton Xaml:C1WrapPanel.BreakLine="Before" Content="Break Before" /> <HyperlinkButton Content="Controls" FontSize="8" /> <HyperlinkButton Content="UWP" /> <HyperlinkButton Content="Components" FontSize="18" /> <HyperlinkButton Xaml: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" /> </Xaml:C1WrapPanel>

Markup

Copy Code

 <Xaml:C1WrapPanel>
            <HyperlinkButton Content="Example Text" FontSize="25" />
            <HyperlinkButton Content="Longer sentences can be used for wrapping scenarios." />
            <HyperlinkButton Content="Let's insert a break." />
            <HyperlinkButton Xaml:C1WrapPanel.BreakLine="After" Content="Break After" />
            <HyperlinkButton Content="C1WrapPanel" />
            <HyperlinkButton Content="Wrap Vertically" />
            <HyperlinkButton Content="Wrap Horizontally" FontSize="20"  />
            <HyperlinkButton Xaml:C1WrapPanel.BreakLine="Before" Content="Break Before" />
            <HyperlinkButton Content="Controls" FontSize="8" />
            <HyperlinkButton Content="UWP" />
            <HyperlinkButton Content="Components" FontSize="18" />
            <HyperlinkButton Xaml: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" />
    </Xaml:C1WrapPanel>

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