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

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

 Subscribe to Articles

Wrap Panel In Silverlight Application

Posted By:Diptimaya Patra       Posted Date: March 23, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Wrap Panel In Silverlight Application. In this article we will explore Wrap Panel in Silverlight 3. We will see how the Wrap Panel is useful.


In this article we will explore Wrap Panel in Silverlight 3. We will see how the Wrap Panel is useful.

Crating Silverlight Project

Fire up Expression Blend 3 and create a Silverlight Application. Name it as WrapPanelInSL3.


Now open the solution in Expression Blend 3. Here is the idea: we will add some Rectangles, TextBlocks and some Images dynamically to the Wrap Panel.

Wrap Panel is a panel which has two Orientation types such as Horizontal and Vertical. Whatever UIElement added to the Wrap Panel will wrap one by one.

Go ahead and add a ScrollViewer and add WrapPanel inside of it. And add three Buttons for adding contents dyanamically to the WrapPanel and add two Radio Buttons for the Orientation of WrapPanel.

Our UI will look something similar as follows:


If you look the Object and Timeline Pane you will find the above hierarchy:


Here is the Xaml code behind for the above design:


Now go ahead and add event handlers for the Buttons and the RadioButtons.

Add the following code in respective event handlers:

private void btnRectangle_Click(object sender, RoutedEventArgs e) 
  Rectangle rect = new Rectangle(); 
  rect.Width = 100; 
  rect.Height = 100; 
  rect.Fill= new SolidColorBrush(Colors.Green);  rect.StrokeThickness = 5;
   rect.Stroke = new SolidColorBrush(Colors.Black);
  rect.RadiusX = 10;
  rect.RadiusY = 10;
  private void btnText_Click(object sender, RoutedEventArgs e)
   TextBlock text = new TextBlock();
  text.Text = "I am a TextBlock";
  private void btnImage_Click(object sender, RoutedEventArgs e)
  Uri uri = new Uri("Images/User.png", UriKind.Relative);
  StreamResourceInfo streamResource = Application.GetResourceStream(uri);
  BitmapImage image = new BitmapImage();
  Image img = new Image();
  img.Width = 100;
  img.Height = 100;
  img.Source = image;
  private void radioHorizontal_Checked(object sender, RoutedEventArgs e)
  MyWrapPanel.Orientation = Orientation.Horizontal;
  private void radioVertical_Checked(object sender, RoutedEventArgs e)
  MyWrapPanel.Orientation = Orientation.Vertical;

Don't forget to change the Image's build action to Content.

Now run your application and add some contents into the Wrap Panel.


And if you change the Orientation you can actually get to know about the Wrap Panel.

That's it you have successfully used Wrap Panel in Silverlight 3.

Enjoy Coding.

 Subscribe to Articles


Further Readings:


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