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  
תגיות