XAML Basics - Revision history

CWI: /* Introduction */

2025-09-22T10:57:38Z

‎Introduction

CWI at 12:07, 18 September 2025

2025-09-18T12:07:23Z

JKN at 11:14, 8 January 2021

2021-01-08T11:14:28Z

LDO: /* Templates */

2020-04-28T11:17:58Z

‎Templates

LDO at 09:30, 28 April 2020

2020-04-28T09:30:26Z

LDO: /* Modes */

2020-04-28T09:28:59Z

‎Modes

LDO: /* Modes */

2020-04-28T09:28:13Z

‎Modes

LDO: /* Binding options */

2020-04-28T09:21:29Z

‎Binding options

LDO at 09:19, 28 April 2020

2020-04-28T09:19:28Z

LDO: /* Templates */

2020-04-28T09:18:31Z

‎Templates

@@ Line 2: / Line 2: @@
 == Introduction ==
-This language bases upon XML and is a programming language like every other but used for a distinctive purpose, namely for describing User Interfaces.  These can be built for Windows or mobile applications that use Windows Presentation Foundation (WPF), UWP, and Xamarin Forms, so basically many different forms of applications. We are using XAML in combination with C# in the MVVM Pattern, which will be explained in a different section.
+This language bases upon XML and is a programming language like every other but used for a distinctive purpose, namely for describing User Interfaces.  These can be built for Windows or mobile applications that use Windows Presentation Foundation (WPF), UWP, and Xamarin Forms or Maui {{Version/MobileSince|5.0}}, so basically many different forms of applications. We are using XAML in combination with C# in the MVVM Pattern, which will be explained in a different section.
 === Getting started ===
@@ Line 34: / Line 34: @@
 ** https://docs.microsoft.com/en-us/visualstudio/xaml-tools/designing-xaml-in-visual-studio?view=vs-2019
 <br>
 == MVVM pattern ==

← Older revision		Revision as of 12:07, 18 September 2025
Line 144:		Line 144:
	* [[XAML]]		* [[XAML]]

−	[[Category:XAML]]	+	[[Category:XAML\|XAML Basics]]
		+	[[Category:Mobile\|XAML Basics]]

← Older revision		Revision as of 11:14, 8 January 2021
Line 143:		Line 143:
	* [[XAML Best practices]] <br>		* [[XAML Best practices]] <br>
	* [[XAML]]		* [[XAML]]
		+
		+	[[Category:XAML]]

@@ Line 120: / Line 120: @@
 A '''<span style="color: orange">Control Template</span>''' describes the visual appearance and structure of a control. All of the UI elements have some kind of appearance as well as behavior, e.g., Button has an appearance and behavior. Click event or mouse hover events are the behaviors which are fired in response to a click and hover, and there is also a default appearance of button which can be changed by the Control template.
-A '''<span style="color: green">Style Template</span>''' describes a uniform look to a set of controls. Styles give us the flexibility to set some properties of an object and reuse these specific settings across multiple objects for a consistent look.
+A '''<span style="color: lightseagreen">Style Template</span>''' describes a uniform look to a set of controls. Styles give us the flexibility to set some properties of an object and reuse these specific settings across multiple objects for a consistent look.
 A '''<span style="color: dodgerblue">Data Template</span>''' defines and specifies the appearance and structure of the collection of data. It provides the flexibility to format and define the presentation of the data on any UI element. It is mostly used on data related Item controls such as ComboBox, ListBox, etc.
@@ Line 127: / Line 127: @@
 In the UBIK surrounding we have a UBIKThemes.xaml file for our Client which describes a lot of style/control templates and colors etc. These are also configurable for our customizers, so they can adapt it to each project. But this process got more and more complicated, you just couldn’t have an overview of the things that you changed and the things that are here by default.
 In order to avoid such cases we created a new way to adapt this particular file. The process would look like this, you copy the style/color/control and create a new UBIKThemes file where you place the things you want to customize. The client will go over the default UBIKThemes and after that over your customized one, the default templates will be replaced -> identified via x:Key, so be careful to have them identical.
 == Namespaces ==

← Older revision		Revision as of 09:30, 28 April 2020
Line 136:		Line 136:
	Customizing in our UBIK Environment occurs a lot through templates which can define different areas in the app. Only templates are customizable in UBIK, there are some areas which are not yet to be customizable.		Customizing in our UBIK Environment occurs a lot through templates which can define different areas in the app. Only templates are customizable in UBIK, there are some areas which are not yet to be customizable.
	You can access the XAML templates via the [[Developer Mode]] in the Client. By activating it you can extract the needed XAML file into your XAML folder, further information can be found in the wiki article of the Developer Mode.		You can access the XAML templates via the [[Developer Mode]] in the Client. By activating it you can extract the needed XAML file into your XAML folder, further information can be found in the wiki article of the Developer Mode.
		+
		+	== Further information regarding XAML ==
		+	* [[Developer Mode]] <br>
		+	* [[Xamarin XAML]] <br>
		+	* [[XAML Best practices]] <br>
		+	* [[XAML]]

@@ Line 55: / Line 55: @@
 <div> [[File:bindings.png|thumb|Binding modes]] </div>  <br>
 ==== Modes ====
-* ''''OneWay'''' — values are transferred from the source to the target
+* '''''OneWay''''' — values are transferred from the source to the target
-* ''''OneWayToSource'''' — values are transferred from the target to the source
+* '''''OneWayToSource''''' — values are transferred from the target to the source
-* ''''TwoWay'''' — values are transferred both ways between source and target
+* '''''TwoWay''''' — values are transferred both ways between source and target
-* ''''OneTime'''' — data goes from source to target, but only when the BindingContext changes
+* '''''OneTime''''' — data goes from source to target, but only when the BindingContext changes

@@ Line 110: / Line 110: @@
 </Interactivity:Interaction.Behaviors>
 </source>
 == Templates ==

@@ Line 122: / Line 122: @@
 A '''<span style="color: green">Style Template</span>''' describes a uniform look to a set of controls. Styles give us the flexibility to set some properties of an object and reuse these specific settings across multiple objects for a consistent look.
-A '''<span style="color: blue">Data Template</span>''' defines and specifies the appearance and structure of the collection of data. It provides the flexibility to format and define the presentation of the data on any UI element. It is mostly used on data related Item controls such as ComboBox, ListBox, etc.
+A '''<span style="color: dodgerblue">Data Template</span>''' defines and specifies the appearance and structure of the collection of data. It provides the flexibility to format and define the presentation of the data on any UI element. It is mostly used on data related Item controls such as ComboBox, ListBox, etc.
 '''Style/Control/Data Definition in UBIK''' <br>