如何滚动带有大文本的焦点文本框

本文关键字：文本 焦点 何滚动 滚动 | 更新日期: 2023-09-27 17:55:07

我有一个包含页眉、文本框和页脚的网格。页眉和页脚根据需要占用尽可能多的空间，其余部分应完全由文本框填充。这是我到目前为止得到的： 

<Grid x:Name="LayoutRoot" Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid  x:Name="TitlePanel"  Grid.Row="0">
    <TextBlock Text="Title" />
  </Grid>
  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
    <ScrollViewer Margin="0">
      <TextBox x:Name="NoteText"
                InputScope="Text"
                AcceptsReturn="True"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                TextAlignment="Left"
                TextWrapping="Wrap"
                FontSize="24"
                BorderThickness="0">
      </TextBox>
    </ScrollViewer>
  </Grid>
  <Grid x:Name="Footer" Grid.Row="2">
    <TextBlock Text="Footer"/>
  </Grid>
</Grid>

这种设置为我提供了我想要的布局。但是，问题是，当文本框包含大量文本时，滚动不会按我想要的方式工作。

假设文本框包含的文本量是可以显示的文本数的两倍。只要文本框没有焦点，滚动就可以了。当我将焦点放在文本框上并将插入符号放在第一个位置时，我无法滚动到文本框的末尾。当我将插入符号放在最后一个位置时，我无法滚动到文本框的顶部。

我该如何解决这个问题？

如何滚动带有大文本的焦点文本框

我遇到了同样的问题。我创建了一个文本框样式，这对我有用，愿这也对您有所帮助。无需使用滚动查看器。

<phone:PhoneApplicationPage.Resources>
        <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">
            <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
        </ControlTemplate>
        <Style x:Key="AppVerticalTextBoxStyle" TargetType="TextBox">
            <Setter Property="FontFamily" Value="Cambria"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="26"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Grid Background="Transparent" >
                            <Grid>
                                <ScrollViewer x:Name="EnabledBorder" BorderBrush="Silver" BorderThickness="1" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" >
                                    <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Left" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Top"  />
                                </ScrollViewer>
                                <Border x:Name="DisabledOrReadonlyBorder" BorderThickness="{TemplateBinding BorderThickness}" Background="#FF71B68D" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="{StaticResource PhoneDisabledColor}"/>
                                    </Border.BorderBrush>
                                    <TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
                                </Border>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

从代码中删除 ScrollViewer。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
      <TextBox x:Name="NoteText"
                InputScope="Text"
                AcceptsReturn="True"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                TextAlignment="Left"
                TextWrapping="Wrap"
                FontSize="24"
                BorderThickness="0"
                Style="{StaticResource AppVerticalTextBoxStyle}" TextWrapping="Wrap">
      </TextBox>   
  </Grid>

TextBox控件中已经内置了一个非常简单的解决方案，它称为垂直滚动条可见性。

顾名思义，它会向文本框添加一个垂直滚动条。

这样就无需标记中的滚动查看器。

编辑

我做了一个非常简单的测试来证明它有效：

<TextBox Width="100"
         Height="100"
         VerticalScrollBarVisibility="Auto"
         TextWrapping="Wrap"
         Text="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" />

如果将该控件复制并粘贴到新项目中并运行它，您将看到该选项有效。

在您的特定情况下，必须有另一个选项冲突才能使其不起作用。

相关文章：