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

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

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

TreeView

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.

Code

<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>

<sdk:TreeViewItem Header="Arts">

<sdk:TreeViewItem Header="History" />

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

</sdk:TreeViewItem>

</sdk:TreeView>

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

Output
 
 

Button

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.

 

Code

<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">

<Button.Content>

<Canvas>

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

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

</Canvas>

</Button.Content>

</Button>

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.

Output
 
 

How to display Image as Button content?

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

Code

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

<Button.Content>

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

</Button.Content>

</Button>

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

Output
 

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

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)