使用水平滚动在 ScrollView 内调整 TextBox 大小

Question

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

这是我的 xaml:

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

结果是：

它看起来像预期的那样，如果调整 window 的大小，它 expends/shrinks 很好。到目前为止一切顺利，但如果文本稍长一点会怎样？

发生这种情况：

TextBox 现在会增长以适应里面的文本 a) 因为有一个 ScrollView 允许水平滚动和 b) 导致非常难看 UI（因为右边距不可见，但滚动条是可见的，等等）

有谁知道即使文本较长（同时保留 ScrollViewer），我如何实现第一个屏幕截图的外观？

我考虑过为 TextBox 设置最大宽度，但它阻止了 TextBox 随着 window 的增长，这是不可接受的。

Answer 1

尝试在滚动查看器上设置 Padding 属性而不是 Margin，试试这个

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

Answer 2

在调整 window 大小时更改 TextBox 的 MaxWidth 属性将解决您的问题。虽然，我认为这不是一个干净的方法。

    int margin = 40; // Set your margin

    public MainPage()
    {
        this.InitializeComponent();
        InputTextBox.MaxWidth = Window.Current.Bounds.Width - margin;
        Window.Current.SizeChanged += Current_SizeChanged;
    }

    private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        var size = e.Size;
        InputTextBox.MaxWidth = size.Width - margin;
    }

Answer 3

我认为如果不限制 TextBox 的宽度，您可能会将 ScrollViewer 的 Width 或 ActualWidth 与其 ScrollableWidth 混淆, ScrollableWidth 将增长 TextBox 的宽度。限制宽度 TextBox 不能解决你的问题。

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

我想你需要的是这样的东西：

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 或其他内容。

使用水平滚动在 ScrollView 内调整 TextBox 大小

TextBox sizing inside ScrollView with horizontal scroll

c#

user-interface

uwp

uwp-xaml