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


Top 5 Contributors of the Month
david stephan

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

 Subscribe to Articles

Craete Desktop Sticky Notes in Silverlight

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

Craete Desktop Sticky Notes in Silverlight. The main functionality of this Widget is to display a list of tasks to be done. The following figure describes about the widget.
 

Introduction

This is a widget we are going to make; which has same functionalities as Sticky Note. In Vista the sidebar contains this type of widget called Sticky Note widget. The main functionality of this Widget is to display a list of tasks to be done. The following figure describes about the widget.

StickyNoteWidget1.gif

Figure 1.1 Sticky Note Widget's view

Steps

To begin with we need the following requirements:
  1. Silverlight 3
  2. Visual Studio 2008 SP1
  3. Expression Blend 3
Creating a Silverlight Project with or without RIA enabled.
  1. Create project in Visual Studio and open the solution in Expression Blend 3.
  2. The following figure will guide you for that.
StickyNoteWidget2.gif

Figure 1.2 Create a new Silverlight project

StickyNoteWidget3.gif

Figure 1.3 Uncheck the bottom checkbox to create the project without RIA support

Designing the User Control in Expression Blend 3

While designing, our main aim is to display the notes which will have a background almost similar to sticky note. So we need a background picture (Sticky Note) in any format (JPEG/PNG). For this example I have used PNG format file as it mixes with the background very easily.

StickyNoteWidget4.gif

Figure 1.4 Sticky Note Background.

Now the big task is to displaying the data in right areas. Like the current date on the top left, a list box which will contain all the notes, one textbox to enter notes, and two buttons to add & delete notes. We have used grid to contain the data and fulfill our aim. The following figure describes everything.

StickyNoteWidget5.gif

Figure 1.5 Design the grid.

Now we can keep our respective controls (Text Block, List Box, Text Box, Images) into our specific areas. After putting it all together it will look like the following figure.

StickyNoteWidget6.gif

Figure 1.6 Controls inside the grids

The XAML will look like the following after all the design changes above.


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


Adding events to the controls and displaying data.

Now we have a handful of controls in our application. We have txtNote, addIMage, deleteImage to display the data and we have list box control.
The following code explains itself as what are the events and when will it be fired.

namespace StickyNotesSilverlight
{
  public partial class MainPage : UserControl
  {
  public MainPage()
  {
  InitializeComponent();
  //noteDate--->Header of the Stickynote displaying date
  //addImage--->Add Image Button to add one item to list
  //deleteImage--->Delete Image Button to delete one selected item from the list
  //txtNote--->TextBox from where the text will be taken to listbox
  //listNotes--->ListBox that contains all note texts
  noteDate.Text = DateTime.Now.Day.ToString() + "." + DateTime.Now.Month.ToString() + "." + DateTime.Now.Year.ToString();
   }
  private void addImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  {
  if (txtNote.Text != "")
  {
  listNotes.Items.Add(txtNote.Text);
  txtNote.Text = "";
  }
   }
  private void deleteImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  {
  if (listNotes.SelectedItem != null)
  {
  listNotes.Items.Remove(listNotes.SelectedItem);
  }
   }
  private void txtNote_KeyDown(object sender, KeyEventArgs e
  {
  if (e.Key == Key.Enter)
  {
  if (txtNote.Text != "")
  {
  listNotes.Items.Add(txtNote.Text);
   txtNote.Text = "";
  }
  }
  }
  }
}


Now run the application and enjoy Sticky Notes Widget.

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

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