how to give scrolling in textbox?

2019-02-17 05:31发布

问题:

i have taken a textbox

         <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" />       

Now when i enter lot of text in textbox then text scrolled up automatically. I want to show a scrollbar with which user can surf to the whole text. How to do this.

回答1:

There isn't a simple solution to this problem. Additionally, if you are allowing someone to enter a large amount of text it's possible that as they add more lines you coudl reach the height limit (2048px) imposed on UIElements.

If you need users to be able to enter a large amount of text you should consider putting an Input element inside a WebBrowser control and using that for the field instead.



回答2:

You could use a simple ScrollViewer, like this:

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

    </TextBox>
</ScrollViewer>

That's in case the text is entered vertically. You could do the same for horizontal scrolling but this method is not quite reliable due to the fact that it doesn't scroll automatically with the default implementation (like I showed).

Generally, I would simply recommend overriding the template for the default control.



回答3:

Two simple steps to go for this:

  1. Create TextBox_TextInputStart event handler.
  2. assuming your scrollviewer is named as sv and textbox is named as txtbx, add the following lines in the event handler method
 this.sv.UpdateLayout();
 this.sv.ScrollToVerticalOffset(this.txtbx.ActualHeight);


回答4:

There is a little fix you can do where you create the scroll viewer, set the height to how high you would want your text box, then place a larger text box underneath. If you wanted your text box height to be 500, then you would make that the height of your scroll viewer, and set the text box to larger.

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

That's the basic idea, but it should be able to do what your looking to do. Keep in mind what Matt said though about the limitations



回答5:

Windows Phone does not have scrolling for TextBox by default, but you can modify the style to support it. See this link.



回答6:

You should bind the textbox style with this custom style

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

Here is the scrollview with textbox

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

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

sample Project project link