Satyendra's Blog

Here i will be discussing about the technologies I am working with and interested in…

Create Navigation Using Fluid UI and Behaviors in WPF and Silverlight

on December 30, 2011

In this post I will be creating some navigation type of application (yes “type of” since I will not be using any navigation controls provided with the WPF like navigation toolbar or pages). The application will try to demonstrate how you can use the concept of “Fluid UI“ along with the behaviors to do great looking and smooth animations without writing a single line of code. So let me first give you a brief overview of what “Fluid UI” means. It refers to the concept that the visual elements in an interface should move and appear smoothly allowing the user to observe the changes. In this tutorial I will not be going into the deeper details of the Fluid UI. I will be using the visual state manager coupled with some behavior to create a navigation application. If you want to learn more about fluid ui you can visit .toolbox site.

Before starting, look at the app which we intend to build in the following video.

So let us start.

  • Create a new WPF Application project in Expression Blends 4.
  • Set the window properties as
Property Value
Width 545
Height 406
ResizeMode NoResize
WindowStartupLocation CenterScreen

You can set the background by using a brush or simply use an image (or image brush). I have used an image. Simply drag and drop the image on the designer window and adjust it to fit inside the LayoutRoot grid.

  • Now add a new Grid in the layout root and set its properties as
Property Value
Name gridPage1
HorizontalAlignment Stretch
VerticalAlignment Stretch
Margin Left, Right, Top : 8Bottom : 51
Width 523
Height 319
  • Now add some controls to the grid. Let us add the page headers and description first.

Add a TextBlock to gridPage1 and set its properties as follows.

Property Value
Name txtPageTitle
HorizontalAlignment Left
VerticalAlignment Top
Margin Left: 8Bottom, Right, Top : 0
Font Segoe UI Light, 36 pt
Foreground #FFAEAEDA
Effect (New DropShadowEffect) All settings are default; Change ShadowDepth to 2
Width Set to Auto
Height Set to Auto

Similarly add one more TextBlock and name it as txtPageDescription (although giving names to the controls will not matter in this application but it helps you keep track of the controls). Set its properties as required. Change the Font size to 18 and text property to some description of the page. Set the Foreground to #FF282A36. Then add some more controls to the gridPage1 like buttons, checkboxes and images. After all these steps the application should look somewhat like shown below. 

You can add more controls. Anyways the idea here is not to add the controls but to create navigation.

So after you are done copy gridPage1 and paste 2 times on the layout root to create two more grids. Name them as gridPage2 and gridPage3. Make some changes in the controls positioning inside the two grids so that they look different from the original grid gridPage1. Now arrange the grids side by side with each other as shown below (with gridPage1 in the visible window area).

Now we are done with the arranging the grids. So let us add some animation while navigating from one grid to another.

  • Add three buttons btn1, btn2 and btn3 in the layout root as shown below and change their text properties to Page 1, Page 2, and Page 3 respectively.

Now when we click Page2 then page2 should be displayed by translating it to the visible window area. Similarly page3 should be displayed when the page3 button is clicked. But before adding that functionality (which we will implement using behaviors) we will create some animations and visual states.

  •   Click on the States tab Click on AddStateGroup (). This will create a BaseState (which is the initial state) and a new Visual State group (This has a DefaultTransition state). Set the default transition value to 1 sec.
  • Click AddState () in VisualStateGroup. This will create a new Visual State. Name this as onPage1. This state occurs when we are on navigating to page 1. Since the application is designed in such a way that the Page 1 is visible initially so we don’t need to change this state anymore.
  • Create one more state by clicking AddState () in VisualStateGroup. Name this state as onPage2. Select onPage2 state and then select the grids gridPage1, gridPage2 and gridPage3 from objects and timeline tab. Now arrange the grids as they will have to look when Page2 button is clicked (You can drag the grids using mouse to arrange them but I prefer the keyboard arrow keys. Move the grids by using left and right arrow keys as required). So arrangement looks as follows with gridPage2 in the window area.

  • Similarly create one more state by clicking AddState () in VisualStateGroup (note that the state of all the elements sets to BaseState automatically whenever you create a new state). Name this state as onPage3. With onPage3 selected in the state tab select 3 grids gridPage1, gridPage2 and gridPage3 from objects and timeline tab. Arrange them to display gridPage3 in the window area.

  • Now click on Turn on FluidLayout () in VisualStateGroup. Then select TurnOnTransitionPreview () in the State tab. Now you can enjoy the smooth animation by clicking on the different states onPage1, onPage2 and onPage3 in the blends itself.
  • You can also try some easing functions by clicking on   in the state tab. I have used BackOut transition for this application. You can experiment with all the available transitions and choose any one.
  • Now we are done with all the animation stuff. Now we want these animations to occur when we select the respective buttons. This task can be done easily using the GoToStateAction behavior. Go to Assets tab and type GoToStateAction in the search box. You can see the behavior present there.
  • Before selecting anything go to Objects and Timeline tab and select the btn1. Then double click the GoToStateAction behavior which you had just searched in the assets tab. This will add the behavior to btn1. Now select the [GoToStateAction] of btn1 and set its properties in the properties window as:

StateName     onPage1

  • Similarly now select btn2 and add the GoToStateAction behavior to it. Set its properties

StateName     onPage2

  • Add one more behavior for btn3 and set its StateName to onPage3.
  • Now run the application by pressing F5.

I have tried to demonstrate one use of the fluid ui and behaviours using the above application. So you can see how useful these visual states and behaviours are for writing such applications which otherwise could require complex coding just for the UI.

You can download the source code of the application from here.


One response to “Create Navigation Using Fluid UI and Behaviors in WPF and Silverlight

  1. […] implementations for the problem and two of them can be found here (animated content control) and here (hard codec fluid transitions between views using custom visual states). I definitely recommend […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: