XAML User Interface Creation in C#

1. By Vanessa Winnecke XAML User Interface Creation in C#

2. eXtensible Application Markup Language A declaritive markup language Used to create an application’s user interface Got its start in 2006 when Windows Presentation Foundation (WPF) was introduced WPF is part of the .NET Framework XAML

3. Common declarative languages include those of database query languages such as SQL • Code is written in such a way that it describes what you want to do, not how you want to. • Context independent. • Alternative to declaritive is Imperative. • What should appear, not possible interactions. • User interface is part of the machine that handles the human-machine interactions. Declarative Markup Language

4. Employs XAML to define and link various interface elements. • Can be hosed as an embedded object in a website. • Aims to unify a number of common user interface elements, such as 2D/3D rendering, runtime animation, and media. • Elements can be linked and manipulated based on various events, user interactions, and data bindings. Windows presentation foundation(WPF)

5. XAML simplifies creating a UI for .NET Framework application. • Create visible UI elements in declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files, joined to the markup through partial class definitions. • XAML directly represents the instantiation of objects in a specific set of backing types. • Unlike other languages, which are interpreted language without such a direct tie to a backing type system. • XAML is declarative(like HTML), it requires the addition of code if you need to add run-time logic to application. Xaml overview (wpf)

6. If your application uses only XAML, you can create and animate UI elements, and configure them to respond in a limited way to user input(by using event triggers), but your application cannot perform and respond to calculations or spontaneously create new UI elements without the addition of code. Code is stored in a separate file. Seperation of UI design and underlying code enables developers and designers to work more closely together, without delaying progress. Example:

7. Avoid or limit the use of inline code. Maintaing a separation between markup and code-behind keeps the designer and developer roles much more distinct. Inline code can be awkward to write, because you are always writing into the XAML generated partial class, and can only use the default XML namespace mappings. Because you cannot use using statements, you must fully qualify API calls. Code behind – c#

8. http://www.c-sharpcorner.com/1/190/xaml.aspx Details: using XAML GridView, ListBox, ToolTip, TextBox, Slider, etc. Code-Behind – c# continued

9. XAML object elements An object element typically declares an instance of a type. Object element syntax always starts with an opening angle bracket(<), followed by the name of the type where you want to create an instance.

10. Attribute syntax (properties) Properties of an object can often be expressed as attributes of the object element. An attribute syntax names the property that is being set in attribute syntax, followed by the assignment operator (=)

11. Property Element Syntax This is another way of doing the same thing. It is useful when attribute syntax is not possible, object or information necessary to proved the property value cannot be adequately expressed within the quotation mark and string restrictions of attribute syntax. Syntax for the tag is <typeName.propertyName>

12. Collection syntax Optimizations that produce more human-readable markup Items that you declare in markup as child elements within that property’s value become part of the collection.

13. Attribute Syntax (events) Attribute syntax can be used for members that are events rather than properties. The attribute’s name is frequently the name of the event. In the WPF implementation of events for XAML, the attribute’s value is the name of the handler that implements that event’s delegate. This example, markup assigns a handler for the Click event to a Button created in markup.

14. Markup extensions Markup extensions are a XAML language concept. Used to provide the value of an attribute syntax, curly braces ({and}) indicate a markup extension. Example: the Style property takes an instance of the Style class, the attibute references the extension, StaticResource. Retures a style that was previously instantiated in a resource dictionary.

15. Xaml root elements and xaml namespaces XAML file must have only one root element. Use a root element that has a prominent meaning in WPF application model (Window or Page for page, ResourceDictionary for an external dictionary, or Application for the application definition.) Contains xmlns and xmlns:x, indicate XAML processor.

16. x:Key: sets a unique key for each resource in ResourceDictionary, and will probably account for 90% of the x: usages x:Class: Specifies the CLR namespace and class name for the code-behind. x:Name: Specifies a run-time object name for the instance that exists in run-time code after an object element is processed. The x: prefix

17. Events and xaml code-behind Within a project, the xaml is written as a .xaml file, and a CLR language such as C# is used to write a code-behind file. The location of the XAML code-behind file for the XAML file is identified by specifying a namespace(ExampleNamespace) and class(ExamplePage) as the x:Class(ExampleNamespace.ExamplePage). For adding a behavior for an object element, use an existing event of the element class, and write a specific handler for that even, when the event is raised at run time.

18. https://msdn.microsoft.com/en-us/library/ms752059(v=vs.110).aspxhttps://msdn.microsoft.com/en-us/library/ms752059(v=vs.110).aspx