locked
Using blend to change background of textbox focused and unfocused states... RRS feed

  • Question

  • I'm relatively new to silverlight/wpf and blend.  On WP7, I'm trying to make the background of a focused textbox to remain transparent rather than the white color it typically changes to.  I've tried retemplating the textbox using blend then changing the EnabledBorder's focused state.  However, whenever I do that, it changes the unfocused state too.  That's not what I want. 

    What am I missing?

    Tuesday, July 19, 2011 6:49 AM

Answers

  • Ah, yes.  Good to know that I was at least TRYING to use Blend correctly.  :)  After expanding the <VisualState x:Name="Unfocused"> and setting the appropriate border and backgrouind colors, everything is working as I'd like. 

    Thank you!


    Jim
    • Marked as answer by Greazer Tuesday, July 19, 2011 4:46 PM
    Tuesday, July 19, 2011 4:46 PM

All replies

  • Sounds like you were doing the right thing, edit the template, select the focused state in the states panel and make the changes you want. What I don't understand is what this did incorrectly?

     

    What do you want the appearance to be in the unfocused state vs focused?

    Tuesday, July 19, 2011 3:15 PM
    Moderator
  • Thanks Chuck. Actually I didn't quite describe my desired behavior quite right (too much hit and miss are garbling my head).  I'd like to have the unfocused state to have a transparent background and transparent border (look just like a textblock, basically), but when the user gives it focus, I'd like the background to appears as normal textbox background and border (on the phone, basically semi-transparent white).

    Problem is, is that when I set either the unfocused or the focused state's background and border color, the other focus state changes to match. 

    Here's what do:

    1. Create a textbox, put some text in it.
    2. Right click on the textbox and choose Edit Template -> Edit a Copy
    3. Give it a name and define it in the user control (that I plopped the textbox in)
    4. Select EnabledBorder from Objects and Timeline
    5. Select the unfocused state in the states panel
    6. Change the background to be the transparent brush.

    Now select the focused state, I would expect the background to be the color it was originally.  However, it's ALSO set to transparent.  This is not what I want.


    Jim
    Tuesday, July 19, 2011 3:34 PM
  • There is a simpler way to accomplish what you want in this specific case I believe.

    1. Select your textbox (no template)
    2. In the Brushes section of the properties panel, select the Background, pick the No Brush button
    3. Select the borderBrush, select the No Brush button

    If you want to do it the template way, this is something that Blend doesn't seem to support very well at the moment for this particular control. I'll be sure there is a bug logged for that. You would probably have to edit the xaml to get the desired effect and keep the templatebinding in place. The relevant section is:

     

    <VisualState x:Name="Focused">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Unfocused"/>
    


     

    Tuesday, July 19, 2011 3:59 PM
    Moderator
  • Ah, yes.  Good to know that I was at least TRYING to use Blend correctly.  :)  After expanding the <VisualState x:Name="Unfocused"> and setting the appropriate border and backgrouind colors, everything is working as I'd like. 

    Thank you!


    Jim
    • Marked as answer by Greazer Tuesday, July 19, 2011 4:46 PM
    Tuesday, July 19, 2011 4:46 PM