Chat application in Expression Blend Using Silverlight

Hi Guys, In this article I will be demonstrating a simple application in Expression Blend using Silverlight application. In this application You will know how to use remote user class and chat session class. Follow the steps below:

Step 1 : Create a Silverlight application in Expression Blend and name it as chatting application.

Step 2 : In the artboard that opens up when you create the project create three rows and by sliding mouse along the boundary and click on the row line and add appropriate gradient to the chat window.

Step 3 : Add a rectangle to the bottom row.

Step 4 : Now add curves to the corners of the rectangle.

Step 5 : Now add text box from the asset library and drag it to the artboard.

Step 6 : Now we add curves to the corners of the textbox for this What we do is first of all make the rectangle and textbox margin same. For this edit in the xaml the parameters of the margin to be same for rectangle and the textbox. 

Now select the rectangle and and right click on it and select path--> make clipping path and then select textbox. This brings the textbox to the shape of that of the rectangle i.e. with the rounded corners. The figure below shows hoe to make this happen:

Step 7 : Now if you look at the object and timeline window you will find that the rectangle is gone and what you have is only a textbox with rounded corners. This is because both the figures intermingles with each other in such a way that on the corner part of the rectangle has existence rest body is replace with the textbox. Now add a callout oval shape from the asset library and drag it on the rightside of the textbox.

Step 8 : Now change the text of the shape to "send" to make it appear as a send button.

Step 9 : Now its time to design the message window. for this add a listbox to the middle row and resize to fit the middle row. You can give it a sober color to make it appear more lively.

Step 10 : Next is the designing of the Top name window which would display the name of the chatting user. For this we add a Text Block rather than a textbox because user cannot edit the text in the text block. In this also do the same as you did for textbox inorder to make the corners of the textblock rounded.

Step 11 : Now to display the image of the user ,we add an image control from the asset library and drag it to the right of the textblock. Now all the design part is ready. Only thing we need to do is add few coding part to make it function good.

Step 12 : Now select callout oval shape and goto its properties and select the events and on the mouseLeftbutton event name the method and press enter and type the following code:

 using System;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Ink;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
 namespace Chatting_application
 {
        public partial class MainPage : UserControl
        {
               public MainPage()
               {
                      InitializeComponent();
               }
               private void sendmessage(object sender, System.Windows.Input.MouseButtonEventArgs e)
               {
                 chatbox.Items.Add("Manoj : :" + tb1.Text);
                 tb1.Text ="";
               }
        }
 }

Step 13 : In order to make the remote user connectivity goto the solution explorer and right click on it and select edit in visualstudio. The figure below makes it more clear.

Step 14 : Now in visual studio add a new item--> add a class --> name it as chatclass.This class mainly contain the methods to add remote users name and image 0f the remote user.

Step 15 : Now make a class named chatclass which gets the user name and sets it value respectively. write this code for this:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;
using System.Collections.ObjectModel;// add these namespaces
using System.ComponentModel;
namespace Chatting_application
{
    public class chatclass
    {
        public string uname
        {
            get { return uname; }
            set { uname = value; }
        }
        private string Text1;
        public string Text
        {
            get { return Text1; }
            set { Text1 = value; }
}

Step 16 : Now to record the session add another class in named session and write the following lines for the session class.

public class session : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        private string privateRemoteUserName;
        public string RemoteUserName
        {
            get { return privateRemoteUserName; }
            set { privateRemoteUserName = value; }
        }
        private string privateRemoteAvatarUrl;
        public string RemoteAvatarUrl
        {
            get { return privateRemoteAvatarUrl; }
            internal set { privateRemoteAvatarUrl = value; }
        }
        private ObservableCollection<chatclass> privateMessageHistory;
        public ObservableCollection<chatclass> MessageHistory
        {
            get { return privateMessageHistory; }
            internal set { privateMessageHistory = value; }
        }
        public void SendMessage(string message)
        {
            MessageHistory.Add(new chatclass
            {

                Text = message,

                uname = "Me"
            });
        }
        public void ConnectWithRemoteUser(String remoteUserName)
        {
            RemoteUserName = remoteUserName;
            RemoteAvatarUrl = "manoj.jpg";
            MessageHistory = new ObservableCollection<chatclass>();
            PropertyChanged(this, new PropertyChangedEventArgs("RemoteUserName"));
            PropertyChanged(this, new PropertyChangedEventArgs("RemoteAvatarUrl"));
            PropertyChanged(this, new PropertyChangedEventArgs("MessageHistory"));
        }
}
 

Step 17 : Now you'll have to bind the class to the application for this come to the blend application and select the textbox and in the content property click on the advance property and select binding and a window opens up in this window select Elementary property and then at the bottom you see +CLR tab click on this and you find the classes that we made is shown. from this select the session and chatclass and bind them. The figure below ,makes it more clear.

Step 18 : Output