WPF中StackPanel的尺寸的怪癖

article/2025/10/15 22:13:03

 

前几天写了文章:WPF中的DataGrid控件的VerticalScrollBarVisibility属性失效

今天继续补充StackPanel的特点,可以作为对上述文章的进一步解释。

在WPF中,StackPanel是十分常用的布局元素。然而,该元素和很多其它元素不同,当其内部元素需要的尺寸较大时(超出StackPanel父元素)的尺寸时,如果没有明确限制StackPanel元素的MaxWidth/MaxHeight或者直接赋值Width/Height,那么StackPanel的尺寸会超出父元素的尺寸。

以下用一个实例来证明:

Xaml代码:

<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp19"xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"x:Class="WpfApp19.MainWindow"mc:Ignorable="d"Title="MainWindow" Height="600" Width="800" x:Name="this" Loaded="this_Loaded" ><Grid><Grid.RowDefinitions><RowDefinition  Name="row0"/><RowDefinition Name="row1"/></Grid.RowDefinitions><DockPanel><TextBox DockPanel.Dock="Top" Background="AliceBlue" Height="200" VerticalContentAlignment="Top" Margin="20,10" Name="tBox"/><Button Grid.Column="0" Content="增加2行数据" Margin="20,0,20,5" Click="AddData_Click" Height="54.5" VerticalAlignment="Bottom" /></DockPanel><StackPanel Grid.Row="1" Margin="20" Name="stackPanel"><DataGrid  ItemsSource="{Binding Students, ElementName=this}"  VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False"><DataGrid.Columns><DataGridTextColumn Width="1*" Header="Name" Binding="{Binding Name}" /><DataGridTextColumn Width="1*" Header="Hobby" Binding="{Binding Hobby}"/><DataGridTextColumn Width="1*" Header="Sex" Binding="{Binding Sex}"/></DataGrid.Columns></DataGrid></StackPanel></Grid>
</Window>

C#代码:

//Stu是数据类   public class Stu:INotifyPropertyChanged{private string _name;public string Name{get{return _name;}set{if(_name!=value){_name = value;PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name"));}}}private string _hobby;public string Hobby{get{return _hobby;}set{if (_hobby != value){_hobby = value;PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Hobby"));}}}private string _sex="Male";public string Sex{get{return _sex;}set{if (_sex != value){_sex = value;PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Sex"));}}}public event PropertyChangedEventHandler PropertyChanged;}/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}public ObservableCollection<Stu> Students { get; } = new ObservableCollection<Stu>();private void ShowHeightData(){int row1h = (int)row1.ActualHeight;int stackheight = (int)stackPanel.ActualHeight;int gridHeight = (int)grid.ActualHeight;int count = Students.Count;string newHeightString = $"data rows={count},row1 Height={(int)row1h},stackPanel Height={(int)stackheight},datagrid height={gridHeight}";if (string.IsNullOrWhiteSpace(HeightDataString)){HeightDataString = newHeightString;}else{HeightDataString = HeightDataString + "\n" + newHeightString;}tBox.Text = HeightDataString;}private string HeightDataString = "";private async void AddData_Click(object sender, RoutedEventArgs e){var stu1 = new Stu(){Name = "zhangsan",Hobby = "football"};for (int i = 0; i < 2; i++){Students.Add(stu1);}await DoWorkAsync();  //这个方法中什么都不做,仅仅等待UI重新排列与显示。要等显示后再测量height数据ShowHeightData();     //测量height,并显示出来}private async Task DoWorkAsync(){await Task.Run(() =>{Thread.Sleep(50);});}private void this_Loaded(object sender, RoutedEventArgs e){ShowHeightData();}}

上面的代码仅仅是在一个StackPanel中方式DataGrid,并添加一个按钮和一个文本框。没点击一次按钮,就会向DataGrid中添加两行数据,同时测量StackPanel和DataGrid的高度。

根据测试,发现:

(1)当添加的数据数量较少(没有占满屏幕控件)的时候,StackPanel的高度一直不变,即与父元素的高度的一样的。因此,StackPanel的大小在默认情况下是正好充满父元素的内部空间的。

(2)当添加的数据梁较少(超出屏幕显示量)的时候,stackPanel的高度继续增加,超过了父元素(Grid的第二行)的尺寸。也就是说,子元素StackPanel的实际尺寸超出了父元素的实际尺寸,但超出部分是不显示出来的。对于DataGrid控件,虽然设置了VerticalScrollBarVisibility="Auto",但始终显示不出来滑动条。

(3)当程序运行过程中改变窗口大小(拉伸窗口边框的方式)后,再添加数据发现row1 Height也会改变,即Grid的行高自适应窗口大小进行调整了。

(4)这个例子中的StackPanel中仅包含一个元素,在测试过程中,包含了多个元素,结论都是一样的:内部元素占据空间较大时,StackPanel的尺寸会超过父元素的尺寸;DataGrid的竖向滚动条无法显示出来。

(5)那既然StackPanel是这样的,那DockPanel如何呢?直接把StackPanel改成DockPanel,发现DockPanel的尺寸始终与父元素一样大,始终不会超过父元素。当添加较多数据时,DataGrid控件的滚动条就显示了出来了,一点问题都没有。(在StackPanel外层在用ScrollViewer包裹下?)

 

 

 

 


http://chatgpt.dhexx.cn/article/eig2CDwo.shtml

相关文章

StackPanel

原文链接&#xff1a;http://www.cnblogs.com/Jennifer/articles/1987757.html Canvas、StackPanel、WrapPanel、DockPanel和Grid是WPF中主要的5种内建面板&#xff0c;这些面板类都位于System.Windows.Controls命名空间下。 StackPanel是一个受欢迎的面板&#xff0c;因为它方…

WPF中的StackPanel、WrapPanel、DockPanel

一、StackPanel StackPanel是以堆叠的方式显示其中的控件 1、可以使用Orientation属性更改堆叠的顺序 Orientation"Vertical" 默认&#xff0c;由上到下显示各控件。控件在未定义的前提下&#xff0c;宽度为StackPanel的宽度&#xff0c;高度自动适应控件中内容的高…

WPF布局控件之StackPanel

StackPanel Stack&#xff0c;英文意思是堆栈&#xff0c;StackPanel&#xff0c;意思是堆栈式布局&#xff0c;相当于把控件给堆起来。如果不设置StackPanel中控件的宽高&#xff0c;那么其中控件的宽高是默认和StackPanel一样的&#xff0c;如果设置控件宽高&#xff0c;那么…

WPF-StackPanel面板

StackPanel Orientation属性 Orientation属性决定SatckPanel中元素的排列方向&#xff0c;默认为垂直排列 Orientation“Vertical” <Window x:Class"StackPanel.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:…

WPF之路——StackPanel布局(堆栈面板)

StackPanel是一个受欢迎的面板&#xff0c;因为它方便好用&#xff0c;它会顺序对它的子元素进行排列。它是少数几个没有定义任何附加属性的面板之一。由于没有附加属性来排列子元素&#xff0c;只有一种方法可以定制StackPanel的行为——设置Orientation属性为Horizontal或Ver…

解决StackPanel滚动条无法显示

解决StackPanel滚动条无法显示 解决方法 1.添加容器:xtraScrollableControl 2.StackPanel隐藏属性 StackPanel.AutoScroll true (设计界面StackPanel控件无法找到该属性&#xff0c;代码设置) 配个显示效果图

ITS堆栈

ITS堆栈 1. ITS堆栈 - 参考体系结构2. C-V2X 重用汽车行业定义的上层3. C-V2X – DSRC 协议栈比较4. V2X 堆栈的演变&#xff08;欧盟版&#xff09;5. 802.11 和 IEEE 1609.X 规范6. 常见的 ITS 消息7. SAE International J2735 消息&#xff1a;示例8. ETSI CAM/DENM 消息&am…

布局之WrapPanel与StackPanel

布局之WrapPanel与StackPanel 一、WrapPanel WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列&#xff0c;当长度或高度不够是就会自动调整进行换行&#xff0c;后续排序按照从上至下或从右至左的顺序进行。 Orientation——根据内容自动换行。当Horizontal选项看…

布局之StackPanel面板

应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话,还可以创建自定义的布局元素。 面…

WPF布局控件之StackPanel布局

文章目录 前言概述&#xff1a; 一、StackPanelOrientation属性演示代码如下&#xff08;水平排列&#xff09;:效果图如下代码如下&#xff08;垂直排列&#xff09;:效果图如下 Background属性演示代码如下效果如下 HorizontalAlignment属性演示代码如下&#xff08;水平靠右…

堆叠 stack

堆叠 堆叠是指将多台支持堆叠特性的交换机通过堆叠线缆连接在一起&#xff0c;从逻辑上变成一台交换设备&#xff0c;作为一个整体参与数据转发 主交换机&#xff08;Master&#xff09; 主交换机负责管理整个堆叠。堆叠系统中只有一台主交换机。备交换机&#xff08;Standby…

布局篇-StackPanel布局

StackPanel可以把内部元素在纵向或横向上紧凑排列&#xff0c;形成栈式布局 StackPanel的三个属性 属性名称数据类型可取值描述OrientationOrientation枚举 HorizontalVertical 决定内部元素是横向累积还是纵向累积HorizontalAlignmentHorizontalAlignment枚举 LeftCenterRight…

WPF 控件专题 StackPanel控件详解

1、StackPanel 介绍 将子元素排列成水平或垂直的一行&#xff0c;属于布局控件&#xff0c;通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线&#xff0c;当移除一个元素后&#xff0c;后面的元素会自动向前填充空缺。 StackPanel 中的子元素超出的部分&#xff0c…

StackPanel:栈式面板基础简述

StackPanel就是将控件按照行或列来顺序排列&#xff0c;但不会换行。 通过设置面板的Orientation属性设置了两种排列方式&#xff1a;横排&#xff08;Horizontal&#xff09;和竖排&#xff08;Vertical默认的&#xff09;。 水平排列时&#xff0c;每个元素都与面板一样高…

WPF教程二:布局之StackPanel面板

应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话,还可以创建自定义的布局元素。 面…

python实现图像自动Gamma校正

python实现图像自动Gamma校正 前言&#xff1a; 关于Gamma&#xff1a; Gamma校正是对动态范围内亮度的非线性存储/还原算法&#xff0c;即输入值进行的非线性操作&#xff0c;使输出值与输入值呈指数关系&#xff1b;从效果上来说Gamma校正调整图像的整体亮度&#xff0c;没…

图像处理算法之Gamma校正

文章目录 1 使用场景2 原理3 实现步骤4 实现5 效果 1 使用场景 当一张图片出现过亮或者过暗的时候导致图像对比度较差&#xff0c;可以使用Gamma校正来处理 2 原理 如上图所示&#xff0c;为函数 f ( I ) I γ f(I) I^γ f(I)Iγ的曲线表示&#xff1a; 当 γ < 1 γ&l…

Gamma 校正

问题&#xff1a;什么是Gamma曲线矫正&#xff1f;Gamma曲线矫正是什么意思&#xff1f; Gamma曲线是一种特殊的色调曲线&#xff0c;当Gamma值等于1的时候&#xff0c;曲线为与坐标轴成45的直线&#xff0c;这个时候表示输入和输出密度相同。高于1的Gamma值将会造成输出…

opengl高级光照之gamma校正

官方文章 gamma校正 gamma校正概念 一个渐变的效果 通过以下网站调整Gamma值可以观察到效果 色彩管理网 gamma校正 Gamma校正(Gamma Correction)的思路是在最终的颜色输出上应用监视器Gamma的倒数。回头看前面的Gamma曲线图&#xff0c;你会有一个短划线&#xff0c;它是监…

gama校正算法matlab,Gamma校正及其FPGA实现(一)

最近在做一个千兆以太网传输的项目&#xff0c;里面用到了Gama校正算法&#xff0c;本来想使用Altera 的IP核Gamma Corrector&#xff0c;但Quartus16.0把Gamma Corrector的IP核集成到了QSYS里面了&#xff0c;还得研究qsys怎么用&#xff0c;与自己本来的方案不符合&#xff0…