A simple UWP App that will speak based on user’s input

Learning - UWP, Uncategorized

Universal Windows Platform (UWP) allows you to develop the App with one API set for all types of devices with different screen resolution. Furthermore, you can code the UWP app using your own preferred language.

For this tutorial, we will use C# to create a simple UWP App. The basic function of the App is just to take the text input from the user and speak it out. We will create the App using the Visual Studio 2017, if you do not have the Visual Studio installed, you can download the community version here.

First, open the visual studio, then go to the File -> New -> Project

01. New Project

A New Project dialog will be pop-up. Under the templates, choose Visual C# and then Windows Universal. You will find 4 options available on the right panel, choose “Blank App”. After that, give a name to your App, e.g., “inputAndSpeak”. Leave the rest as default, and click OK.

02. Project Template

Once you clicked OK, a dialog will pop-up asking you for the target version and minimum version, just leave them as default and click OK to proceed.

03. Default Selection

 

You should have a Solution Explorer which contains all the necessary files for the application development. We will focus on the MainPage.xaml. So under the Solution Explorer, locate the MainPage.xaml, and double-click on it.

04. MainPageXAML

The MainPage.xaml will be opened. It contains a splits views contain both design view and code view. You can arrange the splits views in a top-down or left-right layout. On top of the design view, you can find the device model the design view is catered for. Change the device model to 8″ tablet as follows:

05. SelectDevice

Then, open the Toolbox, and drag a “Button” and a “TextBox” into the blank page area in the design view. Visual Studio will update the XAML code accordingly.

06. AddButtonTextBox

07. InsideTheGrid

In the code view, we can see that there are two items being added to the Grid, i.e., the Button and the TextBox. Along the TextBox, you can find all the related properties subject to how you placed your TextBox in the blank page. Besides that, you will also see the Text=”TextBox”,  if you run the program, you will see the string TextBox appear inside your TextBox element. To get rid of the default text string, just delete the “TextBox” and leave it empty as “”.

08. EmptyTheText

Add a name to the TextBox element, the name is used for us to refer to the TextBox element inside the C# code. Before the “>”, type Name=”userInput”.

09. GiveTextBoxAName

You can try to run your program by clicking the run button (or press F5). You can enter the text into the TextBox, but when you click the button, nothing is happening. We need to add code to the button when the user clicks the button. In other words, what we want the program to do when user trigger the clicking event. To add the code, simply double-click the button in the design view. Visual Studio will automatically generate a Button_Click event in the .cs file.

10. DoubleClickButton

However, there are no codes inside the Button_Click subroutine. First, let’s capture the text string inputted by the user:

11. stringInput

After that, let’s add a MediaElement to translate the text input to the audio output. Note that in order to use the MediaElement, you need to use the related library available in Windows API. To add the related library, just hover your cursor over the red curly line, and a lightbulb will pop-up asking you how you would like to fix the problem. Select “using Windows.Media.SpeechSynthesis;”. Alternatively, you can add the library manually.

12-mediaelement.jpg

15. UsingUIpopUP

Now, let’s add a conditional statement to check if the user got input anything in the provided TextBox, if not, a message dialog will be pop-up to remind the user to input the text. If the TextBox is not empty, which means the user had inputted some strings, then use the MediaElement to play the input text. Note that you need to insert the related library for the UI.Popups to enable the alert message dialog.

14. CheckIfUserInputSomething

15. UsingUIpopUP

Note that the SynthesizeTextToStreamAsync method is an asynchronous method, hence, you need to add “async” for your function. Add “async” before the void, as follows:

16. AddAsync

Congratulations! Now your program is able to speak according to the user’s text input. Try out your program by clicking the run button (the green button). Enjoy your program!

17. RunLocalMachine

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s