NET and NET Core 7 XAML Pan Wuming

  • Slides: 24
Download presentation
. NET and. NET Core 7. XAML Pan Wuming 2017

. NET and. NET Core 7. XAML Pan Wuming 2017

XAML: Declarative user interface Programming • WPF • Silverlight is a cross-platform, cross-browser plugin,

XAML: Declarative user interface Programming • WPF • Silverlight is a cross-platform, cross-browser plugin, which contains WPF-based technology Rich Internet Application (RIA) platform • UWP Apps • XAML UI and a C#, VB, or C++ backend • Direct. X UI and a C++ backend • Java. Script and HTML

WPF: Modern graphical display system for Windows • Built-in hardware acceleration • Resolution independence

WPF: Modern graphical display system for Windows • Built-in hardware acceleration • Resolution independence • The underlying graphics technology is Direct. X whether you’re designing complex three-dimensional graphics (Direct. X’s forte) or just drawing buttons and plain text, all the drawing work travels through the Direct. X pipeline. • Graphics, media and animation as the first-class programming concepts • A web-like layout model • Declarative user interface Programming: XAML

Windows and Controls • Window is the root container of UI elements, i. e.

Windows and Controls • Window is the root container of UI elements, i. e. the root of visual tree • To Show information and result • User input • Interaction

Vector Graphics • All WPF graphics are Direct 3 D applications • Direct 3

Vector Graphics • All WPF graphics are Direct 3 D applications • Direct 3 D (part Of Direct. X) is used in graphical applications where performance is important • Uses the video card hardware for rendering • The result: high-quality rich-media UI • Vector-based graphics allows to scale without loss of quality • WPF implements a floating-point logical pixel system and supports 32 -bit ARGB

Audio and Video Support • WPF can incorporate audio and video into a user

Audio and Video Support • WPF can incorporate audio and video into a user interface • Audio support in WPF is a thin layer over the existing functionality in Win 32 and WMP • WPF supports the video in formats WMV, MPEG and some AVI files • Relationship between video and animation is also supported • They are both ways of showing moving images • Animation ca n be synchronized with media

What is XAML? • XAML is a declarative markup language. • XAML directly represents

What is XAML? • XAML is a declarative markup language. • XAML directly represents the instantiation of objects of visible UI element types. • To separate the UI definition from the run-time logic.

Declarative UI with XAML • WPF introduces a new XML--based language for describing UI

Declarative UI with XAML • WPF introduces a new XML--based language for describing UI elements known as XAML • �XAML = e. Xtensible Application Markup Language • XAML is a completely declarative language • A declarative language says "what" • An imperative language says "how" • XAML describes the behavior and integration of components (in most cases UI components)

Shapes • At the lower-level WPF works in terms Of shapes, not in terms

Shapes • At the lower-level WPF works in terms Of shapes, not in terms of painting pixels • Shapes are vector-based and can easily scale • Developers create shape objects and let WPF maintain the display in the most optimized way • WPF provides a number of ready-to-use shape objects like line, rectangle, ellipse, path, etc · • Shape objects can be used inside panels and inside most WPF controls

Direct. X • WPF create multimedia applications with real-time graphics • Such as complex

Direct. X • WPF create multimedia applications with real-time graphics • Such as complex physics-based simulators or cutting-edge action games • WPF applications are Direct. X applications • AS a result, even the most mundane business applications can use rich effects and antialiasing • WPF graphics is entirely vector-based • This allows zoom-in/zoom-out with no loss Of quality

XAML Basics • XAML is a n XML-based language for creating and initializing. NET

XAML Basics • XAML is a n XML-based language for creating and initializing. NET objects • It's used in WPF as a human-authorable way of describing the UI • Used to separate the U I from the C# code • XAML contains a hierarchy of elements representing visual objects • These objects are known as user interface elements or UIelements

Elements and Attributes • UI elements have a set of common properties and functions

Elements and Attributes • UI elements have a set of common properties and functions • Such as Width, Height, Cursor, and Tag properties • Declaring an XML element in XAML • Equivalent to instantiating the Object via a parameterless constructor • Setting an attribute on the Object element • Equivalent to setting a property of the same name

Root Node Namespace: Attribute Value Default Namespace Prefix = a URI (Uniform Resource Identifier)

Root Node Namespace: Attribute Value Default Namespace Prefix = a URI (Uniform Resource Identifier) Mapping to. NET Namespace Class Property Name An Element Attached Attribute Event Method Name

Alternative Value Syntax

Alternative Value Syntax

Styles and Templates • In WPF a style is a set Of properties applied

Styles and Templates • In WPF a style is a set Of properties applied to content used for Visual rendering • E. g. setting the font weight of a Button control • Use them to standardize non-formatting characteristics • WPF styles have specific features for building applications • Ability to apply different visual effects based on user events • Templates in WPF allow you to fully change the UI of anything in WPF • Kinds of templates available within WPF:Control. Template, Items. Panel. Template, Data. Template, Hierarchical. Data. Template