WPF Getting Started Tutorial series seven--layout of WrapPanel and StackPanel (ii)

Three. WrapPanel

The WrapPanel layout panel lists the controls from left to right in the order of rows or columns, and automatically adjusts for line breaks when the length or height is not enough, and subsequent sorting occurs from top to bottom or right to left.

orientation--automatically wraps according to content. When the horizontal option looks similar to the thumbnail view of Windows Explorer: The elements are arranged from left to right, and then wrap from top to bottom. The Vertical option looks like a list view of Windows Explorer: elements are arranged from top to bottom, and then wrapped from left to right.

itemheight--all child elements have a consistent height. The way each child element fills the height depends on its VerticalAlignment property, height property, and so on. Any element higher than ItemHeight will be truncated.

itemwidth--all child elements have a consistent width. The way each child element fills the height depends on its VerticalAlignment property, the Width property, and so on. Any element higher than Itemwidth will be truncated.

In this example, the following 2 figure, Figure 1 is a small width, figure 2 is the result of lengthening the width. You can pull the width of the form yourself after you actually do it:

Figure 1

Figure 2

The XAML code implementation of the two diagram above:

<window x:class= "Wpfapp1.windowwrap" xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation" XM lns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" title= "Windowwrap" height= "width=" > <grid&gt        ; <wrappanel orientation= "Horizontal" > <textblock name= "Textblock_cityid" text= "Cityid:"/ > <textbox name= "Textbox_cityid" minwidth= "/> <textblock name=" Tex                         Tblock_cityname "text=" CityName: "/> <textbox name=" textbox_cityname "minwidth="/> <textblock name= "Textblock_zipcode" text= "ZipCode:"/> <textbox name= "textbox_zipcod                E "minwidth="/> <textblock name= "Textblock_provinceid" text= "Provinceid:"/> <textbox name= "Textbox_provinceid" minwidth= "/> <textblock name=" TextBlock _datecreated "Text= "DateCreated:"/> <textbox name= "textbox_datecreated" minwidth= "[/>]" <textblock name= "textblock_dateupdated" text= "dateupdated:"/> <textbox name= "TextBox_DateUpdat Ed "minwidth="/> </WrapPanel> </Grid></Window>

Examples of C # code implementations:

Using system;using system.collections.generic;using system.linq;using system.text;using System.Threading.Tasks; Using system.windows;using system.windows.controls;using system.windows.data;using system.windows.documents;using System.windows.input;using system.windows.media;using system.windows.media.imaging;using System.Windows.Shapes; namespace wpfapp1{//<summary>///Windowwrap.xaml interactive logic///</summary> public partial class Win        Dowwrap:window {public windowwrap () {InitializeComponent (); private void Btnaddbycode_click (object sender, RoutedEventArgs e) {WrapPanel WP = new Wrappan            El (); Add WP as the child control of the form this.            Content = WP; Wp.            Margin = new Thickness (0, 0, 0, 0); Wp.            Background = new SolidColorBrush (colors.white);            Traverse increases TextBlock TextBlock block; for (int i = 0; I <=; i++) {block = new TextbloCK (); Block.                Text = "Background code Add Control:" + i.tostring (); Block.                Margin = new Thickness (10, 10, 10, 10); Block.                Width = 160; Block.                Height = 30; Wp.            Children.add (block); }                }    }}

four. StackPanel

StackPanel is to arrange the controls in the order of rows or columns, but not wrap them. Two permutations are arranged by setting the Orientation property of the panel: horizontal (horizontal default) and vertical (Vertical). Vertical StackPanel The default width of each element is as wide as the panel, and vice versa. If the contained element exceeds the panel space, it truncates only the extra content. The margin property of an element is used to make an interval between elements, and when the element space is greater than the space of its content, the remaining space is determined by the HorizontalAlignment and VerticalAlignment properties.

The effect of this example is to achieve the following 2 figures, Figure 1 is horizontal, and Figure 2 is a vertical row.

Figure 1

Figure 2

The XAML code implementation on the two diagram:

<window x:class= "Wpfapp1.windowstack"        xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"        Title= "Windowstack" height= "width=" >    <Grid>        <stackpanel name= "StackPanel" margin= " 0,0,0,0 "background=" white "orientation=" Vertical ">            <button content=" First "/>            <button content=" The second "/>            <button content=" third "/>            <button content=" fourth "/> <button content=            " Fifth, change the arrangement mode "click=" Button_Click "/>          <button content=" Background code implementation "click=" Button_click_1 "/>         </StackPanel>     </Grid></Window>

Examples of C # code implementations:

Using system;using system.collections.generic;using system.linq;using system.text;using System.Threading.Tasks; Using system.windows;using system.windows.controls;using system.windows.data;using system.windows.documents;using System.windows.input;using system.windows.media;using system.windows.media.imaging;using System.Windows.Shapes; namespace wpfapp1{//<summary>//Windowstack.xaml interactive logic///</summary> public partial class Wi                  Ndowstack:window {public windowstack () {InitializeComponent (); private void Button_Click (object sender, RoutedEventArgs e) {Stackpanel.orientation=orientati Mnl        Horizontal;            } private void Stackpanels () {StackPanel sp = new StackPanel (); Add the SP as a child control of the form this.            Content = SP; Sp.            Margin = new Thickness (0, 0, 0, 0); Sp.            Background = new SolidColorBrush (colors.white); Sp. Orientation = orientation.vertical;            Button1 button B1 = New button (); B1.            Content = "Backstage code, first"; Sp.             Children.add (B1);            Button2 button b2 = New button (); B2.            Content = "Backstage code, second"; Sp.             Children.add (B2);            Button3 button B3 = New button (); B3.            Content = "Backstage code, third"; Sp.         Children.add (B3);        } private void Button_click_1 (object sender, RoutedEventArgs e) {stackpanels (); }    }}

Note: When the FlowDirection property of StackPanel is set to Righttoleft,orientation property set to Horizontal,stackpanel the element is arranged from right to left.

WPF Getting Started Tutorial series seven--layout of WrapPanel and StackPanel (ii)