如何将 TextBox 控件配置为当文本不再适合一行时自动调整自身垂直大小？

Question

如何配置 TextBox 控件，使其在文本不再适合一行时自动垂直调整自身大小？

例如，在以下 XAML 中：

<DockPanel LastChildFill="True" Margin="0,0,0,0">
  <Border Name="dataGridHeader" 
    DataContext="{Binding Descriptor.Filter}"
    DockPanel.Dock="Top"                         
    BorderThickness="1"
    Style="{StaticResource ChamelionBorder}">
  <Border
    Padding="5"
    BorderThickness="1,1,0,0"                            
    BorderBrush="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=dc:NavigationPane, 
    ResourceId={x:Static dc:NavigationPaneColors.NavPaneTitleBorder}}}">
    <StackPanel Orientation="Horizontal">
      <TextBlock                                
        Name="DataGridTitle"                                                                                                
        FontSize="14"
        FontWeight="Bold"                                    
        Foreground="{DynamicResource {ComponentResourceKey 
        TypeInTargetAssembly=dc:NavigationPane, 
        ResourceId={x:Static dc:NavigationPaneColors.NavPaneTitleForeground}}}"/>
      <StackPanel Margin="5,0"  Orientation="Horizontal" 
              Visibility="{Binding IsFilterEnabled, FallbackValue=Collapsed, Mode=OneWay, Converter={StaticResource BooleanToVisibility}}"
              IsEnabled="{Binding IsFilterEnabled, FallbackValue=false}"  >                                    
          <TextBlock  />                                                                
          <TextBox    
            Name="VerticallyExpandMe"
            Padding="0, 0, 0, 0"  
            Margin="10,2,10,-1"                                                                                                                                                                                                                     
            AcceptsReturn="True"
            VerticalAlignment="Center"                                    
            Text="{Binding QueryString}"
            Foreground="{DynamicResource {ComponentResourceKey 
            TypeInTargetAssembly=dc:NavigationPane, 
            ResourceId={x:Static dc:NavigationPaneColors.NavPaneTitleForeground}}}">
          </TextBox>
        </StackPanel>                               
    </StackPanel>
  </Border>              
  </Border>
</DockPanel>

名为“VerticallyExpandMe”的 TextBox 控件需要在绑定到该控件的文本无法在一行中容纳时自动垂直扩展。当 AcceptsReturn 设置为 true 时，如果我在 TextBox 中按 Enter 键，它会垂直展开，但我希望它自动执行此操作。

Answer 1

虽然 Andre Luus 的建议基本上是正确的，但它实际上在这里不起作用，因为你的布局会破坏文本换行。我会解释原因。

从根本上来说，问题是这样的：文本换行仅在元素的宽度受到约束时才执行任何操作，但您的 TextBox 具有不受约束的宽度，因为它是水平 StackPanel 的后代。 （嗯，两个水平堆栈面板。可能更多，具体取决于您获取示例的上下文。）由于宽度不受限制，因此 TextBox 不知道何时开始换行，并且所以即使您启用了换行，它也永远不会换行。您需要做两件事：限制其宽度并启用环绕。

这是更详细的解释。

您的示例包含许多与问题无关的细节。这是我稍微删减的版本，以便更容易解释问题所在：

<StackPanel Orientation="Horizontal">
    <TextBlock Name="DataGridTitle" />
    <StackPanel
        Margin="5,0"
        Orientation="Horizontal"
        >
        <TextBlock />
        <TextBox
            Name="VerticallyExpandMe"
            Margin="10,2,10,-1"
            AcceptsReturn="True"
            VerticalAlignment="Center"
            Text="{Binding QueryString}"
            >
        </TextBox>
    </StackPanel>
</StackPanel>

因此，我删除了包含的 DockPanel 以及其中的两个嵌套 Border 元素，因为它们既不是问题的一部分，也与解决方案无关。因此，我从示例中的一对嵌套 StackPanel 元素开始。我还删除了大部分属性，因为它们中的大多数也与布局无关。

这看起来有点奇怪 - 有两个像这样的嵌套水平堆栈面板看起来多余，但如果您需要使嵌套面板在运行时可见或不可见，那么它在原始版本中实际上是有意义的。但它让我们更容易看到问题。

（空的 TextBlock 标记也很奇怪，但这与原始内容中显示的完全一样。这似乎没有做任何有用的事情。）

问题是：您的 TextBox 位于一些水平 StackPanel 元素内，这意味着它的宽度不受限制 - 您无意中告诉文本框它可以自由增长到任何宽度，无论实际可用空间有多少。

StackPanel 将始终执行在堆叠方向上不受约束的布局。因此，在布局 TextBox 时，它会将 double.PositiveInfinity 的水平尺寸传递给 TextBox。所以 TextBox 总是认为它的空间比它需要的多。此外，当 StackPanel 的子级请求比实际可用空间更多的空间时，StackPanel 就会撒谎，假装给它那么多空间，然后裁剪它。

（这是您为 StackPanel 的极端简单性付出的代价 - 它简单到了愚蠢的地步，因为它会很乐意构造实际上不适合的布局。您应该只使用 < code>StackPanel 如果您确实有无限的空间，因为您位于 ScrollViewer 内，或者您确定您的项目足够少，不会用完空间，或者如果您不关心项目在变得太大时从面板末端跑出，并且您不希望布局系统尝试做任何比简单地裁剪内容更聪明的事情。）

因此打开文本换行在这里没有帮助，因为 StackPanel 总是假装有足够的空间来容纳文本。

您需要不同的布局结构。使用堆栈面板是错误的，因为它们不会强加您需要进行文本换行的布局约束。

这是一个简单的示例，大致可以满足您的要求：

<Grid VerticalAlignment="Top">
    <DockPanel>
        <TextBlock
            x:Name="DataGridTitle"
            VerticalAlignment="Top"
            DockPanel.Dock="Left"
            />
        <TextBox
            Name="VerticallyExpandMe"
            AcceptsReturn="True"
            TextWrapping="Wrap"
            Text="{Binding QueryString}"
            >
        </TextBox>
    </DockPanel>
</Grid>

如果您创建一个全新的 WPF 应用程序并将其粘贴为主窗口的内容，您应该会发现它执行您想要的操作 - TextBox 开始时一行高，填充可用宽度，如果您输入文本，它会在以下位置增长一行当您添加更多文本时。

当然，布局行为始终对上下文敏感，因此仅将其放入现有应用程序的中间可能还不够。如果粘贴到固定大小的空间（例如作为窗口的主体）中，这将起作用，但如果将其粘贴到宽度不受限制的上下文中，则将无法正常工作。 （例如，在 ScrollViewer 内，或在水平 StackPanel 内。）

因此，如果这对您不起作用，则可能是因为您的其他地方出现了其他问题。布局 - 其他地方可能还有更多 StackPanel 元素。从您的示例来看，可能值得花一些时间思考布局中真正需要的内容并简化它 - 负边距的存在，以及似乎没有执行任何类似空 TextBlock< 之类的操作的元素/code> 通常表示布局过于复杂。布局中不必要的复杂性使得实现您想要的效果变得非常困难。

Answer 2

或者，您可以通过将 TextBlock 的 Width 绑定到父级的 ActualWidth 来约束它，例如：

<TextBlock Width="{Binding ElementName=*ParentElement*, Path=ActualWidth}" 
           Height="Auto" />

这将强制它调整其高度大小也自动。

Answer 3

使用 MaxWidth 和 TextWrapping="WrapWithOverflow"。

Answer 4

我正在使用另一种简单的方法，该方法允许我不更改文档布局。

主要思想是不要在控件开始更改之前设置宽度。对于 TextBoxes，我处理 SizeChanged 事件：

<TextBox TextWrapping="Wrap" SizeChanged="TextBox_SizeChanged" />

private void TextBox_SizeChanged(object sender, SizeChangedEventArgs e)
{
    FrameworkElement box = (FrameworkElement)sender;
    if (e.PreviousSize.Width == 0 || box.Width < e.PreviousSize.Width)
        return;
    box.Width = e.PreviousSize.Width;
}

Answer 5

您可以使用扩展 TextBlock 的此类。它会自动缩小并考虑 MaxHeight / MaxWidth：

public class TextBlockAutoShrink : TextBlock
    {
        private double _defaultMargin = 6;
        private Typeface _typeface;

        static TextBlockAutoShrink()
        {
            TextBlock.TextProperty.OverrideMetadata(typeof(TextBlockAutoShrink), new FrameworkPropertyMetadata(new PropertyChangedCallback(TextPropertyChanged)));
        }

        public TextBlockAutoShrink() : base() 
        {
            _typeface = new Typeface(this.FontFamily, this.FontStyle, this.FontWeight, this.FontStretch, this.FontFamily);
            base.DataContextChanged += new DependencyPropertyChangedEventHandler(TextBlockAutoShrink_DataContextChanged);
        }

        private static void TextPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
        {
            var t = sender as TextBlockAutoShrink;
            if (t != null)
            {
                t.FitSize();
            }
        }

        void TextBlockAutoShrink_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            FitSize();
        }

        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
        {
            FitSize();

            base.OnRenderSizeChanged(sizeInfo);
        }


        private void FitSize()
        {
            FrameworkElement parent = this.Parent as FrameworkElement;
            if (parent != null)
            {
                var targetWidthSize = this.FontSize;
                var targetHeightSize = this.FontSize;

                var maxWidth = double.IsInfinity(this.MaxWidth) ? parent.ActualWidth : this.MaxWidth;
                var maxHeight = double.IsInfinity(this.MaxHeight) ? parent.ActualHeight : this.MaxHeight;

                if (this.ActualWidth > maxWidth)
                {
                    targetWidthSize = (double)(this.FontSize * (maxWidth / (this.ActualWidth + _defaultMargin)));
                }

                if (this.ActualHeight > maxHeight)
                {
                    var ratio = maxHeight / (this.ActualHeight);

                    // Normalize due to Height miscalculation. We do it step by step repeatedly until the requested height is reached. Once the fontsize is changed, this event is re-raised
                    // And the ActualHeight is lowered a bit more until it doesnt enter the enclosing If block.
                    ratio = (1 - ratio > 0.04) ? Math.Sqrt(ratio) : ratio;

                    targetHeightSize = (double)(this.FontSize *  ratio);
                }

                this.FontSize = Math.Min(targetWidthSize, targetHeightSize);
            }
        }
    }