WPF Grid Use: Margin and Background

Grid. A WPF Grid is an organizational control. With it, we arrange controls in clear, 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.

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.

TabControl

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.

GridSplitter

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.

TableLayoutPanel

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.

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

WPF Grid Use: Margin and Background

Related Links:

.Net

Java

Related Links