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

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.

1 Comment »

Creating custom controls in WPF (Custom button control)

Expression blend has a variety of controls for the users to use. But many times the users have their own requirements. In such cases the user can create his own custom control for the WPF or Silverlight application by programming a class that inherits from one of the System.Windows.Controls classes. Here I will be explaining the concept by creating a custom button control which can be reused across other WPF projects.

So let me begin with the task. The button which we intend to build looks somewhat like this.

Start expression blend and select WPF Control Library from the new project window.

Then draw the controls as shown in the screen below

I have drawn 3 controls: Image, TextBlock for button text and TextBlock for the functionality description.

Some important properties which we need to set for the above 3 controls shown below. Set these properties and also set other required properties such as margin and foreground color of the text according to your requirements. Here you can use any image as a temporary placeholder while making the control. The actual image can be later set by the user when he uses the control in some project.

Also set the IsTabStop property of the UserControl to checked so that the control can receive focus from keyboard also.

Now select all the 3 controls, right click them and group them into the border.

Name the border as bdButtonBorder. Set the bdButtonBorder properties as follows(although you can use your own imagination and depending upon how the button should look and feel set your own properties)

Property Value
BorderBrush #FFF8F3F3
BackgroudBrush This is a gradient brush which has the starting value as #FFECEBEB and the ending value as #FF8A8787
BorderThickness Left, Right, Top and Bottom all set to 1
CornerRadius 2

Now the control should look something like shown below

So now the custom button is somewhat ready but still many things need to be done.

  1. The above button simply feels like a static image if used like this. To provide a button like look and feel we have to create some animations (or use behaviors. In this post I will do this using timeframe animation). For e.g. when the mouse moves over the button it should be highlighted. When the user clicks the button it should look like it is being clicked otherwise the behavior seems somewhat unusual to the user.
  2. We must be able to change the default text and image provided within the button. We need to write some code for this.

Let me start with the 2nd problem defined above. We must be able to change the default text and image content of the button. We will do this by exposing certain properties so that the control is re-usable.  Go to Projects tab, right click MainControl.xaml.cs and select Edit In Visual Studio. The code behind file now opens in visual studio. Add the code as shown below.

Now you can go ahead and compile the control by running it in Visual Studio or by selecting Project -> Build Project in blends. After this browse to the project debug folder (usually “\ProjectName\bin\debug\”). There you can see a file called as “CustomButton.dll”. This is the button which we have just created. Just add a reference to this DLL in your WPF Application project and you can use that control and set its properties which we have defined above. Note that after you have added the reference the control will appear in the Assets tab which you can search by the Locations category in Assets tab (Select CustomButton.dll and then select MainControl). When you run that application it still might not behave like a button since we have not added any animations or behaviors to it. The properties will appear as shown below and can be changed by the user. So the user can now use his own text, description and image for the custom button which we have just created.

We have solved our 2nd problem. We have exposed some of the properties which can be selected by the user when he runs the application. Now we will try to solve the 1st problem. The button should behave like a button. When a user brings mouse over it some change must happen so that the user knows that indeed the button is working. Sometimes the button will be disabled by the user so it should look like it is disabled. When the button is clicked it should look like the user is pressing the button. So here are some of the states of button which we are going to change now:

  • Normal State (When there is no interaction of the user with the button and the button is enabled for use. This is the default state.)
  • Disabled State (When there is no interaction of the user with the button and the button is disabled.)
  • MouseEnter State (When the user brings the cursor into the button.)
  • MouseLeave State (It is the normal state of button.)
  • MouseLeftButtonDown State (When the user presses the button)
  • MouseLeftButtonUp State (When the user releases the button. We will keep this same as MouseEnter state)

So let us first record the properties which we will have to set for the different states of the button. Note that these properties will not be set as soon as the event occurs. We will give some time for property to change by using timeline. The values in the table represent the final value of that state when the timeline is completed. We only need to set the initial timeline value (at t=0 sec) and final timeline value (at t=0.5 sec in this case).

Property(Of bdBorder) / State(FinalValue) MouseEnter MouseLeave(Default State) MouseLeftButtonDown Disabled
Background Brush(Gradient) Starting value #FFF6AB75 #FFECEBEB #FFF6AB75 #FFECEBEB
Background Brush (Gradient) Ending value #FF0EFF00 #FF8A8787 #FF0EFF00 #FF8A8787
Border Brush (Solid Color) #FFFF6F00 #FFF8F3F3 #FFFF6F00 #FFF8F3F3
Render Transform(Translate) X=2 Y=2 (for both TextBlock’s and Image )

In addition for Disabled state we have to set the Foreground Brushes for text blocks and the transparency of Image. The value will be as follows:

txtCustomButtonText txtCustomButtonDescription imgButtonImage
Foreground Brush: #FF866C6C Foreground Brush: #FF866C6C Opacity: 50%

Note that all you can use your custom values for the colors. The above values are just for reference. So let us begin with the animations part. Since animations will involve a lot of steps so I will prefer a video for that instaed of writing each and every step. So just go ahead and play the following video.

Similar to how it is shown in the above video you can create a disabled state for the button by using a new storyboard and set the values using above table. Now you can finally build the library by selecting Project -> Build Project. You can finally use the control by adding the reference to the compiled library (CustomButton.dll) in your project. The following video shows the demo of complete button.

You can download the source code of the control from here and source code of the demo app from here.


Leave a comment »

MSP Open Days 2010 – Hyderabad

I attended MSP(Microsoft Student Partner) open days at Microsoft, Hyderabad on 22 Oct. If you ask how was that then in 1 word I would just say Awesome, be it the Tech Sessions or the Campus visit or the T-Shirts or the Video lectures or the entire journey to reach the campus from the railway station.

We reached by train to Secunderabad early morning on 22nd.  We spent about 5 hours in the bus during the whole journey.We changed 2 buses and 1 auto to reach the destination which was 30 KM from the station. But anyways we managed to reach there on time…or I should say before time…almost 1 hour before…The first thing which we noticed from the highway was the bigggg… banner of Visual Studio 2010 stretching across the entire building. It said “/*Life runs on code*/“. Unfortunately could not get the photo of it.

Then we entered the campus and registered against our names. The buildings and the greenery at the campus were great. Finally we entered the building were the orientation session was to take place. When we entered in the building there was absolute silence…I could even hear my footsteps.  We met the other MSP’s too and had a talk with many of those techies. One interesting thing I saw was that almost all MS people were in casuals and some were even in half pants and wearing headphones…great 🙂  Then at around 10 am Mark sir started the session.

The first session was about the MSP program and we were given the details regarding the tasks to be performed during the probation period and after it. Then there was a session on Testing capabilities and automation using Visual Studio.  We then got to know how important is to test the software you build and most importantly test it efficiently and using the limited time and resources. Then we had another session by old MSP’s on Microsoft WebMatrix demonstrating the small and simple way to build powerful Web sites by using the Razor Syntax facility provided the WebMatrix. After that we had lunch and got the chance to interact with the Program Managers, Developers and User Experience designers from Microsoft. We asked all kinds of questions to them related to the products, the teams they work with, how and why they joined MS and even managed to get an insight about what they look for in a candidate during the interview.

After lunch we had another interesting session on User Experience(UX) by Eric Brown and Louis Kurabi who are the researchers  from Redmond. They told us how UX was becoming an integral part of the Software Development Lifecycle. They told us how the teams need to work closely with the users to understand their needs.

After all these sessions we got the chance to go to visitor center. It had all the gadgets one can hear about from MS. Microsoft Surface, Xbox 360,  Windows 7 Tablet PC’s, Windows Phone and more whose names I can’t recollect. Then we visited the entire campus. The campus was truly very natural(just like the natural interfaces :-)) and amazing. It had tennis and basketball courts, cricket ground, numerous canteens etc apart from the great working environment, server rooms, email rooms and all.

So enjoyed and learnt  a lot……:-)

Leave a comment »

Microsoft Student Partners

Microsoft Student 2010 (MSP) results are declared and I am selected as one of them. 6 new MSP’s are selected from Nagpur. We all are looking forward to work with the existing MSP’s in creating awareness about the latest technologies among the students by conducting sessions and many events including Dreamspark Yatra.

Today we had an informal meetup of all the MSP’s from Nagpur and we got to know what they had done in the past 1 year and we hope to even perform better this year. I will be updating the details of all the activities and events on the blog and you can also check out Nagpur Users Group(NUG) website for details.

This month I will be attending MSP Open Days in Hyderabad which is scheduled on 22 Oct along with my colleague Hrushikesh. We will get the opportunity to meet and interact with Microsoft Academic Team and we’ll be getting further details about the program. And I should not forget to mention the goodies too.

6 Comments »

Final Year Project Decided

At last after 1 and half month of discussion we have finally decided about our final year project. I am a part of 5 member team which includes Saurabh, Gourav, Hrushikesh and Lalit. It took almost 5-6 meetings with our mentor Mr Irfan Khan of Persistent to finalize what we should do in the project.

So now we are working for creating a solution on agile methodologies.We call it as SCRAGIL. We will be creating a web application which will be can be used by software developers to keep track of their work and thus finish the assigned task well within the given deadlines and that too with efficiency. The application could be used by multiple teams simultaneously and will provide them with reports and dashboards to provide a quick overview of all the pending work (which we call as backlog items) and the work thats completed. It will also show the performance of each team member.

Regarding the current progress of the project, we have already finalized the features to be provided and are ready with the use cases, classes and the database schema. The technology which we will be using  is yet to be finalized. But may be within a day or two it should be clear.

And yes …we will again try to make sure that this project as successful as our previous projects.

3 Comments »

When I Troubleshooted my slow system

Have you ever had the problem of your windows system being slow, explorer crashing, high CPU and Memory usages, appearing of some unknown files and folders ??

These problems might occur at many times with your system…but at most of the times the culprit is not the OS but the way other programs and users use the system. Recently I was having problem of a really slow working on Windows 7. It may sound weird since Windows 7 is really faster then its predecessors but yes, I was having the problem.

I first thought that a system restart might help but to my disappointment it didn’t. Then I tried to uninstall the useless stuff from my system but I could not get the culprit. Then I thought of Reinstalling the entire system but then I had to backup all my data…a very hefty task. So I decided to search it out if someone had the same problem.

While searching I came across a very interesting blog by Mark Russinovich. He covers topics such as Windows troubleshooting, technologies and security. Then I came to his article “The Case of the Slooooow System“. It was something I was looking for.

I will not tell further how I solved the problem since the steps I followed were exactly the same as described in the above link. The thing which I want to share is that through this article I actually learned how we can approach to solve the problem. And if you are also into troubleshooting any Windows System problem then you must definitely see the Mark’s blog.

So happy troubleshooting for now…

Leave a comment »

Imagine Cup People’s Choice

Vote now through July 7th for your favorite Imagine Cup Software Design Finalist Project and raise awareness for how students are using technology to solve the world’s toughest problems.  These projects address issues in areas such as the environment, education, healthcare, safety, and more. As you view and vote you’ll agree that students have what it takes to help repair the world!!!

To view and vote please Click here.

Leave a comment »

Imagine Cup 2010 Touch and Tablet Accessibility Result

Results of Imagine Cup 2010 were declared today. Team OneView and Note-Taker from US were selected to be the finalists in Touch and Tablet Accessibility awards. Our team was not selected in the finals but we hope to do much better next year and will try our best. Here are the results:

As the semifinalists of ImagineCup 2010 we have got free access to MSDN Academic Alliance Software Center . We have been provided with all the professional developer tools like Visual Studio 2010, Windows 7(x86,x64) Professional, Surface SDK, SQL Server 2008, Windows Server 2008 Enterprise(x86,x64), IT Academy Pack, XNA Online Subscription and many more.

Apart from this we had got the opportunity to do something which provided us the global exposure and we will continue to be part of this competition from now. By the way, here is the video demonstrating the Team OneView’s project:

I will be also providing the links to videos of some great projects which were part of Imagine Cup.

2 Comments »

Install XP After Windows 7 On Dual Boot

Whenever you install a new Windows OS with dual boot on a previous Windows OS then the multiboot menu automatically appears on startup. So if you install Windows 7  as a second operating system on a PC where Windows XP is already installed, the Windows boot menu incorporates the options from the older boot menu.

But now considering the reverse scenario, you are having Windows 7 installed and then you tried to install Windows XP on dual boot. After the installation is complete then Windows 7 is no more running although it is intact and in working condition. What actually happened is that you have overwritten the MBR with the older version of Windows which can’t recognize Windows 7 bootloader.

But don’t worry it is very easy to restore the bootloader. Just follow these steps:

  1. Start Windows XP and insert Windows 7 DVD.
  2. Browse the disc(I am assuming “G:” as the drive letter of your DVD Drive)
  3. Open command prompt with elevation(By right clicking cmd.exe and selecting “Run As Administrator“)
  4. Navigate to folder “G:\boot” in the elevated command prompt.
  5. Type “bootsect.exe /nt60 all” at the prompt.
  6. When you restart now you will have Windows 7 back but soon you will realize that XP has gone. Nothing to worry we have to just add the entry of XP bootloader.
  7. Start windows 7 now and again open elevated command prompt.
  8. Write bcdedit /create {ntldr} –d “XP Menu Text” on the command prompt and hit enter. BCDEDIT is the boot configuration data editor for Windows Vista and 7. You can invoke this command from any path on command prompt. In the above command “XP Menu Text” is the text which will appear for the entry of XP at startup in the multiboot menu. You can change it to anything more descriptive.
  9. Now just restart.
Leave a comment »

Starting with WPF (2) …

In my previous post I gave some the links to some nice blogs which discuss the WPF. Continuing the same in this post here are some more blog posts and forums which are really good for getting started with WPF.

  • With Visual Studio 2010 and .NET 4.0 finally the version 4 of WPF has arrived. Scott Guthrie in his blog discusses the new features and enhancements brought to you by WPF 4. See Scott Guthrie’s blog for further information.

You can download Visual Studio 2010 from here and Expression blends 4 RC from here which supports WPF 4.

  • Kirupa.com provides step by step tutorials for getting started with WPF and each topic is covered in detail over this site. They have even grouped the topics into Basic and Advanced categories. So it will be easy for beginners as well as experts to get the relevant topics. Click here to go to kirupa.com.
Leave a comment »

%d bloggers like this: