Learn your way! Get started

Windows 8 Using XAML: Bindings, Shapes, Animation

with expert Ken Getz


Course at a glance


Release date 12/3/2012
Level Intermediate
Runtime 5h 58m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs Included
Sample code Included
Exams Included


Enterprise Solutions

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



Course description

Microsoft has released Windows 8, the next release of Windows, along with the release 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 Windows Store-style applications, using the Windows 8 application framework. This framework is available both for XAML developers using C#, VB, or C++; and HTML developers using JavaScript. Learning to create Windows Store style applications requires a bit of a learning curve, but it’s not nearly as steep as the learning curve for the .NET Framework ten years ago. This course introduces the new platform from a developer’s perspective, and focuses on getting started building applications for Windows 8 using C# and XAML.

Prerequisites

This course assumes that you have some programming background and experience using Visual Studio 2010 and C# or Visual Basic. In addition, the course assumes some basic knowledge of XAML markup and basic knowledge of Windows Store applications and Windows 8.

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



Bindings and Converters

Binding (19:27)
  • Introduction (00:45)
  • Binding (00:57)
  • Connecting Sources and Targets (01:58)
  • Under the Hood (01:05)
  • Value Converters (02:49)
  • Demo: Binding Option 1 (01:30)
  • Demo: Binding Option 2 (02:13)
  • Binding Details (02:01)
  • Setting the Binding Mode (01:03)
  • Demo: Two-way Binding (01:26)
  • A Simple Example (01:12)
  • Demo: Text Box Example (01:21)
  • Summary (01:00)
Converters (18:35)
  • Introduction (00:54)
  • Using a Type Converter (00:42)
  • Creating a Type Converter (00:25)
  • Converters (00:47)
  • Handle Null Case (00:30)
  • Converter Warning (00:36)
  • Demo: Binding with Converter (02:18)
  • Demo: Converter Code (02:09)
  • Demo: How a Converter works (01:42)
  • Demo: Creating a Converter (02:42)
  • Referencing the Type Converter (01:00)
  • Using the Type Converter (00:44)
  • Demo: Using VS to make binding (03:15)
  • Summary (00:45)

Templates and Paths

Binding Lists and Data (35:22)
  • Introduction (00:45)
  • Binding Lists and Data Templates (00:46)
  • Demo: Data Templates (02:25)
  • Binding Collections (01:28)
  • Demo: Binding Collections (02:07)
  • Adding a Data Template (01:37)
  • Demo: Static Data Template (01:32)
  • Demo: Dynamic Data Template (02:40)
  • Data Template Example (00:41)
  • Demo: Data Template Example (02:45)
  • Better Living with Data Binding (00:26)
  • Demo: Data Binding (01:15)
  • Instance of Collection Class (00:29)
  • Examining the ListBox Binding (00:20)
  • Examining the Data Template (01:01)
  • Hooking up the Data template (00:18)
  • Selecting an Instructor (00:46)
  • Demo: Binding Data Template (01:43)
  • Avoiding an Event Handler (00:46)
  • Demo: Binding with a Converter (02:50)
  • Binding and Data Templates (01:09)
  • Demo: List (03:18)
  • Demo: Internal Converter (01:45)
  • Demo: Data Template II (02:10)
  • Summary (00:10)
Paths and Geometries (36:45)
  • Introduction (00:39)
  • Using Paths and Geometries (00:40)
  • Paths vs Geometries? (00:41)
  • Ellipse, Line, Rectangle (00:35)
  • Demo: Simple Geometry (02:08)
  • GeometryGroup Element (01:07)
  • Demo: Path and Geometry (04:46)
  • Curves/Lines with PathGeometry (01:36)
  • Segment Types (01:02)
  • PathGeometry Markup (00:35)
  • Demo: Line Segments (02:47)
  • Working with Lines (00:43)
  • Working with Arcs (01:19)
  • Demo: Arcs (05:29)
  • Working with Curves (02:26)
  • Important Tip (00:23)
  • Demo: Bezier Curves (05:07)
  • Geometry Mini-Language (02:33)
  • Demo: Geometry Mini-Language (01:04)
  • Summary (00:53)

Shapes

Shapes and Geometries (24:09)
  • Introduction (00:46)
  • Working with Shapes (00:18)
  • Investigating Basic Shapes (00:41)
  • The Shape Class (02:04)
  • Rectangle and Ellipse Shapes (00:57)
  • Demo: Basic Shape Features (02:52)
  • Rounding Corners (00:57)
  • Demo: Rounded Corners (03:00)
  • Positioning and Sizing Shapes (00:51)
  • Positioning Shapes (00:57)
  • Demo: Stretch Property (02:14)
  • Demo: Positioning shapes (03:14)
  • Resizing Shapes (00:33)
  • ViewBox Control (00:54)
  • Demo: Resizing Shapes (03:07)
  • Summary (00:37)
Line Shape (21:29)
  • Introduction (00:48)
  • Line Shape (01:01)
  • Demo: Line Shape (03:29)
  • Adding Line Caps (01:32)
  • Demo: Line Caps (03:24)
  • Using Dashes (00:29)
  • StrokeDashArray (03:02)
  • Demo: Simple Dashes (02:19)
  • Demo: Dash Caps (02:35)
  • Demo: Stroke Dash Offset (02:00)
  • Summary (00:45)
Polyline, Polygon, and Fill Rule (15:57)
  • Introduction (00:56)
  • Polyline Shape (01:02)
  • Polyline (01:32)
  • Demo: Polyline (03:47)
  • The Polygon Shape (00:53)
  • FillRule (01:58)
  • Demo: Polygon Shape (02:48)
  • Using Line Joins (01:03)
  • Demo: Line Joins (01:14)
  • Summary (00:39)

Brushes

Brushes (31:50)
  • Introduction (00:45)
  • Whats a Brush? (00:28)
  • Missing in Action (00:49)
  • SolidColorBrush Class (00:22)
  • How to Select a Color (01:38)
  • Use Named Colors (00:42)
  • Use #rrggbb or #aarrggbb Syntax (01:18)
  • Use Element.Property Syntax (00:47)
  • Demo: Solid Color Brush (04:05)
  • LinearGradientBrush Class (00:57)
  • LinearGradientBrush (02:25)
  • Rotating the Gradient (00:59)
  • Changing the Stop Points (00:34)
  • Demo: LinearGradientBrush (05:06)
  • Extending the Gradient (01:04)
  • Rectangles Only? (00:21)
  • Demo: Gradient Features (03:34)
  • Demo: Nonrectangular gradients (01:52)
  • Using Visual Studio (00:28)
  • Demo: Using Visual Studio (02:42)
  • Summary (00:45)
Image Brush (13:31)
  • Introduction (00:53)
  • ImageBrush Class (01:28)
  • ImageBrush (00:24)
  • Demo: ImageBrush (04:43)
  • Demo: ImageBrushText (01:11)
  • Using Transparency (01:22)
  • Demo: Transparency (02:32)
  • Summary (00:54)
Transformations (28:56)
  • Introduction (00:40)
  • Transforms (03:35)
  • Repeating Shapes (00:45)
  • Rotate Transform (01:19)
  • Demo: Rotate Transform (03:53)
  • Scale Transform (00:31)
  • Demo: Scale Transform (02:42)
  • Skew Transform (00:39)
  • Demo: Skew Transform (02:38)
  • Translate Transform (00:22)
  • Demo: Translate Transform (00:50)
  • Avoiding Absolute Coordinates (00:56)
  • Demo: TransformOrigin (03:13)
  • Transforming a Control (00:52)
  • Demo: Transforming a Control (01:43)
  • Adding Reflection Effects (01:11)
  • Demo: Reflection effects (01:58)
  • Summary (01:04)

Animation

Animations (15:33)
  • Introduction (00:39)
  • Dependent vs Independent (00:35)
  • Dependent Animation (00:22)
  • What About Custom Animations? (00:38)
  • Built-in Theme Animations (00:37)
  • Windows 8 Theme Transitions (01:33)
  • Using Transitions (00:56)
  • Demo: Transitions (04:39)
  • Demo: Content Theme Transition (04:46)
  • Summary (00:43)
Basic Animations (26:11)
  • Introduction (00:39)
  • Custom Animations (00:32)
  • Getting Started (01:05)
  • Understanding Animation (01:38)
  • Rules of Animation (01:30)
  • Simple Animations (00:38)
  • Demo: Animations (01:21)
  • The Animation Class (00:59)
  • Types of Animation Classes (00:52)
  • Enabling the Animation (01:14)
  • The Storyboard Class (01:17)
  • The Event Trigger (00:22)
  • Theme Animations (00:52)
  • Demo: Theme Animations (04:40)
  • Animate Transform (00:32)
  • Demo: Animate Transform (02:31)
  • Animating Multiple Properties (01:10)
  • Demo: Multiple Properties (03:18)
  • Summary (00:50)
Point and Color Animation (20:46)
  • Introduction (01:07)
  • Using the ColorAnimation Class (01:22)
  • Whats Up With Fill? (01:10)
  • Demo: Animate Color (03:39)
  • Using the PointAnimation Class (00:48)
  • Demo: PointAnimation (01:58)
  • Animation with Key Frames (01:10)
  • Interpolation Methods (01:24)
  • SplineDoubleKeyFrame (00:44)
  • Demo: Key Frames (03:54)
  • Demo: Vertical Key Frame (02:47)
  • Summary (00:37)

Animation Properties

Animation Properties (20:51)
  • Introduction (00:34)
  • Animation Properties (00:12)
  • From Property (01:13)
  • Demo: From Property (02:02)
  • To Property (00:33)
  • By Property (00:37)
  • Demo: By Property (01:10)
  • Duration Property (01:10)
  • AutoReverse Property (00:55)
  • Demo: AutoReverse and Duration (03:53)
  • RepeatBehavior Property (00:32)
  • Demo: RepeatBehavior (01:08)
  • RepeatBehavior and AutoReverse (00:32)
  • Demo: Repeat and AutoReverse (00:44)
  • Repeat for Time (00:52)
  • Demo: Repeat for Time (00:48)
  • Repeat Forever (00:32)
  • BeginTime Property (00:34)
  • Demo: BeginTime (02:10)
  • Summary (00:31)
Animation (28:44)
  • Introduction (00:46)
  • Controlling Playback (00:29)
  • Demo: Controlling Playback (02:02)
  • Easing Functions (00:59)
  • BounceEase (02:19)
  • Easing Functions (02:27)
  • Demo: Easing Functions (02:02)
  • Another Example (01:18)
  • Demo: Easing Colors (01:49)
  • Microsoft Easing Functions (02:30)
  • Creating Animations in Blend (00:30)
  • Demo: Animations in Blend (04:34)
  • Demo: Markup in Blend (03:45)
  • Demo: Blend and Visual Studio (02:19)
  • Summary (00:50)