Wk05a+b / H5 / XAML Advanced

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

In deze les zitten 24 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

XAML Advanced
CSD-I
H5 / week 5

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

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

Slide 4 - Tekstslide

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 vraag

Deze slide heeft geen instructies

Event-handler / actie koppelen aan knop

Slide 6 - Tekstslide

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 vraag

Deze slide heeft geen instructies

Getter / setter
Datatype
Access modifier
Naam

Slide 8 - Sleepvraag

Deze slide heeft geen instructies

Object
Instantie
Klasse

Slide 9 - Sleepvraag

Deze slide heeft geen instructies

Slide 10 - Tekstslide

Live omcirkelen overeenkomst namen
Deze week
Verdiepen/oefenen in XAML

Slide 11 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies


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.

Slide 17 - Tekstslide

Deze slide heeft geen instructies

Basics - Checkbox

Slide 18 - Tekstslide

Deze slide heeft geen instructies

Basics - Checkbox

Slide 19 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies