WPF WrapPanel Example

WrapPanel. Interfaces have varying requirements. Often controls must be positioned in exactly one location. But sometimes controls should wrap, like text, and always be visible. The WrapPanel offers this ability.

Based on:

.NET 4.5

Example. This example shows the WrapPanel element. Please create a WPF project and drag a WrapPanel to the Window area. I removed the "Width" attribute and added the "HorizontalAligntment" attribute. I set it to "Stretch".

Next, I dragged four Button elements to the WrapPanel. These become sub-controls. I adjusted the Content, Margin and added some Padding attributes to the Buttons. This changes their visual appearance.

Button

Finally: I ran the program. When I resized the window, the WrapPanel "wraps" the Button elements as though they are text.

Tip: This makes the Buttons visible on narrow windows. It makes the user interface more versatile.

Example markup: XAML

<Window x:Class="WpfApplication19.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<WrapPanel
	    HorizontalAlignment="Stretch"
	    Height="299"
	    Margin="10"
	    VerticalAlignment="Top">

	    <Button Content="Button 1" Width="75" Margin="10" Padding="10"/>
	    <Button Content="Button 2" Width="75" Margin="10" Padding="10"/>
	    <Button Content="Button 3" Width="75" Margin="10" Padding="10"/>
	    <Button Content="Button 4" Width="75" Margin="10" Padding="10"/>

	</WrapPanel>
    </Grid>
</Window>

Summary. Many WPF programs use layouts that do not benefit from a WrapPanel. But for a fast, and easy-to-maintain interface, WrapPanel may be helpful. Controls are hidden less often on narrow windows or parts of windows.

Related Links