# Layouts

RadListView supports different layouts that can be enabled in order to change the ordering of the items.

The layout is controlled using the **Orientation** and **LayoutDefinition** properties of RadListView.

## Orientation

Each layout supports horizontal and vertical orientation set via the **Orientation** property of RadListView.

## LayoutDefinition

The LayoutDefinition describes how the items should arrange in the control. RadListView supports several implementations of the **LayoutDefinitionBase** which can be assigned using the **LayoutDefinition** property.

The control provides the following layout definition implementations:

* **StackLayoutDefinition**: A layout definition that arranges the items in a stack.

#### **Example 1: Setting StackLayoutDefinition**

```XAML
<telerikData:RadListView>
	<telerikData:RadListView.LayoutDefinition>
		<telerikListView:StackLayoutDefinition/>
	</telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>
```

Where `telerikListView` points to `xmlns:telerikListView="using:Telerik.UI.Xaml.Controls.Data.ListView"`.

![WinUI StackLayoutDefinition](https://www.telerik.com/winui/documentation/assets/74e90670174cde41ef441efb37c08282/radlistview-layouts-0.png)

* **GridLayoutDefinition**: A layout definition that arranges the items in a grid. The **SpanCount** property specifies the columns count of the grid.

#### **Example 2: Setting GridLayoutDefinition**

```XAML
<telerikDataControls:RadListView>
	<telerikDataControls:RadListView.LayoutDefinition>
		<telerikListView:GridLayoutDefinition SpanCount="2"/>
	</telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>		
```

![WinUI GridLayoutDefinition](https://www.telerik.com/winui/documentation/assets/943b78b347628009e8787c32739de400/radlistview-layouts-1.png)

* **WrapLayoutDefinition**: A layout definition that wraps the items. Only items with equal width are supported. Through the **ItemWidth** property you can define the width of the items.

#### **Example 3: Setting WrapLayoutDefinition**

```XAML
<telerikDataControls:RadListView ItemsSource="{Binding}" Height="350" Width="300" >
	<telerikDataControls:RadListView.LayoutDefinition>
		<telerikListView:WrapLayoutDefinition ItemWidth="100"/>
	</telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>
```

![WinUI WrapLayoutDefinition](https://www.telerik.com/winui/documentation/assets/c1ceef83fd743961d7ccbfa3b3fa85c9/radlistview-layouts-2.png)

* **StaggeredLayoutDefinition**: A layout definition that arranges variable sized items in columns. Through the **SpanCount** property you can set the column count of the layout.

#### **Example 4: Setting StaggeredLayoutDefinition**

```XAML
<telerikDataControls:RadListView ItemsSource="{Binding}" Height="350" Width="300" >
	<telerikDataControls:RadListView.LayoutDefinition>
		<telerikListView:StaggeredLayoutDefinition SpanCount="3" />
	</telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>
```

![WinUI StaggeredLayout](https://www.telerik.com/winui/documentation/assets/cfe66be7d142fad8e737671c51aabfdd/radlistview-layouts-3.png)