Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows Phone UI Tip: Empty List Header Style

DZone's Guide to

Windows Phone UI Tip: Empty List Header Style

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

I’ve already talked about creating a so-called “empty list box template” for situations when you have no items and an empty screen area might confuse users. You could fake it by adding a little TextBlock control that would be shown when you have an empty ListBox control to tell the user that (s)he would normally have a list of items there.

To do that, I blogged about two different techniques: ListBox empty template – using visual states (part 1) and ListBox empty template – using control templates and behaviors (part 2).

One thing I haven’t talked about before is what should that text look like. In my opinion, unless you are completely reinventing your UI, you should strive for consistency. The best way to do that is mimicking the built-in apps. You already have such style in the stock applications: e.g. if you open Marketplace and search for some non-existing application, you will get the message that there are no such applications as you can see below. If you want to use exactly that style, you can use a predefined style called EmptyListHeaderStyle:

<TextBlock Style="{StaticResource EmptyListHeaderStyle}"
           Text="Some items should appear here..." />

Simple style for the “no results found” text.

If you are still targeting Windows Phone 7, you won’t be able to use that style because it was introduced in Windows Phone 8. But if you still want to use it, copy/paste the following style definitions in your favorite place for styles:

<System:Double x:Key="EmptyListHeaderFontSize">32</System:Double>
 
<Style x:Key="EmptyListHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">
  <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
  <Setter Property="FontSize" Value="{StaticResource EmptyListHeaderFontSize}"/>
  <Setter Property="Foreground" Value="{StaticResource PhoneTextMidContrastColor}"/>
</Style>


Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}