七. DockPanel

DockPanel定義一個區域，在此區域中，您可以使子元素通過描點的形式排列，這些對象位于 Children 屬性中。停靠面板其實就是在WinForm類似于Dock屬性的元 素。DockPanel會對每個子元素進行排序，并停靠在面板的一側，多個停靠在同側的元素則按順序排序。　

　 　如果將 LastChildFill 屬性設置為 true(默認設置)，那么無論對 DockPanel 的最后一個子元素設置的其他任何停靠值如何，該子元素都將始終填滿剩余的空間。若要將子元素停靠在另一個方向，必須將 LastChildFill 屬性設置為 false，還必須為最后一個子元素指定顯式停靠方向。

默認情況下，面板元素并不接收焦點。要強制使面板元素接收焦點，請將 Focusable 屬性設置為 true。

　 　注意：屏幕上 DockPanel 的子元素的位置由相關子元素的 Dock 屬性以及這些子元素在 DockPanel 下的相對順序確定。因此，具有相同 Dock 屬性值的一組子元素在屏幕上的位置可能不同，具體取決于這些子元素在 DockPanel 下的順序。子元素的順序會影響定位，因為 DockPanel 會按順序迭代其子元素，并根據剩余空間來設置每個子元素的位置。??????

?

使用XAML代碼實現如下圖效果。圖如下。

?

?

<Window x:Class="WpfApp1.WindowDock"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WindowDock" Height="300" Width="400"><Grid><DockPanel Width="Auto" Height="Auto"><Button DockPanel.Dock="Left" Content="1" /><Button DockPanel.Dock="Top" Content="2" /><Button DockPanel.Dock="Right" Content="3" /><Button DockPanel.Dock="Bottom" Content="4" /><Button  HorizontalAlignment="Left"  Name="btnAddByCode" Height="22" Width="65" DockPanel.Dock=" Left "  Click="btnAddByCode_Click" >后臺代碼添加</Button></DockPanel></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>/// WindowDock.xaml 的交互邏輯/// </summary>public partial class WindowDock : Window{public WindowDock(){InitializeComponent();}private void btnAddByCode_Click(object sender, RoutedEventArgs e){DockPanel dp = new DockPanel();//  dp.LastChildFill = true;dp.Width = Double.NaN;    //相當于在XAML中設置Width="Auto"dp.Height = Double.NaN;   //相當于在XAML中設置Height="Auto"//把dp添加為窗體的子控件this.Content = dp;//添加RectanglesRectangle rTop = new Rectangle();rTop.Fill = new SolidColorBrush(Colors.BlanchedAlmond);rTop.Stroke = new SolidColorBrush(Colors.BlanchedAlmond);rTop.Height = 30;dp.Children.Add(rTop);rTop.SetValue(DockPanel.DockProperty, Dock.Top);Rectangle rLeft = new Rectangle();rLeft.Fill = new SolidColorBrush(Colors.Gray);rLeft.Stroke = new SolidColorBrush(Colors.Gray);rLeft.HorizontalAlignment = HorizontalAlignment.Left;rLeft.Height = 30;rLeft.Width = 30;dp.Children.Add(rLeft);rLeft.SetValue(DockPanel.DockProperty, Dock.Left);Rectangle rBottom = new Rectangle();rBottom.Fill = new SolidColorBrush(Colors.Red);rBottom.VerticalAlignment = VerticalAlignment.Bottom;rBottom.Height = 30;dp.Children.Add(rBottom);rBottom.SetValue(DockPanel.DockProperty, Dock.Bottom);}}}

?

?

八. ViewBox

ViewBox這個控件通常和其他控件結合起來使用，是WPF中非常有用的控件。定義一個內容容器。ViewBox組件的作用是拉伸或延展位于其中的組件，以填滿可用空間，使之有更好的布局及視覺效果。

一個 Viewbox中只能放一個控件。如果多添加了一個控件就會報錯。如下圖。

?

組件常用屬性：

Child：獲取或設置一個ViewBox元素的單一子元素。

Stretch：獲取或設置拉伸模式以決定該組件中的內容以怎樣的形式填充該組件的已有空間。具體設置值如下：

成員名稱	說明
None	內容保持其原始大小。
Fill	調整內容的大小以填充目標尺寸。 不保留縱橫比。
Uniform	在保留內容原有縱橫比的同時調整內容的大小，以適合目標尺寸。
UniformToFill	在保留內容原有縱橫比的同時調整內容的大小，以填充目標尺寸。 如果目標矩形的縱橫比不同于源矩形的縱橫比，則對源內容進行剪裁以適合目標尺寸。
?	?

StretchDirection：獲取或設置該組件的拉伸方向以決定該組件中的內容將以何種形式被延展。具體的設置值如下。

成員名稱	說明
UpOnly	僅當內容小于父項時，它才會放大。 如果內容大于父項，不會執行任何縮小操作。
DownOnly	僅當內容大于父項時，它才會縮小。 如果內容小于父項，不會執行任何放大操作。
Both	內容根據?Stretch?屬性進行拉伸以適合父項的大小。
?	?

接下來我們做個示例，你可以通過選擇下拉框中的不同設置值，來查看不同的效果。效果如下圖。

?

XAML代碼實現：

<Window x:Class="WpfApp1.WindowViewBox"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WindowViewBox" Height="400" Width="500" Loaded="Window_Loaded"><Grid><Grid.RowDefinitions><RowDefinition Height="250"/><RowDefinition Height="auto"/><RowDefinition Height="73*"/></Grid.RowDefinitions><Viewbox Stretch="Fill" Grid.Row="0" Name="viewBoxTest"><TextBox Text="通過調查發現，被阿里打假驅逐的30家售假商家中，竟有12家轉戰到了京東上。" /></Viewbox><WrapPanel  Grid.Row="2"><StackPanel><TextBlock Height="16" HorizontalAlignment="Left"  VerticalAlignment="Bottom" Width="66" Text="拉伸模式：" TextWrapping="Wrap"/><ComboBox x:Name="cbStretch" Height="21" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="139" SelectionChanged="cbStretch_SelectionChanged"/></StackPanel><StackPanel><TextBlock Height="16" HorizontalAlignment="Right"  VerticalAlignment="Bottom" Width="56" Text="拉伸方向：" TextWrapping="Wrap"/><ComboBox x:Name="cbStretchDirection" Height="21" HorizontalAlignment="Right"  VerticalAlignment="Bottom" Width="139" SelectionChanged="cbStretchDirection_SelectionChanged"/></StackPanel></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>/// WindowViewBox.xaml 的交互邏輯/// </summary>public partial class WindowViewBox : Window{//定義cbStretch與cbStretchDirection的數據源 List<StretchHelper> cbStretchList = new List<StretchHelper>(); List<StretchDirectionHelper> cbStretchDirectionList = new List<StretchDirectionHelper>(); public WindowViewBox(){InitializeComponent();}private void BindDrp(){ //填充各ComboBox內容 cbStretchList.Add(new StretchHelper() { StretchModeName = "Fill", theStretchMode = Stretch.Fill });cbStretchList.Add(new StretchHelper() { StretchModeName = "None", theStretchMode = Stretch.None });cbStretchList.Add(new StretchHelper() { StretchModeName = "Uniform", theStretchMode = Stretch.Uniform });cbStretchList.Add(new StretchHelper() { StretchModeName = "UniformToFill", theStretchMode = Stretch.UniformToFill });cbStretch.ItemsSource = cbStretchList;cbStretch.DisplayMemberPath = "StretchModeName";cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "DownOnly", theStretchDirection = StretchDirection.DownOnly });cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "UpOnly", theStretchDirection = StretchDirection.UpOnly });cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "Both", theStretchDirection = StretchDirection.Both });cbStretchDirection.ItemsSource = cbStretchDirectionList;cbStretchDirection.DisplayMemberPath = "StretchDirectionName";}private void cbStretchDirection_SelectionChanged(object sender, SelectionChangedEventArgs e){if (cbStretchDirection.SelectedItem != null){viewBoxTest.StretchDirection = (cbStretchDirection.SelectedItem as StretchDirectionHelper).theStretchDirection;} }private void cbStretch_SelectionChanged(object sender, SelectionChangedEventArgs e){if (cbStretch.SelectedItem != null){viewBoxTest.Stretch = (cbStretch.SelectedItem as StretchHelper).theStretchMode;} }private void Window_Loaded(object sender, RoutedEventArgs e){BindDrp();}}//輔助類StretchHelper public class StretchHelper{public string StretchModeName { get; set; }public Stretch theStretchMode { get; set; }}//輔助類StretchDirectionHelper public class StretchDirectionHelper{public string StretchDirectionName { get; set; }public StretchDirection theStretchDirection { get; set; }} }

轉載于:https://www.cnblogs.com/zzw1986/p/7583516.html

總結

以上是生活随笔為你收集整理的WPF入门教程系列九——布局之DockPanel与ViewBox（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。