Chapter 3: Layout
Objectives of the chapter
- Understanding the principles of layout
- Understanding the process of layout
- Understanding Layout Containers
- Master the use of various types of layout containers
Understanding Layout in WPF
WPF Layout Principles
WPF windows can only contain a single element. In order to place multiple elements in a WPF window and create a more usable user interface, you need to place a container on the window and then add other elements to this container. This limitation is due to the fact that the Window class inherits from the ContentControl class, which will be further analyzed in subsequent chapters.
The layout process
WPF layout consists of two phases: the measure phase and the arrange phase. In the measure phase, the container iterates over all child elements and asks them for their desired size. In the arrange phase, the container places the child elements in the appropriate positions.
Of course, elements may not always be optimally sized-sometimes the container is not large enough to fit the contained elements. In this case, the container, in order to fit the size of the visualization area, has to crop the elements that do not meet the requirements. As you will see later, this can usually be avoided by setting a minimum window size.
Attention:
Layout containers do not provide any scrolling support. Instead, scrolling is provided by the content-specific ScrollViewer control, which can be used almost anywhere.
Layout Containers
All WPF layout containers are panels derived from the abstract class (see below).The Panel class adds a handful of members, including three public properties, the details of which are listed in the following table.
| name (of a thing) | clarification |
|---|---|
| Background | This property is the brush used to color the background of the panel. This property must be set to a non-null value if you want to receive mouse events (if you want to receive mouse events and don't want to show a fixed-color background, then just set the background color to transparent) |
| Children | This property is a collection of entries stored in the panel. This is the first level of entries - in other words, these entries can contain more entries themselves. |
| IsItemsHost | This property is a Boolean value that evaluates to true if the panel is used to display the items associated with the ItemsControl control (for example, nodes in a TreeView control or list items in a ListBox) In most cases, it is not even necessary to know that the list control uses a background panel to manage the layout of the entries it contains. However, if you wish to create customized lists that place child elements in different ways (for example, a ListBox control that displays images in a tiled fashion), this detail becomes important. |
The Panel base class itself is nothing special, but it is the starting point for many more special classes.WPF provides a large number of classes inherited from Panel that can be used for arranging layouts, and the following table lists a few of the most basic of these classes. As with all WPF controls and most visual elements, these classes reside in the System. namespace.
| name (of a thing) | clarification |
|---|---|
| StackPanel | Place elements in a horizontal or vertical stack. This layout container is usually used for small areas in larger, more complex windows. |
| WrapPanel | Places elements in a series of rows that can be swapped. Horizontally, the WrapPanel panel places entries from left to right and then places elements in subsequent rows. Vertically, the WrapPanel panel places elements in top-down columns and uses additional columns to place the remaining entries. |
| DockPanel | Adjusts elements to the entire boundary of the container |
| Grid | Arranging elements in rows and columns according to an invisible table is one of the most flexible and commonly used containers. |
| UnitformGrid | This layout container is not commonly used for placing elements in tables that are not visible but force all cells to have the same size. |
| Canvas | Absolute positioning of elements using fixed coordinates. This layout container is most similar to traditional Windows Forms applications, but does not provide anchoring or docking capabilities. Therefore, this layout container is not a suitable choice for variable-sized windows. If chosen, it requires some additional work. |
StackPanel Panel
The StackPanel panel is one of the simplest layout containers. The panel simply places its child elements in a stack in a single row or column. For example, in the following code snippet, the window contains 4 buttons.
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<StackPanel>
<Label>A Button Stack</Label>
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
<Button>button4</Button>
</StackPanel>
</Window>
panel pushes the elements in top-down order so that the height of each element fits inside ≥. In this example, this bottom flavor of old labels and knobs is just large enough to fit the text contained within them. All elements are stretched to the full width of the SatckPane! panel, which is also the width of the window. If the window is widened, the StackPanel panel is also widened, and the buttons stretch themselves to accommodate the change.
The StackPanel panel can also be used to align elements horizontally by setting the Oricntation property:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<StackPanel Orientation="Horizontal">
<Label>A Button Stack</Label>
<Button MinWidth="100">button1</Button>
<Button MinWidth="100">button2</Button>
<Button MinWidth="100">button3</Button>
<Button MinWidth="100">button4</Button>
</StackPanel>
</Window>
Layout Properties
Although the layout is determined by the container, child elements still have some discretion. In fact, the Layout panel supports a small set of layout properties to be used in conjunction with child elements, which are listed in the following table.
| name (of a thing) | clarification |
|---|---|
| HorizontalAlignment | This property determines how the child element is positioned in the layout container when new additional free space is available in the front horizontal direction. Optional values for the Center, Left, Right, or Stretch properties are available. |
| VerticalAlignment | This property determines how child elements are positioned in the layout when there is additional free space in the vertical direction. Optional values for the Center, Top, Bottom, or Stretch properties are available. |
| Margin | This property is used to add a certain amount of space around the element.The Margin property is an instance of a structure that has separate components for adding space to the top, bottom, left, and right, respectively. |
| MinWidth and MinHeight | These two properties are used to set the minimum size of an element. If an element is too large for other layout containers, the element will be clipped to fit the container. |
| MaxWidth and MaxHeight | These two properties are used to set the maximum size of the element. If there is more space available, this limit is not exceeded when expanding child elements, even if the HorizontalAlignment and VerticalAlignment properties are set to Stretch. |
| Width and Height | These two properties are used to explicitly set the size of the element. This setting overrides the Stretch value set by the HorizontalAlignment and VerticalAlignment properties. However, it cannot exceed the van set by the MinWidth, MinHeight, MaxWidth, and MaxHeight properties. |
alignment
Normally, for Label controls, the HorizontalAligament property defaults to Lef: for Button controls, the HorzontalAlignment property defaults to Streteh. This is why the width of each button is adjusted to the width of the column. But it is possible to change these details:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<StackPanel>
<Label HorizontalAlignment="Center">A Button Stack</Label>
<Button HorizontalAlignment="Left">button1</Button>
<Button HorizontalAlignment="Right">button2</Button>
<Button>button3</Button>
<Button>button4</Button>
</StackPanel>
</Window>
The top two buttons are now the smallest size they should be and aligned, while the bottom two buttons are stretched to the full width of the SiackPanel panel. If you change the size of the window, you will see that the label stays in the center and the first two buttons are pasted to each side.
Attention:
The SiackPanel panel also has its own HorizontalAlignment and VerticalAlignment properties. Both properties are recognized as being set to Stretch, so the StackPanel panel completely fills its container, which in this example means that the stackPanel panel fills the entire window. With a different setting, the StackPanel panel would be wide enough to accommodate the widest control.
margin
In the SackPane! example, there is an obvious problem in the current situation. A well-designed window does not just contain elements - it should also enclose some extra space between them. To add extra space and make the buttons in the StaokPanel panel example less tight, set the margins for the controls.
When setting margins, you can set the same width for all sides, as shown below:
<Button Margin="5">button3</Button>
Accordingly, different margins can be set for each side of the control in the order of left, top, right, and bottom:
<Button Margin="5,10,5,10">Button 3</Button>
In the code, use the Thickness structure to set the margins:
btn. Margin = new Thickness (5) ;
In order to get the correct margins for a control, some artistry is required, as it takes into account the interaction of the margin resets of neighboring controls. For example, if two buttons are stacked together, and the bottom margin of the highest button is set to 5, and the top margin of the button below it is also set to 5, then there is 10 units of space between the two buttons.
Ideally, it would be possible to maintain different margin settings as consistently as possible and avoid setting different values for different sides.
For example, in the StackPanel example, it would be appropriate to use the same margins for the buttons and the panel itself, as shown below:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<StackPanel Margin="5">
<Label Margin="3" HorizontalAlignment="Center">A Button Stack</Label>
<Button Margin="3" HorizontalAlignment="Left">button1</Button>
<Button Margin="3" HorizontalAlignment="Right">button2</Button>
<Button Margin="3">button3</Button>
<Button Margin="3">button4</Button>
</StackPanel>
</Window>
Size Setting
Finally, each element provides Height and Width properties to explicitly specify the element size. However, this setting is generally not a good idea. Instead, if necessary, the MaximumSize and MinimumSize properties should be used to limit the control to the correct range.
Tip:
Always think twice before setting dimensions explicitly in WPF. In good layout design, it is not necessary to set dimensions explicitly.
If you do add dimensional information, you risk creating a more unstable layout that can't adapt to changes (e.g., can't adapt to different languages and different window sizes) and may crop your content.
For example, you might decide to stretch a button in the StackPanel container so that it fits into the StackPanel, but it can't be more than 200 units wide or less than 100 units wide (by default, the minimum width of a button is initially 75 units).
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<StackPanel Margin="5">
<Label Margin="3" HorizontalAlignment="Center">A Button Stack</Label>
<Button Margin="3" MaxWidth="200" MinWidth="100">button1</Button>
<Button Margin="3" MaxWidth="200" MinWidth="100">button2</Button>
<Button Margin="3" MaxWidth="200" MinWidth="100">button3</Button>
<Button Margin="3">button4</Button>
</StackPanel>
</Window>
When StackPanel resizes buttons, there are several pieces of information to consider:
- Minimum size: The size of each button can never be smaller than the minimum size.
- Maximum size: The size of each button can never exceed the maximum size (unless an error is made so that the maximum size is smaller than the minimum size).
- Content: If the content in the button requires a larger width, the StackPanel container attempts to extend the technical button (the desired button size can be determined by examining the DesiredSized property, which returns either the minimum width or the width of the content, returning the larger of the two).
- Container size: If the minimum width is greater than the width of the StackPanel panel, part of the button will be cropped. Otherwise, buttons wider than the StackPanel panel are not allowed, even if they don't fit all the text on the surface of the button.
- Horizontal Alignment: Since the HorizontalAlignment property value of the button is set to Stretch by default, the StackPanel panel will try to enlarge the button to take up the entire width of the StackPanel panel.
Border Control
The Border control is not a layout panel, but a very user-friendly element that is often used in conjunction with layout panels. So it makes sense to introduce the Border control now before moving on to other layout panels.
The Border class is very simple. It can only contain a piece of nested content (usually a layout panel) and add a background to it or a border around it. To understand the Border control in depth, you only need to master the properties listed in the following table.
| name (of a thing) | clarification |
|---|---|
| Barckground | Use the Brush object to set the background behind everything in the border. Fixed color backgrounds can be used, as well as other more specific backgrounds. |
| BorderBush and BorderThickness | Use the Brush object to set the color of the border located at the edge of the Border object and to set the width of the border. Both properties must be set in order to display the border. |
| CornerRadius | This property gives the border elegantly rounded corners; the larger the value of ComerRadius, the more pronounced the rounding effect will be. |
| Padding | This property adds space between the border and the content inside (as opposed to the Margin property, which adds space outside the border). |
Below is a simple border with slightly rounded corners around a group of buttons contained in a StackPanel panel:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Border Margin="5" Padding="5" Background="LightYellow"
BorderBrush="SteelBlue" BorderThickness="3,3,3,5" CornerRadius="3"
VerticalAlignment="Top">
<StackPanel >
<Button Margin="3">button1</Button>
<Button Margin="3">button2</Button>
<Button Margin="3">button3</Button>
</StackPanel>
</Border>
</Window>
WrapPanel and DockPanel panels
WrapPanel Panel
The WrapPanel panel arranges controls one row or column at a time in the space available. By default, the property is set to Horizontal; the controls are arranged from left to right and then in the next row. However, you can set the property to Vertical to place elements in multiple columns.
Tip:
Similar to the StackPanel panel, the WrapPanel panel is actually used primarily to control the layout details of a small portion of the user interface, not to control the entire window layout. For example, it may be possible to use the WrapPanel panel to keep all the buttons together in a manner similar to a toolbar control.
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<WrapPanel Margin="3">
<Button VerticalAlignment="Top">Button1</Button>
<Button MinHeight="60">Button2</Button>
<Button VerticalAlignment="Bottom">Button3</Button>
<Button>Button4</Button>
<Button VerticalAlignment="Center">Button5</Button>
</WrapPanel>
</Window>
Attention:
The WrapPanel panel is the only panel that cannot be replaced by the flexible use of the Grid panel.
DockPanel Panel
The DockPanel panel is the more interesting layout option. It stretches the contained controls along an outer edge. The easiest way to understand this panel is to consider the toolbars that are located at the top of many Windows application windows. These toolbars are docked to the top of the window. Similar to the StackPanel panel, the docked elements select an aspect of their layout. For example, if you dock a button to the top of a DockPanel panel, the button is stretched to the full width of the DockPanel panel, but the desired height is set for it based on the content and the MinHfeight property. If a button is docked to the left side of a container, the height of the button will be stretched to fit the height of the container, while its width can be freely increased as needed.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800" >
<! --LastChildFill: last child element fill -- >!
<DockPanel LastChildFill="True">
<Button ="Top"> up </Button>
<Button ="Bottom"> Down</Button>
<Button ="Left"> Left</Button>
<Button ="Right"> Right</Button>
<Button>Center</Button>
</DockPanel>.
</Window>.
Case 2:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<!--
：direction of call
LastChildFill：Last child element filled
HorizontalAlignment：Horizontal Alignment
MinWidth:minimum width
-->
<DockPanel LastChildFill="True">
<Button ="Top">first (of multiple parts)-1</Button>
<Button ="Top" HorizontalAlignment="Center" MinWidth="200">first (of multiple parts)-2</Button>
<Button ="Top" HorizontalAlignment="Left" MinWidth="200">first (of multiple parts)-3</Button>
<Button ="Bottom">arrive at (a decision, conclusion etc)</Button>
<Button ="Left">unorthodox</Button>
<Button ="Right">right (-hand)</Button>
<Button>interlocutory</Button>
</DockPanel>
</Window>
Nested Layout Containers
The StackPanel, WrapPanel and DockPanel panels are rarely used in isolation. Instead, they are often used to set the layout of a portion of the user interface. For example, the DockPanel panel can be used to place different StackPanel and WrapPane! panel containers in appropriate areas of the window.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<!--
LastChildFill:Last child element filled
:direction of call
HorizontalAlignment:Horizontal Alignment
Orientation：direction of alignment (e.g. of planes)(level (of achievement etc)/perpendicular)
Margin：outer margin
Padding：inner margin
-->
<DockPanel LastChildFill="True">
<StackPanel ="Bottom" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Margin="10,10,2,10" Padding="3">OK</Button>
<Button Margin="2,10,10,10" Padding="3">Cancel</Button>
</StackPanel>
<TextBox ="Top">This is a text box</TextBox>
</DockPanel>
</Window>
Tip:
If you have a dense tree of nested elements, it's likely that you won't be able to see the entire structure.Visual Studio provides a party-enabling feature that displays a tree representing individual elements and allows you to step through to the element you wish to view (or modify) by clicking on it.
This feature refers to the Document Outline window, which can be displayed by selecting the View | Other Windows | Document Outline menu item.
Grid panel
The Grid panel is the most powerful layout container in WPF. Many of the features that can be accomplished with other layout controls can be accomplished with the Grid panel, which is also an ideal tool for dividing the window into smaller areas (that can be managed with other panels). In fact, the Grid panel is so useful that when you add a new XAML document for a window in Visual Studio, the Grid tag is automatically added as a top-level container and nested within the root Window element.
The Grid panel separates elements into an invisible grid of rows and columns. While it is possible to place multiple elements in a cell (which would then overlap each other), it usually makes more sense to place only one element in each cell. Of course, an element in a Grid cell may itself be another container that organizes the set of controls it contains.
Tip:
Although the Grid panel is designed to be invisible, the Gird panel can be viewed more clearly by setting the property to true. This feature is not really an attempt to beautify the window, but rather a debugging convenience designed to help understand how the Grid panel divides itself into smaller areas. This feature is very important because it allows you to control exactly how the Grid panel chooses column widths and row heights.
Two steps are required to create a layout based on the Crd panel. First, select the rows and columns you wish to use for the anomaly. Then, specify the proper rows and columns for each contained element so that the elements are placed in the proper locations.
The Grid panel creates grids and rows by using the Object Fill and Grid.Row Definiti ons collections. For example, if you determine that you need two rows and three columns, you can add the following tags:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid ShowGridLines="True">
<!--classifier for objects in rows such as words-->
<>
<RowDefinition/>
<RowDefinition/>
</>
<!--columns-->
<>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</>
</Grid>
</Window>
In order to place individual elements in a cell, you need to use the Row and Columm additional properties. The value of both properties is an index number starting from 0. For example, the following markup shows how to create a Grid panel and fill some of its cells with buttons.
An exception exists here. If the Grid Row property is not specified, the Grid panel assumes that the value of this property is 0. The same is true for the Column property. Therefore, these two properties can be left unspecified when placing an element in the first cell of the Grid panel.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid ShowGridLines="True">
<!--classifier for objects in rows such as words-->
<>
<RowDefinition/>
<RowDefinition/>
</>
<!--columns-->
<>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</>
<Button ="0" ="0">button1-1</Button>
<Button ="0" ="1">button1-2</Button>
<Button ="1" ="1">button2-2</Button>
<Button ="1" ="2">button2-3</Button>
</Grid>
</Window>
Adjusting rows and columns
The Grid panel supports the following three ways to set the size:
-
Absolute sizing approach: Sizing is done accurately using device-independent units. This is the most useless strategy because it is not flexible enough to adapt to changes in content size and container size, and it is difficult to handle localization.
-
Automatic sizing method: Each row and column is sized just right. This is the most useful way to set the size.
-
Proportionally set the size method. Splits the space proportionally into a set of rows and columns. This is a standard setting for all rows and columns.
The sizing method can be determined by setting the Width property of the ColumnDefinition object or the Height property of the RowDefinition object to a numeric value. For example, the following code shows how to set the absolute width of 100 device-independent units.
<ColumnDefinition Width="100"></ColumnDefinition>
In order to use the automatic size setting method, the Auto value can be used:
<ColumnDefinition Width="Auto"></ColumnDefinition>
Finally, the * symbol is required in order to use the proportional sizing method:
<ColumnDefinition Width="*"></ColumnDefinition>
If you wish to split the remaining space unevenly, you can specify weights, which must be placed before the asterisk. For example, if two rows are proportionally sized and you want the height of the first row to be half the height of the second row, the following setting can be used to distribute the remaining space:
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid ShowGridLines="True">
<!--classifier for objects in rows such as words-->
<>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</>
<!--
HorizontalAlignment:Horizontal Alignment
Orientation:direction of alignment (e.g. of planes)
Margin：outer margin
-->
<TextBox Margin="10" ="0">This is a text box</TextBox>
<StackPanel ="1" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Margin="10,10,2,10">OK</Button>
<Button Margin="2,10,10,10">Cancel</Button>
</StackPanel>
</Grid>
</Window>
Spanning Rows and Columns
You have already seen how to place elements in cells using the Row and Calum additional properties. There are two other additional properties that can be used to make elements span multiple cells, RowSpan and ColurmSpan. These properties are set using the number of rows and columns that the element will occupy.
For example, the button below will take up all the space between the first and second cell in the first row:
<Button ="0" ="0" ="2"> spanning lines </Button>
The following code stretches the button so that it occupies all 4 cells by spanning two columns and two rows:
<Button ="0" ="0" ="2" ="2"> spanning rows and columns</Button>
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid UseLayoutRounding="True" >
<>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</>
<>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</>
<TextBox Margin="10" ="0" ="0" ="3">
This is a text box
</TextBox>
<Button Margin="10,10,2,10" Padding="3" ="1" ="1">OK</Button>
<Button Margin="2,10,10,10" Padding="3" ="1" ="2">Cancel</Button>
</Grid>
</Window>
splitter window
Every Windows user has seen the splitter bar, a draggable splitter that separates one part of a window from another.
For example, when using Windows Explorer, you will see a series of artifacts (on the left) and a series of files (on the right), and you can drag the divider bar between them to determine how much of the window each section occupies.
Understanding how to use the GridSplitter class to get the desired results requires some experience. Here are a few guidelines:
- GrdSpliter objects must be placed in Grid cells. They can be placed in a cell with content that is already there, but then you have to adjust the margin settings so that they don't overlap each other. A better approach is to reserve a column or row specifically for the Gridspliter object and set the value of the Height or Width property of the reserved row or column to Auto.
- The Gridspliter object always changes the size of an entire row or column (rather than changing the size of an individual cell). For the appearance and behavior of the Cridspliter object to be consistent, you need to stretch the Gridsplitter object so that it traverses the entire row or column, rather than confining it to cells. To do this, use the RowSpan or ColumnSpan properties described earlier.
- Initially, GridSpliter objects are small and not easily visible. To make it more usable, you need to set a minimum size for it. For vertical splitter bars, you need to set the VericalAlignment property to stretch (so that the splitter bar fills the entire height of the area) and set Width to a fixed value (e.g. 10 device-independent units). For horizontal splitter bars, you need to set the HorizontalAlignmeat property to stretch and set the Height property to a fixed value.
- Gridspliter alignment also determines whether the splitter bar is horizontal (for changing the size of rows) or vertical (for changing the size of columns). For horizontal splitter bars, you need to set the VerticalAlignment property to Center (which is also the default value) to indicate that dragging the splitter bar changes the dimensions of the top and bottom rows. For vertical splitter bars, the HorizontalAlignment property needs to be set to Center to change the size of the columns on either side of the splitter bar.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid UseLayoutRounding="True" >
<!--line setup-->
<>
<RowDefinition/>
<RowDefinition/>
</>
<!--columns-->
<>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="50"/>
</>
<!--buttons-->
<Button ="0" ="0" Margin="3">left-1</Button>
<Button ="0" ="2" Margin="3">right-1</Button>
<Button ="1" ="0" Margin="3">left-2</Button>
<Button ="1" ="2" Margin="3">right-1</Button>
<!--dividing line-->
<!--ShowsPreview:Whether to show preview-->
<GridSplitter ="0" ="1" ="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>
</Window>
The above markup also contains an additional detail. When declaring the GridSplitter object, the ShowsPreview property is set to false . Therefore, when dragging the splitter line from one side to the other, it changes the size of the columns immediately. But if the ShowsPreview property is set to true, when dragging the splitter bar you will see a gray shadow following the mouse pointer to show where the split will be made. And the size of the column does not change until the mouse button is released. If the GridSplitter object gets the focus, you can use the arrows to change the size accordingly.
Adjust the DragIncrement property if you want the splitter bar to move by a larger margin (e.g., 10 units at a time).
Tip:
It is possible to change the way the GridSplitter object is filled so that it is not just a gray rectangle with a shadow. The trick is to apply the fill using the Background property, which accepts simple colors or more complex brushes.
Grid panels typically contain multiple GridSpliter objects. However, it is possible to nest another Grid panel within a Grid panel; and, if you do nest Grid panels within Grid panels, each Grid panel can have its own GridSplitter object. This makes it possible to create windows that are split into two parts (e.g., a left pane and a right pane), and then to further split these areas (e.g., the right pane) into more parts (e.g., resizable top and bottom parts).
Case 2:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid UseLayoutRounding="True" >
<!--columns:3columns-->
<>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="50"/>
</>
<!--left sideGrid-->
<Grid ="0">
<!--line setup：2classifier for objects in rows such as words-->
<>
<RowDefinition/>
<RowDefinition/>
</>
<Button Margin="3" ="0">Top Left</Button>
<Button Margin="3" ="1">Bottom Left</Button>
</Grid>
<!--dividing line-->
<!--ShowsPreview:Whether to show preview-->
<GridSplitter ="1" ="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
<!--right sideGrid-->
<Grid ="2">
<!--line setup：3classifier for objects in rows such as words-->
<>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</>
<Button Margin="3" ="0">Top Right</Button>
<Button Margin="3" ="2">Bottom Right</Button>
<GridSplitter ="1" Height="3" VerticalAlignment="Center" HorizontalAlignment="Stretch" ShowsPreview="False"></GridSplitter>
</Grid>
</Grid>
</Window>
Shared Size Groups
As you saw earlier, the Grid panel contains a collection of rows and columns that can be explicitly sized proportionally or based on the dimensions of their child elements. There is another way to determine the size of a row or column - matching the size of other rows or columns. This is achieved through a feature called "Shared size groups" (Shared size groups).
The goal of shared size groups is to maintain consistency between separate parts of the user interface. For example, it may be desirable to change the size of one column to fit its contents and change the size of another column to match the changed size of the previous column. However, the real advantage of shared size groups is that the independent Grid controls have the same proportions.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800" >
<Grid ="True" Margin="3">
<! --Set rows: 3 rows-->
<>
<RowDefinition/>
<RowDefinition Height="auto"/> <> <RowDefinition Height="auto" />
<RowDefinition/>; <RowDefinition
</>
<! --AboveGrid-> <Grid Margin="auto"/> </>!
<Grid Margin="3" Background="LightYellow" ShowGridLines="True">
<! --Set Columns: 3-->!
<! --SharedSizeGroup: shared size group -- >; <!
< >
<ColumnDefinition Width="auto" SharedSizeGroup="TextLabel"/>; <>!
<ColumnDefinition Width="auto"/> <> <ColumnDefinition Width="auto" />
<ColumnDefinition/>
</>
<Label Margin="5" = "0"> This is a long text </Label>
<Label Margin="5" = "1">Other text</Label>
<TextBox Margin="5" ="2">This is a text box</TextBox>
</Grid>
<! --Intermediate Label-->!
<Label ="1"> This is the middle label </Label>
<! --Below Grid-->
<Grid ="2" Margin="3" Background="LightCoral" ShowGridLines="True">
<! --Set Columns: 2 columns -- >!
<! --SharedSizeGroup: shared size group -- >; <!
< >
<ColumnDefinition Width="auto" SharedSizeGroup="TextLabel"/>; <>!
<ColumnDefinition/> </> <ColumnDefinition Width="auto
</>
<Label Margin="5" = "0"> Short </Label>
<TextBox Margin="5" ="1"> This is a text box</TextBox>
</Grid>
</Grid>
</Window>.
UnitformGrid Panel
There is one type of grid that does not follow all the principles discussed earlier - the UniformGrid panel. Unlike Grid panels, UaifommCrid panels do not require (or even support) pre-defined columns and rows. Instead, its size is set by simply setting the Rows and Colurs properties. Each cell always has the same size because the available space is divided equally. Finally, the elements are placed in the appropriate cells according to the defined order. there are no Row and Column additional properties in the UniformGrid panel, and there are no blank cells.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<!--
Rows:row
Columns：columns
-->
<UniformGrid Rows="2" Columns="2">
<Button>Top Left</Button>
<Button>Top Right</Button>
<Button>Buttom Left</Button>
<Button>Buttom Right</Button>
</UniformGrid>
</Window>
Canvas panel
The Canvas panel allows the use of precise coordinates for placing meta-cases, which is not a good choice if designing data-driven rich forms and standard dialogs; however, if you need to build something else that is different (e.g., creating a drawing surface for a graphical tool), the Canvas panel can be a useful tool.The Canvas panel is also the lightest-weight layout container. This is because Canvas panels do not contain any complex layout logic to change the preferred dimensions of their child elements; Canvas panels simply place their child elements in the specified locations and their child elements have the exact dimensions they are intended to have.
In order to position the element in the Canvas panel, you need to set the and Canvas,Top additional properties. property sets the number of units between the left side of the element and the left side of the Canvas panel, and the property sets the number of units between the top edge of the child element and the top edge of the Canvas panel. Again, these values are set in device-independent units, which are exactly equal to the usual pixels when the system DPI is set to 96 dpi.
Attention:
In addition, the distance between the element and the right edge of the Canvas panel can be determined using the property instead of the attribute; the distance between the element and the bottom edge of the Canvas panel can be determined using the property instead of the attribute. You cannot use the and Canvas.Left properties at the same time, nor can you use the and properties at the same time.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<!--
: left margin
: upper margin
Width: height
Height: high degree
-->
<Canvas>
<Button ="10" ="10">(10,10)</Button>
<Button ="120" ="30">(120,30)</Button>
<Button ="60" ="80" Width="50" Height="50">(60,80)</Button>
<Button ="70" ="120" Width="100" Height="50">(70,120)</Button>
</Canvas>
</Window>
Z-axis coordinates
If there are multiple overlapping elements in the Canvas panel, you can control how they are cascaded by setting the Canvas ZIndex additional property.
All elements added usually have the same Zlndex value - 0. If the elements have the same ZIndex value, they are displayed in the order in which they appear in the collection, which depends on the order of the elements as defined in the XAMIL markup.
lnkCanvas element
WPF also provides the InkCanvas element, which is similar to the Canvas panel in some ways (and completely different in others). Like the Canvas panel, the InkCanvas element defines four additional attributes (Top, Left, Bottom, and Righn) that can be applied to child elements to position them according to their coordinates. However, the basics are very different - at best, the InkCanvas class is not derived from the Canvas class, nor even from the Pane! base class, but directly from the FrameworkElement class.
The primary purpose of the InkCanvas element is for receiving stylus input. A stylus is a pen-like input device used in tablet PCs, however, the InkCanvas element also works with the mouse, just like a stylus. Thus, the user can use the mouse to draw lines on the InkCanvas element, or to select and manipulate elements in the InkCanvas.
The InkCanvas element actually contains two collections of child content. One is the familiar Children collection, which holds arbitrary elements, just like a Canvas panel. Each child element can be positioned according to the Top, Lef, Bottom, and Right properties. The other is the Strokes collection, which holds objects that represent the graphical input drawn by the user on the InkCanvas. element. Each line or curve drawn by the user becomes a separate Stroke object. Thanks to these two collections, you can use InkCanvas to let users add annotations to content stored in the Children collection using the strokes stored in the Strokes collection.
Depending on the value set for the EditingMode property, the InkCanvas element can be used in very different ways. The following table lists all the options:
| name (of a thing) | clarification |
|---|---|
| Ink | The InkCanvas element allows the user to draw annotations, which is the default mode. Strokes are drawn when the user draws with the mouse or stylus. |
| GestureOnly | The InkCanvas element does not allow the user to draw stroke annotations, but focuses on specific pre-defined poses (e.g. dragging the stylus in a certain direction or scribbling content) - the full list of recognized poses is given by the . Gesture enumeration. |
| InkAndGesture | The InkCanvas element allows the user to draw stroke annotations and also recognizes pre-defined poses. |
| EraseByStroke | When a stroke is clicked, the InkCanvas element erases the stroke. If the user is using a stylus, the bottom end of the stylus can be used to switch to this mode (the current editing mode can be determined using the read-only ActiveEditingMode property, or the operating mode used by the bottom end of the stylus can be changed by changing the EditingModelinverted property) |
| EraseByPoint | When a stroke is clicked, the InkCanvas element erases the clicked portion of the stroke (a point on the stroke) |
| Select | The InkCanvas panel allows the user to select elements saved in the Children collection. To select an element, the user must click on it or drag the Lasso to select it. Once an element is selected, it can be moved, resized, or deleted! |
| None | The InkCanvas element ignores mouse and stylus input. |
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<InkCanvas Name="inkCanvas" Background="LightYellow" EditingMode="Ink">
</InkCanvas>
</Window>
The inkCanvas element raises a variety of events. The ActiveEditingModeCbanged event is raised when the editing mode is changed, the Gesture event is raised when a pose is deleted in GestureOnly or InkAndGesture modes, the SrokeColleoted event is raised when a stroke is drawn, and the StokeErasing event and StrokeErased event are raised when a stroke is erased. SrokeColleoted event is raised when a stroke is drawn, StokeErasing and StrokeErased events are raised when a stroke is erased, and SelectionChanging and SelectionChanged events are raised when an element is selected or changed in Select mode, SelectionChanging event, SelectionChanged event, SelectionMoving event, SelectionMoved event, SelectionResizing event and SelectionResized event are raised when an element is selected or changed in Select mode. The events whose names end with "ing" indicate that an action is about to occur, but can be canceled by setting the Cancel property of the EventATgs object.
In Select mode, the InkCanvas element provides a powerful design interface for dragging and manipulating content. The following figure shows a button control in an InkCanvas element. The figure on the left shows the button selected, while the figure on the right shows the button selected and its position and size changed.
Case 2:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<InkCanvas Name="inkCanvas" Background="LightYellow" EditingMode="Select">
<Button ="20" ="50">hello</Button>
</InkCanvas>
</Window>
Layout Example
columns
Layout containers (such as Grid panels) make it very easy to create entire layout structures for windows. An example is the window and settings shown in the figure below. The window arranges the components - labels, text boxes, and buttons - in a tabular structure.
Case 1:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid Margin="3,3,10,3" ShowGridLines="False">
<!--line setup-->
<>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</>
<!--columns-->
<>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</>
<Label ="0" ="0" Margin="3" VerticalAlignment="Center">Home:</Label>
<TextBox ="0" ="1" Margin="3" Height="auto" VerticalAlignment="Center">c:\</TextBox>
<Button ="0" ="2" Margin="3" Padding="2">Browser</Button>
<Label ="1" ="0" Margin="3" VerticalAlignment="Center">Network:</Label>
<TextBox ="1" ="1" Margin="3" Height="auto" VerticalAlignment="Center">e:\work</TextBox>
<Button ="1" ="2" Margin="3" Padding="2">Browser</Button>
<Label ="2" ="0" Margin="3" VerticalAlignment="Center">Web:</Label>
<TextBox ="2" ="1" Margin="3" Height="auto" VerticalAlignment="Center">c:\</TextBox>
<Button ="2" ="2" Margin="3" Padding="2">Browser</Button>
<Label ="3" ="0" Margin="3" VerticalAlignment="Center">Secondary:</Label>
<TextBox ="3" ="1" Margin="3" Height="auto" VerticalAlignment="Center">c:\</TextBox>
<Button ="3" ="2" Margin="3" Padding="2">Browser</Button>
</Grid>
</Window>
dynamic content
In the following example, the user interface has a choice between short text and long text. When long text is used, the button containing the text automatically changes its size, and the rest of the content is repositioned accordingly. And because the resized buttons share the same layout container, the entire user interface is resized. The end result is that all buttons remain the same size - the size of the largest button.
Case 1:
xaml code:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid>
<!--line setup-->
<>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</>
<!--columns-->
<>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</>
<StackPanel ="0" ="0">
<Button x:Name="cmdPrev" Margin="10,10,10,3">Prev</Button>
<Button x:Name="cmdNext" Margin="10,3,10,3">Next</Button>
<CheckBox x:Name="chkLong" Margin="10,10,10,10" Unchecked="chkLong_Unchecked" Checked="chkLong_Checked" >Show Long Text</CheckBox>
</StackPanel>
<TextBox ="0" ="1" ="2" Margin="0,10,10,10" TextWrapping="WrapWithOverflow">
Computer viruses are artificially created programs that are destructive, infectious, and latent, causing damage to computer information or systems. It does not exist independently, but is hidden within other executable programs. After being infected with a virus in a computer, it can affect the running speed of the machine, and in severe cases, it can cause system crashes and damage; Therefore, viruses cause significant losses to users, and typically, these destructive programs are referred to as computer viruses
</TextBox>
<Button ="1" ="0" Name="cmdClose" Margin="10,3,10,10">Close</Button>
</Grid>
</Window>
c# code.
using System;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
namespace WpfApp1
{
/// <summary>
/// interactive logic
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void chkLong_Checked(object sender, RoutedEventArgs e)
{
= "<--Go to the previous Window";
= "Go to Next Window-->";
}
private void chkLong_Unchecked(object sender, RoutedEventArgs e)
{
= "Prev";
= "Next";
}
}
}
Combined User Interface
Many layout containers (such as StackPanel panels, DockPanc! panels, and WrapPanel panels) can be used to arrange content into the available window space in a very decent and flexible way. The advantage of this approach is that it allows the creation of truly composite interfaces. In other words, different panels can be inserted in the right part of the user interface that you want to display, while leaving the rest of the user interface intact. The entire application itself can change the interface accordingly, similar to a Web portal.
The following figure shows a combined user interface with several separate panels placed in a single WrapPanel panel. The user can choose which of these panels to display by using the checkboxes at the top of the window.
View Code:
<Window x:Class="WpfApp1.Window1"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Window1" Height="450" Width="700">
<Grid>
<>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</>
<StackPanel ="0" Margin="3" Background="LightYellow" Orientation="Horizontal">
<CheckBox Name="chb1" IsChecked="True" Click="CheckBox_Click">Panel1</CheckBox>
<CheckBox Name="chb2" IsChecked="True" Click="CheckBox_Click">Panel2</CheckBox>
<CheckBox Name="chb3" IsChecked="True" Click="CheckBox_Click">Panel3</CheckBox>
<CheckBox Name="chb4" IsChecked="True" Click="CheckBox_Click">Panel4</CheckBox>
</StackPanel>
<WrapPanel Name="container" ="1" Background="LightBlue">
<Grid MinWidth="200" Name="pnl1">
<>
<RowDefinition/>
<RowDefinition/>
</>
<>
<ColumnDefinition/>
<ColumnDefinition/>
</>
<Button ="0" ="0" MinWidth="50" MinHeight="50" Margin="10">1</Button>
<Button ="0" ="1" MinWidth="50" MinHeight="50" Margin="10">2</Button>
<Button ="1" ="0" MinWidth="50" MinHeight="50" Margin="10">3</Button>
<Button ="1" ="1" MinWidth="50" MinHeight="50" Margin="10">4</Button>
</Grid>
<TabControl MinWidth="400" Name="pnl2">
<TabItem Header="Page1" VerticalAlignment="Center" HorizontalAlignment="Center">
<Label>element1</Label>
</TabItem>
<TabItem Header="Page2">
<Label>element2</Label>
</TabItem>
</TabControl>
<StackPanel Width="200" Name="pnl3">
<Label>Computer viruses are man-made，disruptive，Also infectious and latent，Programs that are destructive to computer information or systems。</Label>
<Button Width="80" Margin="5,40,5,5">Ok</Button>
<Button Width="80" Margin="5,5,5,5">Cancel</Button>
</StackPanel>
<Grid MinWidth="200" Name="pnl4">
<>
<RowDefinition/>
<RowDefinition/>
</>
<>
<ColumnDefinition/>
<ColumnDefinition/>
</>
<Button ="0" ="0" MinWidth="50" MinHeight="50" Margin="10">1</Button>
<Button ="0" ="1" MinWidth="50" MinHeight="50" Margin="10">2</Button>
<Button ="1" ="0" MinWidth="50" MinHeight="50" Margin="10">3</Button>
<Button ="1" ="1" MinWidth="50" MinHeight="50" Margin="10">4</Button>
</Grid>
</WrapPanel>
</Grid>
</Window>
Backend code:
using System;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
using ;
namespace WpfApp1
{
/// <summary>
/// interactive logic
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
CheckBox chb = sender as CheckBox;
string index = (3,1);
// Called at the right placeFindNamemethodologies
FrameworkElement rootElement = ("container") as FrameworkElement;
FrameworkElement control = (rootElement, "pnl"+index) as FrameworkElement;
if (==true)
{
= ;
}
else
{
= ;
}
}
}
}
The Visibility property is part of the UIElement base class, so any content placed in a WPF window supports this property. The property can take on three values from the enumeration, as shown in the following table:
| (be) worth | clarification |
|---|---|
| Visibility | element displays properly in the window |
| Collapsed | element is not displayed and does not take up any space. |
| Hidden | element is not displayed, but space is still reserved for it. |
Summary of the chapter
This chapter describes the WPF layout model in detail and discusses how stacks, grids, and other arrangements of elements can be used to create more complex layouts using a combination of nested layout containers, which can be combined with the use of the GridSplitter object to create variable split windows. This chapter has focused on the reason for this dramatic change - the benefits of the WPF layout model in preserving, enhancing, and localizing the user interface.
Layout content is much more than that, and the next few chapters will give more examples of using layout containers to organize groupings of elements, as well as learning about several additional features that allow arranging content in a window:
- Special containers: You can use the ScrdlIViewer, Tabltem, and Expander controls to scroll content, place content in separate tabs, and collapse content. Unlike layout panels, these containers can only contain a single piece of content. However, it is easy to use these containers in combination with layout panels to achieve exactly the desired effect. Chapter 6 will experiment with these containers.
- Viewbox: Need a way to change the size of graphical content such as images and vector graphics?Viewbox is another special container that can help you solve this problem, and the Viewbox control has built-in scaling capabilities.
- Text Layout: WPF has added new tools for determining the layout of large blocks of formatted text. Floating graphics and lists can be used, and paging, splitting, and the more sophisticated and intelligent line breaks can be used to get pretty much perfect results.
homework after school
not have