What’s New in Windows Phone 8.1- XAML Controls (Part 2 out of 5)

April 2, 2014

In this post I will show what’s new in controls that can be used in Windows Phone 8.1 (WP8.1) XAML apps (aka WinRT, Windows Phone Store apps). First I will talk about what convergence really means for the controls, then will show phone-only controls that are not available on Win8.x platform and finally will overview changes in AppBar, system tray, etc.
Please note that from this post I will be focusing only on WP8.1 XAML features and not on Windows Phone Silverlight 8.1 (SL8.1).  Features for SL8.1 will be highlighted specifically.

 

Converged controls

With convergence story WP8.1 receives many controls from Win8.x apps. About 80% of the controls (and their XAML) is fully converged with Win8.x which means very high code reuse levels for developers. The common controls such as buttons (of all types), text controls, etc. works exactly the same on both platforms. In most case those controls also looks pretty similar on both platforms, though the developer can expect minor visual adjustments in some cases. Some of the controls, while exits on both platforms and supports exactly the same XAML/API looks considerably different to fit the form factor and shows appropriate UI based on the device. The example of such controls are datepicker, timepicker, flyouts.

For example same XAML produces different UI on two platforms:

<DatePicker x:Name="datePicker" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Windows Windows Phone
image image
on click shows the following full-screen UI image

Flyouts also produce different UI based on the platform. Consider the following code snippet:

<Button Content="Flyout" x:Name="btnFlyout1">

    <Button.Flyout>

        <Flyout>

            <StackPanel Width="250">

                <TextBlock Text="Header" FontSize="24" Margin="0,0,0,20"

                           Foreground="CornflowerBlue"/>

                <TextBlock Text="This is a flyout content with some blah blah blah blah..." 

                           TextWrapping="Wrap" FontSize="16"/>

                <Button Content="Accept" HorizontalAlignment="Right" Margin="0,20,0,0" 

                        Click="Button_Click_1"/>

            </StackPanel>

        </Flyout>

    </Button.Flyout>

</Button>

and the visuals are:

Windows Windows Phone
image image

Some controls such as ProgressRing, ToggleSwitch, Hub, etc. are new to WP platform but exists on Win platform.

 

Phone-only controls

Some of the controls (about 20%) are not converged and are considered as platform-specific. Example of such phone-only controls are ListPickerFlyout, ContentDialog, AutoSuggestBox.

ContentDialog is merely a custom message box that support arbitrary content and can span across part or full screen:

image

The AutoSuggestBox is a “smart” version of TextBox with suggestions and tuned events:

image

 

AppBar, SysTray and others

Last category of the controls that partially converged in terms of XAML/code behind but they looks and behave considerably different based on the platform or platform-specific functionality. In this category falls controls like AppBar – while the XAML is fully compatible between two platforms, they looks slightly different and behave considerably different. For example, the app bar on Win platform has two groups of buttons – PrimaryCommands and SecondaryCommands. On WP platform it “translates” to the buttons visible on app bar (PrimaryCommands) and menu items (SecondaryCommands):

<Page.BottomAppBar>

    <CommandBar>

        <CommandBar.PrimaryCommands>

            <AppBarButton Content="Item 1" Icon="Bullets"/>

            <AppBarToggleButton Content="Item 2" Icon="Comment"/>

            <AppBarButton Label="Item 3">

                <AppBarButton.Icon>

                    <FontIcon Glyph=""/>

                </AppBarButton.Icon>

                <AppBarButton.Flyout>

                    <Flyout>

                        <StackPanel Width="250">

                            <TextBlock Text="Warning!" FontSize="24" Margin="0,0,0,20"

                                   Foreground="CornflowerBlue"/>

                            <TextBlock Text="This will destroy your cellular connection! Press OK to proceed!" TextWrapping="Wrap" FontSize="16"/>

                            <Button Content="OK" HorizontalAlignment="Right" Margin="0,20,0,0" Click="Button_Click_1"/>

                        </StackPanel>

                    </Flyout>

                </AppBarButton.Flyout>

            </AppBarButton>

        </CommandBar.PrimaryCommands>

        <CommandBar.SecondaryCommands>

            <AppBarButton Label="Test"/>

            <AppBarToggleButton Label="About" IsChecked="True"/>

        </CommandBar.SecondaryCommands>

    </CommandBar>

</Page.BottomAppBar>

and the visuals are:

Windows Windows Phone
image image

Other differences are that on WP8.1 platform the AppBar is always visible while on Window it is shown by gesture, certain properties and events (IsSticky, Opened, Closed) are ignored on WP8.1, AppBarSeparator is not rendered on WP8.1. While those differences won’t break the code some might do than – for example TopAppBar is not supported on WP and shared code with TopAppBar definition won’t compile for WP platform.

Last in the list is system tray accessibility. While being pure WP control, it considerably changed form SL8.1. In WP8.1 XAML app the SysTray is accessed through Windows.UI.Management.StatusBar.GetForCurrentView() function. It supports async commands to show/hide the UI, changing background and opacity and reports size through Windows.UI.Management.StatusBar.GetForCurrentView().OcculedRect property. In addition it still supports the ProgressIndicator.

 

That’s it for this post. Next time I will be talking about Application lifecycle and Navigation changes.

 

Stay tuned,

Alex

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*