How to fire server side method on click of the Button in Silverlight and Detailed information about ViewBox and ScrollViewer?

Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 7645 red flag
Rating: 5 out of 5  
 1 vote(s)

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


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 fire server side method on click of the Button in Silverlight?

To execute server side method on click of the Button 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.



<Button x:Name="Button1" Content="Submit" Click="Button1_Click" Width="75" />

<TextBlock x:Name="TextBlock1"/>


In the above code snippet, we have specified “Button1_Click” on the click event of the button.

Code behind

private void Button1_Click(object sender, RoutedEventArgs e)


TextBlock1.Text = "Button clicked !";



In this method we have set the Text of the button to “Button clicked !”.



ViewBox control is used to scale a Silverlight control based on ViewBox size.



<Viewbox Stretch="Uniform" MaxHeight="50" MaxWidth="300" Name="ViewBox1">

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


<Viewbox Stretch="Fill" MaxHeight="50" MaxWidth="300" Name="ViewBox2" >

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



<TextBlock Text="Hello Silverlight 4"/>




In the above code snippet, we have three ViewBoxes.

1. The 1st ViewBox has Stretch property set as Uniform that fills ViewBox uniformly (as per its Width and Height) with the image that is kept inside the ViewBox.

2. The 2nd ViewBox has Stretch property set as Fill that fills the ViewBox completely filling the complete width and height of the ViewBox.

3. The 3rd ViewBox doesn’t has its width and height set so by default it covers entire width of the page and maintains its aspect ratio in terms of height.



ScrollViewer control is used to add ScrollBar to the content of the Silverlight control.


<ScrollViewer Height="150" Width="150">

<StackPanel Orientation="Vertical" Background="Aqua">

<Button Height="25" Width="70" Content="Button 1"/>

<Button Height="25" Width="70" Content="Button 2"/>

<Button Height="25" Width="70" Content="Button 3"/>

<Button Height="25" Width="70" Content="Button 4"/>

<Button Height="25" Width="70" Content="Button 5"/>

<Button Height="25" Width="70" Content="Button 6"/>

<Button Height="25" Width="70" Content="Button 7"/>

<Button Height="25" Width="70" Content="Button 8"/>

<Button Height="25" Width="70" Content="Button 9"/>

<Button Height="25" Width="70" Content="Button 10"/>




In the code snippets we have placed StackPanel > Button inside the ScrollViewer control with its width and height. In case the buttons area goes more than the height of the ScrollViewr control, the scrollbar starts appearing.


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

Keep an eye 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

Posted by: debal_saha-9451 on: 12/29/2011 | Points: 25
I'm totally confuse by the meaning of "How to fire server side method on click of button.....". What does it mean by server side ?
Is this ASP.NET button control . Have you ever tried to write in xaml page button "runat="server"" . Is this possible ?

<Button x:Name="Button1" runat = "server" Content="Submit" Click="Button1_Click" Width="75" />

Then How silverlight control can contact with server side ? Can you pl explain .....

I'm confused . Want to learn this . PL help me Sir .

Login to post response

Comment using Facebook(Author doesn't get notification)