WPF中StackPanel的尺寸的怪癖

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jiuzaizuotian2014/article/details/81779863

 

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

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

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

以下用一个实例来证明:

Xaml代码:

<Window
        xmlns="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控件的滚动条就显示了出来了,一点问题都没有。

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页