WPF tutorial three; layout wrappanel panel

WrapPanel: Surround Panel

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

orientation--automatically wraps according to content. When the value of the Orientation property is set to horizontal: The element is arranged from left to right and then wrapped from top to bottom. When the value of the Orientation property is set to vertical: The element is arranged from top to bottom, and then the line wraps 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.

1. The value of the Orientation property is set to horizontal

As shown in the next 2 figure, figure 1 is the effect of the form width of a child, figure 2 is the effect of the width of the form after pulling large

Figure 1

Figure 2

Using XAML code implementations:

1<window x:class="Wpfdemo.mainwindow"2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"4title="wrappanel Panel"height="237"Width="525"windowstartuplocation="Centerscreen">5<wrappanel orientation="Horizontal">6<button width=" -"> button 1</button>7<button width=" -"> button 2</button>8<button width=" -"> button 3</button>9<button width=" -"> button 4</button>Ten<button width=" -"> button 5</button> One<button width=" -"> button 6</button> A</WrapPanel> -</Window>

2. The value of the Orientation property is set to vertical

As shown in the next 2 figure, figure 1 is the effect of a higher form height, and Figure 2 is the effect when the height of the form is small.

Figure 1

Figure 2

Using XAML code implementations:

1<window x:class="Wpfdemo.mainwindow"2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"4title="wrappanel Panel"height="237"Width="525"windowstartuplocation="Centerscreen">5<wrappanel orientation="Vertical">6<button width=" -"> button 1</button>7<button width=" -"> button 2</button>8<button width=" -"> button 3</button>9<button width=" -"> button 4</button>Ten<button width=" -"> button 5</button> One<button width=" -"> button 6</button> A</WrapPanel> -</Window>

WPF tutorial three; layout wrappanel panel