V 1.1

Programming III.

Important events, properties, methods of UI elementsXAML basics

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements

• Input (inherited from System.Windows.UIElement)– Visibility, IsVisible– Focusable, IsFocused – can receive keyboard input– IsHitTestVisible – using mouse or other device– IsEnabled – if not, then „greyed out”– AllowDrop– CommandBindings – pure MVVM – not in our schedule– IsTabStop, TabIndex

2

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements• Input (inherited from System.Windows.UIElement)

– IsMouseOver– IsMouseCaptured

• AreAnyTouchesOver, …Captured … • IsStylusOver, …Captured …

– CaptureMouse(), CaptureStylus(), CaptureTouch() – Independent from the location of the input device

– ReleaseMouseCapture(), ReleaseStylusCapture(), ReleaseTouchCapture() – Turn off the input capture

– Focus() – This is for the keyboard input only

3

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements• Input (inherited from System.Windows.UIElement)

– KeyDown– KeyUp– MouseDown, MouseLeftButtonDown, MouseRightButtonDown … – MouseUp, MouseLeftButtonUp, MouseRightButtonUp …– MouseEnter– MouseLeave– MouseMove– MouseWheel– MouseDoubleClick

– Other important events: • Touch events (Touch…), Stylus events (Stylus…)• Drag&drop events (Drag…)

– Special methods for the manipulation of event handlers• RaiseEvent(), AddHandler(), RemoveHandler()

4

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements

• Load (inherited from System.Windows.FrameworkElement)– Initialized – After the execution of the constructor, all properties

are set– Loaded – Layout and data binding are fully completed, before

display

– IsInitialized, IsLoaded

5

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements

• Basic style (inherited from System.Windows.FrameworkElement)– (Max/Min/-)Height, (Max/Min/-)Width– Margin – outside the element– Padding – inside the element– Triggers – pure MVVM – not in our schedule – Language– BringIntoView() – e.g. if scrolled outside

6

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements

• Advanced style (inherited from System.Windows.Controls.Control)– Background, Foreground– BorderBrush, BorderThickness– FontFamily, FontSize, FontStretch, FontStyle, FontWeight– HorizontalContentAlignment/VerticalContentAlignment– Template – The object that determines actually how the

properties above will be used. Without a template, they have no meaning. A default template exists for all visible controls

7

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements

• Content (inherited from ContentControl)– Content – HasContent– ContentStringFormat, ContentTemplate – affects how the

content is displayed

8

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements

• Content (inherited from ItemsControl)– Items, ItemsSource – HasItems– ItemStringFormat, ItemTemplate – affects how the individual

items are displayed (ItemTemplate is the only template we’ll use this semester)

– IsTextSearchEnabled, IsTextSearchCaseSensitive

9

V 1.1 ÓE-NIK, 2015

Important events, properties, methods of UI elements• Naturally all the classes have specific

properties/events on their own• E.g:

– Button: Click event– TextBox: Text property– TextBox: LineCount property– TextBox: SelectionStart, SelectionLength, SelectedText

properties– TextBox: GetLineLength(), GetLineText(), ScrollToLine()

methods– TextBox: Select(), Clear()… methods– RadioButton: GroupName property – defines the

radiobuttons that belong to one group (only one of them can be selected)

10

V 1.1 ÓE-NIK, 2015

XML (w3schools.com)

•Hierarchical way to describe DATA• XML declaration + nodes + attributes

– Nodes: <bookstore></bookstore>... = <tag></tag> – Attributes: within the <book> category=“…” … 11

<?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.1 ÓE-NIK, 2015

XML• Strict rules apply – well-formed XML!

– First line: optional format specifier, with definition of encoding :<?xml version="1.0" encoding="ISO-8859-1"?><?xml version="1.0" encoding="UTF-8"?>

– Every node can contain:• Text• Sub nodes• Attributes

– There has to be exactly one root element (<bookstore>)– Closing a tag is obligatory (<tag></tag> or <tag />), with good

nesting– The whole document is case-sensitive

12

V 1.1 ÓE-NIK, 2015

XML

• The nodes and the attributes can describe an object• Using nesting, we can represent hierarchy – the XML

always depends on the interpretation!

13

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

</book>

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

V 1.1 ÓE-NIK, 2015

XAML (eXtensible Application Markup Language)

• XML-based language, where we describe the hierarchy and the properties of .NET objects– VALID xml !!! (not only well-formed)– We can use types that are not abstract and that have a default

(zero-parameter) constructor• Everything in the XAML could also be written in C# (or

other languages in the CLR: language-independent)• In the WPF we use it to build up a GUI• When compiling a XAML...

– msbuild.exe attaches it into the assembly as a binary resource – .g.cs -> .baml

– The InitializeComponent() loads the XAML, which is called in the constructor 14

V 1.1 ÓE-NIK, 2015

XAML

• XAML description:

• C# language:

• The XAML nodes actually mean the creation of an instance of a .NET class

• The attributes change the properties / event subscriptions

15

<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.1 ÓE-NIK, 2015

XAML• Setting the content explicitly:

• Property syntax: <Typename.Propertyname> sub-node

• Setting the content implicitly:

According to the XAML specs: the immediate children set the Content Property, but this property is not necessary the actual Content (for ItemsControl/Layout managers, the immediate children set the Items/Children property) 16

<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.1 ÓE-NIK, 2015

XAML• More complex content

• Using the Property syntax

• Syntax error – this is NOT a ContentControl descendant, there is no Content or anything similar

17

<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.1 ÓE-NIK, 2015

XAML• With the ItemsControl, the immediate children set the Items…

• With layout manaagers, the immediate children set the Children

18

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

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

V 1.1 ÓE-NIK, 2015

XAML• Collection Syntax

– More then one sub-nodes can be specified, if the given property is a collection (IList, Array, IDictionary)

– ListBox.Items, Grid.Children, etc...

19

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

<Grid> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> ...</Grid>

V 1.1 ÓE-NIK, 2015

XAML• Attached Property Syntax

20

<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.1 ÓE-NIK, 2015

Practice exercise

21