C# WPF Tutorial – Wrap Layout or Wrap Panel

0
495
C# WPF Tutorial - Wrap Layout or Wrap Panel

Wrap panel is used to wrap up the UI elements with auto-adjustable properties. It’s similar to Stack Panel but with only one difference, which is the auto adjustment of free space on UI.

The wrap panel contains the orientation property the same as the stack panel, having horizontal and vertical alignment. By default orientation is horizontal, so all UI components will be placed from left to right.

Any component which will place in the Wrap panel will not expand to available space, instead, it will only capture space which is required by the element and the rest space will be spared for other elements.

Most developers recommend or think that the wrap panel is specifically used for menu and tab purposes, but actually, it’s free will for usage. No one can define the actual purpose of any panel or layout. Any developer can use them according to their expertise, comfort and logical understanding.

Wrap Panel Orientation Alignment

C# WPF Tutorial - Wrap Layout or Wrap Panel - Horizontal Orientation

Here we are going to demonstrate the horizontally aligned wrap panel code:

<Window x:Class="JWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:JWPF"
mc:Ignorable="d"
Title="MainWindow" Height="250" Width="400">
<WrapPanel>
<Button>WPF Wrap Panel Horizontal Orientation</Button>
<Button>Button Example 1</Button>
</WrapPanel>
</Window>

C# WPF Tutorial - Wrap Layout or Wrap Panel - Vertical Orientation

Here we are going to demonstrate the vertically aligned wrap panel code:

<Window x:Class="JWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:JWPF"
mc:Ignorable="d"
Title="C# WPF Tutorial - Junaid Shahid" Height="150" Width="400">
<WrapPanel Orientation="Vertical">
<Button>WPF Wrap Panel Vertical Orientation</Button>
<Button>Button Example 1</Button>
</WrapPanel>
</Window>

The wrap panel is not strict with space issues compared to the Stack panel. Also when you add multiple components in a vertical orientation, they will be side by side aligned and do not affect each other width, but the height of 1 component will affect the other.

Where in the case of horizontal orientation UI components are aligned top to bottom and if one component height is changed, it will affect the below or above UI component height also.

This means the max height component in case of horizontal orientation and max width of the component in case of vertical orientation overruled all the component height & width as respective.

For further understanding of concepts you can watch the following video: