ARTICLE

Expander Control in Silverlight

Posted by Priya Linge in Articles | Silverlight with C# on August 04, 2011

Tags: .net, articles, C# tutorials, Expander Control, Expander Control in Silverlight, Silverlight, Silverlight tutorials

This article demonstrates the Expander control in Silverlight and binding data to that control.

Tweet
3069
0

Reader Level: Intermediate

Download Files:

Expander in Silverlight.rar

Introduction

This article demonstrates the Expander control in Silverlight and binding data with to control.

We have the Expander control in Silverlight to which we can add other controls like Datagrid, Chart, images etc.

as Expander Content. We can give a Header to the Expander with the help of <Expander. Header>.

Step 1: How to use Expander control in Silverlight.

<xmlns:toolkit=http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit>

In this assembly reference we have an Expander control.

Add a Datagrid to the Expander control as its content, bind data to datagrid from service method, as below.

<Border x:Name="BorderExpender2" BorderThickness="0.5" BorderBrush="LightGray" Grid.Row="1" DataContext="">
                <toolkit:Expander x:Name="Expander2" VerticalAlignment="Top" IsExpanded="True" ExpandDirection="Down" >
                    <toolkit:Expander.Header>
                        <Border BorderThickness="0" Height="20" VerticalAlignment="Top" HorizontalAlignment="Stretch" >
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFCFDDED"/>
                                    <GradientStop Color="#FF59789B" Offset="0.691"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <TextBlock x:Name="txtcus" Margin="5,0,0,0" VerticalAlignment="Center" Text="Cutomer Graph" Foreground="AliceBlue" HorizontalAlignment="Left"></TextBlock>
                        </Border>
                    </toolkit:Expander.Header>
                    <toolkit:Expander.Content>
                        <Border BorderThickness="1" BorderBrush="#0e71a3" Height="245" >
                            <toolkit:Chart HorizontalAlignment="Center" Name="mychart" Title="Chart Title" VerticalAlignment="Center" Width="281" Height="216">
                                <toolkit:BarSeries ItemsSource="{Binding}" IndependentValuePath="Name" DependentValuePath="ID"></toolkit:BarSeries>
                            </toolkit:Chart>
                        </Border>
                    </toolkit:Expander.Content>
                </toolkit:Expander>
            </Border>

It look like as following:
Expander control in silverlight

Step 2: Apply Style to expander control.

<Style x:Key="ExpanderStyle1" TargetType="controls:Expander">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:Expander">
                    <Grid Background="Transparent">
                        <Grid.Resources>
                            <LinearGradientBrush x:Key="ExpanderArrowFill" EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="#FFBFBFBF" Offset="0.5"/>
                                <GradientStop Color="#FF878787" Offset="1"/>
                            </LinearGradientBrush>
                            <LinearGradientBrush x:Key="ExpanderArrowHoverFill" EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFF0F8FE" Offset="0"/>
                                <GradientStop Color="#FFE0F3FE" Offset="0.3"/>
                                <GradientStop Color="#FF6FA7C5" Offset="1"/>
                            </LinearGradientBrush>
                            <LinearGradientBrush x:Key="ExpanderArrowPressedFill" EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFDCF0FA" Offset="0"/>
                                <GradientStop Color="#FFC5E6F7" Offset="0.2"/>
                                <GradientStop Color="#FF5690D0" Offset="1"/>
                            </LinearGradientBrush>
                            <ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
                                <Grid>
                                    <Grid.Background>

After applying the style to the Expander control, it looks like as follows:
Expander control in silverlight

Step 3: Chart and Image controls in expander control as their content.

1. Image:

<toolkit:Expander.Content>
                        <Border BorderThickness="1" BorderBrush="#0e71a3" Height="222" >

                            </Grid>
                        </Border>
                    </toolkit:Expander.Content>

Output:

Expander control in silverlight

2. Chart:

<toolkit:Expander.Content>
                        <Border BorderThickness="1" BorderBrush="#0e71a3" Height="245" >
                            <toolkit:Chart HorizontalAlignment="Center" Name="mychart" Title="Chart Title" VerticalAlignment="Center" Width="281" Height="216">
                                <toolkit:BarSeries ItemsSource="{Binding}" IndependentValuePath="Name" DependentValuePath="CID"></toolkit:BarSeries>
                            </toolkit:Chart>
                        </Border>
                    </toolkit:Expander.Content>

Output:

Expander control in silverlight

Summary

We can add many other controls to the Expander control as their content in Silverlight.

We can also give the animation effect to the Expander control.