Vitaly Dilmukhametov

  Home  |   Contact  |   Syndication    |   Login
  18 Posts | 0 Stories | 75 Comments | 0 Trackbacks



Good stuff

I just found an interesting behaviour of Windows Phone 7 TextBox default template. When TextBox is disabled, inner text is rendered with margin:


To reproduce it, create new Silverlight WP application and add following XAML inside default grid named “ContentPanel”:

<StackPanel Margin="0,12,0,0"> 
        <Style TargetType="TextBlock"> 
            <Setter Property="Margin" Value="25,0,25,0"/> 
        <Style TargetType="TextBox"> 
            <Setter Property="Margin" Value="33,0,13,0"/> 
    <TextBlock Text="Name:" /> 
    <TextBox Text="some test text" IsEnabled="False" />
    <TextBlock Text="E-mail:"/> 
    <TextBox Text="" InputScope="EmailNameOrAddress" /> 

The reason is that in disabled state TextBox’s control template is described using another TextBox:


<Border x:Name="EnabledBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" > 
    <ContentControl x:Name="ContentElement" BorderThickness="0" Padding="{TemplateBinding Padding}" 
            HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}"/> 
<Border x:Name="DisabledOrReadonlyBorder" Visibility="Collapsed" Background="Transparent" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" > 
    <TextBox x:Name="DisabledOrReadonlyContent" Text="{TemplateBinding Text}" Foreground="{StaticResource PhoneDisabledBrush}" Background="Transparent" 
            SelectionBackground="{TemplateBinding SelectionBackground}" SelectionForeground="{TemplateBinding SelectionForeground}" 
            TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}" IsReadOnly="True" Template="{StaticResource PhoneDisabledTextBoxTemplate}" 
            FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" /> 


This XAML is a part of TextBox’s default control template (you can get full version with Blend). In case of setting IsEnabled=”False”, EnabledBorder is hidden and DisabledOrReadOnlyBorder is visible. So, textbox rendered using TextBox.

You can notice, that in first code sample style for TextBox without x:Key. It means, that style applied to any of child TextBox. So, margin was applied to control template’s inner TextBox too. And that’s the reason, why we have a shifted text in disabled state!

As a solution: you can add x:Key for TextBox style and apply it manually to every TextBox. In this case disabled state will work normally.


P.S. The same is valid for PasswordBox too.

posted on Tuesday, December 25, 2012 12:13 PM