V 1.0 Programming III. XAML Data Binding I.

V 1.0ÓE-NIK, 2014 XAML namespaces Namespaces define the allowed tags and attributes The one without the prefix (xmlns) allow us to use the tags defined in the referenced namespace without any prefix (e.g. Window, Grid...) The one with prefix (xmlns:x) allow us to use the tags defined in the referenced namespace with the specified prefix (x:Name, x:FieldModifier) 2 <Window x:Class="WpfApplication4.MainWindow” xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525">

V 1.0ÓE-NIK, 2014 XAML namespaces This imports the most basic WPF-centered.NET namespaces into the XAML: –System.Windows –System.Windows.Controls –System.Windows.Data –System.Windows.Media –System.Windows.Navigation... etc. No need for prefixes in tags/attributes 3 <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 This imports the XAML-specific keywords and some of the types in System.Windows.Markup : –Class, Null, Static, Array, ClassModifier, FieldModifier, DynamicResource, StaticResource, Key, Name, Code, … Only a few of them will be used, the prefix is usually x Name vs x:Name; “See also AutomationProperties.Name VS x:Name, AutomationProperties.Name is used by accessibility tools and some testing tools.” 4 <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 We can import any arbitrary.NET namespace –clr-namespace:name_of_namespace NO SPACES ALLOWED!!! –assembly: Typically DLL/EXE file that contains the class (without the extension) – refer to the manual 5 <Window x:Class="WpfApplication4.MainWindow"... xmlns:System="clr-namespace:System;assembly=mscorlib”> Hello World

V 1.0ÓE-NIK, 2014 XAML markup extensions Using this syntax, we can specify complex content into one single attribute: using string, we create a simple new object Usage cases: –Null value (Content="{x:Null}“) –Associate content with an already existing instance/static class/property –Create instance with a non-default constructor –Data binding! “Take the value from another class” –etc. Format: Every markup extension has its own syntax/attributes 6 <SomeTag SomeAttribute="{…}"

V 1.0ÓE-NIK, 2014 Data Binding I. Connect a property of a UI element with a property of another object instance –When the instance property changes, the GUI should automatically refresh –When the GUI changes, the instance property should change as well –Usually this “object instance” is a simple class instance, but it can also be another UI element E.g.: Display a person in a window –txtName.Text  personInstance.Name –chkHoliday.IsChecked  personInstance.OnHoliday –chkSick.IsChecked  personInstance.IsSick 7

V 1.0ÓE-NIK, 2014 Data Binding I. E.g.: –Volume slider: the Label near it should display the current volume label.Content  slider.Value E.g.: –The RadioButtons should only be enabled if the checkbox is checked radioButtonXXX.IsEnabled  checkBox.IsChecked Or, if the radio buttons have the same parent control: stackPanel.IsEnabled  checkBox.IsChecked 8

V 1.0ÓE-NIK, 2014 DataBinding I. E.g.: –The ListBox should display an array listBox.ItemsSource  array E.g.: –This ListBox should have a border color that matches the selected element listBox.BorderBrush  listBox.SelectedItem Data types??? E.g.: –The selected item’s data should be shown labelXXXX.Content  comboBox.SelectedItem XXXX 9

V 1.0ÓE-NIK, 2014 Data Binding I. Source, Target, Mode, Refresh strategy Source and Target –The source is the data itself or a (public) property –The target is usually the GUI element (the property that will display/use the data) The target property must be a Dependency Property (most of the UI elements’ properties are such properties) The target control must be a DependencyObject descendant 10 E.g.: Display a person in a window –txtName.Text  personInstance.Name –chkHoliday.IsChecked  personInstance.OnHoliday –chkSick.IsChecked  personInstance.IsSick

V 1.0ÓE-NIK, 2014 Data Binding I. In the XAML, use the {Binding} markup extension –ElementName: ONLY if the source is a UI element –Path: inside the source, the source property’s name –Alternative syntax C# nyelvű leírás (ritkán használt) –Window konstruktorban az InitializeComponent() után, vagy Loaded eseménykezelőben… 11 <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 the Path The full source object should be used (rare): –Path=. Property (inside the source): –ElementName=checkBoxEnabled, Path=IsChecked Property inside the property: –ElementName=listBox, Path=SelectedItem.Name Indexed property inside the property: –ElementName=listBox, Path=Items[0] 12

V 1.0ÓE-NIK, 2014 Data Binding I. – Dependency properties The target property must be a dependency property –Unique in WPF, knows more than the “usual” properties –Most, but not all properties of the UI elements are such properties The values for the dependency properties can be set using a variety of ways: –Data Binding –“Inheritance” of values from parent controls –Animation, Storyboard –Style, resource –System settings (themes, user settings) 13

V 1.0ÓE-NIK, 2014 Data Binding I. – Dependency properties Read the documentation, there is a separate section for „Dependency Property Information” E.g. FrameworkElement.Width: 14

V 1.0ÓE-NIK, 2014 Data Binding I. - DataContext The default source of the data binding –If we do not use ElementName or other sources, then the object in this property is the source –Usually we set it for the whole window It is a dependency property, its value can be “inherited” from the parent control –If we set it for a parent control  we set it for all sub-controls –If we set it for the window  we set it for all controls 15 <Label Content="{Binding Age}"

V 1.0ÓE-NIK, 2014 Data Binding I. – DataContext We can set the DataContext in C# code: –XAML: –Setting the DataContext in C#, Loaded event: 16 <Label Content="{Binding Eletkor}" Szemely sz = new Szemely("Péter", 12, "Magyarország", "Budapest"); stackPanel.DataContext = sz; The red rectangle is the StackPanel

V 1.0ÓE-NIK, 2014 Data Binding I. – DataContext We can specify the whole Source object to use in the data binding –If Path is missing or Path=. –If no source is specified, then the whole DataContext is used 17 public override string ToString() //Person.ToString() { return name + " (" + birthYear + ")"; } public MainWindow() { InitializeComponent(); this.DataContext = new Person() { Name = "Peti", BirthYear = 1985 }; }

V 1.0ÓE-NIK, 2014 Data Binding I. – modes Possible modes: OneWay, TwoWay, OneWayToSource, OneTime, Default 18 <TextBox Text="{Binding Value, ElementName=slider, Mode=TwoWay}"

V 1.0ÓE-NIK, 2014 Data Binding I. – update strategies Used with TwoWay or OneWayToSource modes –LostFocus: this is the default with TextBox.Text –PropertyChanged: usually this is the default –Explicit: we have to call BindingExpression.UpdateSource() –Default 19 <TextBox Text="{Binding Value, ElementName=slider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

V 1.0ÓE-NIK, 2014 Data Binding – debug NO EXCEPTIONS ARE THROWN!!! We only get notification in the Output window, when the data is actually requested –In the example: bad property names (same error message if the property is there, only it’s not public!) 20

V 1.0ÓE-NIK, 2014 MVC vs MVP vs MVVM Almost the same: We will NOT use pure MVVM (Trigger, Command would also be required) –But we follow the rule that a ViewModel class has to be inserted between the window and the code-behind 21

V 1.0ÓE-NIK, 2014 Exercise 22

V 1.0ÓE-NIK, 2014 Exercise 23

V 1.0ÓE-NIK, 2014 Home work – playlist manager Artist, Title, Length, IsFavourite, Comment Load/Save 24