New Controls and Updates in Windows 8.1 and Visual Studio 2013 – Part 2

New XAML with VB, C#, or C++ Controls

Introduction

Today I will continue where I left of yesterday. Today I will demonstrate the new XAML controls included in Windows 8.1 and Visual Studio 2013. Let us start.

New XAML with VB, C# or C++ Controls

1. AppBar
2. CommandBar
3. DatePicker
4. Flyout
5. Hyperlink
6. MenuFlyout
7. SettingsFlyout
8. TimePicker

Our Project

Open Visual Studio 2013 Preview on Windows 8.1 Preview or Visual Studio 2013 RC on Windows 8.1 RTM with VB or C#. Give it a name such as MyNewXAMLStuff.

AppBar and CommandBar

The AppBarButtons, AppBarToggleButton and AppBarSeparator controls are new in Windows 8.1. These buttons are round instead of rectangular, which allows us to create command buttons to reflect proper design guidelines. Have a look here for the usage of the new AppBar.

In the same league as the AppBar, the CommandBar also makes it easier to create basic app bars. The AppBar is a bit more advanced though, as you could add images, progress bars and textblocks to it whereas the normal CommandBar cannot host those types of content. Here is how you create a basic CommandBar.

You can find the AppBar and CommandBar tools in the toolbox, or you can manually type the following XAML code:

    <Page.BottomAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x_Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <AppBarButton x_Uid="Camera" Icon="Camera" Label="Camera"/>
                </StackPanel>
                <StackPanel x_Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <AppBarButton x_Uid="Add" Icon="Add" Label="Add" />
                    <AppBarButton x_Uid="Remove" Icon="Remove" Label="Remove"/>
                    <AppBarSeparator/>
                    <AppBarButton x_Uid="Delete" Icon="Delete" Label="Delete"/>
                </StackPanel>
            </Grid>
        </AppBar>

    </Page.BottomAppBar>

DatePicker and TimePicker

The new Windows 8.1 DatePicker control enables the users to select localized dates; let’s add one now:

Double click on the DatePicker tool in the toolbox, or enter the following XAML code:

<DatePicker x_Name="PlayDate" Header="when are you coming to play?" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="294,40,0,0" RenderTransformOrigin="-0.118,0.468"/>

The nice thing with the DatePicker is that it includes a Header property, which you could use to prompt the user on what to do with the Picker.

Figure 1 – DatePicker in Action

The new TimePicker functions mostly the same as the DatePicker but allows the user to select or set a specific time. Double click the tool in the Toolbox, or enter the following XAML code:

<TimePicker x_Name="PlayTime" Header="what time will you arrive?" ClockIdentifier="24HourClock" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,26,0,0"/>

If you set the ClockIdentifier property to 24 Hours, the AM / PM box will disappear.

Figure 2 – TimePicker in action

Flyout

The new Flyout control lets you temporarily show the UI in relation to what the user is doing; let us add one now and see how it behaves. Add a button to your page, give it a Content of “Show FlyOut” in the Properties Window. Select the Miscellaneous section in the Properties window. You will see the Flyout properties as shown in Figure 3.

Figure 3 – Flyout Properties For Button

Select New next to Flyout; a box as displayed in Figure 4 will show up, select Flyout, OK.

Figure 4 – Flyout, Select object

You will notice that the Properties Window has changed a bit; click New next to the Content. Now we can choose the Textblocks, buttons, whatever controls we want to be part of this Flyout. Remember, you can make use of the StackPanel control if you want more than one control part of the Flyout UI.

My XAML code looks like this:

     <Button Content="Show FlyOut" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button.Flyout>
                <Flyout>
                    <StackPanel>
                        <TextBlock Text="Are You sure?"/>
                        <Button Click="Button_Click">Yes!</Button>
                        <Button Click="Button_Click">No!</Button>
                    </StackPanel>
                </Flyout>
            </Button.Flyout>
        </Button>

Figure 5 – Flyout on Button in Action

HyperlinkButton

A sort of Hyperlink control was the very first thing I searched for in Windows 8 and VS 2012; sadly to my (and I believe millions of others) surprise it was wasn’t present. Luckily it is now included in Windows 8.1 and it functions juts like a normal hyperlink. Check it out:

You could add the HyperlinkButton through the Toolbox, or simply type the following XAML code:

<HyperlinkButton NavigateUri="http://www.codeguru.com" Content="CodeGuru" HorizontalAlignment="Left" VerticalAlignment="Top"/>

Quite self-explanitory. The NavigateUri is the address where the link should go to, and Content is the link’s text.

Figure 6 – HyperlinkButton in action

MenuFlyout

MenuFlyout produces a list of commands similar to a normal menu. This list of items can be chosen individually. Thank you! It works basically the same as the normal FlyOut that we have worked with already. Go ahead and play a bit with it, here is what I have ended up with:

        <MenuFlyout x_Key="FlyoutMenu">
            <MenuFlyoutItem Text="One"/>
            <MenuFlyoutItem Text="Two"/>
        </MenuFlyout>

This shows two menu items. You could add the event handlers in there, but I’ll leave that exercise up to you.

Just a note, it will show a box similar to the next figure prompting you for each menu item’s settings.

Figure 7 – MenuFlyout Items Dialog

SettingsFlyout

SettingsFlyout helps us with controlling application settings. This is also long overdue and has now been added. It is not a control you could add through the toolbox. You have to click Project, Add New Item, Settings Flyout, as shown in the next picture:

Figure 8 – Project, Add Item, Settings Flyout

Now, it will bring you to the Setting page’s design. You can modify it as you like. In this example, I will be drawing a line here (almost). It still will show up when you run your app and press the Windows Logo key + I. This is the Settings Flyout’s default XAML code:

<SettingsFlyout
    x_Class="MyNewXAMLStuff.MySettings"
    
    xmlns_x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns_local="using:MyNewXAMLStuff"
    xmlns_d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns_mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc_Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="MySettings"
    d_DesignWidth="346">

    <!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The StackPanel(s) below define individual content sections -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Lorem ipsum" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </TextBlock.Text>
            </TextBlock>

        </StackPanel>

        <!-- Define more Content Sections below as necessary -->

    </StackPanel>
</SettingsFlyout>

Figure 9 – SettingsFlyout in Action

Updated XAML with VB, C++ or C#

The following list of XAML controls has also been updated for improved performance and usability:

1. FlipView
2. ComboBox
3. DatePicker
4. TimePicker
5. Slider
6. Edit controls
7. Placeholder
8. ScrollViewer

Let us see how each of them has changed:

1. FlipView
2. ComboBox, Date & Time Pickers, Sliders and Edit Controls
3. Placeholder Text
4. ScrollViewer

Conclusion

As you can see, each of the XAML items I demonstrated needs very little coding, that is very nice indeed and will save a ton of info. I sincerely hope that you have learned a great deal today. Until next time, cheers!