Windows Phone 7 TextBox style margin issue

Comments | Share

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"> 

    <StackPanel.Resources> 

        <Style TargetType="TextBlock"> 

            <Setter Property="Margin" Value="25,0,25,0"/> 

        </Style> 

        <Style TargetType="TextBox"> 

            <Setter Property="Margin" Value="33,0,13,0"/> 

        </Style> 

    </StackPanel.Resources>

    <TextBlock Text="Name:" /> 

    <TextBox Text="some test text" IsEnabled="False" />

    <TextBlock Text="E-mail:"/> 

    <TextBox Text="test@movaxbx.com" InputScope="EmailNameOrAddress" /> 

</StackPanel>

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> 
<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}" /> 
</Border>

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.