Visually Located

I’ve been using the new Bing apps a lot and I really like how the app name is in the SystemTray.

This looks awesome and frees up valuable space for your app! I have found that sometimes I remove the app title from pages to allow for more content. Accomplishing this for your apps is soooo simple! All you need to do is comment out the TextBlock that you are using for your title, and add the following bit of xaml to your page (outside of any grids and such)

<shell:SystemTray.ProgressIndicator>

    <shell:ProgressIndicator Text="My Application" IsVisible="True" IsIndeterminate="False"/>

</shell:SystemTray.ProgressIndicator>

Make sure you have set the SystemTray to be visible by setting the IsVisible property to true. You still get the advantage of the text going away when the user taps the tray.

If you do this, you will need to rethink how you show that the app is loading. The ProgressIndicator is suppose to be used to show that stuff is happening and that the user should keep calm, and wait. You have a few options for showing loading status.

Continue to use the SystemTray ProgressIndicator

You can continue to use the ProgreessIndicator within the SystemTray if you so wish. You will need to change the IsIndeterminate property and probably the Text Property.

// Make sure to give the ProgressIndicator a name

Indicator.Text = "Loading";

Indicator.IsIndeterminate = true;

The nice thing about the ProgressIndicator is that the properties are DependencyProperties. This means that they accept binding and can be set from a ViewModel.

<shell:SystemTray.ProgressIndicator>

    <shell:ProgressIndicator Text="{Binding IndicatorText}" IsVisible="True" IsIndeterminate="{Binding IsLoading}"/>

</shell:SystemTray.ProgressIndicator>

With either approach make sure that you set the Text and IsIndeterminate back when loading is done.

Use the ProgressBar

The ProgressBar is a very handy control already built into the ecosystem. It is very similar to the the ProgressIndicator in the SystemTray. The ProgressBar is an actual Control, this means you set the Visibility property instead of the IsVisible property. If you are binding, you will need a BooleanToVisibilityValueConverter. It still has an IsIndeterminate property to specify if you should see the dots flying across the screen or a solid line showing how much progress has been made. This is what the Bing apps use. When using this control in apps, make sure not to allocate space for it. What I mean by this is put it in a Grid in the same row as your page title, or other content. If you specify a row for it, or put it in a StackPanel, your page content will jump when the ProbressBar is shown or hidden.

Here is a xaml snippet of it being used.

<Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->

    <StackPanel Grid.Row="0" Margin="12,17,0,28">

        <!--<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>-->

        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

    </StackPanel>

    <ProgressBar Grid.Row="0" VerticalAlignment="Top" Foreground="White" 

                 IsIndeterminate="{Binding Loading}" 

                 Visibility="{Binding IsLoading, Converter={StaticResource BoolToVisConverter}}" />

Notice the progress dots below.

Use a third party control such as Telerik’s RadBusyIndicator

The RadBusyIndicator from Telerik is a nice control that has many default style options. This control allows you to restyle to whatever you want. I use this control for my main loading screen in Disney Expedition. Much like the IsVisible property of the ProgressIndicator, the RadBusyIndicator has an IsRunning boolean property to specify if it should be visible or not. You can change between 9 preconfigured animations by setting the AnimationStyle property.

<telerikPrimitives:RadBusyIndicator IsRunning="True" AnimationStyle="AnimationStyle1" Grid.RowSpan="2" Background="CC000000"/>

This control will take up as much space as it is given and have a background that covers all of the content on your page. If you want to create your own style, you can set the IndicatorAnimationStyle.

Putting your app title in the SystemTray really helps you show more content in your apps and let’s you continue to brand your app with your title.