Wednesday, November 16, 2011

WPF and Silverlight Layout Controls

Windows Presentation Foundation has dynamic layout (also known as automatic layout)
panel themselves are responsible for sizing ans positioning elements based on different layout models.

Type of Layout :(every layout derived from Panel Class)


DockPanel
Grid
StackPanel
UniformGrid
WrapPanel
Panel defines a property names Children used to store the child elements. Children object can be UICollection. Like image,shape,textblock and control objects.

1.StackPanel

Its used to arrange the controls vertically or horizontal stack.

XAML



< /TextBlock>


C#

StackPanel s=new StackPanel();
Button b=new Button();
b.Content=”Click”;
TextBlock t=new TextBlock();
t.Content=”run”;
s.Children.Add(b);
s.Children.Add(t);

Orientation Property

We can specify the children orientation using Orientation property of StackPanel. s.Orientation=Orientation.Horizontal;

Vertical and Horizontal Alignment

s.HorizontalAlignment=HorizontalAlignment.Horizontal (or) s.VerticalAlignment=VerticalAlignment.Vertical


2.WrapPanel


WrapPanel is similar to the StackPanel but in the WrapPanel Child elements can wrap to the next column or row automatically if there is not enough room. WrapPanel is used to add unknown number of controls like Non-Detail view in WindowsExplorer. And also we can set ItemHeight and ItemWidth properties that we can use to enforce uniform height or width, Orientation Property is same as StackPanel.


WrapPanel s=new WrapPanel();
s.ItemHeight=100;
s.ItemWidth=100;
s.Orientation=Orientation.Vertical;
Button b=new Button();
b.Content=”Click”;
TextBlock t=new TextBlock();
t.Content=”run”;
s.Children.Add(b);
s.Children.Add(t);

3.DockPanel

use of the dockpanel is automates the positioning of elements against the inside edges of their parents. We can create dockpanel in C# Like Follows.

DockPanel d=new DockPanel();

And we can set dockpanel object into the window content property.
Windowobject.Content=d;

now window layout begin with dockpanel and then we can add other type panel or control like that . Adding children in dock panel is same syntax as with other panels.

Dock.Children.Add(ctl)

But with that we need to specify on which side of the DockPanel you want control docked.
Example if you want dock the control on right side of panel you need to specify like this .

DockPanel.SetDock(ctrl,Dock.Right);
SetDock is a static method of DockPanel Class. Argument should be control and dock style.

Dock Enumeration


Dock.Left
Dock.Right
Dock.Bottom
Dock.Top
Note :
SetDock Method call may come before or after adding the control into the panel.

Another Method for setting Dock for the control

Using attached property concept like follows.
Controlobject.SetValue(DockPanel.DockProperty,Dock.Right);

The last control is not docked at all but occupies the leftover interior space. This behavior is by default true setting of the DockPanel property LastChildFill. If we set LastChildFill=false means the last control also docked. And leftover space is unfilled .

4.Grid

its used to hosts the children in a grid of rows and columns. It has property named ShowGridLines. Its used to display the grid lines. GridLenth() is used to specify the Grid Height and Width. Constructor will take two arguments – one is value and another one is GridUnitType.

Example

GridLenth glen=new GridLength(100,GridUnitType.Pixel);
Type Of GriUnit :
GridUnitType.Auto
GridUnitType.Star
GridUnitType.Pixel

Example

Grid g=new Grid();
RowDefinition rdef=new RowDefinition();
rdef.Height=GridLength.Auto;
g.RowDefinitions.Add(rdef);
RowDefinition rdef1=new RowDefinition();
rdef1.Height=GridLength.Auto;
g.RowDefinitions.Add(rdef1);
ColumnDefinition cdef=new ColumnDefinition();
cdef.Width=GridLength.Auto;
g.ColumnDefinitions.Add(cdef);
ColumnDefinition cdef1=new ColumnDefinition();
cdef1.Width=GridLength.Auto;
g.ColumnDefinitions.Add(cdef1);
Adding Control into the Grid.
g.Children.Add(ctrl);
Grid.SetRow(ctrl,rowno);
Grid.SetColumn(ctrl,colno);
Adding RowSpan and ColumnSpan
Grid.SetRowSpan(ctrl,noofrow);
Grid.ColumnSpan(ctrl,noofcol);

5.UniformGrid

its similar to the Grid . Except that all the rows and columns are equal Height and Width.

No comments:

Post a Comment