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?
Asked
Active
Viewed 4,091 times
3
-
you can add a click handler on the textfield to set the background to transparent when a user clicks on it. Are you using MVVM? You'll want to use Commanding for it. If not, just go with code-behind. – The Internet Jul 30 '12 at 18:29
4 Answers
3
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.
Chris W.
- 22,835
- 3
- 60
- 94
-
I must have added my answer right as another was marked correct. Pity, but glad you found your remedy! :) – Chris W. Jul 30 '12 at 19:44
2
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!!
elp
- 8,021
- 7
- 61
- 120
0
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.
Silver Solver
- 2,310
- 1
- 13
- 19
0
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.
Community
- 1
- 1
SwDevMan81
- 48,814
- 22
- 151
- 184