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.
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:
- Create
TextBox_TextInputStart
event handler.
- 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