Developing Silverlight Navigation Menu using C# in Visual Studio 2008

LITOW - LearnITOnWeb.com

Read Article
Read or Write Comments

Tags: Silverlight, Visual Studio, Navigation Menu
Posted by: Dhaval Faria | Posted on: Jul 24, 2009

Downloads:

Silverlight Menu Code - 570.00 KB

Page 1 of 2

Next ~>

Download Code - Silverlight Menu Code - 570.00 KB

In this tutorial we are going to look at basics of Silverlight and we will create a very nice looking navigation menu bar in Silverlight.

Software Requirements

1 - Visual Studio 2008
2 - Browser which supports Silverlight
3 - Silverlight for Developers

Start Microsoft Visual Studio 2008, and have a look at the following image and follow the steps. In following image I have selected Visual C# as a language, but you can also go with Visual Basic, I have provided code for both the languages in this article.

When you click on OK button, you will see the following image:

In above dialog box you will see two options, Add new ASP.NET Web project to the solution to host Silverlight and Automatically generate a test page to host Silverlight at build time, I prefer to use the 1st optiok always, as it creates asp.net project along with the page whcih hosts silverlight control. 2nd option is good for those who just wants to create Silverlight application, and wants its host page to be generated automatically on runtime. Select 1st option and click OK. Once you are done with that, press F5, to build and run the project. Once you do that, you will see the following dialog box.

Select first option to enable the debugging for the web site, and click OK to continue executing Silverlight application. When your application runs, you will see it in browser, and it appears to be entirely white, like following image.

If you notice you are unable to see where your Silverlight application is placed on the page, so for this we are going to make few changes in our Silverlight page, to make changes open Page.xaml file, and change its code as follows:

<UserControl x:Class="SilverlightMenu.Page"

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

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

                Width="400" Height="300">

                <Grid x:Name="LayoutRoot" Background="Black">

            

                </Grid>

            </UserControl>

Press F5, it will compile the code and run the application. You will see the silverlight application running in browser as follows:

If you notice above code, you will see Width and Height specified, and just that is how silverlight application looks like. I do not like that much in here I prefer making it take whole size of the browser, and that too dynamic. Because you never know what is the width and height of the user's browser. As, that might create issue to the users who are running browser at width of 1024pixels and silverlight application is done for 1280pixels width. So, I always prefer dynamic width and height for any application.

So, from now on whatever code we will write in this Silverlightmenu application will be based on having maximum support for the dynamic width and height. To start first, we will have to make width and height of the application dynamic to make it adapt the whole width and height of the browser.

public Page()

            {

                InitializeComponent();

                App.Current.Host.Content.Resized += new EventHandler(Content_Resized);

            }

            

            void Content_Resized(object sender, EventArgs e)

            {

                this.Width = Application.Current.Host.Content.ActualWidth;

                this.Height = 55;

            }

If you notice I have specified height as 55, this is because I do not want menu to take a whole page height, but instead just 55 pixels height. Press F5, and your silverlight application will run in browser, and it will look like following:

Now, for sure we do not want to have a black background to our menu for right now, so we will change our XAML code.

<UserControl x:Class="SilverlightMenu.Page"

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

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

                Width="400" Height="300">

                <Canvas x:Name="LayoutRoot" Background="White">

            

                </Canvas>

            </UserControl>

Now, we are going to create menus, in this tutorial I will not be showing you how to create menu class and dynamically keep adding it in your application, but instead I will show you how to do it statically, but it will be easy to make it dynamically if you know the concept of object oriented programming.

Now, that we are done with very basic stuff, let us now start with creating Navigation menu. Start following code in xaml file, inside Canvas.

<UserControl x:Class="SilverlightMenu.Page"

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

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

                Width="400" Height="300">

                <Canvas x:Name="LayoutRoot" Background="White">

            

                    <Rectangle RadiusX="5" RadiusY="5"
            Width="72" Height="30" Canvas.Left="3" Canvas.Top="3" Stroke="#C9D5DE" Cursor="Hand"
            x:Name="rectHome">

                        <Rectangle.Fill>

                            <LinearGradientBrush
            StartPoint="0,0" EndPoint="0,1">

                                <LinearGradientBrush.GradientStops>

                                    <GradientStop
            Offset="0.5" Color="#FFFFFF"/>

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

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <TextBlock Canvas.Left="18" Canvas.Top="6"
            Cursor="Hand" x:Name="txtHome" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave"
            MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">Home</TextBlock>

            

                </Canvas>

            </UserControl>

In above code, We are creating one Rectangle which has curve of 5, and it has border of color #C9D5DE, I have given it name rectHome and also I have changed its Cursor appreance to Hand, so that when user moves mouse over it, mouse cursor changes to hand, our silverlight menu should shape up like following. Now, if you press F5 and run it, you will get some error, this is because we have not yet written any event in our code. What we have done is we have assigned the event to a method, but we have not yet written a method.

So, now we have got the first part of our menu correct, but still it does not give us look of our navigation menu completely, just to ease task I have written complete code of navigation menu layout below, you can copy and paste it.. below code I have explained few things which I have done. I have not explained other things, because they are same. So now my code looks like following.

<UserControl x:Class="SilverlightMenu.Page"

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

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

                Width="400" Height="300">

                <Canvas x:Name="LayoutRoot" Background="White">

            

                    <!---Home-->

                    <Rectangle RadiusX="5" RadiusY="5"
            Width="72" Height="30" Canvas.Left="3" Canvas.Top="3" Stroke="#C9D5DE" Cursor="Hand"
            x:Name="rectHome" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave" MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">

                        <Rectangle.Fill>

                            <LinearGradientBrush
            StartPoint="0,0" EndPoint="0,1">

                                <LinearGradientBrush.GradientStops>

                                    <GradientStop
            Offset="0.5" Color="#FFFFFF"/>

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

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <TextBlock Canvas.Left="18" Canvas.Top="6"
            Cursor="Hand" x:Name="txtHome" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave"
            MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">Home</TextBlock>

                    <!--End of Home-->

            

                    <!---Videos-->
            

                    <Rectangle Width="74" Height="30"
            Canvas.Left="69" Canvas.Top="3" Stroke="#C9D5DE" Cursor="Hand" x:Name="rectVideos"
            MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave" MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">

                        <Rectangle.Fill>

                            <LinearGradientBrush
            StartPoint="0,0" EndPoint="0,1">

                                <LinearGradientBrush.GradientStops>

                                    <GradientStop
            Offset="0.5" Color="#FFFFFF"/>

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

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

            

                    <TextBlock Canvas.Left="90" Canvas.Top="6"
            Cursor="Hand" x:Name="txtVideos" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave"
            MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">Videos</TextBlock>

                    <!--End of Videos-->

            

                    <!---D.I.Y.-->

                    <Rectangle Width="64" Height="30"
            Canvas.Left="142" Canvas.Top="3" Stroke="#C9D5DE" Cursor="Hand" x:Name="rectDIV"
            MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave" MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">

                        <Rectangle.Fill>

                            <LinearGradientBrush
            StartPoint="0,0" EndPoint="0,1">                     <LinearGradientBrush.GradientStops>

                                    <GradientStop
            Offset="0.5" Color="#FFFFFF"/>

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

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

            

                    <TextBlock Canvas.Left="160"
            Canvas.Top="6" Cursor="Hand" x:Name="txtDIY" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave"
            MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">D.I.Y.</TextBlock>

                    <!--End of D.I.Y.-->

            

                    <!---Feedback-->

                    <Rectangle RadiusX="5" RadiusY="5"
            Width="96" Height="30" Canvas.Left="295" Canvas.Top="3" Stroke="#C9D5DE" Cursor="Hand"
            x:Name="rectFeedback" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave"
            MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">

                        <Rectangle.Fill>

                            <LinearGradientBrush
            StartPoint="0,0" EndPoint="0,1">

                                <LinearGradientBrush.GradientStops>

                                    <GradientStop
            Offset="0.5" Color="#FFFFFF"/>

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

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

            

                    <TextBlock Canvas.Left="315"
            Canvas.Top="6" Cursor="Hand" x:Name="txtFeedback" MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave"
            MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">Feedback</TextBlock>

                    <!--End of Feedback-->

            

                    <!---Fun Stuffs-->

                    <Rectangle Width="96" Height="30"
            Canvas.Left="205" Canvas.Top="3" Stroke="#C9D5DE" Cursor="Hand" x:Name="rectFunStuffs"
            MouseEnter="Menu_MouseEnter" MouseLeave="Menu_MouseLeave" MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">

                        <Rectangle.Fill>

                            <LinearGradientBrush
            StartPoint="0,0" EndPoint="0,1">

                                <LinearGradientBrush.GradientStops>

                                    <GradientStop
            Offset="0.5" Color="#FFFFFF"/>

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

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

            

                    <TextBlock Canvas.Left="225"
            Canvas.Top="6" Cursor="Hand" x:Name="txtFunStuffs" MouseEnter="Menu_MouseEnter"
            MouseLeave="Menu_MouseLeave" MouseLeftButtonDown="rectDIV_MouseLeftButtonDown">Fun
            Stuffs</TextBlock>

                    <!--End of Fun Stuffs-->
            

            

                </Canvas>

            </UserControl>

In above code, if you notice Home menu width is set to 72, but Video menu is starting from 69 instead of starting from 72. Reason behind this is that, Home has a radius of 5, so right side of Home menu shows us curves, and if we put Video menu next to Home, curves will not disappear and it will not look good. To hide it, we are overlapping Video menu on top of Home menu.

Similarly, if you look at the code you will notice that Fun Stuffs comes at the end, but when you actually run the application, you will see Fun Stuffs is second last and Feedback is last. Here also we have used the same idea about overlapping. Our Feedback menu has curve at its corners, if we put Feedback after Fun Stuffs, then Feedback button will be on top and it will show its curves on both sides. To hide its curves we are putting Fun Stuffs at end and Feedback before that in the code, but they appear different way in application because of property Left that we have chagned.

Download Code - Silverlight Menu Code - 570.00 KB

Downloads:

Silverlight Menu Code - 570.00 KB

Page 1 of 2

Next ~>

Developing Silverlight Navigation Menu using C# in Visual Studio 2008

Tags: Silverlight, Visual Studio, Navigation Menu
Posted by: Dhaval Faria | Posted on: Jul 24, 2009

Posted by: Swanand Pol - WEB - on: Aug 27, 2009

Thats cool ... I like it ...

Posted by: Mike - WEB - on: Aug 28, 2009

hello, on my project it wont work... i tried everything... i've got VS 2008 and Silverlight 3 - doesn't it work with these options? thx 4 help...

Posted by: Mike - WEB - on: Aug 31, 2009

i finally get it to work... but now i'm asking myself how to put links to other xaml pages to a button? just add it in xaml?

Write Comment

Name:

E-mail:

Website:

http://

Comment: