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

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.