如何在文本框中滚动?

时间:2011-05-06 07:37:17

标签: windows-phone-7 silverlight-4.0

我带了一个文本框

         <TextBox Height="218" HorizontalAlignment="Stretch" Margin="0,56,0,0" Name="txtBox" VerticalAlignment="Top" TextWrapping="Wrap"
             Text="" GotFocus="txtBox_GotFocus" TextChanged="txtBox_TextChanged" IsTabStop="True" 
             IsEnabled="True" IsHitTestVisible="True" VerticalScrollBarVisibility="Auto" Background="White" FontFamily="Tahoma" />       

现在,当我在文本框中输入大量文本时,文本会自动向上滚动。我想显示一个滚动条,用户可以浏览整个文本。怎么做。

6 个答案:

答案 0 :(得分:4)

您可以使用简单的ScrollViewer,如下所示:

<ScrollViewer Height="219" VerticalScrollBarVisibility="Auto">
    <TextBox  VerticalAlignment="Top" TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="textBox1" Text="TextBox" Width="460">

    </TextBox>
</ScrollViewer>

如果文本是垂直输入的话。您可以对水平滚动执行相同的操作,但是这种方法不太可靠,因为它不会使用默认实现自动滚动(就像我展示的那样)。

通常,我只是建议覆盖默认控件的模板。

答案 1 :(得分:2)

这个问题没有一个简单的解决方案。此外,如果您允许某人输入大量文本,则可能会在添加更多行时达到对UIElements施加的高度限制(2048px)。

如果您需要用户能够输入大量文本,则应考虑在Input控件中放置WebBrowser元素并将其用于字段。

答案 2 :(得分:1)

两个简单的步骤:

  
      
  1. 创建TextBox_TextInputStart事件处理程序。
  2.   
  3. 假设您的滚动查看器命名为sv且文本框命名为txtbx,请在事件处理程序方法中添加以下行
  4.   
 this.sv.UpdateLayout();
 this.sv.ScrollToVerticalOffset(this.txtbx.ActualHeight);

答案 3 :(得分:0)

您可以在创建滚动查看器时进行一些修复,将高度设置为您希望文本框的高度,然后在下方放置一个较大的文本框。如果您希望文本框高度为500,那么您可以将其设置为滚动查看器的高度,并将文本框设置为更大。

<ScrollViewer Height="500" VerticalScrollBarVisibility="Auto">
    <TextBox Height="1000" />
</ScrollViewer>

这是基本的想法,但它应该能够做你想做的事情。请记住马特所说的有关限制的内容

答案 4 :(得分:0)

默认情况下,Windows Phone没有TextBox滚动,但您可以修改样式以支持它。请参阅this link

答案 5 :(得分:0)

您应该将文本框样式与此自定义样式绑定

<Style x:Key="ScrollableTextBox"
           TargetType="TextBox">
        <Setter Property="FontFamily"
                Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize"
                Value="{StaticResource PhoneFontSizeMediumLarge}" />
        <Setter Property="Background"
                Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="Foreground"
                Value="{StaticResource PhoneTextBoxForegroundBrush}" />
        <Setter Property="BorderBrush"
                Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="SelectionBackground"
                Value="{StaticResource PhoneAccentBrush}" />
        <Setter Property="SelectionForeground"
                Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}" />
        <Setter Property="BorderThickness"
                Value="{StaticResource PhoneBorderThickness}" />
        <Setter Property="Padding"
                Value="2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                       Storyboard.TargetName="MainBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                       Storyboard.TargetName="MainBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentElement">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReadOnly">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                       Storyboard.TargetName="MainBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                       Storyboard.TargetName="ReadonlyBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                       Storyboard.TargetName="ReadonlyBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneTextBoxBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                       Storyboard.TargetName="ReadonlyBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneTextBoxBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentElement">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneTextBoxReadOnlyBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                       Storyboard.TargetName="MainBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                       Storyboard.TargetName="MainBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="MainBorder"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                Margin="{StaticResource PhoneTouchTargetOverhang}" />
                        <Border x:Name="ReadonlyBorder"
                                BorderBrush="{StaticResource PhoneDisabledBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="Transparent"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Visibility="Collapsed" />
                        <Border BorderBrush="Transparent"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="Transparent"
                                Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ScrollViewer x:Name="ContentElement"
                                          BorderThickness="0"
                                          HorizontalContentAlignment="Stretch"
                                          Margin="{StaticResource PhoneTextBoxInnerMargin}"
                                          Padding="{TemplateBinding Padding}"
                                          VerticalContentAlignment="Stretch" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这是带文本框的滚动视图

<ScrollViewer Grid.Row="1"
              VerticalScrollBarVisibility="Auto"
              HorizontalScrollBarVisibility="Disabled"
              MaxHeight="120" />

<TextBox Grid.Row="1"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         InputScope="Chat"
         Style="{StaticResource ScrollableTextBox}" />

示例项目project link