WP7 Textbox, PasswordBox, AutoCompleteBox e.t.c. light theme problem

Hi everyone, I'm going to tell you about one annoying problem with standart windows phone textbox behaviour.

Here comes the problem:

1)  Let's assume you want to use a dark background image as a background for your application with a textbox on main page.
2) When WP7 theme is set to dark you have no problems and everything seems to be OK.
3) But if you run the light theme you can see that textbox or textbox text while editing are invisible, problem may occure in other visual effect such as transparent background while editing and so on depending on your applciation color usage (e.g with light backgound you'll have as much problems in dark theme)

Here comes the solution


First of all, the solution for textbox already exists and it's working.

You just need to correct some style colors in standart textbox template.


But the next thing you'll deal with: and what about other controls which behaves similar to textbox?


Googling it you'll find a similar solution for Coding4Fun PasswordBox.


AutoCompleteBox



In my app i deal with autocompletebox. So i've discovered the way to solve it.



First of all you need to get the default AutoCompleteBoxStyle. You can easily extract it from expression blend! Just create the new project -> add reference to silverlight toolkit -> right click on AutoCompleteBox and choose 'Edit Style' -> 'From default' when in XAML you'll see the needed style.


You will see that AutoCompleteBox consists of textbox and PoPup so the last thing you should do is to apply the windowsphonegeek textbox style to that particular autocompletebox style.


Here is the xaml for TextBox:

   <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">
  
     <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
  
   </ControlTemplate>
  
   <Style x:Key="TextBoxLightDarkStyle" TargetType="TextBox">
  
     <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="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}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
  
             </Border>
  
           </Grid>
  
         </ControlTemplate>
  
       </Setter.Value>
  
     </Setter>
  
   </Style>  

XAML for AutoCompleteBox:

 <Style x:Key="AutoCompleteBoxStyle1" TargetType="toolkit:AutoCompleteBox">
  
     <Setter Property="Background" Value="White"/>
  
     <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
  
     <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
  
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
  
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
  
     <Setter Property="Foreground" Value="Black"/>
  
     <Setter Property="ItemTemplate">
  
       <Setter.Value>
  
         <DataTemplate>
  
           <ContentControl Content="{Binding}" Margin="8,7"/>
  
         </DataTemplate>
  
       </Setter.Value>
  
     </Setter>
  
     <Setter Property="Padding" Value="6,0,6,4"/>
  
     <Setter Property="Template">
  
       <Setter.Value>
  
         <ControlTemplate TargetType="toolkit:AutoCompleteBox">
  
           <Grid>
  
             <TextBox x:Name="Text" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" InputScope="{TemplateBinding InputScope}" Opacity="{TemplateBinding Opacity}" Padding="{TemplateBinding Padding}" Style="{StaticResource TextBoxLightDarkStyle}"/>
  
             <Popup x:Name="Popup">
  
               <ListBox x:Name="Selector" BorderBrush="{StaticResource PhoneTextBoxEditBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsTabStop="False" ItemTemplate="{TemplateBinding ItemTemplate}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}" Opacity="{TemplateBinding Opacity}" Padding="0,8"/>
  
             </Popup>
  
           </Grid>
  
         </ControlTemplate>
  
       </Setter.Value>
  
     </Setter>
  
   </Style>