How to display hierarchical items in TreeView and How to display a Button on the page in Silverlight?

Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 5636 red flag

In this article, we would learn the usage of SilverLight UI Controls i.e.TreeView and Button.


TreeView control of Silverlight facilitates the display the hierarchical items in Tree structure.

How to display hierarchical items in TreeView?

To display hierarchical items in Tree view, we can follow this approach.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.


<sdk:TreeView x:Name="TreeView1">

<sdk:TreeViewItem Header="Science">

<sdk:TreeViewItem Header="Physics" />

<sdk:TreeViewItem Header="Chemistry" />

<sdk:TreeViewItem Header="Math" />

<sdk:TreeViewItem Header="Biology" />


<sdk:TreeViewItem Header="Arts">

<sdk:TreeViewItem Header="History" />

<sdk:TreeViewItem Header="Political Science" />



As seen in the above code, we have a TreeView control which displays the items.



Button control is mostly used to submit user data or perform some activity (or action) based on click of the button. This is one of the most frequently used controls in the Silverlight application.

How to display a button on the page in Silverlight.



<Button Content="Submit" x:Name="btnTest" Canvas.Top="15" Canvas.Left="50"/>

<Button x:Name="btnTestAgain" Canvas.Top="55" Canvas.Left="50" Width="150" Height="30">



<Ellipse Width="125" Height="25" Canvas.Left="-60" Canvas.Top="-13" Fill="Aqua" />

<TextBlock Text="Button Text" Canvas.Left="-30" Canvas.Top="-10"/>




Note that Button control doesn’t have a Text property but it has Content property that let us display any object as Button content, it can be text, an image or any other content.

In the above code snippet, first we have a Button control whose Content is specified as “Submit” text. In the other Button we have specified Button.Content as the Ellipse and TextBlock that displays the shape and Text as Button content.


How to display Image as Button content?

In case we need to display an image as Button content, following is the way....


<Button x:Name="btnTestAgain" Canvas.Top="55" Canvas.Left="50" Width="150" Height="130">


<Image Source="../Images/DotNetLogo.jpg"/>



Here in the Button.Content is kept as Image that will display Image within the button content.


Hope this article was useful. Thanks for reading, hope you liked it.

Keep a watch on forth coming articles on Silverlight. To read my series of articles,click here.

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on | |

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)