How to design different layouts in WPF application?
Are you new to WPF? Do you want to learn WPF? This application will teach you to set different layouts for controls in WPF application using the WPF toolkit.
Mostly developers find development part easier than designing a page. This is because they are not aware which layout will be best suited for their application or you can say they may not be able to visualize how page can look when the layout gets changed.
However, all this can be done in a WPF application effectively using the WPF Toolkit which allows users to get new functionality, advanced features, good look and feel.
I have developed this code to demonstrate how controls look at runtime when placed in different manner. I hope it will be useful for you all.
Put this code in Window1.xaml
<Window x:Class="ExampleLayouts.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="650">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Content="SAVE"/>
<Button Content="DELETE" Grid.Column="1"/>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="SAVE"/>
<Button Content="DELETE" Grid.Row="1"/>
</Grid>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
<Button Content="SAVE"/>
<Button Content="DELETE"/>
<Button Content="ADD"/>
</StackPanel>
<StackPanel Grid.Row="1">
<Button Content="SAVE"/>
<Button Content="DELETE"/>
<Button Content="ADD"/>
</StackPanel>
<WrapPanel Grid.Row="1" Grid.Column="3" Orientation="Vertical">
<Button Content="SAVE"/>
<Button Content="DELETE"/>
<Button Content="ADD"/>
<Button Content="UPDATE"/>
</WrapPanel>
<WrapPanel Grid.Row="1" Grid.Column="2">
<Button Content="SAVE"/>
<Button Content="DELETE"/>
<Button Content="ADD"/>
<Button Content="UPDATE"/>
</WrapPanel>
<UniformGrid Grid.Row="2">
<Button Content="SAVE"/>
<Button Content="DELETE"/>
<Button Content="ADD"/>
<Button Content="UPDATE"/>
<Button Content="CANCEL"/>
</UniformGrid>
<DockPanel Grid.Row="2" Grid.Column="2">
<Button Content="SAVE" DockPanel.Dock="Top"/>
<Button Content="DELETE" DockPanel.Dock="Bottom"/>
<Button Content="ADD" DockPanel.Dock="Left"/>
<Button Content="UPDATE" DockPanel.Dock="Right"/>
<Button Content="CANCEL"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="1">
<Button Content="SAVE"/>
<Button Content="DELETE"/>
<Button Content="ADD"/>
<Button Content="UPDATE"/>
<Button Content="CANCEL"/>
</DockPanel>
<Canvas Grid.Row="2" Grid.Column="3" Background="Yellow">
<Button Content="OK" Canvas.Left="20" Canvas.Top="20"/>
</Canvas>
</Grid>
</Window>