Home
Search
WPF Grid Use: Margin and BackgroundUse 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 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.
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.
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>
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 alight 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.
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.
Home
© 2007-2022 sam allen.
see site info on the changelog.