TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF Grid Organizes Controls: Margin and Background
This WPF article covers the Grid control, which organizes controls. A Grid can be nested within other controls.Grid. A WPF Grid is an organizational control.
With it, we arrange controls in neat, professional ways. We avoid small inconsistencies that might make us look incompetent. Grids are nested in other controls.
Margin. You can specify a margin on the Grid. By default, the Grid has no margin and it expands to fill its container area. You don't need to set its width or height to fill the container. A margin can make the grid smaller.
Syntax: The syntax for the margin attribute is important. We specify the left, top, right and bottom margins in that order.
Tip: We can also omit some margin numbers. We can use 1, 2, or 4 numbers. It starts from the left, and mirror on the opposite sides.
Based on:
.NET 4.5
Example markup: XAML
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Background="AliceBlue" Margin="10 20 30 40">
</Grid>
</Window>
Background. By default the Grid has a transparent background. But you can specify its background with the Background attribute. If you leave the Grid transparent, you can change instead the background of the Window (or other control) underneath it.
Info: In the Margin section on this article, I show the AliceBlue background. I used AliceBlue because it is shown first in Visual Studio.
And: I am apparently too lazy to scroll down to find another color to demonstrate in my article.
TabControl. Other controls use a nested grid to lay out their controls. Try dragging a TabControl to your grid: this will have a nested grid. So a grid can be nested within another control, or another grid.
Tip: The TabControl uses a gray background color "#FFE5E5E5." This comes out to a light gray color.
And: This color can also be adjusted. I suggest the color AliceBlue, which is first in the list.
GridSplitter. A Grid can be used with rows and columns. The RowDefinitions and ColumnDefinitions elements are available. And if you use rows and columns, you can also use a GridSplitter to resize them.
Note: With a GridSplitter, we create adjustable user interfaces. These interfaces are more versatile than ones that cannot resize.
Placement. When dragging controls around on a Grid, Visual Studio will helpfully render red bars to guide their placement. This feature helps you make programs that are laid out in a consistent way. When designing, try to avoid small layout errors.
Info: In Windows Forms, we had the TableLayoutPanel to organize controls in this way. The Grid serves a similar purpose.
Summary. Controls can be hard to arrange. And if you make a mistake, it will make the entire program look bad. With grid, we arrange controls with help from Visual Studio. Programs are easier to make, and look better.