Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / LayoutPanels / Layout Panels Features / Wrapping Items
In This Topic
    Wrapping Items
    In This Topic

    There are a few different ways to wrap items with the C1WrapPanel control. You already investigated one way in the WrapPanel Quick Start. The tabs below show two more ways to use the C1WrapPanel control.

     You can wrap items using the C1WrapPanel.BreakLine Attached property. In this example, HyperlinkButtons are used. Complete the following steps:

    1. In your Silverlight project, drag a C1WrapPanel control from the Toolbox and place it before the closing </Grid> tag in the .xaml page.
    2. Place your cursor in between the <c1:C1WrapPanel> tags and press ENTER.
    3. Add the following XAML to wrap HyperlinkButtons:
    XAML
    Copy Code 
    <Border  Margin="2" BorderBrush="Black" BorderThickness="2" Background="Orange">
    <HyperlinkButton Foreground="White"  Content="Example Text" FontSize="25" />
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Green" c1:C1WrapPanel.BreakLine="After">
    <HyperlinkButton Foreground="White" Content="Break After" />
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Blue">
    <HyperlinkButton Foreground="White" Content="C1WrapPanel" FontSize="16"/>
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Red">
    <HyperlinkButton Foreground="White" Content="Wrap Vertically" />
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2"  Background="Purple">
    <HyperlinkButton Foreground="White" Content="Wrap Horizontally" FontSize="20"  />
</Border>
    Notice the C1WrapPanel.BreakLine property is set to After for the second HyperlinkButton. This will add a break after the button.
    1. Run your project. The C1WrapPanel will resemble the following image:                 

    By default, items are wrapped horizontally. However, in some cases you may need them to wrap vertically. You can set the Orientation property to specify vertical wrapping. In this example, HyperlinkButtons are used. Complete the following steps:      

    1. In your Silverlight project, drag a C1WrapPanel control from the Toolbox and place it before the closing </Grid> tag in the .xaml page.
    2. In the <c1:C1WrapPanel> tag, set the Orientation property to Vertical; the XAML will look like the following:  
    XAML
    Copy Code 
    <c1:C1WrapPanel Orientation="Vertical">
    1. Place your cursor in between the <c1:C1WrapPanel> tags and press ENTER.
    2. Add the following XAML to wrap HyperlinkButtons:
    XAML
    Copy Code 
    <Border  Margin="2" BorderBrush="Black" BorderThickness="2" Background="Orange">
    <HyperlinkButton Foreground="White"  Content="Example Text" FontSize="25" />
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Green" c1:C1WrapPanel.BreakLine="After">
    <HyperlinkButton Foreground="White" Content="Break After" />
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Blue">
    <HyperlinkButton Foreground="White" Content="C1WrapPanel" FontSize="16"/>
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Red">
    <HyperlinkButton Foreground="White" Content="Wrap Vertically" />
</Border>
<Border Margin="2" BorderBrush="Black" BorderThickness="2"  Background="Purple">
    <HyperlinkButton Foreground="White" Content="Silverlight" FontSize="20"  />
</Border>
    1. Run your project. The C1WrapPanel will resemble the following image: