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.

Improve your app design

Do you want your app to be fun and cool to play around with? Get improved ratings and reviews mentioning your amazing design? Then this post is your you.

What I’ve recently noticed is that most of the apps available either on the Windows Store or Windows Phone marketplace are visually dull.
Most of the apps have great ideas with exciting and cool content but they doesn’t deviate the Visual Studio provided templates. While I've helped quite a few developers out there improving their apps and increasing their user engangement. 
While you can use the design review program offered here on the site you can also do something your self. Here's a few bullets from my list of thing people should try to avoid or do:

  • Do not use the boring black background with white text.
  • Make your app colorful
  • Use animations and transitions. Atleast those which is offered platform
  • Spend some extra time working on great store icons with the right look and feel
  • Don't just use the default templates found in Visual Studio. Make something up your self.
  • Keep your UI simple and clean, and yet tasteful.
  • Use livetiles
  • Use a splashscreen and indicators while loading content
  • Keep your app fluid and responsive
  • Use the design guidelines as guidelines at design.windows.com - not as a list of rules
  • Be creative.

Pro tip: Look at other apps you think looks great and try do what they do, but watch out. You have to own way and style. Nobody want’s a rip-off.

Creating a great design and UI is not an always easy task. It takes time.. Lots of time. Feel free to reach out if you want to discuss how you can take your design to the next level or if you have additional things you'd like to see in the post.

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