How to use Expander Control in Silverlight


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:

1.gif
2.gif