WP7 PasswordBox Light theme problems - the solution

published on: 5/3/2011 | Views: N/A | Tags: Styling UI

by WindowsPhoneGeek

In this post I am going to give a solution of the WP7 Invisible PasswordBox problem when used in Light theme.

Here are the problems:

• 1.)"When using a dark background, lets say as a Panorama background or as a ContentPanel background the PasswordBox is not visible in the Light theme"
• 2.)"When using a dark background, lets say as a Panorama background or as a ContentPanel background the PasswordBox Text is invisible in Edit mode when the Light theme is chosen."

Here is a screen shot that demonstrates these two problems:

NOTE: You can also take a look at our previous article which gives a similar solution to the TextBox Light theme problem: WP7 TextBox Light theme problems - the solution (note that the default styles of TextBox and PasswordBox are pretty similar).

 

 

 

 

 

 

 

Solution:

In order to fix/workaround this issue you will need to edit the Style of the PasswordBox control. Basically it`s pretty easy you just need to change a few colors:

1.) Either use Expression Blend to get the default PasswordBox Style or get the Style from this article. Note that at the end of this post you can find the the sample Style  and the full source code available for download as well.

2)Change the ElementBorder Background color in this way:

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

3.) Change the TextBox Foreground color in this way:

<Setter Property="Background" >
    <Setter.Value>
        <SolidColorBrush Color="LightGray"/>
    </Setter.Value>
</Setter>

4.) Set the newly created Style in this way (where SampleBackground.jpg is a sample background image):

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel.Background>
        <ImageBrush ImageSource="SampleBackground.jpg"/>
    </StackPanel.Background>
    <PasswordBox Style="{StaticResource PasswordBoxStyle1}"/>
</StackPanel>

</P?

Now you can see the result. The PasswordBox is consistent in both Light and Dark Theme and works as expected in Edit mode.

     

Here is how the full PasswordBox Style should looks like:

<phone:PhoneApplicationPage.Resources>
    <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>
</phone:PhoneApplicationPage.Resources>

I hope that the post was helpful. You can download the full source code here:

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'WP7 PasswordBox Light theme problems - the solution'

Title Your Name

Comment