Wk05a+b / H5 / XAML Advanced

XAML Advanced
CSD-I
H5 / week 5
1 / 24
next
Slide 1: Slide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 24 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

XAML Advanced
CSD-I
H5 / week 5

Slide 1 - Slide

This item has no instructions

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.

Slide 2 - Slide

This item has no instructions

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

Slide 3 - Slide

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.
Wat herken je?

Slide 4 - Slide

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"

Slide 5 - Open question

This item has no instructions

Event-handler / actie koppelen aan knop

Slide 6 - Slide

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.

Slide 7 - Open question

This item has no instructions

Getter / setter
Datatype
Access modifier
Naam

Slide 8 - Drag question

This item has no instructions

Object
Instantie
Klasse

Slide 9 - Drag question

This item has no instructions

Slide 10 - Slide

Live omcirkelen overeenkomst namen
Deze week
Verdiepen/oefenen in XAML

Slide 11 - Slide

This item has no instructions

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

Slide 12 - Slide

This item has no instructions

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

Slide 13 - Slide

This item has no instructions

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




                                                     

Slide 14 - Slide

This item has no instructions

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




                                                     

Slide 15 - Slide

This item has no instructions

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

Slide 16 - Slide

This item has no instructions


Aan de slag

H5
Lezen par. 2 en 3 
Maken opdr. 4 t/m 6
(bladzijde 75)
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.

Slide 17 - Slide

This item has no instructions

Basics - Checkbox

Slide 18 - Slide

This item has no instructions

Basics - Checkbox

Slide 19 - Slide

This item has no instructions

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

Slide 20 - Slide

This item has no instructions

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

Slide 21 - Slide

This item has no instructions

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.

Slide 22 - Slide

This item has no instructions


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.

Slide 23 - Slide

This item has no instructions


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

Slide 24 - Slide

This item has no instructions