FlipPanel Control

FlipPanel Control is a double-sided panel, which when flipped displays content on the "back", and also displays content on the "front" when not flipped.

Printer Friendly Download Tutorial (476KB) Download Source Code (11.2KB) Online Demonstration

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:

New Project

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:

New Silverlight Application

Step 3

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

MainPage.xaml

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 "FlipPanel" without the quotes, see below:

Add Silverlight Class Library Project

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 "FlipPanel", click on the "Class1.vb" entry, then goto Properties and change the File Name to "FlipPanel.vb" (without the quotes), see below:

FlipPanel Class Properties

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 "FlipPanel" Project (not the FlipPanel.vb) in Solution Explorer and choose "Add" then "New Folder", and give it the Name "Themes" (again without quotes), see below:

FlipPanel Project Themes Folder

Step 7

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

Generic.xaml Resource Dictionary

Step 8

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

xmlns:local="clr-namespace:FlipPanel"

See below:

Resource Dictionary Namespaces

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:FlipPanel">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:FlipPanel">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ViewStates">
              <VisualStateGroup.Transitions>
                <VisualTransition To="Normal" From="Flipped" GeneratedDuration="0:0:0.7">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                       Storyboard.TargetProperty="RotationY" To="-90" Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetName="FrontContentProjection"
                       Storyboard.TargetProperty="RotationY" To="0" BeginTime="0:0:0.5" Duration="0:0:0.5"/>
                  </Storyboard>
                </VisualTransition>
                <VisualTransition To="Flipped" From="Normal" GeneratedDuration="0:0:0.7">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="FrontContentProjection"
                        Storyboard.TargetProperty="RotationY" To="90" Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                        Storyboard.TargetProperty="RotationY" To="0" BeginTime="0:0:0.5" Duration="0:0:0.5"/>
                  </Storyboard>
                </VisualTransition>
              </VisualStateGroup.Transitions>
              <VisualState x:Name="Normal">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                      Storyboard.TargetProperty="RotationY" To="-90" Duration="0"/>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Flipped">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="FrontContentProjection" 
                      Storyboard.TargetProperty="RotationY" To="90" Duration="0"/>
                  <DoubleAnimation Storyboard.TargetName="FlipButtonTransform" 
                      Storyboard.TargetProperty="Angle" To="90" Duration="0"/>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Border BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              Background="{TemplateBinding Background}">
            <ContentPresenter Content="{TemplateBinding FrontContent}"/>
            <Border.Projection>
              <PlaneProjection x:Name="FrontContentProjection"/>
            </Border.Projection>
          </Border>
          <Border BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              Background="{TemplateBinding Background}">
            <ContentPresenter Content="{TemplateBinding BackContent}"/>
            <Border.Projection>
              <PlaneProjection x:Name="BackContentProjection"/>
            </Border.Projection>
          </Border>
          <ToggleButton Grid.Row="1" RenderTransformOrigin="0.5,0.5" Margin="0,10,0,0" x:Name="FlipButton">
            <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 Angle="-90" x:Name="FlipButtonTransform"/>
            </ToggleButton.RenderTransform>
          </ToggleButton>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

See below:

FlipPanel Resource Dictionary

Step 10

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

Imports System.Windows.Controls.Primitives
<TemplateVisualState(Name:="Normal", GroupName:="ViewStates"),
TemplateVisualState(Name:="Flipped", GroupName:="ViewStates"),
TemplatePart(Name:="FlipButton", Type:=GetType(ToggleButton)),
TemplatePart(Name:="FlipButtonAlternative", Type:=GetType(ToggleButton))>

See Below:

FlipPanel.vb Imports and Template

Step 11

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

Inherits Control

Public Shared ReadOnly FrontContentProperty As DependencyProperty =
DependencyProperty.Register("FrontContent", GetType(Object),
GetType(FlipPanel), Nothing)

Public Shared ReadOnly BackContentProperty As DependencyProperty =
DependencyProperty.Register("BackContent", GetType(Object),
GetType(FlipPanel), Nothing)

Public Shared ReadOnly IsFlippedProperty As DependencyProperty =
DependencyProperty.Register("IsFlipped", GetType(Boolean),
GetType(FlipPanel), Nothing)

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

See Below:

FlipPanel.vb Declarations

Step 12

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

Public Property FrontContent() As Object
  Get
    Return GetValue(FrontContentProperty)
  End Get
  Set(ByVal value As Object)
    SetValue(FrontContentProperty, value)
  End Set
End Property

Public Property BackContent() As Object
  Get
    Return GetValue(BackContentProperty)
  End Get
  Set(ByVal value As Object)
    SetValue(BackContentProperty, value)
  End Set
End Property

Public Property IsFlipped() As Boolean
  Get
    Return CBool(GetValue(IsFlippedProperty))
  End Get
  Set(ByVal value As Boolean)
    SetValue(IsFlippedProperty, value)
    ChangeVisualState(True)
  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:

FlipPanel.vb Properties

Step 13

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

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

Private Sub ChangeVisualState(ByVal useTransitions As Boolean)
  If Not IsFlipped Then
    VisualStateManager.GoToState(Me, "Normal", useTransitions)
  Else
    VisualStateManager.GoToState(Me, "Flipped", useTransitions)
  End If
End Sub

See Below:

FlipPanel.vb Constructor and Sub

Step 14

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

Private Sub FlipButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  Me.IsFlipped = Not Me.IsFlipped
  ChangeVisualState(True)
End Sub

Public Overrides Sub OnApplyTemplate()
  MyBase.OnApplyTemplate()
  Dim _flipButton As ToggleButton =
    TryCast(MyBase.GetTemplateChild("FlipButton"), ToggleButton)
  If _flipButton IsNot Nothing Then
    AddHandler _flipButton.Click, AddressOf FlipButton_Click
  End If
  Dim _flipButtonAlternate As ToggleButton =
    TryCast(MyBase.GetTemplateChild("FlipButtonAlternate"), ToggleButton)
  If _flipButtonAlternate IsNot Nothing Then
    AddHandler _flipButtonAlternate.Click, AddressOf FlipButton_Click
  End If
  Me.ChangeVisualState(False)
End Sub

See Below:

FlipPanel.vb Event Handlers

Step 15

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

Build FlipPanel

Step 16

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:

Canvas Control

Step 17

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:

MainPage with Canvas

Step 18

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

FlipPanel Control

Step 19

Draw an FlipPanel 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:FlipPanel" XAML to the following:


<my:FlipPanel Canvas.Left="75" Canvas.Top="25" Height="250" Width="250">
  <my:FlipPanel.FrontContent>
    <StackPanel>
      <TextBlock Margin="4" FontWeight="Bold" Text="Front Content"/>
      <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:FlipPanel.FrontContent>
  <my:FlipPanel.BackContent>
    <StackPanel>
      <TextBlock Margin="4" FontWeight="Bold" Text="Back Content"/>
      <CheckBox Margin="4" Padding="4" Content="CheckBox One"/>
      <CheckBox Margin="4" Padding="4" Content="CheckBox Two"/>
      <CheckBox Margin="4" Padding="4" Content="CheckBox Three"/>
      <CheckBox Margin="4" Padding="4" Content="CheckBoxn Four"/>
    </StackPanel>
  </my:FlipPanel.BackContent>
</my:FlipPanel>

See below:

MainPage with Canvas and FlipPanel

Step 20

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

Start Debugging

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

Application Running

Step 21

Click on the Round button with the Arrow to Flip the FlipPanel, see below:

FlipPanel Control

Step 22

Close the Application and Browser window by clicking on the Close Button Close 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 FlipPanel control! It could be expanded to add more Properties and functionality such as flipping horizontally and vertically for example - make it your own!

Share

Creative Commons License

Copyright Comentsys © 2009 - 2010, All rights reserved. About | Contact | Link to Page
Valid XHTML 1.1! Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 This website is ICRA rated Creative Commons License