Master Code on Innovation and Inclusion

Size: px

Start display at page:

Download "Master Code on Innovation and Inclusion"

Dora Page
5 years ago
Views:

1 Microsoft x HKEdCity: Master Code on Innovation and Inclusion Train-the-Trainers Workshop Writing Applications in C# with Visual Studio

2 Content I. Getting the Tools Ready... 3 II. Getting Started with XAML - RelativePanel... 4 III. Insert a New Page and Design with Grid IV. Challenge Time UI Design V. Using C# to Make the Application Interactive VI. Challenge Time C# Implementation VII. Connecting Your Application with Database VIII. Next Steps Forward... 28

I. Getting the Tools Ready Windows 10 OS A Windows 10 OS would enable you to develop the latest form of applications on Windows, Universal Windows App (UWP Apps), that can be deployed on Windows

Visual Studio 2015 Community Visual Studio is the classic and standard tool for building applications in C#, from the traditional ones such as WPF application to what we called UWP apps nowadays.

3 I. Getting the Tools Ready Windows 10 OS A Windows 10 OS would enable you to develop the latest form of applications on Windows, Universal Windows App (UWP Apps), that can be deployed on Windows phone, tablet, PC, Xbox One and more interesting, on HoloLens. Visual Studio 2015 Community Visual Studio is the classic and standard tool for building applications in C#, from the traditional ones such as WPF application to what we called UWP apps nowadays. Visual Studio also came along with a designer view tool named Blend for Visual Studio. It provides an easier touch on Visual Design for your application. Now you can download Visual Studio 2015 Community for free here: To ensure your computer s capability to develop the latest form of application on Windows, you have to install the right SDK by choosing custom install on the installer.

II. Getting Started with XAML - RelativePanel XAML XAML is a dedicated language used for UI of Windows-based applications. It can be seen as a language similar to HTML.

4 II. Getting Started with XAML - RelativePanel XAML XAML is a dedicated language used for UI of Windows-based applications. It can be seen as a language similar to HTML. A common format of a line of XAML code would be like this: <Object Property= Value >Content</Object> Example: <Textbox FontSize= 50 Foreground= Blue >Hello</Textbox> Although we are going to use Blend for Visual Studio to create the application, which allows developers to use drag-and-drop to create a User Interface, it is still important to understand the code as sometimes editing the code could be more efficient than crafting in the design view. Blend for Visual Studio Search Blend for Visual Studio in the search bar besides the start button. Then open the software. After opening it you may click New Project to kick-start your application design. Click New Project

5 Choose Blank App (Universal Windows) as the project type. Name the project as CodeForGood, then click OK to start building the template for your project. After the project template is generated, you shall see the blank area which is the design view of your current application. Click on the white area

6 The first thing that you may work on is to change the background color of the application. Inside the Property window, you can browse click Background and choose the way that you like to color the background, be it a solid one or a gradient one. Properties Window Other than using default colors or pattern as the background, you can indeed insert your own pictures into the project with a few steps below: 1. On Solution Explorer window, right-click at the Assets folder 2. Choose Open Folder in File Explorer

7 3. Copy and paste the images which you like to add into the folder through File Explorer 4. Back to Visual Studio, expand the Assets folder and click the Show all files icon on the Solution Explorer task bar. Right-click on the newly added pictures and select Include in Project Show all files Include in Project

Choose your own background With background settled, we can move on to adding more elements into

8 5. Now, you can choose your own picture from the imagesource button in the Property window for background. Choose your own background With background settled, we can move on to adding more elements into the applications such as some buttons and display text. They can be browsed through the element assets, and use drag-and-drop method to apply on your application. Click the arrow button

9 Try to create a TextBlock which is used to display text to users, then edit the property such as font size, foreground and text content in the Property window. Remember to give a name to the object too: Title

Name the two buttons as Start_Button and About_Button.

10 Now, try to create two more buttons on the application too, with button text set as Start and About respectively. Name the two buttons as Start_Button and About_Button. You may as well make use of the Layout property to position the text and buttons better. Position the object with Alignment and Margin

right-click on your project name, then choose Add and click New

11 III. Insert a New Page and Design with Grid Add New Item in a Project To add a new blank page for your project, you can right-click on your project name, then choose Add and click New Item Add new item Then choose Blank Page and name the project as FunctionPage

On the Object and Timeline window (or press Ctrl+Alt+T), you can right-click on the TopAppBar and choose Add

12 With another new User Interface, another thing that we would like to explore is the default app bar that Visual Studio is able to provide to you. On the Object and Timeline window (or press Ctrl+Alt+T), you can right-click on the TopAppBar and choose Add CommandeBar. Right-click TopAppBar And very soon you see a bar with some buttons appeared there, which you can edit their properties through the Property window Change the symbol here

13 Now we would touch on the part where coding is required. In the middle bottom of the Window, you shall see a tab that says Design and XAML. Clicking on XAML will provide you a new window with a bunch of code. XAML tab for coding Grid is like a creating table in Excel. You should be able customize the number of rows and columns that you would need. With rows and columns defined, a big grid will become many smaller grids. Afterwards, you can use those areas defined to place different objects in different places. A normal way to define rows and columns inside a grid is illustrated below: <Grid x:name="controlpad" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="2.5*"/> <RowDefinition Height="2.5*"/> </Grid.RowDefinitions> </Grid>

14 With the code above implemented, you will have a 3x3 Grid area. You may have observed there are * behind the numbers of the width/height definition. What it means here is, with * putting behind the number, the length of that side would be adjust in a ratio assignment. Hence the 3 rows created previously will be assigned with height equal to a 1:2.5:2.5 ratio. This would enable your app interface to become more dynamic. Auto on the otherhand, means the length of that side of the grid will be expanded along with the content placed inside. Hence, the more content that you place into a grid assigned with Auto width/height, the more area it will conquer in the app interface, vice versa. While locating the grid area, below is a reference map for the code generated above: Grid.Row= 0 Grid.Column= 0 Grid.Row= 0 Grid.Column= 1 Grid.Row= 0 Grid.Column= 2 Grid.Row= 1 Grid.Column= 0 Grid.Row= 1 Grid.Column= 1 Grid.Row= 1 Grid.Column= 2 Grid.Row= 2 Grid.Column= 0 Grid.Row= 2 Grid.Column= 1 Grid.Row= 2 Grid.Column= 2 In XAML, index calculation starts from 0. For example, if you want to call out the very middle grid, you need the code below: <Grid Grid.Row = 1 Grid.Column= 1 > <TextBlock x:name= Testing /> </Grid>

15 What s more interesting is, you can use RowDefinition / ColumnDefinition inside a smaller grid like below: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="2.5*"/> <RowDefinition Height="2.5*"/> </Grid.RowDefinitions> <Grid Grid.Row = 1 Grid.Column= 1 > <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> </Grid> </Grid> The above code would result in the grid below: Grid.Row= 0 Grid.Column= 0 Grid.Row= 0 Grid.Column= 1 Grid.Row= 0 Grid.Column= 2 Grid.Row= 1 Grid.Column= 0 Grid.Row= 0 Grid.Column= 0 Grid.Row= 1 Grid.Column= 0 Grid.Row= 0 Grid.Column= 1 Grid.Row= 1 Grid.Column= 1 Grid.Row= 1 Grid.Column= 2 Grid.Row= 2 Grid.Column= 0 Grid.Row= 2 Grid.Column= 1 Grid.Row= 2 Grid.Column= 2

5*"/> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> <RowDefinition

16 Now back at the project, try to insert the below code inside the <Grid></Grid>: <Grid.RowDefinitions> <RowDefinition Height="0.5*"/> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> The above basically cut the app into 4 horizontal areas. The integration of the code should look like below:

cc You can then start dragging buttons and textboxes inside these areas. First thing to suggest though, you can actually place a RelativePanel inside one of any grids.

17 cc You can then start dragging buttons and textboxes inside these areas. First thing to suggest though, you can actually place a RelativePanel inside one of any grids. It can greatly help you position your objects with such implementation. For Grid.Row=1, you may try to add the below code: <Grid Grid.Row="1"> <RelativePanel> </RelativePanel> </Grid> Then back to the Design view, further add one more TextBlock named as NameQuestion and one TextBox named as NameInput inside the second row of Grid (specified in the below picture). RelativePanel property Specify the Object that you want the current object to be placed above Alignment within the grid As you might have observed, after placing objects inside a relative panel, you can actually, use other objects to configure a relative positioning for the object that you intend to build. Other than using other objects for relative positioning, you can as well use the whole area of the RelativePanel to do positioning such as aligning the object in the center horizontally.

IV. Challenge Time UI Design Now try to build the following with what you have just learnt 1.

Row=0 Add a textblock and 2 buttons for user to choose the gender in Grid.

chosen Add a Button in Grid.Row=3 for user to proceed to the question part 2.

18 IV. Challenge Time UI Design Now try to build the following with what you have just learnt 1. FunctionPage Add a textblock below the app bar describing the situation in Grid.Row=0 Add a textblock and 2 buttons for user to choose the gender in Grid.Row=2 When user choose one of the gender, there should be a boundary in another color indicating the choice the user has chosen Add a Button in Grid.Row=3 for user to proceed to the question part 2. Playground Add another Blank Page named Playground Devide the pages into 3 rows of grid Add TextBlocks that display some messages to the user plus an image file to simulate the character Add a question through TextBlock in Grid.Row=1 Add 4 answer buttons plus a submit button in Grid.Row=2 Reference Images:

V. Using C# to Make the Application Interactive With buttons, texboxes and pages created, now we lack a series of C# code to make these pages actually communicative.

Click & Event To ensure a button would trigger a event, you may first click on the Start_Button, then further click on the Thunder icon in the property Window.

19 V. Using C# to Make the Application Interactive With buttons, texboxes and pages created, now we lack a series of C# code to make these pages actually communicative. Now let s go back to MainPage.xaml to start adding functions into the app. Click & Event To ensure a button would trigger a event, you may first click on the Start_Button, then further click on the Thunder icon in the property Window. Next, give a name of the event besides the Click property such as Start_Button_Click. Provide a name for the event Event handler button that looks like a thunder After that, press Enter on that row with your keyboard, then Visual Studio will bring you to another page named MainPage.xaml.cs directly.

Add the line of code to direct user from one page to another within private void Start_Button_Click(object sender, RoutedEventArgs e) illustrated below private void Start_Button_Click(object sender,

navigate(typeof(functionpage)); private void Start_Button_Click(object sender, RoutedEventArgs e) is an event that enables what inside it are to be triggered after clicking the Start_Button. this.

20 Add the line of code to direct user from one page to another within private void Start_Button_Click(object sender, RoutedEventArgs e) illustrated below private void Start_Button_Click(object sender, RoutedEventArgs e) this.frame.navigate(typeof(functionpage)); private void Start_Button_Click(object sender, RoutedEventArgs e) is an event that enables what inside it are to be triggered after clicking the Start_Button. this.frame.navigate(typeof(pagename)); is the code that we would use to navigate user from one page to another. PageName here simply means the name of the page you would like to direct the user to. Now click on the little green triangle, which is the debug/release button that can help you to test the app against real environment. After launch, you shall be able to use the Start_Button to go to the next page. After debugging you should see tha app screen like this

Content Dialog You may as well use dialog box to interact with users for instruction or minor messages. Inside MainPage.xaml, add another Click property for the About_Button.

21 Content Dialog You may as well use dialog box to interact with users for instruction or minor messages. Inside MainPage.xaml, add another Click property for the About_Button. Then try to add the below code inside public sealed partial class MainPage : Page in MainPage.xaml.cs: private async void About_Button_Click(object sender, RoutedEventArgs e) ContentDialog about = new ContentDialog(); about.title = "About"; about.content = "This app is developed by Microsoft Hong Kong Limited"; about.primarybuttontext = "OK"; await about.showasync(); Defining Variables and Collecting Data Inputted by User Inside FunctionPage.xaml.cs, add the below line above public FunctionPage() to add an object called name which would store data that belong to the string datatype (mix of characters, symbols and numbers) public static string name; To capture the user s input in the NameInput Textbox, you may use the below code: name = NameInput.Text;

variables being carried over throughout the whole application or just to keep within the same page.

22 Hence, the string name will capture whatever values the user key in the textbox. The difference between using public and private is on the fact that whether you want the data collected in the variables being carried over throughout the whole application or just to keep within the same page. After captured NameInput.Text in the FunctionPage as name inside public Playground(), you can then use it in the Playground page like: HelloMsg.Text = "Hello, " + FunctionPage.name;

23 If-statement If-statement is very useful in helping you to control the user s behavier in your application. For exmaple, if the user didn t input any value in the NameInput TextBox in FunctionPage and click I m Ready, you should actually stop user from advancing with code like below: private async void ProceedButton_Click(object sender, RoutedEventArgs e) name = NameInput.Text; if (string.isnullorempty(name)) ContentDialog Reminder = new ContentDialog(); Reminder.Title = "Reminder"; Reminder.Content = "Please check if you have inserted your name and selected the gender"; Reminder.PrimaryButtonText = "OK"; await Reminder.ShowAsync(); else this.frame.navigate(typeof(playground)); The format of using if-statement is: if(condition satisfied)take actions or if(condition satisfied) take some actions else if (another condition satisfied) take other actions

24 VI. Challenge Time C# Implementation Now try to build the following with what you have just learnt 1. FunctionPage Capture user s gender Upon clicking the button I m Ready, the user will be directed to the Playground page 2. Playground Display Boy/Girl image according to the user s input in the previous page on gender Enable user to see what answer they have chosen with visual effect Capture the answer the user has chosen with string Assign different scores to different answer Reference Image:

VII. Connecting Your Application with Database Although Visual Studio is a product from Microsoft, while you can actually integrate the application solution with products beyond Microsoft.

25 VII. Connecting Your Application with Database Although Visual Studio is a product from Microsoft, while you can actually integrate the application solution with products beyond Microsoft. For this demo application, you can actually connect it with MySQL database. Before that, you will need extension on refefrence in this project: Download here: Add two new items in this project while this time we choose Class instead of BlankPage, namely GetData and ShowData GetData.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace CodeForGood public class GetData public string name get; set; public int score get; set; public GetData(string whatname, int whatscore) name = whatname; score = whatscore;

26 ShowData.cs (code continue in next page) using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using System.Text; using System.Threading.Tasks; namespace CodeForGood public class ShowData private static ShowData _showdata = new ShowData(); private ObservableCollection<GetData> _alldata = new ObservableCollection<GetData>(); public ObservableCollection<GetData> AllData get return _showdata._alldata; public IEnumerable<GetData> GetData() try using (MySqlConnection connection = new MySqlConnection( ConnectionString to be inserted here connection.open(); MySqlCommand getcommand = connection.createcommand(); getcommand.commandtext = "SELECT UserName, UserScore FROM userdetails ORDER BY UserScore"; using (MySqlDataReader reader = getcommand.executereader()) while (reader.read()) _showdata._alldata.add (new GetData(reader.GetString("UserName"), reader.getint32("userscore"))); catch (MySqlException) // Handle it <span class="wp-smiley wp-emoji wp-emoji-smile" title=":)">:)</span> return _showdata.alldata; public bool InsertNewData(string whatname, int whatscore) GetData newgetdata = new GetData(whatname, whatscore); // Insert to the collection and update DB try

using (MySqlConnection connection = new MySqlConnection( ConnectionString to be inserted here )) connection.open(); MySqlCommand insertcommand = connection.createcommand(); insertcommand.

27 using (MySqlConnection connection = new MySqlConnection( ConnectionString to be inserted here )) connection.open(); MySqlCommand insertcommand = connection.createcommand(); insertcommand.commandtext = "INSERT INTO userdetails(username, insertcommand.parameters.addwithvalue("@name", newgetdata.name); insertcommand.parameters.addwithvalue("@score", newgetdata.score); insertcommand.executenonquery(); _showdata._alldata.add(newgetdata); return true; catch (MySqlException) // Don't forget to handle it return false; public ShowData() In the above, replace the line with ConnectionString to be inserted here with below: "Database=code4good;Data Source=ap-cdbr-azure-southeast-b.cloudapp.net;User Id=bafa5843bcae70;Password=a3ef7582;SslMode=None" Finally, add the below line of code for the Submit_Button: pp.show_data.insertnewdata(codeforgood.functionpage.name, AccuScore); For now, the user s name and score will be send to your MySQL Database

28 VIII. Next Steps Forward There are still more things that you can work on to make this project more meaningful: 1. Retrieve Data from the Database Leverage on what we have built in the ShowData.cs, may potentially create a leaderboard to enable users to compare their ranking and understand how strong they are 2. VisualState in XAML VisualState is a new method that you can call on XAML to enable you to design an application on Windows with responsive interface You may try to implement the code below in the FunctionPage of the app: <VisualStateManager.VisualStateGroups> <VisualStateGroup x:name="visualstategroup"> <VisualState x:name="visualstate"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="1200"/> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="FemaleButton.Width" Value="400"/> <Setter Target="FemaleChosen.Width" Value="420"/> <Setter Target="MaleButton.Width" Value="400"/> <Setter Target="MaleChosen.Width" Value="420"/> </VisualState.Setters> </VisualState> <VisualState x:name="visualstate1"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="0"/> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="FemaleButton.Width" Value="180"/> <Setter Target="FemaleChosen.Width" Value="200"/> <Setter Target="MaleButton.Width" Value="180"/> <Setter Target="MaleChosen.Width" Value="200"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> 3. Windows 10 IoT Core With use of Windows 10 IoT support on Raspberry Pi, may create applications that have physical content in real life for user to interact. Learn more: windowsondevice.com 4. Xamarin With use of Xamarin, you can actually replicate the code to further export the application to Android and ios platform. Learn more: xamarin.com

windows-10-universal #windows- 10-universal

windows-10-universal #windows- 10-universal Table of Contents About 1 Chapter 1: Getting started with windows-10-universal 2 Remarks 2 Examples 2 Installation or Setup 2 Creating a new project (C# / XAML)