UX/UI Updates and Changes in Windows 8.1 and Visual Studio 2013

Introduction

Hello again! Today I will continue my quest to show you all the funky controls to expect in Windows 8.1 and VS 2013. Today I will concentrate on the UI / UX updates and changes. Ready? Good, let's get started!

Our Project

Come on, you know the drill by now! Open Visual Studio 2013 and start a new Visual Basic Windows Store Project. Design your page to resemble Figure 1.

Our Design
Figure 1 - Our Design

The XAML code looks like the next code segment:

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="UX / UI New Things & Updates" VerticalAlignment="Top" Margin="107,31,0,0" FontSize="24"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Speak SSML" VerticalAlignment="Top" Margin="254,124,0,0" FontSize="18"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Speak Plain Text" VerticalAlignment="Top" Margin="254,84,0,0" FontSize="16"/>
        <Button x:Name="btPlainText" Content="Plain Text" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="661,78,0,0"/>
        <Button x:Name="btSSML" Content="SSML" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="688,121,0,0"/>
        <ComboBox x:Name="cboVoice" HorizontalAlignment="Left" VerticalAlignment="Top" Width="239" Margin="10,81,0,0"/>
        <TextBox x:Name="tbPlainText" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="392,71,0,0" Width="236"/>
        <TextBox x:Name="tbSSML" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="392,124,0,0" Width="287" Height="118" AcceptsReturn="True" Text="<speak version='1.0' xmlns='http://www.w3.org/2001/10/synthesis'
                       xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
                                     xsi:schemaLocation='http://www.w3.org/2001/10/synthesis  
                                     http://www.w3.org/TR/speech-synthesis/synthesis.xsd'
                                                    xml:lang='en-US'>
                                                               I am <prosody contour="(0%,+80Hz) (10%, +80Hz) (40%, +80Hz)">Awesome</speak>"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Enter Phone" VerticalAlignment="Top" Margin="764,192,0,0" FontSize="16"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Enter Email" VerticalAlignment="Top" Margin="781,126,0,0" FontSize="14"/>
        <TextBox x:Name="tbEmail" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Margin="870,120,0,0" Width="283"/>
        <TextBox x:Name="tbPhone" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Margin="870,179,0,0" Width="283"/>
        <Button x:Name="btContactCard" Content="Show Contact Card" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="814,228,0,0"/>
    </Grid>

New Features and Objects

There are a lot of new exciting controls and updates with the coming of VS 2013 and Windows 8. Some of them I have already talked about, some areas I haven't even touched, and might not ever get to them. If only I could stop playing with the controls and features I have found thus far, I would probably get to them... Anyways, one control I have already spoekn about is the new SearchBox. I mention it here again, because this is really a very handy tool to know about.

New SearchBoxes

Windows.UI.Xaml.Controls.SearchBox for XAML apps and WinJS.UI.SearchBox for JavaScript apps are new controls added with Windows 8.1. As mentioned in an earlier article I wrote entitled : In-App File Management with VS 2013 and Windows 8.1, "An exciting new tool that has been included in Visual Studio 2013 for Windows 8.1 is the new SearchBox control. This makes content searching in an app very very easy. " (This article also has sample code on its usage).

Windows.Media.SpeechSynthesis

My favourite new Windows 8.1 addition is the SpeechSynthesis API (Text-To-Speech). It can be used to prompt for input, notifications, warnings, instructions, anything you can think of! It includes three voices (speech-synthesis engines), all you need to do is to supply the type of voice (male / female) and language (US English / UK English). Let's put it to use, but first, as always, let's add the necessary Imports for our entire program first:

Imports Windows.Media.SpeechSynthesis 'For Speech
Imports Windows.ApplicationModel.Contacts 'For Contacts

Now declare our modular variables (I also always do this second. I guess i am a creature of habit):

    Private MyMedia As MediaElement 'Create Media Element For Speech
    Dim Synth = New SpeechSynthesizer() 'Speech Synth Object

Now, let's see what voices we can work with:

    Private Sub LoadVoices() 'Load All Voices Into ComboBox
        'Get Installed Voices

        Dim AllVoices = SpeechSynthesizer.AllVoices

        'Get Selected Voice
        Dim CurrSelVoice As VoiceInformation = Synth.voice

        'Loop Through All Voices
        For Each objVoice As VoiceInformation In AllVoices

            'Create New Item For Each
            Dim NewItem As ComboBoxItem = New ComboBoxItem()

            'Set Voice Properties
            NewItem.Name = objVoice.DisplayName
            NewItem.Tag = objVoice
            NewItem.Content = objVoice.DisplayName

            'Add To COmboBox
            cboVoice.Items.Add(NewItem)

            'Current Voice?
            If CurrSelVoice.Id = objVoice.Id Then

                NewItem.IsSelected = True 'Make Selected

                cboVoice.SelectedItem = NewItem

            End If
        Next

    End Sub

This loads the pre-programmed voices into a combobox. Not the voice itself, the reference to it! Now, where do these come from?

The Voices
Figure 2 - The Voices

As said, these voices are already programmed-in for us. There are three we can use:

  1. Female - US accent, Her name is Zira
  2. Female - UK accent, Her name is Hazel
  3. Male - US accent, His name is David

Based on their gender and pronunciation of words, we need to make the best choice as to our specific needs. Unfortunately I am not aware of any other voices or accents, so I, being a South African will have to settle with these - you do not want to hear the Afrikaans-English accent!! It can get quite scary :) Luckily, I am completely bilingual.

Now, before I continue with showing you how to get these characters to talk, we still need to know a very important thing: The difference between plain text and SSML.

Plain Text

Plain text, as its name implies allows us to use the three characters above to say anything - as you can see in Figure 1. No problem there, but here is where SSML comes in handy!

SSML

Speech Synthesis Markup Language closes the gap between speaking normally and speaking robotically. OK, what do I mean? I mean with SSML we can allow for voice pitch, we can emphasize words, we can pause, we can even provide a phonetic pronunciation of given text! You can see a small example of its markup inside Figure 1. But here it is again, just in case:

        <TextBox x:Name="tbSSML" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="392,124,0,0" Width="287" Height="118" AcceptsReturn="True" Text="<speak version='1.0' xmlns='http://www.w3.org/2001/10/synthesis'
            xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
             xsi:schemaLocation='http://www.w3.org/2001/10/synthesis  
              http://www.w3.org/TR/speech-synthesis/synthesis.xsd'
                 xml:lang='en-US'>
                  I am <prosody contour="(0%,+80Hz) (10%, +80Hz) (40%, +80Hz)">Awesome</speak>"/>

In the code segment above, we specify that we are using SSML, then we control the prosody of the word Awesome. Although nothing happens yet, we have set it up correctly. Now, let's see how to make these voices talk. Add the following:

    Private Async Sub btPlainText_Click(sender As Object, e As RoutedEventArgs) Handles btPlainText.Click

        'Speak Supplied Plain Text
        Dim PlainTextStream As SpeechSynthesisStream = Await Synth.SynthesizeTextToStreamAsync(tbPlainText.Text)

        MyMedia.SetSource(PlainTextStream, PlainTextStream.ContentType)

        MyMedia.Play()

    End Sub

    Private Sub cboVoice_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles cboVoice.SelectionChanged

        'Obtain Selected Voice
        Dim SelItem As ComboBoxItem = DirectCast(cboVoice.SelectedItem, ComboBoxItem)
        Dim SelVoice As VoiceInformation = DirectCast(SelItem.Tag, VoiceInformation)

        Synth.voice = SelVoice


    End Sub

    Private Sub MainPage_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded

        LoadVoices() 'Load Voices

    End Sub

    Private Async Sub btSSML_Click(sender As Object, e As RoutedEventArgs) Handles btSSML.Click

        'Speak Supplied SSML Text
        Dim SSMLStream As SpeechSynthesisStream = Await Synth.SynthesizesSmlToStreamAsync(tbSSML.Text)

        MyMedia.SetSource(SSMLStream, SSMLStream.ContentType)
        MyMedia.Play()

    End Sub

We call the LoadVoices sub when our page has opened. With both btPlainText and btSSML, we supply the text stream to speak, and play it through a media element. Lastly, we determine which voice was seleted in the cboVoice combobox.

AlarmApplicationManager

The AlarmApplicationManager class allows you to create alarm apps for the lock screen. You will need to give the appropriate permissions to this app.

Contact Cards

This new set of APIs consist of ShowContactCard, AppointmentsProvider, AppointmentManager. This allows users to look up information about people and communicate with them via emails or calls. Let us experiment now.

In your project, add the following code:

    Private Sub btContactCard_Click(sender As Object, e As RoutedEventArgs) Handles btContactCard.Click

        Dim MyContact As Contact = New Contact 'New Contact Object

        'Email
        Dim MyEmail As ContactEmail = New ContactEmail

        MyEmail.Address = tbEmail.Text
        MyContact.Emails.Add(MyEmail)

        'Phone
        Dim MyPhone As ContactPhone = New ContactPhone

        MyPhone.Number = tbPhone.Text
        MyContact.Phones.Add(MyPhone)

        'Set Up Display Rectangle
        Dim TempRect As Rect
        TempRect.Height = 100
        TempRect.Width = 100
        TempRect.X = 400
        TempRect.Y = 450

        'Show New Contact
        ContactManager.ShowContactCard(MyContact, TempRect, Windows.UI.Popups.Placement.Default)

    End Sub

This is very straightforward. It simply takes what we have entered and creates a ContactCard from it. The result after I have filled in my details look like Figure 3.

Contact Card
Figure 3 - Contact Card

Updated Controls or Features

Tiles

Two new tile sizes have been added. We can now have those present in Windows 8: Small Tiles ( 70x70 ) and Large Tiles (310 x 310 ). Because of the addition of these two new tiles, the naming convention has also changed. The two I have mentioned before, and the older ones are now renamed to Medium ( 150x 150 ) and Wide ( 310 x 150 ).

Window Resizing

Apps can now be resized and aren't fixed to the snapped and fill view states. One app can open more than one window at the same time and it can launch other apps as well. I am excited by this news, and all I could say was : "Finally!"

Conclusion

Short and sweet. Obviously there are many more interesting controls and updates out there, but I hope you have learned something new and valuable from my article and that you would put your knowledge to good use. Until next time, cheers!



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: August 20, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT When you look at natural user interfaces as a developer, it isn't just fun and games. There are some very serious, real-world usage models of how things can help make the world a better place – things like Intel® RealSense™ technology. Check out this upcoming eSeminar and join the panel of experts, both from inside and outside of Intel, as they discuss how natural user interfaces will likely be getting adopted in a wide variety …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds