Sticky Notes in Silverlight

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.



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.

Figure 1.2 Create a new Silverlight project



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.



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.



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.



Figure 1.6 Controls inside the grids

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

<UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="StickyNotesSilverlight.MainPage"
    Width="Auto" Height="Auto" mc:Ignorable="d">
    <Grid Width="277" Height="215">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.116*"/>
            <ColumnDefinition Width="0.491*"/>
            <ColumnDefinition Width="0.116*"/>
            <ColumnDefinition Width="0.116*"/>
            <ColumnDefinition Width="0.162*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.074*"/>
            <RowDefinition Height="0.074*"/>
            <RowDefinition Height="0.595*"/>
            <RowDefinition Height="0.149*"/>
            <RowDefinition Height="0.107*"/>
        </Grid.RowDefinitions>
        <Canvas Grid.ColumnSpan="5" Grid.RowSpan="5">
            <Image Source="images/stickynote.png"/>

        </Canvas>
        <Grid Margin="8,8,13,-8" Grid.ColumnSpan="5" Grid.RowSpan="4"/>
        <ListBox x:Name="listNotes" Margin="0,0,21,0" Grid.Column="1" Grid.Row="2" BorderThickness="0,0,0,0" Grid.ColumnSpan="4">
            <ListBox.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFFFF5AA"/>
                    <GradientStop Color="#FFFFF072" Offset="1"/>
                </LinearGradientBrush>
            </ListBox.Background>
        </ListBox>
        <TextBlock x:Name="noteDate" FontSize="14" Grid.Column="1" Grid.Row="1" Text="" TextWrapping="Wrap" Margin="0,0,-4,0" Grid.ColumnSpan="3"/>
        <Image x:Name="addImage" Source="images/add.png" Grid.Column="2" Grid.Row="3" MouseLeftButtonDown="addImage_MouseLeftButtonDown"/>
        <Image x:Name="deleteImage" Source="images/delete.png" Grid.Column="3" Grid.Row="3" MouseLeftButtonDown="deleteImage_MouseLeftButtonDown"/>
        <TextBox x:Name="txtNote" Grid.Column="1" Grid.Row="3" Text="" TextWrapping="Wrap" Background="#FFFDEE70" Height="22" KeyDown="txtNote_KeyDown"/>

    </Grid>
</UserControl>

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.