There's something about WPF

Some cool stuff!!

I am working on building a website consisting of some “cool stuff” using some of the Microsoft features like Silverlight and ASP.NET Ajax. I have pretty simple but handy chat on the web using update panel control. I think with the same structure multiple chat rooms can be built. I also made a customized listbox in Silverlight. The listbox can be modified as you want just by putting in some extra code.

I have used the Listbox control provided in the Silverlight.Samples.Controls.dll which is located in the Silverlight 1.1 installation directory. The complete path might look like this

 C:\Program Files\Microsoft Silverlight 1.1 SDK Alpha Refresh Sept 2007\Tools\SilverlightControlsStarterKit\SilverlightUIControls\ClientBin

To get this path, you would have to build the project file in the directory. Sometimes Visual studio does not allow to reference a dll which is hidden under many diectories. If you add a reference to such a dll you might get an error like the reference path is too long. So copy the dll into your project Bin directory and then add a reference to it. There is a small bug in this Listbox control which was mentioned and fixed as per Vivek Dalvi’s blog. Find the UpdateLayout function in the Listbox.cs file and locate the

Clip = clip;

statement. Replace this by ActualControl.Clip = clip; That’s it. I should have told you this before asking you to reference the dll :).

Now is the time to create items which could be added. The ListBox.Items.Add accepts parameter of FrameworkElement. So the default xaml controls could be added to it but I have not tried all of them. I created a custom control to be added as an item to the listbox. I wanted to display textblocks with rounded corners inside this listbox.  To begin with add a Usercontrol item to a Silverlight project. You could see in its code-behind a class inheriting from Control class is generated and some logic in its contructor. Observer the first line.

Stream s = this.GetType().Assembly.GetManifestResourceStream("Silverlightanim.BlogItem.xaml");

To successfully run the GetManifestResourceStream function the item which is given in the string must be marked as an Embedded Resource. If not, you might not get an error but it is just not executed. Following is the xaml code for the BlogItem which I add in the listbox.

<Canvas

      xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      x:Name="UserControl"

      Width="600" Height="110" Canvas.Left="4.5">

      <Rectangle Width="600" Height="110" Stroke="#FF000000" RadiusX="10.5" RadiusY="10.5">

                        <Rectangle.Fill>

                              <LinearGradientBrush EndPoint="0.503,-2.107" StartPoint="0.497,3.107">

                                    <GradientStop Color="#FF000000" Offset="0"/>

                                    <GradientStop Color="#FF2F1D1D" Offset="1"/>

                                    <GradientStop Color="#FF16657C" Offset="0.019"/>

                              </LinearGradientBrush>

                        </Rectangle.Fill>

    </Rectangle>       

    <TextBlock x:Name="content" Width="598" Height="88" Text="" TextWrapping="Wrap" Foreground="#FFC3C3C3" FontFamily="Verdana" FontSize="12" Canvas.Left="9" Canvas.Top="10"/>

</Canvas>

Its really nothing heavy, its just has a rectangle with rounded corners and a textblock . Following is the code-behind file.

namespace Silverlightanim

{

    public class BlogItem : Control

    {

        Canvas rootCanvas;

        TextBlock block;

        public BlogItem()

        {

            Stream s = this.GetType().Assembly.GetManifestResourceStream("Silverlightanim.BlogItem.xaml");

            rootCanvas = (Canvas)this.InitializeFromXaml(new StreamReader(s).ReadToEnd());

            block = (TextBlock)rootCanvas.FindName("content");

            this.Height = rootCanvas.Height;

            this.Width = rootCanvas.Width;           

        }

        public string BlogContent

        {

            get

            {

                return block.Text;

            }

            set

            {

                block.Text = value;

            }

        }

    }

}

As you see a public property has been declared which sets the text property of the textblock. 

Now the final act of using the listbox and this blog item control on a silverlight page. For my project I am getting the data from an xml file which makes it easier to maintain later. Here is a sample xml file

<?xml version="1.0" encoding="utf-8" ?>

<ContentList>

  <Block Content="Hey John!!"></Block>

  <Block Content="Hey Jerry!!"></Block>

  <Block Content="Hey Nick!!"></Block>

  <Block Content="Hey Peter!!"></Block>

  <Block Content="Hey Charlie!!"></Block>

</ContentList>

I would not go in detail explaination for the following code since its all obvious. It is the code-behind for the Page.xaml file.

Using Silverlight.Samples.Controls;

ListBox list;

public void Page_Loaded(object o, EventArgs e)

        {

            // Required to initialize variables

            InitializeComponent();           

            InitializeList();

        }

  void InitializeList()

        {

            System.IO.Stream str = this.GetType().Assembly.GetManifestResourceStream("Silverlightanim.Data.xml");

            //Initialize Listbox

            list = (ListBox)this.FindName("listbox");           

            XmlReader xr = XmlReader.Create(str);           

            while (xr.Read())

            {

                if (xr.IsStartElement("Block"))

                {

                    BlogItem item = new BlogItem();

                    item.BlogContent = xr.GetAttribute("Content");

                    list.Items.Add(item);

                }

            }

            list.UpdateItems();

        }

Make sure that the xml file is marked as an Embedded Resource and give its complete resource name i.e. namespace.Data.xml  for the GetManifestResourceStream function to work. You might have to adjust the width and height properties of the listbox to fit in the items.