Password box Theme problem in Windows Phone 7

Just like the textbox light/dark theme problem in windows phone 7 when you are using any color or custom background, sometimes your background makes the password box extremely hard or impossible to see, which may cause a rejection from the certification team.

If you get rejected from the certification team you know this causes you to fix the problem and more importantly the lost of time.

Here I got a solution that can help you fix this issue, is a style that you need to apply to your password box.

Here is the code you need to put in your app.xaml, between <phone:PhoneApplicationPage.Resources> </phone:PhoneApplicationPage.Resources>

CODE:

<ControlTemplate x:Key="PhoneDisabledPasswordBoxTemplate" TargetType="PasswordBox">

<Border x:Name="ContentElement" BorderThickness="0" Margin="{StaticResource PhonePasswordBoxInnerMargin}" Padding="{TemplateBinding Padding}"/>

</ControlTemplate>

<Style x:Key="PasswordBoxStyle1" TargetType="PasswordBox">

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>

<Setter Property="Background" >

<Setter.Value>

<SolidColorBrush Color="LightGray"/>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>

<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>

<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>

<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>

<Setter Property="SelectionForeground" Value="{StaticResource PhoneContrastBackgroundBrush}"/>

<Setter Property="Padding" Value="2"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="PasswordBox">

<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="Visibility" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="White"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">

<Border x:Name="ContentElement" BorderThickness="0" Margin="{StaticResource PhonePasswordBoxInnerMargin}" Padding="{TemplateBinding Padding}"/>

</Border>

<Border x:Name="DisabledBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">

<PasswordBox x:Name="DisabledContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" Password="{TemplateBinding Password}" PasswordChar="{TemplateBinding PasswordChar}" Template="{StaticResource PhoneDisabledPasswordBoxTemplate}"/>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

I also made a blog post about the Textbox control that has the same problem. Ultimate Textbox Style for Windows Phone 7

With that code you can get a piece of mind that your password box will work in any custom background.

Enjoy!!

Ultimate Style for a TextBox in Blend 4 for Windows Phone 7

If you have a custom background (other than the black or white background) you may have noticed that your textboxes plays tricks with you on the dark and light themes.

With this resource, this will allow you to have any color background, any graphics that you might have and have a consistent TextBox style that will be readable in any theme.

Just insert this code into your app.xaml, in between.

<Style x:Key=”MainTextBoxStyle” TargetType=”TextBox”>
<Setter Property=”FontFamily” Value=”{StaticResource PhoneFontFamilyNormal}”/> <Setter Property=”FontSize” Value=”{StaticResource PhoneFontSizeMediumLarge}”/>
<Setter Property=”Background” Value=”LightGray” />
<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=”Visibility” Storyboard.TargetName=”EnabledBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”DisabledOrReadonlyBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”ReadOnly”>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”EnabledBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Visibility” Storyboard.TargetName=”DisabledOrReadonlyBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Background” Storyboard.TargetName=”DisabledOrReadonlyBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource PhoneTextBoxBrush}”/>
</ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”BorderBrush” Storyboard.TargetName=”DisabledOrReadonlyBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource PhoneTextBoxBrush}”/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”Foreground” Storyboard.TargetName=”DisabledOrReadonlyContent”>
<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=”EnabledBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″>
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color=”White”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”BorderBrush” Storyboard.TargetName=”EnabledBorder”>
<DiscreteObjectKeyFrame KeyTime=”0″ Value=”{StaticResource PhoneTextBoxEditBorderBrush}”/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”Unfocused”/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name=”EnabledBorder” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” Background=”{TemplateBinding Background}” Margin=”{StaticResource PhoneTouchTargetOverhang}”>
<ContentControl x:Name=”ContentElement” BorderThickness=”0″ HorizontalContentAlignment=”Stretch” Margin=”{StaticResource PhoneTextBoxInnerMargin}” Padding=”{TemplateBinding Padding}” VerticalContentAlignment=”Stretch”/>
</Border>
<Border x:Name=”DisabledOrReadonlyBorder” BorderBrush=”{StaticResource PhoneDisabledBrush}” BorderThickness=”{TemplateBinding BorderThickness}” Background=”Transparent” Margin=”{StaticResource PhoneTouchTargetOverhang}” Visibility=”Collapsed”>
<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}” />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

After this step is done, just click on your TextBox and apply the style named MainTextBoxStyle