A transform defines how to transform the points from one coordinate space to another coordinate space.

• In general, this mapping is described by a transformation matrix.
• The transformation matrix is a collection of 3 rows and 3 columns with double type values. By manipulating this matrix values one can rotate or scale which moves an object.
• WPF supports following transform classes.

Create a new window and go to XAML source and create the three ellipse controls. Write the following code for applying RoteteTransform. [csharp] <Window x:Class="WCFTransforms.Rotatetransform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF |Rotate Transform" Height="500" Width="500"> <Grid> <ListBox Name="listBox1" FontSize="15" Width="150" Height="250" Background="LightSalmon" Margin="15,132,327,87"> <ListBoxItem IsSelected="True">C</ListBoxItem> <ListBoxItem IsSelected="True">C++</ListBoxItem> <ListBoxItem IsSelected="True">VB.Net</ListBoxItem> <ListBoxItem IsSelected="True">C Sharp</ListBoxItem> <ListBoxItem IsSelected="True">ADO.NET</ListBoxItem> <ListBoxItem IsSelected="True">ASP.NET</ListBoxItem> <ListBoxItem IsSelected="True">Web Services</ListBoxItem> <ListBoxItem IsSelected="True">WCF</ListBoxItem> <ListBoxItem IsSelected="True">WPF</ListBoxItem> <ListBoxItem IsSelected="True">MVC</ListBoxItem> <ListBox.RenderTransform> <RotateTransform Angle="-30" CenterX="50" CenterY="50" /> </ListBox.RenderTransform> </ListBox> <ListBox Name="lstbox2" FontSize="15" Height="250" Width="150" Background="LightPink" Margin="247,106,95,113" > <ListBoxItem IsSelected="True">C</ListBoxItem> <ListBoxItem IsSelected="True">C++</ListBoxItem> <ListBoxItem IsSelected="True">VB.Net</ListBoxItem> <ListBoxItem IsSelected="True">C Sharp</ListBoxItem> <ListBoxItem IsSelected="True">ADO.NET</ListBoxItem> <ListBoxItem IsSelected="True">ASP.NET</ListBoxItem> <ListBoxItem IsSelected="True">Web Services</ListBoxItem> <ListBoxItem IsSelected="True">WCF</ListBoxItem> <ListBoxItem IsSelected="True">WPF</ListBoxItem> <ListBoxItem IsSelected="True">MVC</ListBoxItem> <ListBox.RenderTransform> <RotateTransform Angle="10" CenterX="50" CenterY="50" /> </ListBox.RenderTransform> </ListBox> </Grid> </Window> [/csharp] Then run the application, a new window appears like below.  

Scale transform is used to scale elements by the specified scale x and scale y angles.

[csharp] <Window x:Class="WCFTransforms.Scaletransform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Scaletransform" Height="300" Width="400"> <Grid> <Ellipse Height="100" HorizontalAlignment="Left" Margin="40,28,0,0" Name="elp1" VerticalAlignment="Top" Width="50" Fill="LightPink"> <Ellipse.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2"></ScaleTransform> </Ellipse.RenderTransform> </Ellipse> <Ellipse Height="100" HorizontalAlignment="Center" Margin="114,29,128,0" Name="elp2" VerticalAlignment="Top" Width="50" Fill="LightPink"> <Ellipse.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2"></ScaleTransform> </Ellipse.RenderTransform> </Ellipse> <Ellipse Height="100" HorizontalAlignment="Right" Margin="0,26,54,0" Name="elp3" VerticalAlignment="Top" Width="50" Fill="LightPink"> <Ellipse.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2"></ScaleTransform> </Ellipse.RenderTransform> </Ellipse> </Grid> </Window> [/csharp] Then run the application, a new window appears like below

Create a new window and go to xmal source and write the following code. [csharp] <Window x:Class="WCFTransforms.Skewtransform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Skew Transform" Height="350" Width="450" Background="NavajoWhite"> <Grid Height="350"> <ListView Margin="10" Width="100" VerticalAlignment="Stretch" HorizontalAlignment="Left" Background="LightSalmon"> <ListViewItem>C Language </ListViewItem> <ListViewItem >C++</ListViewItem> <ListViewItem>C#.NET</ListViewItem> <ListViewItem>VB.NET</ListViewItem> <ListViewItem >ADO.NET</ListViewItem> <ListViewItem>ASP.NET</ListViewItem> <ListViewItem>WCF</ListViewItem> <ListViewItem >WPF</ListViewItem> <ListViewItem>MVC</ListViewItem> <ListViewItem>Share Point</ListViewItem> <ListView.RenderTransform> <SkewTransform AngleX="25" AngleY="20"></SkewTransform> </ListView.RenderTransform> </ListView> <ListView Margin="0,10,73,10" Width="100" VerticalAlignment="Stretch" HorizontalAlignment="Right" Background="LimeGreen"> <ListViewItem>C Language</ListViewItem> <ListViewItem >C++</ListViewItem> <ListViewItem>C#.NET</ListViewItem> <ListViewItem>VB.NET</ListViewItem> <ListViewItem >ADO.NET</ListViewItem> <ListViewItem>ASP.NET</ListViewItem> <ListViewItem>WCF</ListViewItem> <ListViewItem >WPF</ListViewItem> <ListViewItem>MVC</ListViewItem> <ListViewItem>Share Point</ListViewItem> <ListView.RenderTransform> <SkewTransform AngleX="0" AngleY="0"></SkewTransform> </ListView.RenderTransform> </ListView> </Grid> </Window> [/csharp] Then run the application, a new window appears like below.

Translate transform is used to move elements by the specified scale x angle and y angle.

Create a new window and go to xmal source and write the following code. [csharp]<Window x:Class="WCFTransforms.TranslateTransform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | TranslateTransform" Height="300" Width="300"> <Grid Width="300" Height="300"> <ListView Margin="10,10,0,63" Width="100" VerticalAlignment="Stretch" HorizontalAlignment="Left" Background="LightSalmon"> <ListViewItem>C Language</ListViewItem> <ListViewItem >C++</ListViewItem> <ListViewItem>C#.NET</ListViewItem> <ListViewItem>VB.NET</ListViewItem> <ListViewItem >ADO.NET</ListViewItem> <ListViewItem>ASP.NET</ListViewItem> <ListViewItem>WCF</ListViewItem> <ListViewItem >WPF</ListViewItem> <ListViewItem>MVC</ListViewItem> <ListViewItem>Share Point</ListViewItem> <ListView.RenderTransform> <TranslateTransform X="25" Y="20"></TranslateTransform> </ListView.RenderTransform> </ListView> <ListView Margin="0,10,36,63" Width="95" VerticalAlignment="Stretch" HorizontalAlignment="Right" Background="LightSalmon"> <ListViewItem>C Language</ListViewItem> <ListViewItem >C++</ListViewItem> <ListViewItem>C#.NET</ListViewItem> <ListViewItem>VB.NET</ListViewItem> <ListViewItem >ADO.NET</ListViewItem> <ListViewItem>ASP.NET</ListViewItem> <ListViewItem>WCF</ListViewItem> <ListViewItem >WPF</ListViewItem> <ListViewItem>MVC</ListViewItem> <ListViewItem>Share Point</ListViewItem> <ListView.RenderTransform> <TranslateTransform X="5" Y="5"></TranslateTransform> </ListView.RenderTransform> </ListView> </Grid> </Window>[/csharp] Then run the application,a new window appears like below:

WPF drawing shapes, in general are used to work with drawings.

• Line
• Ellipse
• Polygon
• Rectangle etc.

[csharp] <Line X1="value" Y1="value" X2="value" Y2="value" stroke="Color" strokethickness="value" Strokestartlinecap="Value" StrokeEndLinecap="value" />; [/csharp]

Now create a new window and go to xmal source and write the following code: [csharp] <Window x:Class="WPFDrawingshapes.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawings" Height="350" Width="525" Background="Black"> <Grid> <Line X1="30" X2="300" Y1="30" Y2="300" Stroke="Red" StrokeThickness="6" Margin="79,0,0,0"></Line> </Grid> </Window> [/csharp] Now run the application then a new window appears like below.

[csharp] <Elppse Height="value" Width="value" stroke="color" strokethickness="value" margin="value" Fill="color" />[/csharp]

Now create a new window then go to xaml source and write the following code. [csharp]<Window x:Class="WPFDrawingshapes.Elipse" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawings" Height="300" Width="300" Background="Lime"> <Grid> <Ellipse Width="220" Stroke="Green" StrokeThickness="3" Margin="31,73,41,84" Fill="Black" RenderTransformOrigin="0.475,-0.097"/> </Grid> </Window>[/csharp] Now run the application then we should get new window like below:" To draw a circle with ellipse then give a height and width values equal.

[csharp] <Rectangle Height="value" width="value" stroke="color" strokethickness="value" Fill="color" /> [/csharp]

Create a new window, then go to xmal source and write the following code. [csharp] <Window x:Class="WPFDrawingshapes.Rectangle" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawing" Height="300" Width="300" Background="Gold"> <Rectangle Height="150" Width="200" Stroke="Yellow" StrokeThickness="2" Fill="Black"></Rectangle> </Window> [/csharp] Now run the application then a new window appears like below.

To create a polygon use polygon tag. [csharp] <polygon points="Coordinates Combination" stroke="color" strokeThickness="Value" Fill="color" /> [/csharp] Polygon tag is used to draw a rectangle or triangle or pentagon or line etc. It depends on requirements and coordination combination taken in the xaml source which will identify the type of polygon. These coordination combinations should be separated by using space.

Create a new window, then go to xaml source and write the following code for to draw a line by using polygon: [csharp]<Window x:Class="WPFDrawingshapes.LinewithPolygon" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawing" Height="300" Width="300" Background="Black"> <Grid> <Polygon Points="25,25,220,20" Stroke="Yellow" StrokeThickness="5"></Polygon> </Grid> </Window>[/csharp] Now run the application then result appears like below.

Create a new window, then go to xaml source and write the following code to create a right angle triangle by using polygon. [csharp]<Window x:Class="WPFDrawingshapes.Rightangletriangle" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawing" Height="300" Width="300" Background="Chocolate"> <Grid> <Polygon Points="35,25 30,200 250, 200" Fill="LightPink" Stroke="Black"></Polygon> </Grid> </Window>[/csharp] Now run the application then a new window appears like below.

Create a new window, then go to xaml source and write the following code to create a pentagon by using polygon. [csharp]<Window x:Class="WPFDrawingshapes.Pentagon" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawing" Height="494.737" Width="400" Background="BlanchedAlmond"> <Grid> <Polygon Points="100,10 10,200 20,400 250,400 250,200" Stroke="Yellow" StrokeThickness="5" Margin="76,30,-76,-30" Fill="BlueViolet"></Polygon> </Grid> </Window>[/csharp] Now run the application then result appears like below.

By using path tag, one can draw 2D images like a rectangle, circle, ellipse, line etc. The big advantage of path tag is to draw combination diagrams like intersections, ven diagrams with unions etc.

[csharp] <path stroke ="color" strokethickness="value'> <path.data> <Type of Geometry code..../> </path.data> </path> [/csharp]

Create a new window, then go to xaml source and write the following code. [csharp]<Window x:Class="WPFDrawingshapes.Grouogeometry" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawing" Height="300" Width="300" Background="Beige"> <Grid> <Path StrokeThickness="4" Stroke="LightGreen" Fill="Lavender" Margin="29.323,0,28.196,24.812" Stretch="Fill"> <Path.Data> <GeometryGroup> <EllipseGeometry Center="100,100" RadiusX="120" RadiusY="120"></EllipseGeometry> <EllipseGeometry Center="150,200" RadiusX="100" RadiusY="100"></EllipseGeometry> </GeometryGroup> </Path.Data> </Path> </Grid> </Window>[/csharp] Now run the application then the result appears like below.

Create a new window, then go to xaml source and write the following code. [csharp]<Window x:Class="WPFDrawingshapes.CobinedGeometry" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Drawing" Height="337.218" Width="400" Background="Black"> <Grid> <Path StrokeThickness="3" Fill="LightCyan" Stroke="Pink"> <Path.Data> <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <EllipseGeometry Center="150,150" RadiusX="100" RadiusY="100"></EllipseGeometry> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="250,150" RadiusX="100" RadiusY="100"></EllipseGeometry> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> </Grid> </Window>[/csharp] Now run the application,and the result appears like bellow.

Canvas layout is used to prepare the constant designs within the WPF Applications.

• When the canvas size is increased or decreased there is no change within the size of canvas placed within the canvas.

When set to Left to Right, the control direction will start at Left and moves towards to a right.When set to Right to Left, the control direction will start from right and will move to left.

Create a new window and design that window like below screen by writing the following code. [csharp]<Grid> <Canvas Height="258" HorizontalAlignment="Left" Margin="10,10,0,0" Name="canvas1" VerticalAlignment="Top" Width="481" > <Grid Name="Grid1" Background="Aqua" Width="400" Height="250"> <Grid.RowDefinitions> <RowDefinition >/RowDefinition> <RowDefinition>/RowDefinition> <RowDefinition>/RowDefinition> <RowDefinition>/RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition>/ColumnDefinition> <ColumnDefinition>/ColumnDefinition> <ColumnDefinition>/ColumnDefinition> <ColumnDefinition>/ColumnDefinition> </Grid.ColumnDefinitions> <TextBox Name="txt1" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5" Background="White">/TextBox> <Button Name="btn9" Content="9" Grid.Row="1" Grid.Column="0">/Button> <Button Name="btn8" Content="8" Grid.Row="1" Grid.Column="1">/Button> <Button Name="btn7" Content="7" Grid.Row="1" Grid.Column="2">/Button> <Button Name="btnplus" Content="+" Grid.Row="1" Grid.Column="3">/Button> <Button Name="btnmultiply" Content="*" Grid.Row="1" Grid.Column="4">/Button> <Button Name="btn4" Content="4" Grid.Row="2" Grid.Column="0">/Button> <Button Name="btn5" Content="5" Grid.Row="2" Grid.Column="1">/Button> <Button Name="btn6" Content="6" Grid.Row="2" Grid.Column="2">/Button> <Button Name="btnminus" Content="-" Grid.Row="2" Grid.Column="3">/Button> <Button Name="btndivide" Content="/" Grid.Row="2" Grid.Column="4">/Button> <Button Name="btn3" Content="3" Grid.Row="3" Grid.Column="0">/Button> <Button Name="btn2" Content="2" Grid.Row="3" Grid.Column="1">/Button> <Button Name="btn1" Content="1" Grid.Row="3" Grid.Column="2">/Button> <Button Name="btn0" Content="0" Grid.Row="3" Grid.Column="3">/Button> <Button Name="btnequals" Content="=" Grid.Row="3" Grid.Column="2" Margin="6,0,2,0" Width="3">/Button> </Grid> </Canvas> <Button Content="LefttoRight" Name="btnlefttoright" Margin="24,276,356,0" Click="btnlefttoright_Click">/Button> <Button Content="RighttoLeft" Name="btnrighttoleft" Margin="175,276,205,0" Click="btnrighttoleft_Click">/Button> </Grid> </Window> [/csharp] After writing the above code, the window should become like below. Now write the following code in button click events. [csharp]using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPFCanvaspanel { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void btnlefttoright_Click(object sender, RoutedEventArgs e) { canvas1.FlowDirection = FlowDirection.LeftToRight; } private void btnrighttoleft_Click(object sender, RoutedEventArgs e) { canvas1.FlowDirection = FlowDirection.RightToLeft; } } } [/csharp] Now click on F5 to the application then the screen becomes like below. If clicked on Left to the right button then the controls move on a right side. If clicked on right to left button then the screen move the left side like below screen.

Stack panel layout is used to manage the child controls in the form of a stack panel either Horizontally or Vertically. Stack panel is dynamic positioned. It means when the child window size is increased or decreased then stack panel also increases or decreases according to the child window. The child control will not change their size and coordinates when stack panel size is increased or decreased.

• When set to Horizontal, the child controls are managed in a horizontal stack.
• When set to Vertical, the child controls are managed in a vertical stack.

First create a new window and then create a stack panel control by drag and drop from the toolbox within that window or write the following code for creating stack panel. [csharp]<StackPanel Margin="0,0,0,-32"</StackPanel>[/csharp] Now create a button controls in that stack panel control. For creating buttons you have to write the XMAL code like below: [csharp] <Window x:Class="WPF_Stackpanel.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" < Title="WPF | Stack Panel" Height="350" Width="525" Background="AliceBlue"> <Grid Background="BlueViolet"> <StackPanel Margin="0,0,0,-32"> <TextBlock Margin="198,10,10,10" FontSize="20" Stack Panel</TextBlock> <Button Margin="115,10,109,10" Click="Button_Click" Background="BlanchedAlmond"/> <Button Margin="115,10,109,10" Click="Button_Click_1" Background="BlanchedAlmond"/> <Button Margin="115,10,109,10" Click="Button_Click_2" Background="BlanchedAlmond"/> <Button Margin="115,10,109,10" Click="Button_Click_3" Background="BlanchedAlmond"/> <Button Margin="115,10,109,10" Click="Button_Click_4" Background="BlanchedAlmond"/> <Button Margin="115,10,109,10" Click="Button_Click_5" Background="BlanchedAlmond"/> <Button Margin="115,10,109,10" Click="Button_Click_6" Background="BlanchedAlmond"/> </StackPanel> </Grid> </Window> [/csharp] After writing the above code, the WPF Layout window should become like a below screen: Now write the code for buttons click event in Main window.xmal.cs file. [csharp]using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPF_Stackpanel { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to C Language"); } private void Button_Click_1(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to C++"); } private void Button_Click_2(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to Csharp"); } private void Button_Click_3(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to VB.NET"); } private void Button_Click_4(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to ASP.NET"); } private void Button_Click_5(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to WPF"); } private void Button_Click_6(object sender, RoutedEventArgs e) { MessageBox.Show("Welcome to WCF"); } } } [/csharp] Now click f5 button to run the application. After clicking f5 button, the below screen appears.

Wrap panel is used to set all the controls or elements in sequential order. It automatically arranges all the controls in a proper manner without writing code.

• In wrap panel, the control size cannot be an increased or decreased according to the main window.
• When wrap panel size is increased then the controls will be adjusted automatically which is present in wrap panel or moving top right locations.
• When wrap panel size is decreased, then the controls will be wrapped to left bottom locations.

Create a new window.

• Now create a wrap panel and take some controls or shapes into that panel or write the following code in XAML source.

[csharp] <Window x:Class="WPFWrappanel.MainWindow" ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Layout | Wrap Panel" Height="350" Width="525" Background="LightSalmon"> <Grid> <WrapPanel Width="350" Height="250"> <Rectangle Width="100" Height="50" Fill="LightSteelBlue"></Rectangle> <Ellipse Width="100" Height="50" Fill="Green" ></Ellipse> <Button Width="100" Height="50" Content="Button control" Background="Aquamarine"></Button> <Button Content="Button control" Height="50" Name="button1" Width="100" /> <Rectangle Width="100" Height="50" Fill="Red"></Rectangle> <Ellipse Width="100" Height="50" Fill="Green" ></Ellipse> <Button Width="100" Height="50" Content="Button control" Background="LightGoldenrodYellow"></Button> <Button Content="Button control" Height="50" Name="button2" Width="100" Background="LightPink"/> </WrapPanel> </Grid> </Window> [/csharp] Then the window will become like below screen. Now run by clicking on F5 then a new window appears like below.

Dock panel control is used to provide docking facilities to the child controls that means it arranges the child controls on the top or left or bottom or right side corners of the form.

Create a new window in WPF Application and drag and drop the dock panel control from the toolbox or write the below code: [csharp] <DockPanel LastChildFill="True"></DockPanel> [/csharp] Now drag and drop the five button controls from the toolbox or write the following. [csharp] <Window x:Class="WPFDockpanel.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFlayout" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="350" Width="525"> <DockPanel LastChildFill="True"> <Button Width="auto" Content="Left" DockPanel.Dock="Left" Background="Lavender"></Button> <Button Width="auto" Content="Right" DockPanel.Dock="Right" Background="LightGreen"></Button> <Button Width="auto" Content="Top" DockPanel.Dock="Top" Background="LightSalmon"></Button> <Button Width="auto" Content="Bottom" DockPanel.Dock="Bottom" Background="Brown"></Button> <Button Width="auto" Content="Content" Background="White"></Button> </DockPanel> </Window> [/csharp] Then the window will become like below screen: Then click on f5 button to run the application then the below screen appears.

Grid layout defines an area where child controls or elements can be positioned in rows and columns.

• Grid layout is used to display the controls independently in the form of rows and columns.
• When grids are used in the form of rows and columns, row definitions and column definitions must be used along with grid.
• Row definitions are used to divide the grid into number of rows.
• Column definitions are used to divide the grid in to number of columns.
• In general, number of rows will be created depending on row definition tags created and number of columns will be created depending on column definition tags created

Create a new window, with in the window by default grid layout is generated. Now go to xaml source and write the following code: [csharp]<Window x:Class="WPFGridpanel.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Grid Layout" Height="350" Width="525"> <Grid> <Grid Name="Grid1" Background="Aqua"> <Grid.RowDefinitions> <RowDefinition ></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBox Name="txt1" Grid.Row="0" Grid.ColumnSpan="5" Background="White"></TextBox> <Button Name="btn9" Content="9" Grid.Row="1" Grid.Column="0"></Button> <Button Name="btn8" Content="8" Grid.Row="1" Grid.Column="1"></Button> <Button Name="btn7" Content="7" Grid.Row="1" Grid.Column="2"></Button> <Button Name="btnplus" Content="+" Grid.Row="1" Grid.Column="3"></Button> <Button Name="btnmultiply" Content="*" Grid.Row="1" Grid.Column="4"></Button> <Button Name="btn4" Content="4" Grid.Row="2" Grid.Column="0"></Button> <Button Name="btn5" Content="5" Grid.Row="2" Grid.Column="1"></Button> <Button Name="btn6" Content="6" Grid.Row="2" Grid.Column="2"></Button> <Button Name="btnminus" Content="-" Grid.Row="2" Grid.Column="3"></Button> <Button Name="btndivide" Content="/" Grid.Row="2" Grid.Column="4"></Button> <Button Name="btn3" Content="3" Grid.Row="3" Grid.Column="0"></Button> <Button Name="btn2" Content="2" Grid.Row="3" Grid.Column="1"></Button> <Button Name="btn1" Content="1" Grid.Row="3" Grid.Column="2"></Button> <Button Name="btn0" Content="0" Grid.Row="3" Grid.Column="3"></Button> <Button Name="btnequals" Content="=" Grid.Row="3" Grid.Column="4"></Button> </Grid> </Grid> </Window> [/csharp] After writing the above code, the window should become like below. Now run the application by clicking F5. Then a new window appears like below:

In general, scroll viewer scrolls the controls which are present in the container. Here, one should remember that the scroll bar works only in containers like Stack panel, List box, and etc.

Create a new window then go to xaml source and write the following code: [csharp]<Window x:Class="WPFScrollbar.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Scrolling" Height="250" Width="325"> <Grid> <StackPanel> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons1</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons2</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons3</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons4</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons5</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons6</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons7</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons8</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons9</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons10</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons11</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons12</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons13</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons14</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons15</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons16</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons1</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons17</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons18</TextBlock> <TextBlock FontSize="15" Background="Brown" FontWeight="Bold">SPlessons1</TextBlock> <TextBlock FontSize="15" Background="Blue" FontWeight="Bold">SPlessons19</TextBlock> </StackPanel> </Grid> </Window>[/csharp] Now run the application by clicking F5, then the result should be like below window: If observed in the above window,it is not possible to see all attributes. To see all attributes then drag the window like below. To overcome above problem, Scrollbar control is used in a container. Actually, scroll viewer has two properties those are HorizontalScrollBarVisibility and VerticalScrollBarVisibility. By using these two properties, an example is given below.