The below XAML code creates a Expander control to the page.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="ExpanderControl.MainControl"
Width="640" Height="480" mc:Ignorable="d">
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid Height="24" Width="283" Background="#FFF40D0D" Opacity="0.5">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Right" Margin="0,4,80,4" VerticalAlignment="Stretch" Width="195" Text="Latest Articles" TextWrapping="Wrap" FontWeight="Bold" FontFamily="Verdana" FontSize="12" Grid.RowSpan="2" Foreground="#FFF8F5F5"/>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<controls:Expander Margin="188,143,205,222" Header="Latest Articles" IsExpanded="False" Background="#FFFFFFFF" Content="Coming Soon......" HeaderTemplate="{StaticResource DataTemplate1}" ExpandDirection="Down"/>
</Grid>
</UserControl>
In above code we have also defined the header template for appearance different from the default one.
The output is as follows:
