Advanced Rich App Graphics with XAML

מק"ט: #1390 | משך קורס: 40 שעות אק'

This advanced course will teach you how to create stunning user interfaces using the most advanced markup language – XAML. We will dive deep into the graphics engine of XAML based applications. You will understand how XAML applications "Think" in vector graphics. We will introduce the basic elements that allow you to draw rich graphics in WPF and explain how to use them and how to arrange them so that they can be reused. You will learn how to create complex geometries and combine them with various brushes in order to create graphic entities. You will learn how to apply transformations in order to modify their layout and how to apply effects in order to modify their looks. In order to arrange them on the screen, you will learn layout in depth. Once you have mastered the building blocks, we will show you how to manipulate them programmatically. You will learn how to create animations, and how to apply the same principals in 3D. Finally, we will talk about practical design work and how to convert graphical design into a real life UI.

*שדות חובה
PDF version


  • Build stunning fluid and rich GUI using XAML.
  • Apply the most challenging graphics designs in their applications.
  • Create elegant animations and transitions and use them in their apps.
  • Use Microsoft Blend effectively to improve their development process.

קהל יעד

This course is intended for professional developers with one or more years of experience creating applications for windows or the web, who are comfortable programming C# and would like to learn how to create the most stunning applications using XAML.

תנאי קדם

  • At least 2 years' experience programming in C#
  • Previous experience building GUI


Module 1: Vector Graphics

  • Raster Graphics
  • What is Vector Graphics
  • DPI Independence
  • Demo: Effective Pixel and Scaling


Module 2: Shapes

  • Shapes Overview
  • Ellipse and Rectangle
  • Polyline and Polygon
  • The Path
  • The Stretch Property
  • The Path Language
  • Demo: Drawing Shapes in Blend


Module 3: The Colors Theory

  • Named colors overview
  • ARGB Model
  • Additive Colors explained
  • HSV Model
  • Alpha Channel
  • HTML Format


Module 4: Brushes

  • Overview of Brushes
  • Solid Color Brush
  • Overview of Gradients
  • Editing Linear Gradients
  • Editing Radial Gradients
  • Editing Gradients with Blend
  • Image Brushes
  • Tile Brushes
  • Demo: Brush with Tiles
  • Drawing Brushes
  • Visual Brushes
  • Demo: Form Reflection using Visual Brush


Module 5: Geometries

  • Geometries Overview
  • Simple geometries (Ellipse and Rectangle)
  • Path Geometry, Figures and Segments
  • Composition (GeometryGroup and CombinedGeometry)
  • StreamGeometry
  • The path markup syntax
  • Filling Geometries
  • Programming Geometries
  • Demo: Creating Interactive Callout geometry


Module 6: Drawings

  • Drawing Overview
  • Geometry Drawings
  • Image Drawings
  • Other Drawings
  • Demo: Interactive Drawing brush


Module 7: Transformations

  • Render Transform Vs. Layout Transforms
  • Rotate Transforms
  • Translate Transforms
  • Skew Transforms
  • Scale Transforms
  • Combining Transforms
  • Demo: transforming a drawing
  • About Origin of transforms


Module 8: Effects

  • Blur and Drop Shadows
  • Pixel Shaders


Module 9: Panels and the Layout System

  • The layout system explained
  • Layout Properties
  • Basic Panels: Canvas, Stack Panel and Wrap Panel
  • The Grid
  • Additional Panels: Uniform Grid, Dock Panel
  • The Scroll Viewer
  • The View Box
  • On Scrolling and Virtualization
  • The Virtualizing Stack Panel
  • Virtualization properties
  • Sample: Responsive Layout: Calculator
  • Sample: Responsive Layout: Screen Layout


Module 10: Clipping and Opacity

  • The Clip property
  • The Opacity Mask Property
  • Demo: Interactive Clipping


Module 11: Animation

  • Animation overview
  • Demo: Programmatic Animations using Composition Target
  • Animation classes
  • Demo: Using Animations in code
  • Key Frame animations
  • The Storyboard
  • Demo: Animations in Blend
  • Easing Functions
  • Path Based Animations
  • Demo: Morphing Geometry
  • Demo: Animating Gradient
  • Demo: Starting storyboards from Triggers


Module 12: 3D Graphics

  • Getting Started with 3D Graphics
  • Cameras and Coordinate Systems
  • Transform 3D
  • Model 3D
  • Visual 3D
  • Viewport 3D
  • 2D and 3D coordinate system transformations


Module 13: Working with Designs

  • Developer Designer interaction
  • Importing from Photoshop
  • Importing from Illustrator