Reader Level:
ARTICLE

Sticky Notes in Silverlight

Posted by Diptimaya Patra Articles | XAML May 21, 2009
Sticky Notes in Silverlight 3 and Blend 3.
  • 0
  • 0
  • 24831
Download Files:
 

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.

<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.

COMMENT USING

Trending up