Resolve textbox background focus issue

Resolve textbox background focus issue

I have a simple problem, but I'm new to Silverlight.

I have a textbox, transparent, but when I got focus, textfield background will come white.

How to solve?

Answers & Comments...

Answer: 1

What you are describing is a Visual State.

When the Textbox gets focus, it internally triggers a visual state change, which in this case includes a white background.

It looks like you are working in WP7, so there are a couple of places you can start learning about Control Templates, Styles and how to change them.

First have a look at this article about Control Templates.

You will find that anything Silverlight 4 related is relevant.

Second get a copy of Expression Blend for Windows Phone. Start a new WP7 project, drag a TextBox onto your design surface, right click the TextBox and selected Edit Template. Then you will start to see how easy it can be to change said visual states.

by : TriggerPinhttp://stackoverflow.com/users/1549726

Answer: 2

Please take a look here: http://forums.create.msdn.com/forums/p/63064/393509.aspx

Another good article: http://www.windowsphonegeek.com/tips/wp7-textbox-light-theme-problems-the-solution

I think that this would help you.

by : Johnhttp://stackoverflow.com/users/1420197

Answer: 3

Looks like you want a click to edit style. There is a silverlight example with xaml code in the Click-to-edit control - how to do it? post.

by : SwDevMan81http://stackoverflow.com/users/95573

Answer: 4

You just need to either edit the "FocusedState" in the VisualStateManager for the Default control template, or provide your own like the one provided below in either a Resource Dictionary or in your UserControl.Resources etc.

Here's how you would apply the Style Template Below to your TextBox Instance

<TextBox Style="{StaticResource YourCustomTextBoxStyle}/> 

Here's a Default WP7 TextBox Style Template with the proper place Adjusted...

<Style x:Key="YourCustomTextBoxStyle" TargetType="TextBox">               <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>               <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>               <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>               <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"/>  <!-- *** Right here is your culprit, I just ripped out the FocusedState Storyboard so it doesnt do anything when focused. *** -->                                      <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>  

You can also apply this same template to all your TextBox controls by default utilizing BasedOn Values.

There's other ways of doing this with less but this is a good place to begin learning the fundamentals. Hope it helps.

by : Chris W.http://stackoverflow.com/users/1090206

Answer: 5

It was more easily!

    private void TextBox1_GotFocus(object sender, RoutedEventArgs e)     {         TextBox tb = (TextBox)sender;         tb.Background = new SolidColorBrush(Colors.Transparent);         tb.BorderBrush = new SolidColorBrush(Colors.Transparent);         tb.SelectionBackground = new SolidColorBrush(Colors.Transparent);     }      private void TextBox1_LostFocus(object sender, RoutedEventArgs e)     {         TextBox tb = (TextBox)sender;         tb.Background = new SolidColorBrush(Colors.Transparent);         tb.BorderBrush = new SolidColorBrush(Colors.Transparent);         tb.SelectionBackground = new SolidColorBrush(Colors.Transparent);     } 

and it works wery well!!

by : elpskhttp://stackoverflow.com/users/88461

---