Layout is the basic in designing UI. XAML is specially designed for making good UI. Here in this article I am going to show some Layout in XAML. How we use these Layouts in designing our UI ? Layout and Pannel classes play an important role here in XAML to design a good UI.
Height and Width are two most important factor of any element. The element which is derived from FrameWorkElement class has two attributes. We can set the size of the elements by using height and width.
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>
<Grid Name="Grid1">
<Button Click="makebutton" Name="ButtonShow" Height="100" Width="100">Click here</Button>
</Grid>
</Window>
The window will look like this:
Figure 1: Here we set the height and width of this button.
Now move to Pannel Classes and other in XAML. By using them we can design our UI more interactive.
- Grid
- Canvas
- StackPannel
- DockPannel
Grid Grid is same like as Table in CSS. In a Grid there are Rows and Column. Here in Grid there is Grid.RowDefination and Grid.ColumnDefination. We use these two while working with Grid. In a Grid every child erlement can have their own Grid. We can use RowSpan and ColSpan also in a Grid.
Example:
<Window x:Class="XAMLLayout.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAMLLayout" Height="300" Width="300"
>
<Grid ShowGridLines="True">
<!--From here we can set that how many Row we are going to Use in A Grid -->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--From here we can set that how many column we are going to use in a Grid-->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- We can use Grid.Row and Grid.column to set our element-->
<Button Background="Blue" Grid.Row="0" Grid.Column="0" ToolTip="www.dotnetheaven.com"
Margin="5"> www.dotnetheaven.com</Button>
<Button Background="Gray" Grid.Row="0" Grid.Column="1" ToolTip="www.dotnetheaven.com"
Margin="5"> www.dotnetheaven.com</Button>
<Button Background="Aqua" Grid.Row="1" Grid.Column="0" ToolTip="www.dotnetheaven.com"
Margin="5"> www.dotnetheaven.com</Button>
<Button Background="DarkGoldenrod" Grid.Row="1" Grid.Column="1" ToolTip="www.dotnetheaven.com"
Margin="5"> www.dotnetheaven.com</Button>
</Grid>
</Window>
The window will look like this:
Figure 2: Grid Show.
Canvas Being of Four properties(Canvas.Top, Canvas.Left, Canvas.Right and Canvas.Bottom). Canvas can be used for absolue positioning in XAML. We can set any element in a canvas whereever we want by using these 4 properties. Let see this in a example:
<Window x:Class="XAMLLayout.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAMLLayout" Height="300" Width="300"
>
<Canvas>
<Label Canvas.Left="20" Canvas.Top="20" Background="Gray" >Name</Label>
<TextBox Canvas.Left="80" Canvas.Top="20" Background="Beige">Rahul</TextBox>
<Label Canvas.Bottom="35" Canvas.Right="120" Background="AntiqueWhite">www.dotnetheaven.com</Label>
<Label Canvas.Bottom="80" Canvas.Left="200" Canvas.Right="10" Background="Brown" >.NET</Label>
</Canvas>
</Window>
The window will become look like this:
Figure 3: Canvas Show.
StackPannel StackPanel is the simplest Panel element in XAML. StackPanel shows the elements respectively according to the order. In StackPannel there is orientation attribute which has two values: horizontal and vertical. By default orientation is vertical. Let see how Stack pannel works with our element:
<Window x:Class="XAMLLayout.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAMLLayout" Height="300" Width="300"
>
<!--By default this is vertical-->
<StackPanel>
<Label Background="AliceBlue" Width="400">Welcome</Label>
<TextBox Background="SaddleBrown">How r u </TextBox>
<TextBox Background="DarkSalmon"> Good </TextBox>
</StackPanel>
</Window>
The window will look like this:
Figure 4: StackPannel in Vertical.
Suppose if we want to show our element Horizontally aligned then:
Figure 5: StackPannel in Horizontal orientation.
DockPannel Basically both StackPannel and DockPannel are same but in DockPannel we can dock the elements top, left, right and bottom. See DockPannel by a example:
<Window x:Class="XAMLLayout.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAMLLayout" Height="300" Width="300"
>
<DockPanel>
<Label Background="AliceBlue" DockPanel.Dock="Top">Welcome</Label>
<TextBox Background="SaddleBrown" DockPanel.Dock="Bottom">How r u </TextBox>
<TextBox Background="DarkSalmon" DockPanel.Dock="Left"> Good </TextBox>
<TextBox Background="Cyan" DockPanel.Dock="Right"> India </TextBox>
</DockPanel>
</Window>
The window will look lie this:
Figure 6: DockPannel Presentation.