Native CSD-I Hoofdstuk 10 WinUI3 & XAML

WinUI3 & XAML
CSD-I
Hoofdstuk 10
1 / 27
volgende
Slide 1: Tekstslide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

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

time-iconLesduur is: 60 min

Onderdelen in deze les

WinUI3 & XAML
CSD-I
Hoofdstuk 10

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Deze lessen
  • Kennis over classes consolideren
  • Visuele applicaties maken:
  •         WinUI3
  •         XAML

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Bekijk het programma en beantwoord:
1. Op r58 en 78 zie je if-statements. Kan het gebeuren dat die allebei worden uitgevoerd?

2a. Op r70 wordt een variabele gemaakt. Wordt deze gedefinieerd of gedeclareerd?
2b. Zou je deze variabele op r81 kunnen gebruiken?

3. Op welke regel(s) wordt gebruikersinput gevraagd?



4. Op r73 wordt de prijs van een abonnement aangepast. Gebeurt dit voor alle abonnementen? Waarom wel / niet?

5a. Voor alle variabelen wordt het datatype 'double' gebruikt. Waarom?
5b. Zou je ook een ander datatype kunnen gebruiken, en welke dan?

6. Op r63 wordt een variabele gedefinieerd. Zou je deze op r74 kunnen gebruiken? Waarom wel / niet?
Klik en zoom

Slide 3 - Tekstslide

Vragen laten beantwoorden in textdocumentje en daarna "cold call" vragen in de klas.
1. Declareer een variabele om de titel van een boek op te slaan.

2. Definieer een variabele waarin je de prijs van een kopje koffie kunt opslaan (de prijs is €2.59).

Slide 4 - Open vraag

Deze slide heeft geen instructies

Classes - belangrijkste punten
  • Een klasse beschrijft één ding.
  • In de klasse declareer je de eigenschappen van dat ding.
  • Een klasse is geen ding, alleen de abstracte beschrijving

  • Door new te gebruiken instantieer je een klasse.
  • Je hebt dan een object gemaakt; een concrete invulling van een klasse.

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Getter / setter
Datatype
Access modifier
Naam

Slide 7 - Sleepvraag

Deze slide heeft geen instructies

Plek waar de klasse staat. Hierdoor kunnen verschillende ontwikkelaars dezelfde klassenamen gebruiken.
Beschrijft een attribuut van een klasse.
Het concreet maken van een klasse.
Geven aan of de eigenschap gelezen of ingesteld kan worden.
Concreet voorbeeld van klasse; instantie.
Bepaalt de toegankelijkheid.
Beschrijft een ding.
Klasse
Object
Namespace
Eigenschap
Access modifier
Getters en setters
Instantiëren

Slide 8 - Sleepvraag

Deze slide heeft geen instructies

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Einddoel deze week

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Einddoel deze week

Deze app gebruikt:
  • WinUI3
  • XAML

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Einddoel deze week

Deze app gebruikt:
  • WinUI3: grafische apps voor Windows 10/11

  • XAML: eXtensible Application Markup Language

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Slide 14 - Tekstslide

Deze slide heeft geen instructies

Wat herkennen we nog meer?

Slide 15 - Tekstslide

Deze slide heeft geen instructies

Opdracht
Studeer een paar minuten op de werking van een
Markup Language.

Bedenk: XAML en HTML zijn allebei Markup Languages.

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Child
Parent
Attribuut
Enkele tag
Element

Slide 17 - Sleepvraag

Deze slide heeft geen instructies

X
HTML:
XAML:

Slide 18 - Tekstslide

Deze slide heeft geen instructies

HTML:
XAML:

Slide 19 - Tekstslide

Deze slide heeft geen instructies


Aan de slag


Lezen + maken H4,
paragraaf 3 t/m 7
(bladzijde 60)

Ofwel: de lay-out van
je applicatie maken

Aan de slag

ItsLearning/Opdrachten/Hoofdstuk 10

Opdrachten 1 en 2

Slide 20 - Tekstslide

Deze slide heeft geen instructies

File met XAML-code
Code-behind
Attribuut met inhoud
Element
Tag binnen TextBlock
Element uitlijnen
<Button>...</Button>
FontStyle="Italic"
MainPage.xaml
MainPage.xaml.cs
Run-tag
VerticalAlign
TextAlign

Slide 21 - Sleepvraag

Deze slide heeft geen instructies

Event-handler / actie koppelen aan knop
  • We willen dat er iets gebeurt zodra je op de knop drukt
  • Op de knop drukken is een gebeurtenis; een event
  • Wat gebeurt er door het event? Dat beschrijven we in een event-handler.

Slide 22 - Tekstslide

Deze slide heeft geen instructies

Event-handler / actie koppelen aan knop
  • We willen dat er iets gebeurt zodra je op de knop drukt
  • Op de knop drukken is een gebeurtenis; een event
  • Wat gebeurt er door het event? Dat beschrijven we in een event-handler.

Slide 23 - Tekstslide

Deze slide heeft geen instructies

Event-handler / actie koppelen aan knop
XAML:


Code-behind:

Slide 24 - Tekstslide

Deze slide heeft geen instructies

Event-handler / actie koppelen aan knop
XAML:


Code-behind:

Slide 25 - Tekstslide

Deze slide heeft geen instructies

Event-handler / actie koppelen aan knop

Slide 26 - Tekstslide

Deze slide heeft geen instructies


Aan de slag


Lezen + maken H4,
paragraaf 3 t/m 7
(bladzijde 60)

Ofwel: de lay-out van
je applicatie maken

Aan de slag

ItsLearning/Opdrachten/Hoofdstuk 10

Opdrachten 3 t/m Eindopdracht

Slide 27 - Tekstslide

Deze slide heeft geen instructies