七. DockPanel

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

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

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

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

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

  1. <Window x:Class="WpfApp1.WindowDock"
  2.  
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.  
  5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6.  
  7. Title="WindowDock" Height="300" Width="400">
  8.  
  9. <Grid>
  10.  
  11. <DockPanel Width="Auto" Height="Auto">
  12.  
  13. <Button DockPanel.Dock="Left" Content="1" />
  14.  
  15. <Button DockPanel.Dock="Top" Content="2" />
  16.  
  17. <Button DockPanel.Dock="Right" Content="3" />
  18.  
  19. <Button DockPanel.Dock="Bottom" Content="4" />
  20.  
  21. <Button HorizontalAlignment="Left" Name="btnAddByCode" Height="22" Width="65" DockPanel.Dock=" Left " Click="btnAddByCode_Click" >后台代码添加</Button>
  22.  
  23. </DockPanel>
  24.  
  25. </Grid>
  26.  
  27. </Window>

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

  1. using System;
  2.  
  3. using System.Collections.Generic;
  4.  
  5. using System.Linq;
  6.  
  7. using System.Text;
  8.  
  9. using System.Threading.Tasks;
  10.  
  11. using System.Windows;
  12.  
  13. using System.Windows.Controls;
  14.  
  15. using System.Windows.Data;
  16.  
  17. using System.Windows.Documents;
  18.  
  19. using System.Windows.Input;
  20.  
  21. using System.Windows.Media;
  22.  
  23. using System.Windows.Media.Imaging;
  24.  
  25. using System.Windows.Shapes;
  26.  
  27. namespace WpfApp1
  28.  
  29. {
  30.  
  31. /// <summary>
  32.  
  33. /// WindowDock.xaml 的交互逻辑
  34.  
  35. /// </summary>
  36.  
  37. public partial class WindowDock : Window
  38.  
  39. {
  40.  
  41. public WindowDock()
  42.  
  43. {
  44.  
  45. InitializeComponent();
  46.  
  47. }
  48.  
  49. private void btnAddByCode_Click(object sender, RoutedEventArgs e)
  50.  
  51. {
  52.  
  53. DockPanel dp = new DockPanel();
  54.  
  55. // dp.LastChildFill = true;
  56.  
  57. dp.Width = Double.NaN; //相当于在XAML中设置Width="Auto"
  58.  
  59. dp.Height = Double.NaN; //相当于在XAML中设置Height="Auto"
  60.  
  61. //把dp添加为窗体的子控件
  62.  
  63. this.Content = dp;
  64.  
  65. //添加Rectangles
  66.  
  67. Rectangle rTop = new Rectangle();
  68.  
  69. rTop.Fill = new SolidColorBrush(Colors.BlanchedAlmond);
  70.  
  71. rTop.Stroke = new SolidColorBrush(Colors.BlanchedAlmond);
  72.  
  73. rTop.Height = ;
  74.  
  75. dp.Children.Add(rTop);
  76.  
  77. rTop.SetValue(DockPanel.DockProperty, Dock.Top);
  78.  
  79. Rectangle rLeft = new Rectangle();
  80.  
  81. rLeft.Fill = new SolidColorBrush(Colors.Gray);
  82.  
  83. rLeft.Stroke = new SolidColorBrush(Colors.Gray);
  84.  
  85. rLeft.HorizontalAlignment = HorizontalAlignment.Left;
  86.  
  87. rLeft.Height = ;
  88.  
  89. rLeft.Width = ;
  90.  
  91. dp.Children.Add(rLeft);
  92.  
  93. rLeft.SetValue(DockPanel.DockProperty, Dock.Left);
  94.  
  95. Rectangle rBottom = new Rectangle();
  96.  
  97. rBottom.Fill = new SolidColorBrush(Colors.Red);
  98.  
  99. rBottom.VerticalAlignment = VerticalAlignment.Bottom;
  100.  
  101. rBottom.Height = ;
  102.  
  103. dp.Children.Add(rBottom);
  104.  
  105. rBottom.SetValue(DockPanel.DockProperty, Dock.Bottom);
  106.  
  107. }
  108.  
  109. }
  110.  
  111. }

八. ViewBox

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

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

组件常用属性:

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

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

成员名称

说明

None

内容保持其原始大小。

Fill

调整内容的大小以填充目标尺寸。 不保留纵横比。

Uniform

在保留内容原有纵横比的同时调整内容的大小,以适合目标尺寸。

UniformToFill

在保留内容原有纵横比的同时调整内容的大小,以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比,则对源内容进行剪裁以适合目标尺寸。

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

成员名称

说明

UpOnly

仅当内容小于父项时,它才会放大。 如果内容大于父项,不会执行任何缩小操作。

DownOnly

仅当内容大于父项时,它才会缩小。 如果内容小于父项,不会执行任何放大操作。

Both

内容根据 Stretch 属性进行拉伸以适合父项的大小。

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

XAML代码实现:

  1. <Window x:Class="WpfApp1.WindowViewBox"
  2.  
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.  
  5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6.  
  7. Title="WindowViewBox" Height="400" Width="500" Loaded="Window_Loaded">
  8.  
  9. <Grid>
  10.  
  11. <Grid.RowDefinitions>
  12.  
  13. <RowDefinition Height="250"/>
  14.  
  15. <RowDefinition Height="auto"/>
  16.  
  17. <RowDefinition Height="73*"/>
  18.  
  19. </Grid.RowDefinitions>
  20.  
  21. <Viewbox Stretch="Fill" Grid.Row="0" Name="viewBoxTest">
  22.  
  23. <TextBox Text="通过调查发现,被阿里打假驱逐的30家售假商家中,竟有12家转战到了京东上。" />
  24.  
  25. </Viewbox>
  26.  
  27. <WrapPanel Grid.Row="2">
  28.  
  29. <StackPanel>
  30.  
  31. <TextBlock Height="16" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="66" Text="拉伸模式:" TextWrapping="Wrap"/>
  32.  
  33. <ComboBox x:Name="cbStretch" Height="21" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="139" SelectionChanged="cbStretch_SelectionChanged"/>
  34.  
  35. </StackPanel>
  36.  
  37. <StackPanel>
  38.  
  39. <TextBlock Height="16" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="56" Text="拉伸方向:" TextWrapping="Wrap"/>
  40.  
  41. <ComboBox x:Name="cbStretchDirection" Height="21" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="139" SelectionChanged="cbStretchDirection_SelectionChanged"/>
  42.  
  43. </StackPanel>
  44.  
  45. </WrapPanel>
  46.  
  47. </Grid>
  48.  
  49. </Window>

c#代码实现:

  1. using System;
  2.  
  3. using System.Collections.Generic;
  4.  
  5. using System.Linq;
  6.  
  7. using System.Text;
  8.  
  9. using System.Threading.Tasks;
  10.  
  11. using System.Windows;
  12.  
  13. using System.Windows.Controls;
  14.  
  15. using System.Windows.Data;
  16.  
  17. using System.Windows.Documents;
  18.  
  19. using System.Windows.Input;
  20.  
  21. using System.Windows.Media;
  22.  
  23. using System.Windows.Media.Imaging;
  24.  
  25. using System.Windows.Shapes;
  26.  
  27. namespace WpfApp1
  28.  
  29. {
  30.  
  31. /// <summary>
  32.  
  33. /// WindowViewBox.xaml 的交互逻辑
  34.  
  35. /// </summary>
  36.  
  37. public partial class WindowViewBox : Window
  38.  
  39. {
  40.  
  41. //定义cbStretch与cbStretchDirection的数据源
  42.  
  43. List<StretchHelper> cbStretchList = new List<StretchHelper>();
  44.  
  45. List<StretchDirectionHelper> cbStretchDirectionList = new List<StretchDirectionHelper>();
  46.  
  47. public WindowViewBox()
  48.  
  49. {
  50.  
  51. InitializeComponent();
  52.  
  53. }
  54.  
  55. private void BindDrp()
  56.  
  57. { //填充各ComboBox内容
  58.  
  59. cbStretchList.Add(new StretchHelper() { StretchModeName = "Fill", theStretchMode = Stretch.Fill });
  60.  
  61. cbStretchList.Add(new StretchHelper() { StretchModeName = "None", theStretchMode = Stretch.None });
  62.  
  63. cbStretchList.Add(new StretchHelper() { StretchModeName = "Uniform", theStretchMode = Stretch.Uniform });
  64.  
  65. cbStretchList.Add(new StretchHelper() { StretchModeName = "UniformToFill", theStretchMode = Stretch.UniformToFill });
  66.  
  67. cbStretch.ItemsSource = cbStretchList;
  68.  
  69. cbStretch.DisplayMemberPath = "StretchModeName";
  70.  
  71. cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "DownOnly", theStretchDirection = StretchDirection.DownOnly });
  72.  
  73. cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "UpOnly", theStretchDirection = StretchDirection.UpOnly });
  74.  
  75. cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "Both", theStretchDirection = StretchDirection.Both });
  76.  
  77. cbStretchDirection.ItemsSource = cbStretchDirectionList;
  78.  
  79. cbStretchDirection.DisplayMemberPath = "StretchDirectionName";
  80.  
  81. }
  82.  
  83. private void cbStretchDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)
  84.  
  85. {
  86.  
  87. if (cbStretchDirection.SelectedItem != null)
  88.  
  89. {
  90.  
  91. viewBoxTest.StretchDirection = (cbStretchDirection.SelectedItem as StretchDirectionHelper).theStretchDirection;
  92.  
  93. }
  94.  
  95. }
  96.  
  97. private void cbStretch_SelectionChanged(object sender, SelectionChangedEventArgs e)
  98.  
  99. {
  100.  
  101. if (cbStretch.SelectedItem != null)
  102.  
  103. {
  104.  
  105. viewBoxTest.Stretch = (cbStretch.SelectedItem as StretchHelper).theStretchMode;
  106.  
  107. }
  108.  
  109. }
  110.  
  111. private void Window_Loaded(object sender, RoutedEventArgs e)
  112.  
  113. {
  114.  
  115. BindDrp();
  116.  
  117. }
  118.  
  119. }
  120.  
  121. //辅助类StretchHelper
  122.  
  123. public class StretchHelper
  124.  
  125. {
  126.  
  127. public string StretchModeName { get; set; }
  128.  
  129. public Stretch theStretchMode { get; set; }
  130.  
  131. }
  132.  
  133. //辅助类StretchDirectionHelper
  134.  
  135. public class StretchDirectionHelper
  136.  
  137. {
  138.  
  139. public string StretchDirectionName { get; set; }
  140.  
  141. public StretchDirection theStretchDirection { get; set; }
  142.  
  143. }
  144.  
  145. }

WPF入门教程系列九——布局之DockPanel与ViewBox(四)的更多相关文章

  1. WPF入门教程系列十——布局之Border与ViewBox(五)

    九. Border Border 是一个装饰的控件,此控件绘制边框及背景,在 Border 中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel 控件放置在父 Border 中.然后可 ...

  2. WPF入门教程系列六——布局介绍与Canvas(一)

    从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感 ...

  3. WPF入门教程系列八——布局之Grid与UniformGrid(三)

    五. Grid Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列. Grid和其他各个Panel比较起来,功能最多也最为复杂.要使用Grid,首先要向RowDef ...

  4. WPF入门教程系列七——布局之WrapPanel与StackPanel(二)

    三. WrapPanel WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientation— ...

  5. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  6. WPF入门教程系列(一) 创建你的第一个WPF项目

    WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...

  7. WPF入门教程系列三——Application介绍(续)

    接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...

  8. WPF入门教程系列二——Application介绍

    一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...

  9. WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

    WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...

随机推荐

  1. py2exe 打包scipy时遇到的问题

    最近写了个小程序,用PyQt5做的界面,写完之后用py2exe打包成独立的exe文件,运行正常. 后来由于需要,调用SciPy.io.loadmat,改写setup.py,打包之后运行错误,提示: T ...

  2. 响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  3. 数学工具之mathgv

    做科研时,数学必不可少,有时要看一个方程的很多特性,当然,自己了解的当然好,可要是碰到复杂的,一下子是看不出来,这个时候借助数学工具可以很好地画出来,这里介绍mathgv这个软件. 此软件是开源的,使 ...

  4. Python项目:扇贝网小组查卡助手

    扇贝网是一个非常棒的英语学习网站,大家还可以加入一些小组,一起交流学习.共同进步.但是,小组管理起来非常辛苦,尤其是在0点前踢出不打卡的成员,因此考虑利用程序来实现小组查卡自动化. 登录 操作 扇贝网 ...

  5. gulp 配置自动化前端开发

    有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣 ...

  6. Build Android Webrtc Libjingle Library On Ubuntu

    Our team is developing an app to help people solve problem face to face. We choose webrtc protocol a ...

  7. 关于H5本部缓存localStorage,sessionStorage

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  8. TCL:表格(xls)中写入数据

    intToChar.tcl # input a number : 1 to 32 , you will get a char A to Z #A-Z:1-32 proc intToChar {int} ...

  9. form表单回车提交

    当form中只有一个input[type="text"](其他的表单元素可以随意有)的输入框时候,当input[type="text"]获得焦点的时候,无论表单 ...

  10. [转]Python 中的 lambda,filter,map,reduce,apply

    1. lambda 1. 基本形式: 函数名=lambda args1,args2,...,argsn:expression与C语言中的宏定义类似 2. Code isodd = lambda x: ...