If you have gone through my previous article Vista like
, 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
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
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.
Now we will add a grid onto NotesArea and in the grid we will define where to
place our desired control.
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
5) Add two TextBox and a Grid to the bottom row, so that we can
add our operating controls over there.
Now I will subdivide the new Grid that you just added to the bottom to place
specific operating controls.
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".
Object window will look something like the following.
adding these Buttons I have changed their appearances so that it will look
something similar to the original StickyNote 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.
Draw a triangle using the pen tool which will look similar as below.
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.
you change the trigger the Trigger window will be like this.
NextButton is ready to work and similarly I have created the following
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
I have added another Border and added one image to look like
closing the application. The following figure will explain you
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.