Wk05a+b / H5 / XAML Advanced SSD1E

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

XAML Advanced

CSD-I

H5 / week 5

Deze week

• Kennis over classes en XAML consolideren
• Uitgebreider kijken naar XAML

Volgende week toets!!!!

Toets gaat plaatvinden op donderdag

Maandag en dinsdag -> herhalen, oefeningen afronden en vragen stellen.

Bekijken het programma en beantwoord:

1. Noem een van de attributen op r47.

2. De tag op r50 heeft een naam. Waarom?

3. Op welke regel in de XAML-code zie je een koppeling naar een event-handler?

4. Is de Button op r42 een parent of child?

5. Wat is het verschil tussen een

TextBlock en TextBox?

6a. Op r55 zie je een TryParse. Waarom?

6b. In welke variabele komt het geparste getal terecht?

7. Wat doet de return op r63?

8. Wat gebeurt er op r68?

Klik en zoom

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.

Wat herken je?

Laats studenten regelnummers matchen met onderdelen die zichtbaar zijn in de designer.

Maak een Button-tag met twee attributen:
- Content wordt "klik hier"
- Padding wordt "20"

Event-handler / actie koppelen aan knop

Dia ter herhaling

1. Declareer een variabele om bij te houden of je pc in darkmode staat.

2. Definieer een variabele om je eigen studentnr. op te slaan.

Getter / setter

Datatype

Access modifier

Naam

Object

Instantie

Klasse

Live omcirkelen overeenkomst namen

Deze week

Verdiepen/oefenen in XAML

Basics - Stackpanel

Stackpanel 

Een StackPanel gebruik je om lay-out te maken. Alle children van een StackPanel komen automatisch onder elkaar te staan tenzij je de Orientation zelf aanpast.

 - Orientation="Vertical" is de standaard, plaatst directe children onder elkaar

 - Orientation="Horizontal" plaatst de directe children van links naar rechts naast elkaar

Basics - Textblock

TextBlock

Een TextBlock is vergelijkbaar met een <p>-tag, en een Run is vergelijkbaar met <span>. Je kunt een Run-tag alleen binnen een TextBlock gebruiken.

                                                     

Tekst-kleur !!

Basics - Button

Button

Een Button-tag kun je aanklikken, zodat er iets gebeurt. Je kunt een Button stijlen zoals een TextBlock. 

Drie andere belangrijke attributen zijn:

x:Name="………………" geeft je Button een naam zodat je deze vanuit de code-behind kunt aanspreken.

Click="………………" stelt de event-handler in

                                                     

Basics - Border

Border

In HTML/CSS ben je gewend dat je ieder element een rand kunt geven. In XAML heb je daarvoor een aparte tag nodig: de Border-tag. 

Let op: deze tag mag maar één directe child hebben. Meestal plaats je binnen een Border dus een StackPanel, en dáárin kun je weer meerdere children hebben. 

Veelgebruikte attributen zijn:

• Padding="…" / Margin="…" om een padding binnen of een margin erbuiten te maken.

• BorderBrush="Black" om de kleur van de rand in te stellen

• BorderThickness="1" om de dikte van de rand in te stellen

                                                     

Alignment in XAML

HorizontalAlignment- en VerticalAlignment-properties. Hiermee geef je aan hoe een element zich moet gedragen binnen zijn parent.

 - HorizontalAlignment="Stretch"  

 - VerticalAlignment="Stretch" 

 - VerticalAlignment="Top" / "Bottom" / "Center" 

 - HorizontalAlignment="Left" / "Right" / "Center"

 

Standaard het element neemt alle horizontale / verticale ruimte in die beschikbaar is.

element neemt zo min mogelijk ruimte in

Aan de slag

H5

Lezen par. 2 en 3 

Maken opdr. 4 t/m 6

(bladzijde 74)

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

Doel:	Oefenen met XAML
Hulp:	Vraag je buur, daarna de docent.
Klaar:	1. Heb je nog iets open staan van de weekchecks 2. Of start met weekcheck H6.

Basics - Checkbox

Basics - Checkbox

Basics - ComboBox

Een ComboBox, ook wel “dropdown” genoemd is een manier om een gebruiker één optie te laten kiezen uit een vastgestelde lijst. 

Basics - ComboBox

Een ComboBox, ook wel “dropdown” genoemd is een manier om een gebruiker één optie te laten kiezen uit een vastgestelde lijst. 

Basics - Casten

Omdat C# tijdens het uitvoeren van het programma niet weet wat de SelectedValue oplevert, moet je deze waarde nog casten naar een string.

Aan de slag

H5

Lezen par. 5 en 7 

Maken opdr. 6 t/m 13

(bladzijde 76)

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

Doel:	Oefenen met XAML
Hulp:	Vraag je buur, daarna de docent.
Klaar:	1. Heb je nog iets open staan van de weekchecks 2. Of start met weekcheck H6.

Aan de slag

Weekcheck H5 - CollectorsItems

Let op: je moet het ontwerp visueel goed namaken, want deze oefening gaat vooral om het werken met XAML. 

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes