V 1.0

Programming III.

XMLXAML

Data Binding I.

V 1.0 ÓE-NIK, 2014

XML (w3schools.com)

•A hierarchical way of defining data• XML declaration + elements + attributes

– Elements: <bookstore>, <book>, <title> … – Attributes: <book>-ban category=„…” … 2

<?xml version="1.0"?><bookstore> <book category="COOKING">

<title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price>

</book> <book category="WEB">

<title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price>

</book></bookstore>

V 1.0 ÓE-NIK, 2014

XML• Strict parser rules

– First line: optional format descriptor with character encoding:<?xml version="1.0" encoding="ISO-8859-1"?><?xml version="1.0" encoding="UTF-8"?>

– Every element can contain:• Text content or sub elements• Attributes

– There has to be a root element without sibling (in this example, the <bookstore> element)

– Every tag must be closed (<tag></tag> vagy <tag />)• Every tag must be properly nested• BAD: <a><b></a></b> • GOOD: <a><b></b></a>

– Case sensitive

• Everything depends on the interpretation3

V 1.0 ÓE-NIK, 2014

XAML (eXtensible Application Markup Language)

• XML-based description of object states and hierarchy between .NET objects– We can use classes that can be instantiated and that contain a

default constructor• Anything that is in the XAML can also be expressed in C#

• In WPF we use XAML to build our GUI• During the compile process

– msbuild.exe will compile it into binary data, then add the data as a resource into the assembly– .g.cs -> .baml

– The InitializeComponent() will load it

4

V 1.0 ÓE-NIK, 2014

XAML

• XAML format:

• C# format:

• In XAML, the elements mean creation of an instance• The attributes specify the properties/events

5

<CheckBox Content="Automatikus mentés" Name="checkBox1" IsChecked="True"

Checked="checkBox1_Checked"/>

CheckBox checkBox1 = new CheckBox();checkBox1.Content = "Automatikus mentés";checkBox1.IsChecked = true;checkBox1.Checked += checkBox1_Checked;

V 1.0 ÓE-NIK, 2014

XAML – setting the textual content• With an attribute:

• <Typename.Propertyname> sub-element:

• As a text sub-element

A XAML specifikációja szerint: minden osztály deklarálhat „tartalomtulajdonságot” (Content Property) – ekkor a közvetlen gyermekelem ennek a beállítására szolgál. A ContentControloknál ez a „tartalomtulajdonság” a Content…

6

<CheckBox Content="Automatikus mentés" Name="checkBox1" IsChecked="True"/>

<CheckBox Name="checkBox1" IsChecked="True"> Automatikus mentés</CheckBox>

<CheckBox Name="checkBox1" IsChecked="True"> <CheckBox.Content> Automatikus mentés </CheckBox.Content></CheckBox>

V 1.0 ÓE-NIK, 2014

XAML – setting the complex content• As a sub-element

• <Typename.Propertyname> sub-element

• Syntax error – The Scrollbar is not a ContentControl, there is no Content

7

<CheckBox Name="checkBox1" IsChecked="True"> <Button>Automatikus mentés</Button></CheckBox>

<CheckBox Name="checkBox1" IsChecked="True"> <CheckBox.Content> <Button>Automatikus mentés</Button> </CheckBox.Content></CheckBox>

<ScrollBar Name="scrollBar1"> <Button>Automatikus mentés</Button></ScrollBar>

V 1.0 ÓE-NIK, 2014

XAML – setting the complex content• … with ItemsControl descendants, sub-elements go into the Items

(Collection Syntax)

• … with Panel (content managers), sub-elements go into the Children

8

<Window ... Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="Button" Width="75" ... /> <Button Content="Button" Width="75" ... /> <Button Content="Button" Width="75" ... /> </Grid></Window>

<ListBox > <Button Content="Button" Width="75"/> <Button Content="Button" Width="75"/> <Button Content="Button" Width="75"/></ListBox>

Gyűjteményszintaxis (Collection Syntax)

V 1.0 ÓE-NIK, 2014

XAML• Attached Property Syntax

9

<Grid> <Grid.RowDefinitions> <RowDefinition Height="107*"/> <RowDefinition Height="115*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="66*"/> <ColumnDefinition Width="67*"/> </Grid.ColumnDefinitions> <Button Content="Button1" Grid.Column="0" Grid.Row="0"/> <Button Content="Button2" Grid.Column="1" Grid.Row="0"/> <Button Content="Button3" Grid.Column="0" Grid.Row="1"/></Grid>

V 1.0 ÓE-NIK, 2014

XAML namespaces

• XML namespaces define the allowed xml tags and attributes and keywords

10

<Window x:Class="WpfApplication4.MainWindow” xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid></Window>

V 1.0 ÓE-NIK, 2014

XAML namespaces

• WPF-centered .NET namespaces are imported:– System.Windows– System.Windows.Controls– System.Windows.Data– System.Windows.Media– System.Windows.Navigation ... stb.

• This is the default namespace, no need for extra namespace prefix:

11

<Window x:Class="WpfApplication4.MainWindow” xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"...

<Window x:Class="WpfApplication4.MainWindow” xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid></Grid></Window>

V 1.0 ÓE-NIK, 2014

XAML namespaces

• XAML-specific keywords and the System.Windows.Markup types are imported:– Class, Null, Static, Array, ClassModifier, FieldModifier, DynamicResource,

StaticResource, Key, Name, Code, … • We will use only a few special keywords from this namespace• We have to use the namespace prefix for these keywords

(usually, x:Something )

12

<Window x:Class="WpfApplication4.MainWindow” xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"...

<Window x:Class="WpfApplication4.MainWindow” x:ClassModifier="internal" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Button Content="START!" Name="buttonStart” x:FieldModifier="public"/></Window>

V 1.0 ÓE-NIK, 2014

XAML namespaces• Import a custom .NET namespace

– clr-namespace: namespace_name– assembly: the executing assembly that contains the

namespace, typically .exe/.dll file without the extension– Refer to the documentation:

13

<Window x:Class="WpfApplication4.MainWindow" ... xmlns:System="clr-namespace:System;assembly=mscorlib”> <x:Array Type="System:String"> <System:String>Hello</System:String> <System:String>World</System:String> </x:Array></Window>

V 1.0 ÓE-NIK, 2014

XAML markup extensions• Assign special, highly complex values for a XAML

attribute, usually defined as string and converted into a primitive/complex type

• Customize behaviour:– Use Null– Assign an already existing object– Assign a static value– We want to use a type that does not have a default

parameterless constructor– etc.

• Format: • For every attribute, the allowed keywords between

the {} letters are different – must be careful!14

Property="{…}"

V 1.0 ÓE-NIK, 2014

Data binding I.• Connect any property of a GUI element to another

instance– When the instance changes, the GUI should change as well– When the GUI changes, the instance should change as well– MVVM, we will almost use MVVM

• E.g.: – Display the data of a person:

• textBoxName.Text person.Name• checkBoxOnHoliday.IsChecked person.OnHoliday• checkBoxSick.IsChecked person.Sick

15

V 1.0 ÓE-NIK, 2014

Data binding I.• E.g.:

– Volume slider• label.Content slider.Value

• E.g. : – Set the enabled property of multiple controls based on a

single checkbox• radioButtonXXX.IsEnabled checkBox.IsChecked• OR: stackPanel.IsEnabled checkBox.IsChecked

16

V 1.0 ÓE-NIK, 2014

Data binding I.• E.g. :

– Display certain elements in a listbox• listBox.ItemsSource tömb

• E.g. : – Change the border based on the selected item

• listBox.BorderBrush listBox.SelectedItem

• E.g. :– Display extra data about the selected item

• labelXXXX.Content comboBox.SelectedItem.XXXX

17

V 1.0 ÓE-NIK, 2014

Data Binding I.• Every data binding has a source and a target

– The source is where the data is stored, it has to be a public property of any class

– The target is usually a property of a GUI element that will use the data

• The target must be a Dependency Property• The target class must be a DependencyObject descendant

18

• E.g. : – Display the data of a person:– textBoxName.Text person.Name

– Source: person.Name– Target: textBoxName.Text

V 1.0 ÓE-NIK, 2014

Data Binding I.• XAML using the {Binding} markup extension

– ElementName: if the source is another UI element– Path: the name of the property inside the source

– Alternative syntax

• Equivalent to the following C# code (NEVER USE)– E.g. in the constructor or in the Loaded event handler

19

<CheckBox Name="checkBoxEnabled" Content="Enable!"/><TextBox Name="textBoxToEnable" IsEnabled="{Binding ElementName=checkBoxEnabled, Path=IsChecked}" />

textBoxToEnable.SetBinding(TextBox.IsEnabledProperty,

new Binding("IsChecked") { Source = checkBoxEnabled });

"{Binding IsChecked, ElementName=checkBoxEnabled}"

V 1.0 ÓE-NIK, 2014

Data Binding I. – Defining paths• Simple property inside the source:

– ElementName=checkBoxEnabled, Path=IsChecked• Property of a property:

– ElementName=listBox, Path=SelectedItem.Name• Indexer property:

– ElementName=listBox, Path=Items[0]

20

V 1.0 ÓE-NIK, 2014

Data Binding I. - DataContext• Default source of a data binding• The DataContext is a dependency property, so its

value can be “received/inherited” from the parent UI element / XAML tag– We use this quite often:

21

<StackPanel Name="stackPanel" DataContext="{Binding ElementName=comboBoxPeople, Path=SelectedItem}">

<Label Content="{Binding Name}"/><Label Content="{Binding Age}" <Label Content="{Binding Country}"/><Label Content="{Binding City}"/>

</StackPanel>

V 1.0 ÓE-NIK, 2014

Data Binding I. - DataContext• We can set the DataContextet from C# code:

– XAML code:

– Setting the source:

22

<StackPanel Name="stackPanel" ><Label Content="{Binding Name}"/><Label Content="{Binding Age}" <Label Content="{Binding Country}"/><Label Content="{Binding City}"/>

</StackPanel>

Szemely sz = new Szemely("Péter", 12, "Magyarország", "Budapest");stackPanel.DataContext = sz;

V 1.0 ÓE-NIK, 2014

Data Binding I. - DataContext• Sometimes we specify a Data Binding to a whole object

– Path is not present or Path=.– The whole DataContext is used– Automatic ToString() is called not advised

23

<Label Content="{Binding}"/>

public override string ToString() //Személy osztály ToString(){ return nev + " (" + szuletesiEv + ")";}public MainWindow(){ InitializeComponent(); this.DataContext = new Szemely() { Nev = "Peti", SzuletesiEv = 1985 };}

V 1.0 ÓE-NIK, 2014

Data Binding I.• Possible directions

– OneWay, TwoWay, OneWayToSource, OneTime

– OneWay: the change in the source will change the target, the target will not change the source

– OneWayToSource: the change in the target will change the source, the source will not change the target

– TwoWay: vice-versa– OneTime: one-time initialization from source to target, no

synchronization is done afterwards

24

<TextBox Text="{Binding Value, ElementName=slider, Mode=TwoWay}"

V 1.0 ÓE-NIK, 2014

Data Binding I.• When to update the source?

– If the direction is TwoWay or OneWayToSource

– LostFocus (default for TextBox)– PropertyChanged (usually default)– Explicit: only if UpdateSource() is called– Default (LostFocus/ProperyChanged/Explicit)

25

<TextBox Text="{Binding Value, ElementName=slider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

V 1.0 ÓE-NIK, 2014

Searching for errors...• We get notifications only in the Output window and only

when the data is actually requested– No exception is thrown– Use trace: http://www.wpf-tutorial.com/data-binding/debugging/– Same message for bad names and non-public properties!

26

V 1.0 ÓE-NIK, 2014

Exercise – music playlist manager

27