This tutorial uses the XAML designer, document outline and toolbox to build a portion of the UI for the app. You’ll see how to change size and alignment of UWA controls, name controls and set properties for the controls.
- [Voiceover] Let's review the user interface…that I'll build in this video.…I took a screen shot of my wire frame…and I put it in this demo code folder.…In fact I took two screen shots.…It's these two PNG files.…The first PNG I'm looking at is the UI that I built…in the iOS application and it's similar…to the interface that I built for the Android app.…I decided to simplify things somewhat in this example.…Here's my newer UI.…So I have just a single row of data here.…That will make it quicker to build the user interface…for the first phase of the app.…
I have a text area which is called a text block in XAML.…Then next to that I have a button, a map button.…Next to that I have a call button.…Across the bottom of the screen,…I have the same UI I used in the iOS application,…where I have a calculate tour duration button…and a text area where I can output the length of the tour.…When you build UI in a Universal Windows application,…you use a XAML file.…So I'll double click on this MainPage.xaml.…That will load the Designer.…
Author
Walt Ritscher
Updated
7/7/2016Released
3/31/2016In this course, Walt Ritscher helps develop a sample app for each of the three platforms using Visual Studio and the IDEs in Xamarin (including Xamarin Studio). He touches on the processes that make Android, iOS, and Windows app development unique. Then he shows how to recreate the three apps as a single cross-platform app, and test and debug the app using Xamarin's powerful emulators. He also covers UI design with Xamarin Forms, the data binding engine that automatically syncs data between views and data sources, and pages, Xamarin's templates for content, navigation, tabbed, carousel, and master pages.
- What is Xamarin?
- Using Xamarin Forms and Xamarin Studio
- Setting up the development environment in Xamarin
- Touring the Xamarin IDEs
- Creating a new project in Visual Studio
- Creating the app UI
- Debugging the app on an emulator
- Creating a code library for the app
- Understanding the elements of a Xamarin cross-platform app
- Define UI with markup in Xamarin Forms
- Understanding data binding
- Exploring pages and the five page types
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome54s
-
Microsoft acquires Xamarin3m 58s
-
What you should know1m 42s
-
-
1. Overview of the Xamarin Tools
-
What is Xamarin?4m 2s
-
Xamarin for Android4m 23s
-
Xamarin for iOS3m 42s
-
Xamarin for Windows Phone1m 42s
-
Use Xamarin Test Cloud4m 20s
-
2. Set Up the Development Environment
-
3. Get Acquainted with the IDEs
-
4. Create the TourStop App for Android
-
Create a UI for the app9m 36s
-
Debug the app on an emulator8m 32s
-
5. Create the TourStop App for iOS
-
Use a Mac for Apple builds1m 54s
-
Create a UI for the app7m 30s
-
Debug the app on a simulator5m 16s
-
Add a custom TableViewCell2m 41s
-
Add a custom TableViewSource5m 12s
-
Test the new UI3m 2s
-
6. Create the Universal Windows TourStop App
-
7. Create the TourStop App for Cross Platform
-
8. Xamarin Forms
-
Define UI with markup7m 7s
-
Navigate to other pages4m 50s
-
Understand the XAML syntax10m 16s
-
Work with picker views6m 38s
-
Work with text4m 1s
-
Show activity or progress3m 56s
-
Work with images4m 54s
-
Work with the StackLayout3m 42s
-
Work with the grid layout4m 42s
-
Use absolute layouts2m 5s
-
Use relative layouts3m 18s
-
9. Data Binding
-
Apply a simple binding3m 52s
-
Bind from view to view1m 31s
-
Work with lists3m 34s
-
Model View ViewModel (MVVM)3m 39s
-
10. Pages
-
Explore the page types3m 59s
-
Work with ContentPage2m 45s
-
Use the MasterDetailPage3m 13s
-
-
Conclusion
-
Next steps1m 38s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Create the basic grid layout