V 1.0 Programming III. XML XAML Data Binding I.

V 1.0ÓE-NIK, 2014 XML (w3schools.com) A hierarchical way of defining data XML declaration + elements + attributes –Elements:,, … –Attributes: -ban category=„…” … 2 Everyday Italian Giada De Laurentiis Learning XML Erik T. Ray

V 1.0ÓE-NIK, 2014 XML Strict parser rules –First line: optional format descriptor with character encoding: –Every element can contain: Text content or sub elements Attributes –There has to be a root element without sibling (in this example, the element) –Every tag must be closed ( vagy ) Every tag must be properly nested BAD: GOOD: –Case sensitive Everything depends on the interpretation 3

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: 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"/> Automatikus mentés Automatikus mentés

V 1.0ÓE-NIK, 2014 XAML – setting the complex content As a sub-element sub-element Syntax error – The Scrollbar is not a ContentControl, there is no Content 7 Automatikus mentés Automatikus mentés Automatikus mentés

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 Gyűjteményszintaxis (Collection Syntax)

V 1.0ÓE-NIK, 2014 XAML Attached Property Syntax 9

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=" xmlns:x=" Title="MainWindow" Height="350" Width="525">

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=" xmlns:x=" <Window x:Class="WpfApplication4.MainWindow” xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525">

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=" xmlns:x=" <Window x:Class="WpfApplication4.MainWindow” x:ClassModifier="internal" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Button Content="START!" Name="buttonStart” x:FieldModifier="public"/>

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”> Hello World

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 <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 <Label Content="{Binding Age}"

V 1.0ÓE-NIK, 2014 Data Binding I. - DataContext We can set the DataContextet from C# code: –XAML code: –Setting the source: 22 <Label Content="{Binding Age}" 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 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: –Same message for bad names and non-public properties! 26

V 1.0ÓE-NIK, 2014 Exercise – music playlist manager 27