How to develop your own Expander Control in Silverlight

In this article we will see how to open and collapse a control on mouse click.



In this article we will see how to open and collapse a control on mouse click.

Let us first see the design of the page.

First I place a stack panel and three canvas inside the panel.

The code for single canvas is shown below:

<
StackPanel x:Name="sp1" Margin="55,70,268,32">
         
<Canvas x:Name="canvas1" Height="30" Margin="0" MouseLeftButtonDown="canvas1_click" Cursor="Hand">
                  
<Border x:Name="border1" Height="29" Width="317" Canvas.Top="1" BorderBrush="Black" BorderThickness="1"/>
                  
<Border x:Name="border1_Copy" Height="29" Width="317" Canvas.Top="1" BorderBrush="Black" BorderThickness="1">
                            
<Border.Background>
                                     
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                               
<GradientStop Color="#FF06D9EC" Offset="0"/>
                                               
<GradientStop Color="White" Offset="1"/>
                                     
</LinearGradientBrush>
                            
</Border.Background>
                  
</Border>
                  
<TextBlock Height="21" Width="155" Canvas.Top="7" Text="Latest Articles" TextWrapping="Wrap" Canvas.Left="5" FontWeight="Bold" FontSize="13.333"/>
         
</Canvas>
</
StackPanel>

The output after defining three canvas is as follows:

1.gif

Now we are going define a button as follows:

<
Button x:Name="button1down" Height="25" HorizontalAlignment="Right" Width="35" Content="^" Click="button1down_click" Template="{StaticResource ButtonControlTemplate1}" Canvas.Left="282" Canvas.Top="3" Cursor="Hand"/>            <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">                           <Grid>
                             <VisualStateManager.VisualStateGroups>
                                      <VisualStateGroup x:Name="FocusStates">
                                                <VisualState x:Name="Focused"/>
                                                <VisualState x:Name="Unfocused"/>
                                     
</VisualStateGroup>
                                                <VisualStateGroup x:Name="CommonStates">
                                                          <VisualState x:Name="Normal"/>
                                                          <VisualState x:Name="MouseOver"/>
                                                          <VisualState x:Name="Pressed"/>
                                                          <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                      </VisualStateManager.VisualStateGroups>
                                      <Ellipse Stroke="#FF6DBDD1" StrokeThickness="1" Margin="3,0,5,0" Fill="#FF594646"/>
                                      <Path Fill="#FFFCF108" Stretch="Fill" Stroke="#FFFAE406" StrokeThickness="3" Margin="10,5,10.5,5" UseLayoutRounding="False" Data="M-167.46146,267.18875 L-159.22812,279.89929"/>
                                      <Path Fill="#FFFCF108" Stretch="Fill" Stroke="#FFFAE406" StrokeThickness="3" Margin="9.5,5,11,5" UseLayoutRounding="False" Data="M100.56663,-42.002625 L92.622185,-27.328712"/>
                   </Grid>
                   </ControlTemplate>

The final output after designing the page is as follows:

2.gif


Now we will work on the functionality part.

I have defined three boolean values for checking whether the canvas is open or collapsed.

Boolean
iscanvas1open=false;
Boolean
iscanvas2open=false;
Boolean
iscanvas3open=false;

Now on canvas click we are opening and closing the canvas.

private
void canvas1_click(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
          if (iscanvas1open==false)
          {
                   th.Bottom=63;
                   canvas1.Margin=th;
                   canvas1.Height = 100;
                   border1.Height=160;
                   iscanvas1open=true;
          }
          else
          {
                   th.Bottom = 0;
                   canvas1.Margin = th;
                   canvas1.Height = 30;
                   border1.Height=29;
                   iscanvas1open=false;
          }

}

Here th is the thickness defined as:

Thickness
th = new Thickness();

In the button click we have this code:

private
void button1down_click(object sender, System.Windows.RoutedEventArgs e)
{
          canvas1.Visibility=Visibility.Collapsed;

}

Output:

The first output has two sections opened as shown below:

3.gif

The second output is when we close one of the section from the above shown output.

4.gif

When we click the cross button of the "Latest Blogs" section it will close as shown below:

5.gif

This can be used to show contents in the opened section. Also user can close the section which he doesn't need.