Visually Located

This blog serves as a public service announcement to give your ListBox, ListView, ItemsControl, whatever you choose the space that they deserve. I have seen a lot of apps (and often forget to do this myself!) that do not extend their lists all the way to the right of the page and keep the page too close to the bottom. It is easy to fall into this trap because of the defaults within Visual Studio. Take a look at the following examples:

Notice that huge gap to the side? Now take a look at the settings apps

Look mom! No gap! So what causes this gap? It’s the default template for pages in Visual Studio. When you create a new page for Windows Phone Silverlight apps you get the following

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

</Grid>

Notice the side margin of 12? This is a design guideline to leave the gap, but lists give you this buffer as well! You get the same XAML for Windows Phone Runtime app, but 9.5 instead of 12 for the margin. So, when you create a new page that will have a list in it, remove that right margin!

<!--ContentPanel - it has a ListBox so no right margin! -->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,0">

    <ListBox>

    </ListBox>

</Grid>

Now our app behaves just like the built in apps!

The second space you want to give your apps is space at the bottom of the list. When you use a list it will expand to all the space it is given. The downside to this is when you scroll to the bottom of the list, the content is at the very bottom! This makes it a little hard to see. Take a look at the following examples.

Notice the nice gap at the bottom of the settings app. This is a lot easier on your eyes. This one is easy to solve as well. Simply add some padding to the bottom of your list.

<ListView Padding="0,0,0,72">

</ListView>

If you want you can create a style to use everywhere.

Take a few seconds and update your apps with these gaps.

One of the most known page transitions on Windows Phone is the feather (or staggered item) transition. This is the transition you see when opening the mail app and the messages feather, or stagger in. This animation is also seen on the home page on the phone when the tiles stagger in. You usually see this transition whenever there is a list of items shown by any of the built in apps. This transition was previously only available through toolkits like the Windows Phone Toolkit or Telerik’s toolkit. Now this transition is available out of the box for Windows Phone Runtime apps.

For background on page transitions in Windows Phone 8.1 Runtime apps, see my previous post.

To get started, simply create a new Windows Phone Runtime app. Page transitions are enabled by default for all Runtime apps! To use this transition, you’ll want to set the page transition to use the NavigationThemeTransition with the CommonNavigationTransitionInfo. Make sure to set IsStaggeringEnabled to true for the CommonNavigationTransitionInfo.

<Page.Transitions>

    <TransitionCollection>

        <NavigationThemeTransition>

            <NavigationThemeTransition.DefaultNavigationTransitionInfo>

                <CommonNavigationTransitionInfo IsStaggeringEnabled="True"/>

            </NavigationThemeTransition.DefaultNavigationTransitionInfo>

        </NavigationThemeTransition>

    </TransitionCollection>

</Page.Transitions>

Next, you’ll want to add the CommonNavigationTransitionInfo.IsStaggerElement attached property to any element that you want to stagger in. You will generally place this in the ItemTemplate of the ListView or GridView that you are displaying. You read that right. This transition works in both the ListView and GridView. If you use this on the template of a GridView, then you will see the tiles of your grid stagger in!

First a ListView:

<ListView ItemsSource="{Binding Items}">

    <ListView.ItemTemplate>

        <DataTemplate>

            <StackPanel Margin="0,0,0,9.5"

                        CommonNavigationTransitionInfo.IsStaggerElement="True">

                <TextBlock Text="{Binding Title}"

                           Style="{ThemeResource ListViewItemTextBlockStyle}"/>

                <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource BaseTextBlockStyle}"/>

            </StackPanel>

        </DataTemplate>

    </ListView.ItemTemplate>

</ListView>

And a GridView:

<GridView ItemsSource="{Binding}">

    <GridView.ItemTemplate>

        <DataTemplate>

            <Rectangle Width="100" Height="100" Fill="{Binding}" 

                       Margin="0,0,9.5,9.5"

                       CommonNavigationTransitionInfo.IsStaggerElement="True"/>

        </DataTemplate>

    </GridView.ItemTemplate>

</GridView>

Notice that the StackPanel and Rectangle both set CommonNavigationTransitionInfo.IsStaggerElement="True".

That’s all you need to do for your app to begin using this awesome transition!

Download a complete sample (with many more samples!) of these transitions.

This is part of a series on migrating from the WP Toolkit.

With the release of Windows Phone 8.1 Runtime (aka XAML apps) comes a lot of functionality that previously only existed in the Windows Phone Toolkit or other third party control suites. One of these are page transitions and animations on objects. In Windows Phone 8 apps your best option for page transitions was the Windows Phone Toolkit or Telerik. I’ve used both, but really enjoy the robustness and ease of use of Teleriks transitions. With Teleriks RadTransitionControl you could setup forward and backward animations with three lines of XAML! Contrast that with the Windows Phone Toolkit where it takes 20 lines of XAML!! Because I like Teleriks transitions this post will cover moving from the Windows Phone Toolkit or the Teleriks transitions to the new transitions in the Windows Phone Runtime.

In both the Windows Phone Toolkit and Telerik you had to set the RootFrame of the App to be the control suite transition frame.

// Default

RootFrame = new PhoneApplicationFrame();

// WP Toolkit

RootFrame = new TransitionFrame();

// Telerik

RootFrame = new RadPhoneApplicationFrame();

With Windows Phone Runtime apps you do not need to do anything. When you create a new phone project, everything will be setup so that every page will show a turnstile transition! The transitions are setup within the RootFrame_FirstNavigated method,

rootFrame.ContentTransitions = this.transitions ?? new TransitionCollection() { new NavigationThemeTransition() };

Note: It is important to set the ContentTransitions of the frame. If this is null your app can crash while trying to navigate.

This sets up your app to show the NavigationThemeTransition. This is a “generic” transition that can be used all by itself. With this one line of code, every page you navigate to will use a turnstile transition!

The NavigationThemeTransition has a property, DefaultNavigationTransitionInfo, that specifies what transition to use for the page. There are three default classes that can be used, CommonNavigationTransitionInfo, SlideNavigationTransitionInfo. and ContinuumNavigationTransitionInfo. Setting up a page to use one of these is pretty simple.

<Page.Transitions>

    <TransitionCollection>

        <NavigationThemeTransition>

            <NavigationThemeTransition.DefaultNavigationTransitionInfo>

                <SlideNavigationTransitionInfo/>

            </NavigationThemeTransition.DefaultNavigationTransitionInfo>

        </NavigationThemeTransition>

    </TransitionCollection>

</Page.Transitions>

I’m not going to show how the WPToolkit or Telerik equivalent for the transitions as it would be too much.

The CommonNavigationTransitionInfo is the default NavigationTransitionInfo. It states that the page will use the turnstile transition. The CommonNavigationTransitionInfo also allows you to specify that a feather (aka stagger) page transition should be used. SlideNavigationTransitionInfo states that the page will use a slide transition that will animate from bottom to top when navigating in and top to bottom when navigating out. Finally, the ContinuumNavigationTransitionInfo allows you to show a “Fly away” transition like when tapping an email in the mail app. I’ll go into this in another post as well.

Along with the NavigationThemeTransition, there are other transitions that can be used for pages. The PaneThemeTransition and EdgeUIThemeTransition provide exactly the same functionality. They both allow you to use a slide transition, but to specify which edge to slide the content in from, and out to.

<TransitionCollection>

    <PaneThemeTransition Edge="Bottom" />

</TransitionCollection>

The EntranceThemeTransition is pretty cool because it allows you specify the horizontal and vertical offset that the page should navigate from. This means you can slide your page in diagonally.

<TransitionCollection>

    <EntranceThemeTransition FromVerticalOffset="200" FromHorizontalOffset="200" />

</TransitionCollection>

Those are the basic page transitions for pages. One really awesome thing that you can do with the new transitions is create what I call partial and complex transitions. This technique requires that you do not set a default transition to the root frames ContentTransitions like is done by default. You still need to create a new TransitionCollection, but do not put anything in it! With a partial or complex transition, you will [most likely] not set a transition for the page. Instead you will place transitions on the ChildrenTransitions of individual panels. The example below uses the EdgeUIThemeTransition is a sample of what I call a “complex transition”. It  slides items in from alternating sides.

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Right"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item One" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Left"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item Two" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Right"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item Three" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

Aside from page transitions, there are some awesome animations that can be used on items. One exciting animation is tilt. Tilt is enabled on all “clickable” items by default (eg: Button, ListViewItem)! This is exciting because previously you had to set this yourself. There are a few ways to enable tilt on non-clickable items, read this post to find out more. Another awesome animation is the slide in animation that you get when changing PivotItems within a Pivot. This is a staggered slide that you get for each line of an item. Enabling this requires setting the SlideInAnimationGroup on each element you want to stagger sliding.

<DataTemplate>

    <StackPanel Margin="0,0,0,9.5">

        <TextBlock Pivot.SlideInAnimationGroup="1"

                   Text="{Binding Title}"

                   Style="{ThemeResource ListViewItemTextBlockStyle}"

                   Margin="0,0,19,0"/>

        <TextBlock Pivot.SlideInAnimationGroup="2" 

                   Text="{Binding Description}"

                   TextWrapping="WrapWholeWords"

                   Style="{ThemeResource ListViewItemContentTextBlockStyle}"

                   Margin="0,0,19,0"/>

    </StackPanel>

</DataTemplate>

I have noticed a weird bug with this animation in which items do not slide in when first changing pivot items. Keep this in mind when testing.

Another handy animation is the AddDeleteThemeTransition. With this transition, when an item is added it will open a space and be inserted into that space. When an item is removed, the item will go away and then the content will slide up in its place. This transition is already enabled on the ListView and GridView.

<ItemsControl ItemsSource="{Binding Items}" 

              ItemTemplate="{StaticResource ItemsTemplate}">

    <ItemsControl.ItemContainerTransitions>

        <TransitionCollection>

            <AddDeleteThemeTransition/>

        </TransitionCollection>

    </ItemsControl.ItemContainerTransitions>

</ItemsControl>

There are many other transitions and animations. You can download a complete sample that includes all the items I discussed in this post plus more!

One downside to the Runtime transitions is that you cannot specify a different transition to use when navigating out that is used for navigating in.Both the WPToolkit and Telerik, allowed you to do this.