三. WrapPanel佈局
WrapPanel佈局面板將各個控件從左至右按照行或列的順序羅列,當長度或高度不夠是就會自動調整進行換行,後續排序按照從上至下或從右至左的順序進行。this
Orientation——根據內容自動換行。當 Horizontal選項看上去相似於Windows資源管理器的縮略圖視圖:元素是從左向右排列的,而後自上至下自動換行。Vertical 選項看上去相似於Windows資源管理器的列表視圖:元素是從上向下排列的,而後從左至右自動換行。spa
ItemHeight——全部子元素都一致的高度。每一個子元素填充高度的方式取決於它的VerticalAlignment屬性、Height屬性等。任何比ItemHeight高的元素都將被截斷。3d
ItemWidth——全部子元素都一致的寬度。每一個子元素填充高度的方式取決於它的VerticalAlignment屬性、Width屬性等。任何比ItemWidth高的元素都將被截斷。code
本次的示例,效果圖以下2圖,圖1是寬度比較小,圖2就是拉長了寬度後的結果。你們能夠在實際作出來以後,自行拉動窗體的寬度:xml
圖1blog
圖2排序
上面兩圖的XAML代碼實現:ip
<Window x:Class="WpfApp1.WindowWrap" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WindowWrap" Height="300" Width="400">
<Grid>
<WrapPanel Orientation="Horizontal">
<TextBlock Name="textBlock_CityID" Text="CityID:" />
<TextBox Name="textBox_CityID" MinWidth="100" />
<TextBlock Name="textBlock_CityName" Text="CityName:" />
<TextBox Name="textBox_CityName" MinWidth="100" />
<TextBlock Name="textBlock_ZipCode" Text="ZipCode:" />
<TextBox Name="textBox_ZipCode" MinWidth="100" />
<TextBlock Name="textBlock_ProvinceID" Text="ProvinceID:" />
<TextBox Name="textBox_ProvinceID" MinWidth="100" />
<TextBlock Name="textBlock_DateCreated" Text="DateCreated:" />
<TextBox Name="textBox_DateCreated" MinWidth="100" />
<TextBlock Name="textBlock_DateUpdated" Text="DateUpdated:" />
<TextBox Name="textBox_DateUpdated" MinWidth="100" />
</WrapPanel>
</Grid>
</Window>
C#代碼實現上圖示例:資源
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 的交互邏輯 /// </summary>
public partial class WindowWrap : Window { public WindowWrap() { InitializeComponent(); } private void btnAddByCode_Click(object sender, RoutedEventArgs e) { WrapPanel wp = new WrapPanel(); //把wp添加爲窗體的子控件
this.Content = wp; wp.Margin = new Thickness(0, 0, 0, 0); wp.Background = new SolidColorBrush(Colors.White); //遍歷增長TextBlock
TextBlock block; for (int i = 0; i <= 10; i++) { block = new TextBlock(); block.Text = "後臺代碼添加控件:" + i.ToString(); block.Margin = new Thickness(10, 10, 10, 10); block.Width = 160; block.Height = 30; wp.Children.Add(block); } } } }
四. StackPanel
StackPanel就是將控件按照行或列來順序排列,但不會換行。經過設置面板的Orientation屬性設置了兩種排列方式:橫排(Horizontal默認的)和豎排(Vertical)。縱向的StackPanel默 認每一個元素寬度與面板同樣寬,反之橫向亦然。若是包含的元素超過了面板空間,它只會截斷多出的內容。 元素的Margin屬性用於使元素之間產生必定得間隔,當元素空間大於其內容的空間時,剩餘空間將由HorizontalAlignment和 VerticalAlignment屬性來決定如何分配。
本示例要實現的效果以下2圖,圖1是橫排,圖2是豎排。
圖1
圖2
上兩圖的XAML代碼實現:
<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="400" Width="500">
<Grid>
<StackPanel Name="stackPanel" Margin="0,0,0,0" Background="White" Orientation="Vertical">
<Button Content="第一個"/>
<Button Content="第二個"/>
<Button Content="第三個"/>
<Button Content="第四個"/>
<Button Content="第五個,改變排列方式" Click="Button_Click"/>
<Button Content="後臺代碼實現" Click="Button_Click_1"/>
</StackPanel>
</Grid>
</Window>
上圖示例的C#代碼實現:
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 的交互邏輯 /// </summary>
public partial class WindowStack : Window { public WindowStack() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { stackPanel.Orientation=Orientation.Horizontal; } private void StackPanels() { StackPanel sp = new StackPanel(); //把sp添加爲窗體的子控件
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 = "後臺代碼,第一個"; sp.Children.Add(b1); //Button2
Button b2 = new Button(); b2.Content = "後臺代碼,第二個"; sp.Children.Add(b2); //Button3
Button b3 = new Button(); b3.Content = "後臺代碼,第三個"; sp.Children.Add(b3); } private void Button_Click_1(object sender, RoutedEventArgs e) { StackPanels(); } } }
注: 當把StackPanel的FlowDirection屬性設置爲RightToLeft,Orientation屬性設置爲Horizontal,StackPanel將從右向左排列元素。