How to adjust the text in a textbox in wp7? - xaml

Question

In my app, what i want is when the text goes beyond the width of the text box, i want it to mention it somehow to the user,(either by placing ... at the end or decreasing the font size so that it fits the text box).
How can i do this?

Answer 1

There are two way to do so
First one is :
Set TextWrapping property of TextBox to Wrap, Remove Height Property of textbox and set Width Propert of TextBox To some definite size (200).
Second is :
Use following style on textbox. It enable scrolling in textbox control
<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="AppTextBoxStyle" TargetType="TextBox">
<Setter Property="FontFamily" Value="Segoe WP"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="26"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="Transparent" >
<Grid>
<ScrollViewer x:Name="EnabledBorder" BorderBrush="#e64358" BorderThickness="1" Background="{TemplateBinding Background}" Margin="0,5" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Left" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Center" />
</ScrollViewer>
<Border x:Name="DisabledOrReadonlyBorder" BorderThickness="{TemplateBinding BorderThickness}" Background="#FF71B68D" Margin="0" Visibility="Collapsed">
<Border.BorderBrush>
<SolidColorBrush Color="#e64358"/>
</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>
<TextBox Style="{StaticResource AppTextBoxStyle}" Width = "300"/>

Answer 2

You can use text ellipsis..try this..
<TextBlock Name="txtFeedTitle"
Text="{Binding Title}"
TextWrapping="Wrap"
TextTrimming="WordEllipsis"
Style="{StaticResource PhoneTextTitle3Style}"/>

Answer 3

You Could use this for assigning a particular length of string
String str="aaaaaaaaa";
textBoxName.Text = str.Substring(0, 5) + "...";
You could use TextWrapping property of textBox cintrol

Answer 4

Here the solution
<phone:PhoneApplicationPage.Resources>
<Style x:Key="AppTextBoxStyle" TargetType="TextBox">
<Setter Property="FontFamily" Value="Segoe WP"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="26"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border BorderThickness='1'
Background='#ffefefef'
BorderBrush='LightBlue'>
<TextBlock Text="{TemplateBinding Text}"
TextTrimming="WordEllipsis"
Margin='4,1' />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<TextBox HorizontalAlignment="Left" Height="42"
Margin="40,177,0,0"
Text="TextBox with long text to show Text ellipsis"
VerticalAlignment="Top" Width="184"
Style="{StaticResource AppTextBoxStyle}" />