WPF 文本框和滚动行为 [英] WPF TextBox and Scroll behavior

问题描述

我有问题.我需要在 ScrollViewer 中托管带有控件的网格，以防止文本框在 UI 处被截断或折叠为零.我还希望在用户更改窗口宽度时扩展文本框.我将窗口的内容设置为以下代码

I have a problem. I need to host grid with controls in ScrollViewer to prevent textbox from being either truncated or collapsed to zero-with at the UI. Also I want the with of textbox to be expanded when user change windows width. I'm setting Window's content to following code

<DockPanel>
    <TreeView DockPanel.Dock="Left" Width="150"/>
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Name" 
                       Margin="5" 
                       VerticalAlignment="Center"/>
            <TextBox Grid.Column="1"
                     Text="Some Name"
                     Margin="5"
                     VerticalAlignment="Center"
                     MinWidth="200"/>
        </Grid>
    </ScrollViewer>
</DockPanel>

一切正常，但是当用户在 TextBox 中键入很长的文本时，它会被展开并出现水平滚动.有什么简单的方法可以限制 TextBox 的最大宽度，并仅在用户更改窗口大小时才允许扩展.

All work fine, but when user types very long text in TextBox it is being expanded and horizontal scroll appears. Is there any easy way to limit TextBox maximum width and allow it to be expanded only when user changes window size.

推荐答案

问题在于父元素为 TextBox 提供了它认为需要的空间，当出现更多文本时，它会扩展而不是停留在初始自动尺寸.

The problem is that the parent elements are providing TextBox with as much space as it thinks it needs, and when more text is present it will expand instead of staying at the initial automatic size.

这里的一个解决方案是制作另一个自动调整大小的元素并将 TextBox.Width 绑定到它:

One solution here is to make another auto-sized element and bind the TextBox.Width to it:

<DockPanel>
    <TreeView Width="150" DockPanel.Dock="Left"/>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Margin="5" VerticalAlignment="Center" Text="Name"/>
            <Border x:Name="b" Grid.Column="1" Margin="5"/>
            <TextBox Width="{Binding ActualWidth, ElementName=b}"
                     MinWidth="200"
                     Grid.Column="1"
                     Margin="5"
                     VerticalAlignment="Center"
                     Text="Some Name"/>
        </Grid>
    </ScrollViewer>
</DockPanel>

请注意，我们设置了自动调整大小元素(边框)的 Margin 属性. 这很重要，因为如果未设置，则会出现循环:

Note that we set the Margin property of the auto-sizing element (the Border). This is important because if it's not set, there will be a loop:

1. 边框宽度自动调整为网格列宽
2. TextBox 宽度调整为 Border.ActualWidth
3. 网格列宽调整为 TextBox 宽度 + TextBox 边距
4. 边框宽度再次自动调整为网格列宽

通过将 Margin 设置为与 TextBox 相同，TextBox 的大小调整不会影响 Grid 大小.

By setting the Margin to the same as the TextBox, the resizing of the TextBox won't affect the Grid size.

这篇关于WPF 文本框和滚动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！