V 1.0

Programming III.

XAMLData 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="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

• 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="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

• 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="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• We can import any arbitrary .NET namespace

– clr-namespace:name_of_namespaceNO 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”> <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• 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

<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 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

<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 DataContext in C# code:

– XAML:

– Setting the DataContext in C#, Loaded event:

16

<StackPanel Name="stackPanel" ><Label Content="{Binding Nev}"/><Label Content="{Binding Eletkor}" <Label Content="{Binding Orszag}"/><Label Content="{Binding Varos}"/>

</StackPanel>

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

<Label Content="{Binding}"/>

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:

http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx

• 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