Silverlight Wrap Panel and Dock Panel

All users will not be using the applications in same resolution and with same window width and height. Users still want the application’s look and feel to be pleasant. For example, a user may not want to see a horizontal scrollbar in a page even though there is enough space available vertically.

Also, users these days expect even the web application user interfaces to be as useful as winform interfaces and their behavior. To handle these kinds of things, silverlight provides other kind of panels like WrapPanel, DockPanel and also provides options to create a custom panel. Let us see both of them and what each of one does. Let us look into custom panels in future

WrapPanel
WrapPanel is a control which can be used to wrap the elements inside it whenever the width of the elements exceeds the panel width. Just drag the WrapPanel from toolbox and drop it on to your screen.
And modify it to the below code

XAML

<my:WrapPanel>
<TextBlock>Some content here</TextBlock>
<Button Content="Button 1" />
<TextBlock>Some content here again </TextBlock>
<Button Content="Button 2" />
<TextBlock>Some content here once again</TextBlock>
<Button Content="Button 3" />
<TextBlock>some really really long long long text</TextBlock>
</my:WrapPanel>

You can see in the above XAML code, we have a wrap panel and few TextBlock & Button Controls. Now, the advantage of using WrapPanel is when we re-size the window, we can see that, based on the window width, the controls wraps to next lines. You can see it live in below sample video how the content gets wrapped when we re-size the window width. The behavior will be same in any browser when viewing the actual output and doing resizing.



As you can see, wrap panel is similar to a StackPanel virtually. Also, wrapping will not only happen if you resize your window width. It works even if you re-size the height. You can see a scroll bar when you re-size if the height or width of elements exceeds.

DockPanel
The DockPanel allows you to dock the elements to the edge of the panel. If you have already
Worked with the windows forms, you will know it already. The layout will have a behavior
of docking similar to that of any other windows form. it is like, you can add few controls inside it and
set the properties like how do you want to position them on the screen when the screen width and height gets modified. Here comes an example of using it. You can drag and drop the control on canvas and add controls within them or you can write the XAML code yourself like below.


XAML

<toolkit:DockPanel>
<Button Content="Left" toolkit:DockPanel.Dock="Left" />
<Button Content="Top" toolkit:DockPanel.Dock="Top" />
<Button Content="Right" toolkit:DockPanel.Dock="Right" />
<Button Content="Bottom" toolkit:DockPanel.Dock="Bottom" />
<Button Content="Center" />
</toolkit:DockPanel>

The output would be


You can see that we have provided the DockPanel.Dock property for each of the control to tell where it should be docked. It’s pretty simple and easy. Doesn’t take much code, isn’t it?

OK, that’s all for now. Now, you should be able to use all available panels in Silverlight effectively. Also, please download VS 2010 project here. I have implemented all the panels. Feel free to modify and play with it.

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Real time Push Notifications with SignalR & PNotify (Pines Notify)

What's new and expected in .NET Framework 4.5