how to give scrolling in textbox?

北城余情 提交于 2019-12-01 04:45:33

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.

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.

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

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

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!