滚动视图内的文本框大小与水平滚动 [英] TextBox sizing inside ScrollView with horizontal scroll

问题描述

TextBox 控件有问题.请注意 ScrollViewer，因为这会有所不同.

I have a problem with the TextBox control. Be aware of the ScrollViewer as this makes the difference.

这是我的 xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
        <TextBox HorizontalAlignment="Stretch" 
                 VerticalAlignment="Center"
                 Margin="20"
                 Text = "A short text">
        </TextBox>
    </ScrollViewer>
</Grid>

结果如下:

它看起来像预期的那样，如果调整窗口大小，它会很好地扩展/收缩.到目前为止一切顺利，但如果文本再长一点会怎样?

It looks like expected and it expends/shrinks nicely if the window is resized. So far so good, but what happens if the text is a bit longer?

发生这种情况:

TextBox 现在增长以适应其中的文本a) 因为有一个 ScrollView 允许水平滚动和b) 导致 UI 非常丑陋(因为右边距不可见，但滚动条可见.)

The TextBox now grows to fit the text inside which is a) because there is a ScrollView that allows horizontal scrolling and b) results in a really ugly UI (as the right margin isn't visible, but a scrollbar is, etc..)

有谁知道即使文本较长(同时保留 ScrollViewer)，我如何才能从第一个屏幕截图中获得外观?

Does anybody know how I could achieve the look from the first screenshot even with the longer text (while keeping the ScrollViewer)?

我想为 TextBox 设置一个最大宽度，但它阻止了 TextBox 随着窗口的增长，这是不可接受的.

I thought about setting a maximum width for the TextBox but it prevented the TextBox from growing with the window which isn't acceptable.

推荐答案

我想你可能会将 ScrollViewer 的 Width 或 ActualWidth 与它的ScrollableWidth，如果不限制TextBox的宽度，ScrollableWidth会随着TextBox的宽度增长代码>.限制 TextBox 的宽度不会解决您的问题.

I think you may confused the Width or ActualWidth of ScrollViewer with its ScrollableWidth, if you don't limit the width of TextBox, the ScrollableWidth will grow up with the width of TextBox. Limit the width of the TextBox won't solve your problem.

...右边距不可见，但滚动条是..

...the right margin isn't visible, but a scrollbar is..

我猜你需要的是这样的:

I guess what you need is something like this:

xaml 代码:

<ScrollViewer Margin="20" BorderBrush="Blue" BorderThickness="2" 
              HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" 
              VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" Height="45">
    <TextBox x:Name="tb"  HorizontalAlignment="Stretch" VerticalAlignment="Center" 
             BorderThickness="0"/>
</ScrollViewer>

您可以自定义 ScrollViewer 使其行为类似于 TextBox，例如，当获得焦点时，将显示 Border 或其他内容其他.

You can customize the ScrollViewer to make it behavior like a TextBox, for example when got focus, the Border will be shown or something others.

这篇关于滚动视图内的文本框大小与水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！