Inspirational TextBox styles for Windows Phone & Store

Inspired by a post on text input effect for Web on Codrops I decided to create similar effects in xaml for Windows Store and Phone demonstrating how we can make input fields look great with a few simple animations. 

I've created different effects for the TextBox named Split, Flip, Iconic and Slide.
 

Split

The Split Style keeps the header label between the two lines. Once the textbox gets focus the header transitions upwards and gives room for the actual content. The header stays in place until the textbox loses focus and the text is removed.


Flip

When Flip gets focused the border goes to zero while the background flips up from behind. As long as there's text and focus this stays in place. When removed and focus is lost the background slides backwards out and the border tips back up.


Iconic

Iconic has a nice toned down icon. Once the TextBox gets focused the lights and scales up a bit to bring attention to the input field. Once the field is cleared it tones back down.


Slide

Slide got an overlay per default which is ready to slide out as soon as the TextBox gets focus. As long as there's focus and content it will remain in the right side. If content and focus is cleared is slides back out to the left.


Download the source and sample

The control and styles is made for proof of concept purposes and
it's not recommended for "plug and play" in a production environment.
 

 

Using the control and styles

To create these visual effects I had to create a custom TextBox (BrTextBox.cs). Applying these visual effects is rather easy once you use the custom TextBox. 
Just use the control instead of a normal textbox, set the header and apply style for the effect you want.

 <local:BrTextBox Header="First name" Style="{StaticResource SplitBrTextBoxStyle}"  />
 <local:BrTextBox Header="First name" Style="{StaticResource FlipBrTextBoxStyle}"  />
 <local:BrTextBox Header="First name" Style="{StaticResource SlideBrTextBoxStyle}"  />
 <local:BrTextBox Header="First name" Style="{StaticResource IconicBrTextBoxStyle}"  />

 

Custom control

Creating a custom control was necessary because I had to hooks into the Loaded, GotFocus and LostFocus event. In these events we check on whether we have Text or not. Based on this we set a one of two visual states: Expand or Collapse.

Each visual state will then perform a series of animations to transform the textbox visuals.

Code:

public sealed class BrTextBox : TextBox
{
    private const string StateCollapse = "Collapse";
    private const string StateExpand = "Expand";
    private bool hasFocus;

    public BrTextBox()
    {
        DefaultStyleKey = typeof(BrTextBox);
        GotFocus += BrTextBox_GotFocus;
        LostFocus += BrTextBox_LostFocus;
        Loaded += BrTextBox_Loaded;
        TextChanged += BrTextBox_TextChanged;
    }

    private void BrTextBox_TextChanged(object sender, TextChangedEventArgs e)
    {
        // In case viewmodels clear the string
        if (string.IsNullOrWhiteSpace(Text) && hasFocus == false)
        {
            VisualStateManager.GoToState(this, StateCollapse, true);
        }
    }

    private void BrTextBox_Loaded(object sender, RoutedEventArgs e)
    {
        if (string.IsNullOrWhiteSpace(Text))
        {
            VisualStateManager.GoToState(this, StateCollapse, true);
        }
        else
        {
            VisualStateManager.GoToState(this, StateExpand, true);
        }
    }

    private void BrTextBox_LostFocus(object sender, RoutedEventArgs e)
    {
        hasFocus = false;

        if (string.IsNullOrWhiteSpace(Text) == true)
        {
            VisualStateManager.GoToState(this, StateCollapse, true);
        }
    }

    private void BrTextBox_GotFocus(object sender, RoutedEventArgs e)
    {
        hasFocus = true;

        if (string.IsNullOrWhiteSpace(Text) == true)
        {
            VisualStateManager.GoToState(this, StateExpand, true);
        }
    }
}

 

Animation using the UIThread

Some of the animations (SplitBrTextBoxStyle & SlideBrTextBoxStyle) requires the UIThread for to create the visual transition through animation. For this these the two styles will have the Property EnableDependentAnimation="True" in some of their animations.
This means the animation will use the UIThread rather than the compositor to animate the value change in the properties.
This is done because e.g. the width / height because these properties can't be visually transformed without the UIThread redrawing the control for each frame of the animation.
Ultimately the use of UIThread for animations can lead to a decrease in UI performance while animating and should be avoided at all costs unless you have no other option. 

 

Final words

Creating the control was rather fun and there's a lot of unexplored possibilities. The control as it is right now doesn't contain any other visual states other than Collapse and Expanded. For the same reason it's not ready for a production environment but was created to give you a general idea of the possibilities.

Feel free to reach out to me with your thoughts on the control and the styles. I'd love to hear from you in the comments. 

/Deani

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.