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.

A complete guide to working with custom fonts in your Windows and Windows Phone app

One thing that really make an app stand out is using a special font or typeface (set of fonts in different weights and styles). It's not without reason that it's said that the font / typeface is one of the corner stones in visual indentity branding.
The Windows apps use Segoe UI and Segoe WP per default. While they are both very modern, simplistic, highly modern and current they are used by almost all apps out there. 
That alone is a reason for you to choose a custom font. No body wan'ts a product that looks just like all the others on the shelf.

A lot of wildly popular fonts such as Proxima Nova and Helvetica comes with a pretty high cost (+1,000$) for a independant developer. 
Fortunately there's free and absolutely beautiful alternatives out there!  
A great place to start is at Google Fonts. They got a lot of nice and free fonts mostly used in webdevelopment but they work perfectly in your app too. Find a typeface you like, download it and let's implement it in our app.

Implementing a custom font in Windows or Windows Phone app

1) First, you need to include the font or fonts in the project. Simply add the font to the project as a file.

 

 

 

 

2) Secondly, you need to change the build setting for the font files.
The setting should say:
Build action - Content
Copy to Output directory - Copy if newer

You can change the build settings by selecting the files, right click and say properties to see the properties panel, and change the settings.

 

 

3) Refer to the new font wherever you want to use it.
The easiest way to do that is by using the designer in Blend and Visual Studio 

You'll find your fonts which is added to the project at the very top of the items list.  If they are not there, something is wrong at you might want to fall back to the way it's done in VS2013. More about that later. 

 

4) In the code you should see one of these two in your code: 

 <TextBlock
FontFamily="ms-appx:///Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std"
FontSize="16"
 Text="Hello stranger! Thank you for visiting blendrocks" />

or this:  FontFamily="Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std"

Here's a few very important things that you need to know when working with custom fonts:

  • The font weight property should never be used. Always refer the correct font and set the weight using the file instead. 
  • If you add the font familiy to a resource dictionary you might want to reference the absolute path ms-appx:/// rather that using a relative path.
  • This part "#Helvetica Neue LT Std" is a suffix containing the Preferred Family. It's required in order for the custom font to work. The suffix has to be absolutely correct and it's case sensitive.
    • The easiest way to find it is to use a tool called dp4 font viewer. It's free and can be found downloaded here. Find your font through the program, go to the info tap copy the Preferred Family.
    • Do NOT use Windows built in font viewer as it does NOT show the correct preferred font family.

Using this technique, you should be able to use all open type and true type fonts inside your Windows and Windows Phone app.

Pro tip: To make it easier for your self, you can create a FontFamily resource inside your resource dictionary and just reference it wherever you want to use the custom font.
Your xaml could look something like this:

<FontFamily x:Key="HelveticNeueMediumFont">
Fonts/HelveticaNeueLTStd-Md.otf#Helvetica Neue LT Std</FontFamily>
nd 
<TextBlock
FontFamily="{StaticResource HelveticNeueMediumFont}"
FontSize="16"
Text="Hello stranger! Thank you for visiting blendrocks" />

For Visual Studio and Blend 2013 users

Unfortunately the dropdown containing fonts doesn't work nearly as good. So you have to write it in xaml instead. But if you use the dp4 font viewer tool and you copy the xaml shown above, you should be good to go. If not please reach out to me and I'll do my best to help you.

For Windows Phone 8 developers

To implement a custom font on Windows Phone 8 you have to reference the font a bit different. You should not use ms-appx://. Instead you should write "/AssemblyNameHere;component/path".
The assemblyname is usually the same as the project. But to be sure, remember to check it by right clicking the project in the solution explore and selecting properties. In the popup you'll find the Assembly name right away. In this sample the Assembly name is AwesomeFontSample:

<TextBlock 
Text="&#xF004;"
FontFamily="/AwesomeFontSample;component/Fonts/fontawesome-webfont.ttf#FontAwesome" 
/>

You can download a Windows Phone 8 sample here.


Wrap up

Working with custom fonts is easy when working with TextBlocks  But if you want to use is through out the app you might have to modify the template of certain controls suchs a ComboBox and Buttons.
Feel free to reach out to me if you need help on implementing your custom fonts or if you have comments or feedback to the article above. 

Happy coding!

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

Working with RGB, HLS, HSB & CMYK in Blend and Visual Studio

A very nice feature in Blend is the fact that it supports multiple color systems. Per standard it's using RGB, which you can see in the properties view of any element containing some kind of ColorBrush. But actually Blend gives you the option of putting in CMYK, HLS and HSB too!

The way you can change between the different color modes is by clicking the underlined letters next to the colorpicker.

Note: If you choose CMYK, HLS or HSB colors, they get converted to a RGB color.

Remember to reuse the same color through out your app – do this by creating the color as a resource and then just reference it.

The easiest way to create a color as a resource is to click the tiny square next to the property and choose Convert to New Resource

Feel free to reach out to me if you need additional help or insight in working with RGB, HLS, HSB & CMYK in Blend or Visual Studio.

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