.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Custom Panel in Silverlight

Posted By:Dhananjay Kumar       Posted Date: December 23, 2009    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  
 

Custom Panel in Silverlight

Objective:

Now it is time to get rid of default layouts of SilverLight.
In this article, we will learn how to create a very basic custom layout and how to use that in SilverLight application.

Step 1:

Create a new SilverLight application.

Step 2:

Add a class in SilverLight application. Give any name for this class. My name is here MyPanel.

image1.gif

Step 3:

Extend Panel class in MyPanel class.

image2.gif

Step 4:

Now task is to find desired size of each child. To find desire size of each children, our custom panel will have to call Measure() function on each child.

Measure() function could be called by overriding MeasureOverride function of Panel class. This could be done as

image3.gif

aviliableSize is the variable which shows size available to the custom Panel. If child desired size is 300 pixels and aviliableSize is 200 pixels then, child size will be clipped.

Step 5:

After reading the desire size of each child, now time to arrange them in custom panel. For this purpose MyPanel class will override ArrangeOverride method of Panel class.

image4.gif

Now, we will implement ArrangeOverride method to place the child into MyPanel.

image5.gif

So, the entire MyPanel class will look like

MyPanel.cs

image6.gif

Up to this step, custom panel called MyPanel has been created.

Step 6:

Go to MainPage.xaml of your SilverLight application.

a. Inherit the namespace of the class MyPanel. In my case namespace name is MargiesTravel.Controls

image7.gif

b. Put our custom panel inside the default Grid panel.

image8.gif

c. Put some control inside the custom panel. After putting controls Xaml code will look like

MainPage.xaml

image9.gif

Run the SilverLight Application. Output would be

image10.gif

Conclusion:

This article explained , how to create a custom layout for SilverLight 2 application.

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend