Feel Tech Evolution: Expander Control is a Collapsable panel

Step 1

Start Microsoft Visual Web Developer 2010 Express, then Select File then New Project... Select "Visual Basic" then "Silverlight Application" from Templates, select a Location if you wish, then enter a name for the Project and then click OK, see below:

Step 2

New Silverlight Application window should appear, uncheck the box "Host the Silverlight Application in a new Web site" and then select the required Silverlight Version, see below:

Step 3

A Blank Page named MainPage.xaml should then appear, see below:

Step 4

Select from the Main Menu: "File" then "Add", then "New Project..." The "New Project" window should appear, select "Silverlight Class Library" with the Name "Expander" without the quotes, see below:

Step 5

In the "Choose the version of Silverlight you want to target from the list of installed Silverlight SDK's" choose the same version of Silverlight for example Silverlight 4 and click OK.
Then in the Solution Explorer for "Expander", click on the "Class1.vb" entry, then goto Properties and change the File Name to "Expander.vb" (without the quotes), see below:

Step 6

In the "You are renaming a file. Would you also like to perform a rename in this project of all references to the code element 'Class1'?" choose Yes.
Right Click on the Entry for the "Expander" Project (not the Expander.vb) in Solution Explorer and choose "Add" then "New Folder", and give it the Name "Themes" (again without quotes), see below:

Step 7

Right Click on the Entry for the "Themes" Folder for the Expander Project, and choose "Add", then "New Item...", select "Silverlight Resource Dictionary" with the Name "Generic.xaml", without quotes, see below:

Step 8

In the XAML Pane for the Generic.xaml, in the "ResourceDictionary" tag type the following XAML namespace:

xmlns:local="clr-namespace:Expander"

See below:

Step 9

While still the XAML Pane for the Generic.xaml, above the "</ResourceDictionary>" tag and below the top "<ResourceDictionary>" tag, type the following XAML:


<Style TargetType="local:Expander">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:Expander">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ViewStates">
              <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5"/>
              </VisualStateGroup.Transitions>
              <VisualState x:Name="Expanded">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                      Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
                  <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                      Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                </Storyboard>
              </VisualState>
            <VisualState x:Name="Collapsed">
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                    Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/>
                <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                    Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
          <Border BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              Background="{TemplateBinding Background}">
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
              </Grid.RowDefinitions>
              <Grid Margin="3">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Margin="3" Content="{TemplateBinding HeaderContent}"/>
                <ToggleButton Grid.Column="1" RenderTransformOrigin="0.5,0.5" Margin="3" x:Name="ExpandCollapseButton">
                  <ToggleButton.Template>
                    <ControlTemplate>
                      <Grid>
                        <Ellipse Width="20" Height="20" Stroke="#FFA9A9A9" Fill="AliceBlue"/>
                        <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" 
                            Data="M1,1.5L4.5,5 8,1.5" Stroke="#FF666666" StrokeThickness="2"/>
                      </Grid>
                    </ControlTemplate>
                  </ToggleButton.Template>
                  <ToggleButton.RenderTransform>
                    <RotateTransform x:Name="RotateButtonTransform"/>
                  </ToggleButton.RenderTransform>
                </ToggleButton>
              </Grid>
              <ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content">
                <ContentPresenter.RenderTransform>
                  <ScaleTransform x:Name="ContentScaleTransform"/>
                </ContentPresenter.RenderTransform>
              </ContentPresenter>
            </Grid>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

See below:

Step 10

Double Click on the Entry for the "Expander.vb" Class in Solution Explorer in the "Expander" project.
In the Code View for Expander above the "Public Class Expander" line type the following:

Imports System.Windows.Controls.Primitives
<TemplateVisualState(Name:="Collapsed", GroupName:="ViewStates"),
TemplateVisualState(Name:="Expanded", GroupName:="ViewStates"),
TemplatePart(Name:="Content", Type:=GetType(FrameworkElement)),
TemplatePart(Name:="ExpandCollapseButton", Type:=GetType(ToggleButton))>

See Below:

Step 11

While still in the Code View for Expander.vb, below the "Public Class Expander" line type the following:

Inherits ContentControl

Private _useTransitions As Boolean = True
Private _collapsedState As VisualState
Private _toggleExpander As ToggleButton
Private _contentElement As FrameworkElement

See Below:

Step 12

While still in the Code View for Expander.vb, above the "End Class" for "Public Class Expander", type the following Dependency Properties:

Public Shared ReadOnly HeaderContentProperty As DependencyProperty =
DependencyProperty.Register("HeaderContent", GetType(Object),
GetType(Expander), Nothing)

Public Shared ReadOnly IsExpandedProperty As DependencyProperty =
DependencyProperty.Register("IsExpanded", GetType(Boolean),
GetType(Expander), New PropertyMetadata(True))

Public Shared ReadOnly CornerRadiusProperty As DependencyProperty =
DependencyProperty.Register("CornerRadius", GetType(CornerRadius),
GetType(Expander), Nothing)

See Below:

Step 13

While still in the Code View for Expander.vb, above the "End Class" for "Public Class Expander", type the following Properties:

Public Property HeaderContent() As Object
  Get
    Return GetValue(HeaderContentProperty)
  End Get
  Set(ByVal value As Object)
    SetValue(HeaderContentProperty, value)
  End Set
End Property

Public Property IsExpanded() As Boolean
  Get
    Return CBool(GetValue(IsExpandedProperty))
  End Get
  Set(ByVal value As Boolean)
   SetValue(IsExpandedProperty, value)
  End Set
End Property

Public Property CornerRadius() As CornerRadius
  Get
    Return CType(GetValue(CornerRadiusProperty), CornerRadius)
  End Get
  Set(ByVal value As CornerRadius)
    SetValue(CornerRadiusProperty, value)
  End Set
End Property

See Below:

Step 14

While still in the Code View for Expander.vb, above the "End Class" for "Public Class Expander", type the following Constructor and Sub:

Public Sub New()
  DefaultStyleKey = GetType(Expander)
End Sub

Private Sub ChangeVisualState(ByVal useTransitions As Boolean)
  If IsExpanded Then
    If _contentElement IsNot Nothing Then
      _contentElement.Visibility = Visibility.Visible
    End If
    VisualStateManager.GoToState(Me, "Expanded", useTransitions)
  Else
    VisualStateManager.GoToState(Me, "Collapsed", useTransitions)
    _collapsedState = TryCast(GetTemplateChild("Collapsed"), VisualState)
    If _collapsedState Is Nothing Then
      If _contentElement IsNot Nothing Then
        _contentElement.Visibility = Visibility.Collapsed
      End If
    End If
  End If
End Sub

See Below:

Step 15

While still in the Code View for Expander.vb, above the "End Class" for "Public Class Expander", type the following Event Handlers:

Private Sub Toggle_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  IsExpanded = Not IsExpanded
  _toggleExpander.IsChecked = IsExpanded
  ChangeVisualState(_useTransitions)
End Sub

Private Sub Collapsed_Completed(ByVal sender As Object, ByVal e As EventArgs)
  _contentElement.Visibility = Visibility.Collapsed
End Sub

Public Overrides Sub OnApplyTemplate()
  MyBase.OnApplyTemplate()
  _toggleExpander = TryCast(GetTemplateChild("ExpandCollapseButton"), ToggleButton)
  If _toggleExpander IsNot Nothing Then
    AddHandler _toggleExpander.Click, AddressOf Toggle_Click
  End If
  _contentElement = TryCast(GetTemplateChild("Content"), FrameworkElement)
  If _contentElement IsNot Nothing Then
    _collapsedState = TryCast(GetTemplateChild("Collapsed"), VisualState)
    If (_collapsedState IsNot Nothing) AndAlso (_collapsedState.Storyboard IsNot Nothing) Then
      AddHandler _collapsedState.Storyboard.Completed, AddressOf Collapsed_Completed
    End If
  End If
  ChangeVisualState(False)
End Sub

See Below:

Step 16

Select Debug then the "Build Expander" option from the menu, see below:

Step 17

Return to the MainPage.xaml Designer View by selecting the "MainPage.xaml" Tab, or Double Clicking on the Entry for "MainPage.xaml" in Solution Explorer for the Main Project.
Then from the All Silverlight Controls section in the Toolbox select the Canvas control:

Step 18

Draw a Canvas that fill the whole Page or in the XAML Pane between the "<Grid>" and "</Grid>" lines type the following XAML:

<Canvas Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Page">
</Canvas>

See below:

Step 19

Then from the Expander Controls section in the Toolbox select the Expander control:

Step 20

Draw an Expander on the Page (Canvas) by dragging the Button from the Toolbox onto the Canvas, then in the XAML Pane inbetween the "<Canvas>" and "</Canvas>" tags change the "my:Expander" XAML to the following:


<my:Expander Canvas.Left="75" Canvas.Top="25" Height="250" Width="250" HeaderContent="Expander">
  <my:Expander.Content>
    <StackPanel>
      <Button Margin="4" Padding="4" Content="Button One"/>
      <Button Margin="4" Padding="4" Content="Button Two"/>
      <Button Margin="4" Padding="4" Content="Button Three"/>
      <Button Margin="4" Padding="4" Content="Button Four"/>
    </StackPanel>
  </my:Expander.Content>
</my:Expander>

See below:

Step 21

Save the Project as you have now finished the Silverlight application. Select Debug then Start Debugging or click on Start Debugging:

After you do, the following will appear in a new Web Browser window:

Step 22

Click on the Round button with the Arrow to Collapse or Expand the Expander, see below:

Step 23

Close the Application and Browser window by clicking on the Close Button

on the top right of the Application Window and Web Browser to Stop the application.
This is a simple example of how to create an Expander, it could be extended to support more Properties such as a HeaderContent Background colour for example. Try adding more features and make it your own!

Download Tutorial (458KB)

Download Source Code (11.2KB)

Tuesday, 1 May 2012

Expander Control is a Collapsable panel

No comments :