Размер TextBox внутри ScrollView с горизонтальной прокруткой

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> 

Это приводит к следующим образом:

Похоже, как ожидается, и он затрачивает/сжимается хорошо, если при изменении размера окна. Пока все хорошо, но что произойдет, если текст немного дольше?

Это происходит:

TextBox Теперь растет в соответствии с текстом, внутри которого находится а), потому что есть ScrollView, что позволяет горизонтальную прокрутку и б) результаты в очень некрасивой UI (поскольку правый край не виден, но полоса прокрутки и т. д.)

Кто-нибудь знает, как я мог бы добиться внешнего вида с первого снимка экрана даже с более длинным текстом (сохраняя ScrollViewer)?

Я думал о том, чтобы установить максимальную ширину для TextBox, но это помешало росту TextBox с недопустимым окном.

Answer 1

Я думаю, вы можете спутал Width или ActualWidth из ScrollViewer с его ScrollableWidth, если не ограничивать ширину TextBox, то ScrollableWidth вырастет с шириной TextBox. Ограничение ширины TextBox не решит вашу проблему.

... правый край не виден, а полоса прокрутки ..

Я думаю, что вам нужно что-то вроде этого:

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 или что-то другое.

Answer 2

Попробуйте установить свойство отступа на вашем ScrollViewer вместо 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 3

Измените MaxWidth свойство TextBox при изменении размеров окна позволит решить вашу проблему. Хотя, я не думаю, что это чистый способ сделать это.

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; 
    }