.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create Sticky Notes in WPF Application Part I

Posted By:Diptimaya Patra       Posted Date: April 06, 2010    Points: 25    Category: WPF    URL: http://www.dotnetspark.com  

Create Sticky Notes in WPF Application Part I. In this article we will see how we can design better and of course make this work like a real sticky note gadget as in Vista or Windows 7.


If you have gone through my previous article Vista like Sticky Notes, you must have thoughts like it is lacking something. Well you are right, it is lacking many things. It was a prototype of the new version. In this article we will see how we can design better and of course make this work like a real sticky note gadget as in Vista. The main difference that I can tell is I am using WPF application instead of Silverlight, so that we can use it as an exe.

Creating the Application

Designing the Application

This is the part where we are going to explore many things. Primarily we will use Blend 3 to improvise our application. I will go in detail so that you can make your gadget too. J
Open the solution in Blend 3 and open Window1.xaml. We have to design it well so that it almost matches the original gadget.

1)  Add a Border control and change the color, here I have used light yellow color.

2)  Rotate the Border a little bit.

3)  Now add another Border and shrink the width and height a little bit so that it will look like below. Name the Border as NotesArea.

4)  Now we will add a grid onto NotesArea and in the grid we will define where to place our desired control.

Now I have done a little bit change in the original StickyNote style. I have added an additional row on the top so that it will contain the Title of the Note.

5)  Add two TextBox and a Grid to the bottom row, so that we can add our operating controls over there.

6)  Now I will subdivide the new Grid that you just added to the bottom to place specific operating controls.

As you can see I have subdivided the Grid into five different parts. The following Buttons will be placed in their respective columns as "DeleteButton", "PreviousButton", "PageText", "NextButton", and finally "AddNoteButton".
The Object window will look something like the following.

Before adding these Buttons I have changed their appearances so that it will look something similar to the original StickyNote Buttons.

Custom Buttons

Here you will learn how to make a custom Button and change the animations.

1)  We will start with doing a NextButton. Draw an Ellipse as Circle.

2)  Draw a triangle using the pen tool which will look similar as below.

3)  Select both drawings and group into one Grid.

4)  Then RightClick the Grid and Select Make Control from the menu displayed and delete the Content Presenter in it.

5)  Change the MouseOver trigger to look like the control is hovered.

When you change the trigger the Trigger window will be like this.

Now NextButton is ready to work and similarly I have created the following Buttons.

Now we will add a control box where we will control the exit operation of the application, as I have disabled the control box from the window's properties.

I have added another Border and added one image to look like closing the application. The following figure will explain you everything.

For reference I am providing you the Xaml code for the whole design.















You must be exhausted doing this much of designing, me too. We will see the next happenings in next part of this article. J

 Subscribe to Articles


Further Readings:

Author: sanp         Company URL: http://www.dotnetspark.com
Posted Date: August 21, 2012

is there a way to download this code?

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend