# Getting Started with WinUI Expander

This article will provide you with the knowledge required to use the **RadExpander** control in a basic scenario.

## Assembly References

In order to use the RadExpander control, you will need to add references to the following assembly:

* `Telerik.WinUI.Controls.dll`
* `Telerik.Licensing.Runtime.dll`

## Add а RadExpander to the Project

The **RadExpander** is a **HeaderedContentControl** and you can initialize both its **Header** and **Content** properties.

#### **Example 1: RadExpander definition**

```XAML
<telerik:RadExpander Header="My Expander">
	<ListBox>
		<ListBoxItem Content="Option 1" />
		<ListBoxItem Content="Option 2" />
		<ListBoxItem Content="Option 3" />
		<ListBoxItem Content="Option 4" />
		<ListBoxItem Content="Option 5" />
	</ListBox>
</telerik:RadExpander>
```

#### Figure 1: The RadExpander generated by the code in Example 1

![WinUI RadExpander The RadExpander generated by the code in Example 1](https://www.telerik.com/winui/documentation/assets/9d26c4d3706fe14dc2f67e75a33f5618/radexpander_gettingstarted.png)

## Declaring more complex Header and Content

As both **Header** and **Content** properties are of type **object** there's no limit as to what you can display inside the control.

**Example 2** demonstrates a more complex layout with some hard-coded values. You can, of course, introduce an items control and define its **ItemContainerStyle** and **ItemTemplate**, for example.

#### **Example 2: More complex content**

```XAML
<telerik:RadExpander x:Name="radExpander"
					 VerticalContentAlignment="Top"
					 IsExpanded="True">
	<telerik:RadExpander.Header>
		<TextBlock Text="Header" />
	</telerik:RadExpander.Header>
	<telerik:RadExpander.Content>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition />
				<ColumnDefinition />
			</Grid.ColumnDefinitions>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
			</Grid.RowDefinitions>
			<Border Height="131"
					Margin="5"
					BorderBrush="#FFDADADA"
					BorderThickness="0,0,1,1"
					CornerRadius="3">
				<Border BorderBrush="#B2ADBDD1"
						BorderThickness="1"
						CornerRadius="2">
					<StackPanel Orientation="Horizontal">
						<Border Width="108"
								Height="108"
								Margin="10 0 0 0"
								BorderBrush="#FFE0E0E0"
								BorderThickness="1">
							<Image Source="/Images/item1.png" Stretch="None" />
						</Border>
						<StackPanel Margin="10 25 10 0">
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="16"
									   Foreground="#FF0099CC"
									   Text="Bob Smiil" />
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="11"
									   Text="BobSmiil@mail.com" />
							<TextBlock FontFamily="Segoe UI"
									   FontSize="10.667"
									   Text="Phone: 333 2334" />
						</StackPanel>
					</StackPanel>
				</Border>
			</Border>
			<Border Grid.Row="1"
					Height="131"
					Margin="5"
					BorderBrush="#FFDADADA"
					BorderThickness="0,0,1,1"
					CornerRadius="3">
				<Border BorderBrush="#B2ADBDD1"
						BorderThickness="1"
						CornerRadius="2">
					<StackPanel Orientation="Horizontal">
						<Border Width="108"
								Height="108"
								Margin="10 0 0 0"
								BorderBrush="#FFE0E0E0"
								BorderThickness="1">
							<Image Source="/Images/item2.png" Stretch="None" />
						</Border>
						<StackPanel Margin="10 25 15 0">
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="16"
									   Foreground="#FF0099CC"
									   Text="Anne Dodsworth" />
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="11"
									   Text="Anne Dodsworth@mail.com" />
							<TextBlock FontFamily="Segoe UI"
									   FontSize="10.667"
									   Text="Phone: 333 2334" />
						</StackPanel>
					</StackPanel>
				</Border>
			</Border>
			<Border Grid.Column="1"
					Height="131"
					Margin="5"
					BorderBrush="#FFDADADA"
					BorderThickness="0,0,1,1"
					CornerRadius="3">
				<Border BorderBrush="#B2ADBDD1"
						BorderThickness="1"
						CornerRadius="2">
					<StackPanel Orientation="Horizontal">
						<Border Width="108"
								Height="108"
								Margin="10 0 0 0"
								BorderBrush="#FFE0E0E0"
								BorderThickness="1">
							<Image Source="/Images/item3.png" Stretch="None" />
						</Border>
						<StackPanel Margin="10 25 10 0">
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="16"
									   Foreground="#FF0099CC"
									   Text="Andrew Fuller" />
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="11"
									   Text="AndrewFuller@mail.com" />
							<TextBlock FontFamily="Segoe UI"
									   FontSize="10.667"
									   Text="Phone: 333 2334" />
						</StackPanel>
					</StackPanel>
				</Border>
			</Border>
			<Border Grid.Row="1"
					Grid.Column="1"
					Height="131"
					Margin="5"
					BorderBrush="#FFDADADA"
					BorderThickness="0,0,1,1"
					CornerRadius="3">
				<Border BorderBrush="#B2ADBDD1"
						BorderThickness="1"
						CornerRadius="2">
					<StackPanel Orientation="Horizontal">
						<Border Width="108"
								Height="108"
								Margin="10 0 0 0"
								BorderBrush="#FFE0E0E0"
								BorderThickness="1">
							<Image Source="/Images/item4.png" Stretch="None" />
						</Border>
						<StackPanel Margin="10 25 15 0">
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="16"
									   Foreground="#FF0099CC"
									   Text="Emily Smile" />
							<TextBlock Margin="0 0 0 5"
									   FontFamily="Segoe UI"
									   FontSize="11"
									   Text="EmilySmile@mail.com" />
							<TextBlock FontFamily="Segoe UI"
									   FontSize="10.667"
									   Text="Phone: 333 2334" />
						</StackPanel>
					</StackPanel>
				</Border>
			</Border>
		</Grid>
	</telerik:RadExpander.Content>
</telerik:RadExpander>
```

#### Figure 2: The RadExpander generated by the code in Example 2

![WinUI RadExpander The RadExpander generated by the code in Example 2](https://www.telerik.com/winui/documentation/assets/0b7a8ff0bc3620ba23f231c006c5b54a/radexpander_gettingstarted_demo.png)

## Change Expand Icon

If you want to replace the default icon displayed by the expander without modifying the template of the control, you can override the **TelerikExpander_ExpandCollapseRotatableGlyph** resource:

#### **Example 3: Override expand icon**

```XAML
<telerik:RadExpander Header="Header">
	<telerik:RadExpander.Resources>
		<x:String x:Key="TelerikExpander_ExpandCollapseRotatableGlyph">&#xE74B;</x:String>
	</telerik:RadExpander.Resources>
</telerik:RadExpander>
```

## Telerik UI for WinUI Learning Resources

* [Telerik UI for WinUI Expander Component](https://www.telerik.com/winui/expander)
* [Getting Started with Telerik UI for WinUI Components](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget)
* [Telerik UI for WinUI Installation](https://www.telerik.com/winui/documentation/installation-and-deployment/installing-which-file-do-i-need)
* [Telerik UI for WinUI Examples](https://www.telerik.com/winui/documentation/examples/demos-app)
* [Telerik UI for WinUI Accessibility](https://www.telerik.com/winui/documentation/common/accessibility)
* [Telerik UI for WinUI License Agreement](https://www.telerik.com/purchase/license-agreement/winui)

## See Also

* [Expand Direction](https://www.telerik.com/winui/documentation/controls/radexpander/features/expand-direction)
* [Alignment](https://www.telerik.com/winui/documentation/controls/radexpander/features/alignment)
* [Expander Animation](https://www.telerik.com/winui/documentation/controls/radexpander/features/animation)
* [Click Mode](https://www.telerik.com/winui/documentation/controls/radexpander/features/click-mode)