[Windows Phone] - TextBlock Tips and Tricks – Part 2 – TextBox too
In the previous part you picked up some pretty interesting tips and tricks, right?
Link to the previous part: [Windows Phone] - Textblock Tips and Tricks - Part 1
In this part there are even more interesting things ahead
1. Text that is too long and the missing characters problem
The text goes missing in a really bizarre way, doesn’t it?
1.1. The cause
Every control in Windows Phone has a default size limit: 2000 pixels
How big is 2000 pixels? A standard laptop screen is 1366 x 768. Compare that with 2000 x 2000. So it’s more than double
But for some Windows Phone devices with a Full HD resolution (1900 x 1080), does doubling the width of the device give us the maximum size? No. The 2k size only applies to Windows Phone 7 apps
1.2. The fix
The fix is very simple. Split your text into several pieces and put them into different textblocks. Wrap those textblocks in a ScrollViewer. Done!
2. Selectable TextBlock
A Textblock, obviously, cannot be selected.
So we will tweak a TextBox a little to look like a TextBlock, in order to take advantage of its “Selectable” behavior
Add the following code to your resources
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}" />
<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="ReadOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyContent" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="EnabledBorder"
Margin="{StaticResource PhoneTouchTargetOverhang}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentControl x:Name="ContentElement"
Margin="{StaticResource PhoneTextBoxInnerMargin}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="0"
Padding="{TemplateBinding Padding}" />
</Border>
<Border x:Name="DisabledOrReadonlyBorder"
Margin="{StaticResource PhoneTouchTargetOverhang}"
Background="Transparent"
BorderBrush="{StaticResource PhoneDisabledBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Visibility="Collapsed">
<TextBox x:Name="DisabledOrReadonlyContent"
Background="Transparent"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{StaticResource PhoneDisabledBrush}"
IsReadOnly="True"
SelectionBackground="{TemplateBinding SelectionBackground}"
SelectionForeground="{TemplateBinding SelectionForeground}"
Template="{StaticResource PhoneDisabledTextBoxTemplate}"
Text="{TemplateBinding Text}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>To use it, all you need is
<TextBox x:Name="testTextBox"
IsReadOnly="True"
Style="{StaticResource TextBoxStyle1}"
Text="Hello world"
TextWrapping="Wrap" />And that’s it