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
