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. In the XAML window of the project, place the cursor between the <Grid x:Name="ContentPanel"></Grid> tags and click once.
2. Add the following markup between the <Grid x:Name="ContentPanel"></Grid> tags to add a C1WrapPanel:
<c1:C1WrapPanel x:Name="c1wrappanel1"></c1:C1WrapPanel>
3. Add the following markup between the <c1:C1WrapPanel ></c1:C1WrapPanel> tags to add several TextBlock controls to the C1WrapPanel:
<TextBlock Text="Example Text " FontSize="30" />
<TextBlock Text="You can even wrap longer sentences." />
<TextBlock Text="Let's insert a break. " FontSize="24"/>
<TextBlock c1:C1WrapPanel.BreakLine="After" Text="Break After " />
<TextBlock Text="C1WrapPanel " />
<TextBlock Text="Wrap Vertically " />
<TextBlock Text="Wrap Horizontally " FontSize="20" />
<TextBlock c1:C1WrapPanel.BreakLine="Before" Text="Break Before " />
<TextBlock Text="Silverlight-based " FontSize="8" />
<TextBlock Text="Windows Phone " FontSize="40"/>
<TextBlock Text="Controls " FontSize="18" />
<TextBlock c1:C1WrapPanel.BreakLine="AfterAndBefore" Text="Break After and Before " />
<TextBlock Text="Create flow type layouts that wrap content. " />
<TextBlock Text="Small font size is not recommended. " FontSize="6" />
<TextBlock Text="The End" FontSize="24" />
The ContentPanel markup will now appear similar to the following:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<c1:C1WrapPanel x:Name="c1wrappanel1">
<TextBlock Text="Example Text " FontSize="30" />
<TextBlock Text="You can even wrap longer sentences." />
<TextBlock Text="Let's insert a break. " FontSize="24"/>
<TextBlock c1:C1WrapPanel.BreakLine="After" Text="Break After " />
<TextBlock Text="C1WrapPanel " />
<TextBlock Text="Wrap Vertically " />
<TextBlock Text="Wrap Horizontally " FontSize="20" />
<TextBlock c1:C1WrapPanel.BreakLine="Before" Text="Break Before " />
<TextBlock Text="Silverlight-based " FontSize="8" />
<TextBlock Text="Windows Phone " FontSize="40"/>
<TextBlock Text="Controls " FontSize="18" />
<TextBlock c1:C1WrapPanel.BreakLine="AfterAndBefore" Text="Break After and Before " />
<TextBlock Text="Create flow type layouts that wrap content. " />
<TextBlock Text="Small font size is not recommended. " FontSize="6" />
<TextBlock Text="The End" FontSize="24" />
</c1:C1WrapPanel>
</Grid>
In the next step, you'll run the application.