WPF入门教程系列九——布局之DockPanel与ViewBox（四）

梦里梦外; 2024-03-17 10:45 16阅读 0赞

**七. DockPanel**

DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板其实就是在WinForm类似于Dock属性的元 素。DockPanel会对每个子元素进行排序，并停靠在面板的一侧，多个停靠在同侧的元素则按顺序排序。

如果将 LastChildFill 属性设置为 true(默认设置)，那么无论对 DockPanel 的最后一个子元素设置的其他任何停靠值如何，该子元素都将始终填满剩余的空间。若要将子元素停靠在另一个方向，必须将 LastChildFill 属性设置为 false，还必须为最后一个子元素指定显式停靠方向。

默认情况下，面板元素并不接收焦点。要强制使面板元素接收焦点，请将 Focusable 属性设置为 true。

注意：屏幕上 DockPanel 的子元素的位置由相关子元素的 Dock 属性以及这些子元素在 DockPanel 下的相对顺序确定。因此，具有相同 Dock 属性值的一组子元素在屏幕上的位置可能不同，具体取决于这些子元素在 DockPanel 下的顺序。子元素的顺序会影响定位，因为 DockPanel 会按顺序迭代其子元素，并根据剩余空间来设置每个子元素的位置。

使用XAML代码实现如下图效果。图如下。

![691159ebbc97f7315f40dfed76c65f74.png][]

![1c1c8592433ddc69d42a16ee71ab0d22.gif][]

<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>

![7fef480aa1c1d58009326ce2efad689b.gif][]

使用C\#代码实现如下图效果。图如下。

![d225731853b2f5b6d3c594b2b7e7064d.png][]

![da2530bb277dd7bdff7490fa2d445821.gif][]

![f6845bc92136c4b8e86e5faaa3b2a9d7.gif][]

**八. ViewBox**

ViewBox这个控件通常和其他控件结合起来使用，是WPF中非常有用的控件。定义一个内容容器。ViewBox组件的作用是拉伸或延展位于其中的组件，以填满可用空间，使之有更好的布局及视觉效果。

一个 Viewbox中只能放一个控件。如果多添加了一个控件就会报错。如下图。

![9dc7434e1ee297df6113a287377960fd.png][]

组件常用属性：

Child：获取或设置一个ViewBox元素的单一子元素。

Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间。具体设置值如下：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p><strong>成员名称</strong></p> </td> 
   <td style="vertical-align:top;"> <p><strong>说明</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>None</p> </td> 
   <td style="vertical-align:top;"> <p>内容保持其原始大小。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>Fill</p> </td> 
   <td style="vertical-align:top;"> <p>调整内容的大小以填充目标尺寸。 不保留纵横比。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>Uniform</p> </td> 
   <td style="vertical-align:top;"> <p>在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>UniformToFill</p> </td> 
   <td> <p>在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p></p> </td> 
   <td style="vertical-align:top;"> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

StretchDirection：获取或设置该组件的拉伸方向以决定该组件中的内容将以何种形式被延展。具体的设置值如下。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p><strong>成员名称</strong></p> </td> 
   <td style="vertical-align:top;"> <p><strong>说明</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>UpOnly</p> </td> 
   <td style="vertical-align:top;"> <p>仅当内容小于父项时，它才会放大。 如果内容大于父项，不会执行任何缩小操作。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>DownOnly</p> </td> 
   <td style="vertical-align:top;"> <p>仅当内容大于父项时，它才会缩小。 如果内容小于父项，不会执行任何放大操作。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>Both</p> </td> 
   <td style="vertical-align:top;"> <p>内容根据&nbsp;<a href="https://msdn.microsoft.com/zh-cn/library/system.windows.controls.viewbox.stretch%28v=vs.95%29.aspx" title="Stretch" rel="nofollow">Stretch</a>&nbsp;属性进行拉伸以适合父项的大小。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p></p> </td> 
   <td style="vertical-align:top;"> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

接下来我们做个示例，你可以通过选择下拉框中的不同设置值，来查看不同的效果。效果如下图。

![1ce5d57e5d0b69465e31b77afc2e73e9.png][]

XAML代码实现：

![68efe46c87195146a96ef015c6139934.gif][]

![96fd7af1899246a06b2cae375b4d3d36.gif][]

c\#代码实现：

![87e13126662f3efdf33526c9006a17b3.gif][]

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; }
    
        } 
    
    }

[691159ebbc97f7315f40dfed76c65f74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/bca8388e50c4453ea5543d78c7127fc2.png
[1c1c8592433ddc69d42a16ee71ab0d22.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/9c757b6cc25c40249dcbe9bc142b81f0.png
[7fef480aa1c1d58009326ce2efad689b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f663510afb8840b7ada1c5ad4777ea6d.png
[d225731853b2f5b6d3c594b2b7e7064d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/db60e580531742de8b19f846d0b43a54.png
[da2530bb277dd7bdff7490fa2d445821.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/83fc2692e5164033a88a9a607b21aa3c.png
[f6845bc92136c4b8e86e5faaa3b2a9d7.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/d73958bac7e8429398e4bfde95e20116.png
[9dc7434e1ee297df6113a287377960fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/330d705d5f1d40a79c4201f3b3b01550.png
[1ce5d57e5d0b69465e31b77afc2e73e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/10f5cfde72bd458baeb6ca1a1742a6a8.png
[68efe46c87195146a96ef015c6139934.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/fb78c36790ae4a4c9c24b526365e9804.png
[96fd7af1899246a06b2cae375b4d3d36.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f9afde99c69d4a8db5498b2b1bae8673.png
[87e13126662f3efdf33526c9006a17b3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/e34467cba0ca4ba78a3bbefa8cf2d730.png