XAML

Basics

Data binding

What is XAML?

Where it is?• WPF

• UWP

• Xamarin.Forms

Extensible Application Markup Language (XAML) is a markup language for declarative application programming

Both XAML and HTML coming from XML

Syntax: Elements and Attributes

E.g. How to create button?

<StackPanel> <Button Background="Blue" Content="Click Me"/>

</StackPanel>

StackPanel and button are mapped to the name of the class in assembly

Data bingingSimple and easy way for Windows Runtime apps to display and interact with the data.

Data binding is of two types- One-Way Data binding and Two-Way Data binding.

<TextBox Name="ageText"

Grid.Column="1"

Grid.Row="1"

Margin="2"

Text="{Binding Age, Mode=OneWay}" Text="{Binding Age, Mode=OneWay}"

/>

What is Xamarin?

• Based on Mono open source project

• Write in C# for all platforms

• Does not require knowledge of platform-specific native languages such as Objective-C/Swift for iOS or Java/Kotlin for Android.

• Reusable code

• Xamarin.Native – separate application for each platform • Xamarin.iOS

• Xamarin.Android

• Xamarin.Forms – Cross-platform app

• Xamarin.Essentials

Xamarin.Forms vs Xamarin.Native

The remaining 5-20% contain commands to establish connections with native APIs

Xamarin.FormsOn top on Xamarin NativeUp to 80-95% of the code can be reused

Xamarin.NativeUp to 70-80% of the code can be reused

Isn’t better always to use Xamarin.Forms?

• Performance – layer on top of the layer

• Application size restrictions

• Requirement to follow platform UI design as much as possible

Xamarin.EssentialsUnified way to access Android and iOS resources

• Accelerometer – Retrieve acceleration data of the device in three dimensional space.

• App Information – Find out information about the application.• Barometer – Monitor the barometer for pressure changes.• Battery – Easily detect battery level, source, and state.• Clipboard – Quickly and easily set or read text on the clipboard.• Connectivity – Check connectivity state and detect changes.• Device Display Information – Get the device's screen metrics and

orientation.• Device Information – Find out about the device with ease.• Email – Easily send email messages.• File System Helpers – Easily save files to app data.• Flashlight – A simple way to turn the flashlight on/off.• Geocoding – Geocode and reverse geocode addresses and coordinates.• Geolocation – Retrieve the device's GPS location.• Gyroscope – Track rotation around the device's three primary axes.• Launcher – Enables an application to open a URI by the system.

Magnetometer – Detect device's orientation relative to Earth's magnetic field.MainThread – Run code on the application's main thread.Maps – Open the maps application to a specific location.Open Browser – Quickly and easily open a browser to a specific website.Orientation Sensor – Retrieve the orientation of the device in three dimensional space.Phone Dialer – Open the phone dialer.Preferences – Quickly and easily add persistent preferences.Secure Storage – Securely store data.Share – Send text and website uris to other apps.SMS – Create an SMS message for sending.Text-to-Speech – Vocalize text on the device.Version Tracking – Track the applications version and build numbers.Vibrate – Make the device vibrate.

Frameworks with unified approach like Xamarin:

https://flutter.io/https://ionicframework.com/ https://cordova.apache.org/

XAML

Basics

Data binding

XAML - Why deklarative?

a

<Button Background="Red">Hello World!</Button>

Button btn = new Button();

btn.Background = Colors.Red;

btn.Content = "Hello World!";

this.Children.Add( btn );

XAML – Declarative – focus on “What?” C# - procedural – focus on “How?”

Markup = Object Model

<TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

=

Canvas• Space for drawing

• Relative positions between elements

<Canvas Width="250" Height="200"><Rectangle

Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" />

</Canvas>

Canvas

Rectangle

Canvas

• Relative position from first Canvas parent

<Canvas Background="LightGray"><Canvas Canvas.Top="25" Canvas.Left="25"

Width="150" Height="150" Background="Red">

<Ellipse Canvas.Top="25" Canvas.Left="25" Width="100" Height="100" Fill="White" />

</Canvas></Canvas>

Canvas

<Canvas><Rectangle/>

</Canvas>

Canvas canvas = new Canvas();Rectangle rectangle = new Rectangle();canvas.Children.Add(rectangle);

=

Controls

• All inherit after System.Windows.Controls.Control

• Can be independent like Button, Textbox, TextBlock

• Can be a container for other elements like images

E.g.ButtonCalendarCheckBoxDataGridDatePickerGridViewImagePasswordBox

https://www.tutorialspoint.com/xaml/xaml_controls.htm

Controls

What’s the difference between:TextBlockLanelTextBoxPasswordBoxCheckBoxRadioButton

TextBox – derives from Framework ElementCan display only stringLight

Label – derives from ContentControlCan display images, other controls etc.Heavy

Custom control

• When control doesn't exist and you have to create it from scratch.

• Want to extend or add functionality to a preexisting control.

• Controls need to support theming and styling.

• Want to share control across applications.

Layout with Panels

• Arragne a group of GUI elements in application• Positions of the child elements.

• Sizes of the child elements.

• Layering of overlapping child elements on top of each other.

• Fixed pixel arrangement of controls doesn’t work with different resolutions

StackPanel – children can be arranged in single line, horizontally or verticallyWrapPanel – children elements are positioned sequential from let to right of from top to bottomDockPanel – children relative to each otherCanvasPanel – children can bi positioned explicitly using coordinatesGridPanel – children can be arranged in a tabular form

User Control

• Create a single control of multiple, already existing controls.

• If the control doesn't need support for theming.

User Controls do not support complex customization, control templates, and difficult to style.

• If a developer prefers to write controls using the code-behind model where a view and then a direct code behind for event handlers.

• You won't be sharing your control across applications.

Events

• All of the controls expose some events

• Every time when event takes place, application will be notified

Most commonly used:• Click• MouseDown• MouseEnter• MouseLeave• MouseUp• KeyDown• KeyUp

MVVM – Architecture pattern

• UI architectural design pattern for decoupling UI and non-UI code

• Define your UI declaratively in XAML

• Use data binding markup to link it to other layers containing data and commands

• Loose coupling

• Easier to change individual code units

Binding data in UWP

• Binging target – UI element

• Binding source – property of a class instance

• {Binding}

• {x:Bind} – new for Windows 10; faster; consume less memory; supports better debugging

Single binding

1. Create Model

2. Create ViewModel

3. Initialize it on page

4. Create UI element

5. Bind to element

Single binding demo

Binding to collection of items

Model:

• ObservableCollection<T> - reprsens collection• INotifyPropertyChanged – property of a list changed

• INotifyCollectionChanged – item on the list changed

View:

• ListView – display list

ListView in action

<ListView

ItemsSource="{x:Bind ViewModel.Recordings}" HorizontalAlignment="Center"

VerticalAlignment="Center">

<ListView.ItemTemplate>

<DataTemplate x:DataType="local:Recording">

<TextBlock Text="{x:Bind OneLineSummary}"/>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

ListView more customized<ListView

ItemsSource="{x:Bind ViewModel.Recordings}" HorizontalAlignment="Center"

VerticalAlignment="Center">

<ListView.ItemTemplate>

<DataTemplate x:DataType="local:Recording">

<StackPanel Orientation="Horizontal" Margin="6">

<SymbolIcon Symbol="Audio" Margin="0,0,12,0"/>

<StackPanel>

<TextBlock Text="{x:Bind ArtistName}" FontWeight="Bold"/>

<TextBlock Text="{x:Bind CompositionName}"/>

</StackPanel>

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

Item Collection binding demo

Adding details view

Do not overload the page with all informations. Split the data into views.

<StackPanel DataContext="{Binding SelectedItem,ElementName=recordingsListView}"Margin="0,24,0,0">

<TextBlock Text="{Binding ArtistName}"/><TextBlock Text="{Binding CompositionName}"/><TextBlock Text="{Binding ReleaseDateTime}"/>

</StackPanel>

Adding details view demo

Steps to display data from DB

• Add a connection string.• App.xaml.cs file

• Create a class to hold product data• implement the INotifyPropertyChanged event

• Retrieve products from the SQL Server database• return as an ObservableCollection

• Add a basic user interface.

• Populate the UI with Products.

https://docs.microsoft.com/en-us/windows/uwp/data-access/sql-server-databases

DB Connection demo