WPF:GroupBox 动态高度 [英] WPF: GroupBox dynamic height

问题描述

我在 WPF 分组框中的停靠面板中有一个文本框和数据网格.

I have a textbox and datagrid inside of a dockpanel that is in a WPF groupbox.

<GroupBox Margin="8,142.04,1.783,230.4" Height="Auto" Header="Desired Meeting Outcomes (decisions or actions)?" MaxWidth="635" MinWidth="550" FontWeight="Bold" FontSize="13.333" BorderBrush="#FFD5DFE5" MinHeight="106" VerticalContentAlignment="Stretch">
        <DockPanel Margin="0">
            <local:TextboxControl Margin="0" d:LayoutOverrides="Height, HorizontalMargin" Width="538.217" VerticalAlignment="Top" HorizontalAlignment="Left" DockPanel.Dock="Top"/>
            <local:  Height="Auto" HorizontalAlignment="Left" MinHeight="25" MinWidth="538" DockPanel.Dock="Top"/>
        </DockPanel>
    </GroupBox>

我正在从文本框中动态地在数据网格中添加行，导致数据网格增长.但是，即使我的 groupbox 的高度设置为 Auto，它的高度也不会动态增长.我怎样才能让我的 groupbox 根据它所包含的内容的大小来增长和缩小?

I am adding rows in the datagrid dynmaically from the textbox causing the datagrid to grow. However, my groupbox's height is not growing dynamically even though its height is set to Auto. How can I get my groupbox to grow and shrink based upon the size of the contents that it holds?

推荐答案

您在所有 4 个边上都设置了边距，并使用了 VerticalAlignment of Stretch.在 Grid 中，这基本上会给你一个 GroupBox，它的大小与其父级而不是它的内容有关.移除右边和底部的边距并将 VerticalAlignment 更改为 Top.

You have margins set on all 4 sides with a VerticalAlignment of Stretch. In a Grid this will basically give you a GroupBox that sizes with its parent but not its content. Remove the margin from the right and bottom and change the VerticalAlignment to Top.

边距是 L、T、R、B 的顺序.所以将最后两个清零.Height=Auto 和 VerticalContentAlignment=Stretch 是默认值，因此您也可以摆脱它们.尽量保持 XAML 干净.

The margins are the order of L, T, R, B. So zero out the last two. Height=Auto and VerticalContentAlignment=Stretch are the defaults so you can get rid of those too. Try to keep the XAML as clean as possible.

从标记中可以清楚地看出您使用的是 Blend 或 Visual Studio 的设计器.我建议使用设计器进行预览"模式而不是编辑.虽然它变得更好了，但我发现这两种产品中设计师的布局行为非常令人沮丧.从长远来看，熟悉手动创建 XAML 会带来好处.

It's clear from the markup that you're using Blend or Visual Studio's designer. I would suggest using the designer for "preview" mode rather than editing. Although it's gotten much better I find the layout behavior of the designer in both products to be very frustrating. Getting familiar with creating XAML by hand pays dividends in the long run.

示例

根据评论，我正在添加一个示例，说明如何使用 DataGrid 使其父元素根据高度自动增长.请注意，只有 Window 本身具有固定大小.对于一个窗口，如果你想让它根据高度增长，你可以设置 SizeToContent=Height.注意你只需要在最外面的元素上设置 VerticalAlignment=Top.

As per the comments, I'm adding an example of how you would have a DataGrid that causes its parent elements to automatically grow based on height. Notice that only the Window itself has a fixed size. For a Window, if you wanted to make it grow based on height you could set SizeToContent=Height. Notice how you only need to set VerticalAlignment=Top on the outermost element.

主窗口.xaml

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="640" Height="480">
    <Grid x:Name="LayoutRoot" Background="Green" VerticalAlignment="Top">
        <Border Margin="5" BorderBrush="Yellow" BorderThickness="4">
            <GroupBox Header="Data Grid" Background="Orange">
                <DataGrid x:Name="dg" AutoGenerateColumns="True" />
            </GroupBox>
        </Border>
    </Grid>
</Window>

MainWindow.xaml.cs

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow( )
    {
        InitializeComponent( );

        var items = new ObservableCollection<DateTime>( );
        dg.ItemsSource = items;

        var timer = new DispatcherTimer( );
        timer.Interval = TimeSpan.FromSeconds( 2 );
        timer.Tick += ( s, e ) => items.Add( DateTime.Now );
        timer.Start( );
    }
}

这篇关于WPF:GroupBox 动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！