Learn your way! Get started

Metro Style Apps Using C#, Part 2: Creating UI

with expert Ken Getz


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 7/28/2012
Level Beginner
Runtime 3h 52m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

Microsoft has released the Release Preview version of Windows 8, the next release of Windows, along with release candidate versions of Visual Studio 2012 and Expression Blend 2012. These new versions allow developers to get started today in creating applications hosted on this exciting new operating system. Although all Windows 7 applications should run fine, the new "look and feel" for Windows 8 requires developers to learn how to create Metro style applications, using the Metro application framework. This framework is available both for XAML developers using C#, VB, or C++; and HTML developers using JavaScript. Learning to create Metro style applications requires a bit of a learning curve, but it is not nearly as steep as the learning curve for the .NET Framework ten years ago. This course introduces the new platform from a perspective of a developer, and focuses on creating the User Interface of Metro style applications for Windows 8 using C# and XAML.

Prerequisites

This course assumes that you have at least some programming experience in one or more modern programming languages. JavaScript will be particularly easy for you to learn if you have experience with any C-style languages—including Java, C#, C++, or Visual Basic .NET would be helpful—but this is not required. The focus here is not on programming concepts but on the structure, syntax, and use of the JavaScript language.

Learning Paths

This course will help you prepare for the following certification and exam:
MCSD: Windows Store Apps
70-484: Essentials of Developing Windows Store Apps Using C#

Meet the expert

Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.

Course outline



Creating UI

Working With Controls (18:35)
  • Introduction (00:44)
  • Working with Controls (01:09)
  • Demo: Controls (03:53)
  • Demo: Columns (03:31)
  • Demo: Alignment (04:06)
  • Demo: Reviewing Markup (05:03)
  • Summary (00:06)
Setting Properties And Events (19:28)
  • Introduction (00:15)
  • Setting Properites (01:17)
  • Demo: Setting Properites (01:20)
  • Demo: Context Menu (02:00)
  • Demo: Background Brush (01:54)
  • Events (00:42)
  • Creating Event Handlers (00:28)
  • Demo: Click Event Handler (02:36)
  • Demo: Run App (00:48)
  • Demo: Other Event Handler (02:48)
  • Demo: Third event Handler (04:21)
  • Demo: Run Third Event Handler (00:47)
  • Summary (00:06)
Investigating Controls (30:02)
  • Introduction (00:15)
  • Investigating Controls (01:06)
  • Progress Controls (01:21)
  • Demo: Metro Samples (04:48)
  • Button Controls (02:12)
  • Demo: Buttons (03:23)
  • ComboBox (01:39)
  • Slider (00:45)
  • Image (01:24)
  • Tooltip (00:58)
  • Popup (01:00)
  • Demo: ComboBox (03:32)
  • Demo: Slider (03:34)
  • Demo: Popup (03:22)
  • Summary (00:35)

Styles and Controls

Popup Menu & Styling Controls (20:30)
  • Introduction (00:57)
  • PopupMenu (01:33)
  • PopupMenu Results (00:58)
  • Demo: Context Menu (02:00)
  • Demo: Context Menu Code (04:04)
  • Demo: Scenario Two (04:34)
  • Styling Controls (00:54)
  • Demo: Styling Buttons (05:19)
  • Summary (00:06)
Styles (18:17)
  • Introduction (00:15)
  • What"s Going On? (01:09)
  • Creating a Style (00:22)
  • Applying a Style (01:10)
  • Demo: Setting Styles (02:37)
  • Style Inheritance (00:48)
  • Demo: Inheritance (02:47)
  • Demo: Another Style (03:52)
  • Standard Styles (00:49)
  • Summary (00:06)
  • GridView Control (00:21)
List View Control (13:08)
  • Standard Styles (00:49)
  • Introduction (00:15)
  • GridView Control (00:21)
  • ListView and GridView Steps (01:14)
  • Demo: ListView & GridView (04:11)
  • Demo: ItemsPanel (04:46)
  • Demo: Another Scenario (01:45)
  • Summary (00:06)
Semantic Zoom Control (22:21)
  • Introduction (00:15)
  • SemanticZoom Control (01:38)
  • Demo: SemanticZoom (03:04)
  • Demo: SemanticZoom Code (02:53)
  • Demo: GetGroupsByCategory (03:05)
  • Demo: GroupStyle (03:03)
  • Demo: Zoom Control (06:15)
  • Demo: ItemsSource Property (01:34)
  • Summary (00:32)

Surfaces and Views

Surfaces (20:00)
  • Introduction (00:39)
  • Investigating App Surfaces (00:42)
  • App Window, or Canvas (00:55)
  • App Bar (01:05)
  • Wheres the AppBar? (00:51)
  • Demo: App Bar (04:20)
  • Demo: App Bar Style (04:50)
  • Demo: Sticky App Bar (01:47)
  • Charms Bar (02:05)
  • Demo: Charms Bar (02:36)
  • Summary (00:06)
More on Surfaces (22:55)
  • Introduction (00:15)
  • Message Dialogs (00:41)
  • Popups (00:52)
  • Add a Popup (00:26)
  • Popup for Collecting Info (00:15)
  • Popups for Warnings (00:19)
  • Popups for Drop-Down Menus (00:15)
  • Popups for More Info (00:15)
  • Popup Guidelines (00:26)
  • Context Menus (01:23)
  • Toasts (00:55)
  • Using Toasts (01:07)
  • Advantages (00:54)
  • Using the Library (01:31)
  • A Hidden "Gotcha" (00:46)
  • Demo: Toasts (04:48)
  • Demo: Hooking up Buttons (03:29)
  • Demo: More Toasts (04:06)
  • Summary (00:06)
Messages and Views (12:08)
  • Introduction (00:15)
  • Errors (00:20)
  • Inline Error Text (00:36)
  • Error or Warning Bar (00:36)
  • Message Dialog (00:31)
  • Defining Layouts and Views (00:23)
  • Views (00:35)
  • Handling Views (01:05)
  • Screen Orientation (00:12)
  • User Interaction Views (00:29)
  • Layouts (00:37)
  • Adapting for Multiple Layouts (00:42)
  • Testing in Different Layouts (01:05)
  • Hint! (00:41)
  • Demo: Testing Layouts (03:47)
  • Summary (00:06)
Layout Changes (17:14)
  • Introduction (00:15)
  • Reacting to Layout Changes (01:04)
  • Demo: Layout Changes (04:01)
  • Creating State-Handling Markup (01:05)
  • Visual States (01:20)
  • Making Layout Changes (01:27)
  • Modifying Properties (02:00)
  • Add or Remove Controls? (00:37)
  • Demo: View States (05:16)
  • Summary (00:06)
Modifying Views (18:14)
  • Introduction (00:15)
  • Modifying ListView Layout (00:33)
  • Demo: Modifying Views (04:18)
  • Demo: OnNavigatedTo (03:17)
  • Demo: Basic Operation (04:03)
  • Demo: View States (02:12)
  • Demo: Snapped View (02:49)
  • Summary (00:45)