‫Ben tornato.
‫E questo video, daremo un'occhiata più da vicino a Zemel e potresti voler esaminare questo.
‫Zemel è un tipo di linguaggio XML, come puoi vedere qui in basso.
‫E in realtà, lo trascinerò ancora di più in modo da consentirci di scrivere la nostra interfaccia utente in modo da
‫non dover andare avanti e trascinare tutti gli elementi nella nostra GUI e regolarli lì.
‫Possiamo fare tutto questo in codice.
‫Ora, potresti dire che sono più un tipo visivo.
‫Voglio andare avanti e trascinare le cose dentro e sto bene con quello mentre puoi farlo.
‫Ma sei limitato a trascinarti in giro allora.
‫E con l'esempio, puoi regolare molto e puoi regolare non solo quelle cose come questo wrapping, ma hai visto
‫nell'ultimo video che puoi fare molto di più e vedremo cos'è il data binding, quali proprietà o
‫proprietà di dipendenza e così via sono, che sono cose che puoi fare con Zemel, che ci
‫permettono di creare interfacce utente molto grandi che sono facilmente mantenibili.
‫Quindi e qui quello che puoi vedere è questa finestra, prima di tutto.
‫Quindi più o meno in generale quello che hai è che hai un tag di apertura e hai un tag di chiusura.
‫Se conosci l'HTML, potresti conoscerlo bene.
‫Hai le parentesi graffe agli angoli e anche quelle che si chiudono.
‫Quindi meno del segno della parola e quindi maggiore del seno.
‫E vedi, abbiamo la stessa cosa con la finestra e anche qui.
‫Poi una chiusura.
‫Hai anche la barra appena prima della parola.
‫Quindi questo è lo stesso per la griglia, per la finestra per qualsiasi altra cosa.
‫Quindi, se voglio, ad esempio, usare un pulsante, posso andare avanti e farlo.
‫E se uso il segno maggiore di allora, crea automaticamente il tag di chiusura.
‫Ora, quello che posso fare è fare tutte le regolazioni all'interno del tag di apertura.
‫Come puoi vedere qui, Button, posso andare avanti e, ad esempio, aggiungere contenuti.
‫Quindi ci sono molte proprietà diverse, come puoi vedere.
‫E userò solo la proprietà del contenuto e userò qualcosa come Cliccami.
‫Ora c'è questo pulsante al centro, come puoi vedere, e dice, cliccami.
‫Certo, non abbiamo un'altezza.
‫Non abbiamo un con tutti quei tipi di proprietà non ancora impostate.
‫Ma diciamo che voglio che questo pulsante sia alto 50 pixel e poi voglio che sia largo 100 pixel, come puoi vedere.
‫Ora, questo è il mio pulsante che ho creato.
‫Certo, avrei potuto trascinarlo dentro, ma fare un esempio è abbastanza utile.
‫E adesso?
‫Qualcosa che non ho ancora toccato molto e che non sarà richiesto fino a più tardi nel
‫corso.
‫Ma generalmente quello che puoi vedere qui sono X e L e S ciò che rappresenta è, ad esempio, lo spazio dei nomi.
‫E Zemel sta per Extensible Application Markup Language.
‫Quindi permettetemi di aggiungerlo qui.
‫Aggiungiamo un commento.
‫Userò un commento del genere.
‫Come puoi vedere, questo è Greeno e questo è praticamente un commento.
‫Quindi posso scrivere qualcosa qui, come Zemel è un linguaggio
‫di markup dell'applicazione estensibile.
‫Va bene.
‫Ora, il pulsante, come puoi vedere, è qui.
‫E ora andiamo avanti e facciamo altre cose con i pulsanti.
‫Quindi creiamo alcuni pulsanti aggiuntivi, per favore.
‫Vai avanti e crea un altro pulsante.
‫OK, spero che tu l'abbia provato, usa semplicemente il nome del pulsante qui o la parola chiave e poi vai avanti e crea il
‫pulsante aggiuntivo.
‫Ora, potresti chiederti, oh --, non è posizionato correttamente.
‫Quindi ho questo pulsante e ha il contenuto con.
‫Ciao.
‫Ora, perché dov'è questo pulsante cliccami adesso?
‫Bene, è all'interno della griglia ed è scomparso perché stiamo usando una griglia in modo che i pulsanti non appaiano uno
‫sopra l'altro e così via.
‫Quindi, se l'hai provato, l'hai visto.
‫E esamineremo anche le griglie in seguito.
‫Ma volevo solo mostrarti questo per ora.
‫Va bene.
‫Quindi liberiamoci di nuovo di quel pulsante.
‫Ora abbiamo questo pulsante cliccami ed eseguiamo l'applicazione in modo da poter vedere come
‫appare nella vita reale e come tutta questa cosa può rendere bella la nostra vita semplicemente facendo clic su di essa.
‫Quindi, come puoi vedere, posso passare con il mouse su di esso e cambia colore e posso fare clic su
‫di esso e crea questa piccola animazione di clic e il gioco è fatto.
‫Ma non succede nulla quando fai clic su di esso.
‫E ci sono diversi modi per implementare una funzionalità di clic.
‫E lo faremo più avanti.
‫Destra.
‫Ecco come possiamo creare un pulsante nell'esempio.
‫Ora, ci sono molti elementi aggiuntivi a cui possiamo accedere qui o proprietà.
‫Ad esempio, possiamo accedere alla proprietà della dimensione del carattere e aumentare la dimensione del carattere a, diciamo, 32.
‫Quindi ora il pulsante non è largo quanto il testo, quindi regoliamo la larghezza.
‫Quindi ora va bene.
‫Di nuovo, possiamo vedere l'intero testo del pulsante, ma quando giochi con la dimensione del carattere e
‫tutti quegli elementi, devi stare attento che si adatti ancora.
‫Ora, quello che puoi anche fare è che puoi, invece di aggiungere il contenuto qui alla proprietà del contenuto,
‫puoi semplicemente aggiungerlo all'interno del testo del pulsante.
‫Quindi qui dirò qualcosa del tipo, cliccami.
‫E come puoi vedere, è lì.
‫Quindi questo è il contenuto tra i tag è dove hai il tuo contenuto.
‫Quindi questo è un modo per farlo.
‫L'altro è semplicemente usare la proprietà content qui e assegnare il testo in questo modo, come abbiamo visto
‫prima.
‫Ora, questo pulsante di tag di chiusura non è necessario se chiudi semplicemente il pulsante immediatamente in questo modo in modo da poterlo chiudere in un
‫modo più breve in questo modo, in modo da non aver bisogno del pulsante di tag di chiusura.
‫E un altro modo di progettare un pulsante è il seguente.
‫Quindi se vedi qualcosa del genere, va benissimo lo stesso.
‫Quindi crei il tag del pulsante di chiusura e quello di apertura.
‫E qui hai il punto del pulsante e poi puoi andare avanti e regolare tutte le diverse proprietà che
‫desideri.
‫Quindi, come puoi vedere, ci sono molte proprietà diverse a cui possiamo accedere, ad esempio la
‫dimensione del carattere in questo modo.
‫Quindi posso impostare la dimensione del carattere su 72 in questo modo, ad esempio, e un'altra proprietà del pulsante che voglio regolare perché diciamo il contenuto
‫in modo che io possa andare avanti e solo il contenuto in alto lì.
‫Quindi ora vedi che c'è questo enorme pulsante con la dimensione del carattere di 72 e dice ciao.
‫Quindi questo è l'approccio numero due.
‫E c'è anche qualcos'altro che puoi fare.
‫Quindi regoliamo ulteriormente quel pulsante.
‫Quindi diciamo che come contenuto, non voglio avere solo un testo di ciao.
‫Voglio andare ancora oltre.
‫Voglio aggiungere un pannello di avvolgimento.
‫Ora, ciò che fa il pannello è semplicemente avvolgere tutti i suoi controlli o elementi uno accanto all'altro andando da sinistra
‫a destra.
‫Quindi il primo elemento sarà, diciamo, un blocco di testo.
‫E abbiamo visto quali blocchi di testo sono il testo semplice.
‫E questo sta per dire multi.
‫Ora, ho bisogno di un altro blocco di testo e il terzo.
‫Quindi questo dice più, tre volte.
‫Ma ora quello che posso fare è regolare il colore di ogni singolo aspetto.
‫Quindi per ogni singolo blocco di testo.
‫Quindi diciamo che lo cambio in blu, quindi questo ha il primo piano.
‫Quindi il primo piano è il colore del colore di primo piano e questo sarà il rosso.
‫E infine, il mio ultimo blocco di testo avrà il primo piano del bianco.
‫E ora invece di multi, multi, multi, è il pulsante multi colore.
‫E ora forse vogliamo aggiustare un po' la dimensione del carattere, rendiamolo più piccolo anche il primo pulsante,
‫come puoi vedere, è nascosto perché la griglia mostra solo l'ultimo elemento se lo sono se
‫non sono assegnati nella griglia giusta struttura, che vedremo in seguito.
‫Ma sbarazziamoci del primo bottone che avevamo.
‫E ora impostiamo anche una dimensione del pulsante.
‫Quindi andiamo avanti e usiamo il pulsante con cui sarà, diciamo duecento.
‫E un pulsante di terza altezza, che sarà 100.
‫E così, eccoci qua e la dimensione del carattere è troppo grande per adattarsi a tutto.
‫Quindi se andiamo avanti e lo facciamo con 24 ora è lì.
‫Quindi, se eseguo il codice, avrò un pulsante multicolore, che contiene più blocchi di testo diversi.
‫E ci siamo.
‫Quindi, solo così vedi, ci sono diversi approcci per farlo.
‫Se vuoi afferrare più aspetti in esso, puoi usare questo pannello.
‫Puoi anche utilizzare una griglia all'interno del pulsante e utilizzare il tag della griglia per creare
‫più controlli diversi all'interno del pulsante.
‫Ma questo è qualcosa che tratteremo più avanti.
‫Per ora, è solo importante che tu capisca che l'esempio ti consente di fare molte cose fantasiose con la
‫tua GUI senza dover trascinare e rilasciare e anche con il pieno controllo su come appaiono le cose e cosa
‫fanno.
‫Quello che farò è commentarlo e vi mostrerò come fare la stessa cosa che abbiamo visto qui con
‫il codice, perché l'abbiamo visto con il codice Zemel.
‫Ma possiamo anche farlo in code behind, il che significa in C Sharp, che abbiamo praticamente imparato
‫per l'intera classe finora o per l'intero corso.
‫Quindi entriamo nel codice dietro.
‫Come puoi vedere, c'è un buon file di esempio, che è quello che abbiamo aperto qui,
‫la demo della finestra principale e il nostro file di esempio ha un file code behind, che è un totale Zemel.
‫Quel file del caso e questo è un file C diesis, il che significa che qui abbiamo una classe parziale C
‫diesis, che ora possiamo usare per regolare o creare la nostra interfaccia utente.
‫E come puoi vedere, si chiama Finestra principale ed eredita dalla finestra.
‫E qui abbiamo un metodo chiamato Main Window, che è simile al metodo principale nelle nostre applicazioni console
‫che abbiamo visto finora.
‫Questo viene chiamato non appena la finestra è aperta o non appena viene avviata l'applicazione.
‫E come puoi vedere qui, c'è un componente inizializzato chiamato che inizializza semplicemente tutto il resto
‫che è necessario per l'esecuzione della nostra finestra.
‫Ad esempio, inizializza il titolo e inizializza a size e così via.
‫E ora possiamo andare avanti e scrivere qui il nostro codice.
‫Quindi ti mostrerò come creare prima un pulsante.
‫Quindi, prima di tutto, abbiamo bisogno di una griglia in cui possiamo assegnare quel pulsante.
‫Quindi la chiamerò griglia, che è una nuova griglia.
‫Poi ho detto il contenuto di questo alla mia griglia, ma quello che farà è semplicemente dire la finestra principale.
‫Dovrebbe avere dei contenuti.
‫Esatto, come abbiamo visto nel file di esempio.
‫Quindi la finestra si apre questo tag qui e tutto ciò che è tra quei tag di apertura e chiusura è mio.
‫Quindi praticamente tutto questo contenuto qui.
‫Questo è il contenuto della mia finestra.
‫E quello che dico qui è che il contenuto dovrebbe essere la griglia.
‫Quindi creiamo una nuova griglia come abbiamo visto qui.
‫Quindi abbiamo anche una griglia qui, che è come aprire e chiudere il tag della griglia qui.
‫E ora l'ho detto come contenuto e ora posso aggiungere cose a questa griglia.
‫Ad esempio, posso aggiungere un pulsante alla griglia.
‫Prima di tutto, creiamo quel pulsante e lo chiamerò BGN sarà un nuovo pulsante.
‫Ora ho quel pulsante e posso regolarne le proprietà, quindi diciamo che voglio impostare la dimensione del carattere del
‫mio pulsante e posso semplicemente farlo in quel modo.
‫Posso semplicemente dire che sarà qualcosa come 26.
‫Ora, nel nostro pulsante, come hai visto qui, avevamo un pannello a capo, che è il contenuto del pulsante.
‫Quindi quello che farò è creare un pannello per quel pannello e lo chiamerò pannello
‫sarà un nuovo pannello di avvolgimento.
‫Ora possiamo aggiungere cose al pannello di avvolgimento.
‫Aggiungiamo il pannello di avvolgimento al pulsante e aggiungiamo il pulsante errato alla griglia.
‫E la griglia fa già parte dei nostri contenuti.
‫Quindi ora andiamo avanti e creiamo tutte le cose che vogliamo aggiungere al pannello e aggiunte a quello.
‫Quindi dobbiamo prima bloccare il testo.
‫E il blocco di testo, come hai visto qui, è questo qui.
‫Quindi creiamo uno, due, tre blocchi di testo.
‫Il primo sarà a 60 sarà un nuovo blocco di testo.
‫E dico semplicemente testo il testo.
‫Quindi ha un testo prop. , questo testo qui, che è il contenuto.
‫Quindi, per il pulsante, il contenuto è chiamato contenuto e per il blocco di testo, il testo stesso è chiamato
‫testo.
‫Quindi abbiamo avuto accesso alla proprietà text del nostro blocco di testo e l'abbiamo detto a multi.
‫Poi impostiamo il colore.
‫Quindi il testo in primo piano sarà pensato come pennelli.
‫E quale colore avevo per primo per il multi ed era blu.
‫Va bene.
‫Quindi lo farò blu.
‫E come puoi vedere, i pennelli, beh, il testo è fatto con i pennelli o il colore del testo è fatto con la
‫classe dei pennelli.
‫Quindi ho bisogno di usare questa classe senza spazzole e quindi accedere al suo colore.
‫Quindi pennello a tinta unita di tipo pennelli.
‫E poi posso aggiungerlo al pannello di registrazione.
‫Quindi ora che ho il testo sono connesso al pannello e lo faccio accedendo ai suoi figli e aggiungendo il mio
‫testo ad esso.
‫Ecco come aggiungo un blocco di testo.
‫E se eseguissimo quel nulla, non vedremmo ancora nulla perché non abbiamo ancora aggiunto il pannello di ripetizione al pulsante
‫e nemmeno il pulsante alla griglia.
‫Ma lo faremo in un secondo.
‫Quindi andiamo avanti e aggiustiamo il testo o aggiustiamo effettivamente di nuovo quei tre pezzi.
‫Quindi quello che facciamo è aggiungere solo un testo a multicolore e l'ultimo è stato il pulsante.
‫E ora avevamo il colore rosso e avevamo il colore bianco.
‫OK, quindi ho appena copiato e incollato quelle tre righe perché sono uguali.
‫Non ho bisogno di creare un nuovo blocco di testo ogni volta che aggiungo solo quello vecchio.
‫E poi mi sono adattato.
‫Oppure regola i suoi valori e poi di nuovo sui pannelli rossi.
‫Ora, se quei tre testi nel mio pannello a capo e quello che posso fare ora è aggiungere il pannello rosso al mio pulsante.
‫Quindi pulsante, quel contenuto sarà il mio pannello rosso e infine griglia i bambini, quell'annuncio.
‫E qui aggiungo il mio pulsante.
‫Quindi è di questo che stavo parlando.
‫Quindi abbiamo la griglia, abbiamo il pulsante, abbiamo il pannello avvolgente.
‫E ora aggiungiamo quei testi al pannello.
‫Aggiungiamo il pannello rosso al pulsante, aggiungiamo il pulsante alla griglia e abbiamo aggiunto la griglia alla finestra.
‫E come puoi vedere, ecco come puoi farlo con il codice.
‫E prima di eseguire il codice, ciò che devo fare è effettivamente commentare anche la griglia.
‫Quindi in realtà posso avere solo la finestra.
‫Quindi c'è solo la finestra nella nostra finestra principale, ad esempio file e tutto l'altro codice è all'interno
‫della nostra finestra principale assemble che si trova, che è il codice dietro.
‫Quindi questo file è il codice dietro della nostra finestra principale che Zemel.
‫Ora manca una cosa prima di testarla, ed è che assegno un nuovo blocco fiscale al mio testo.
‫Quindi devo farlo per entrambi i miei testi.
‫Quindi il fatto è che noi bene, creiamo un testo qui e lo inizializziamo con un nuovo blocco di testo.
‫E ora dobbiamo creare un nuovo blocco di testo e assegnarlo al nostro testo prima di poterlo aggiungere al nostro pannello di
‫rappresentanza.
‫Quindi ora abbiamo che possiamo eseguire il codice.
‫E vedremo che abbiamo anche il nostro pulsante multicolore e, come puoi vedere, abbiamo fatto la stessa cosa
‫che abbiamo fatto prima con Zemo, che era questo qui, che sembra anche piuttosto semplice e pulito.
‫L'abbiamo fatto con un codice C sharp del genere.
‫Ora puoi andare come preferisci, ma lavoreremo principalmente con Zemel.
‫Volevo solo mostrarti che puoi fare qualsiasi cosa con loro, tutto ciò che puoi fare anche con il codice
‫dietro.
‫Ma a volte ha molto più senso usare il codice dietro.
‫Quindi, ad esempio, se vuoi aggiungere solo qualcosa in modo dinamico, il codice dietro ha più senso.
‫Quindi eseguirlo con C diesis o apportare le regolazioni con C Sharp e Zemel ha più senso
‫quando si hanno interfacce utente statiche.
‫E a proposito, ogni volta che crei il file Zemel come abbiamo qui, quello che fa è andare avanti
‫e creare questo codice dietro il file.
‫Quindi crea semplicemente questo codice e lo esegue una volta che l'applicazione inizia a funzionare, una volta che la nostra finestra principale viene
‫catturata.
‫Quindi è fatto comunque.
‫E lo facciamo così con Zemo o lo facciamo manualmente creando il codice.
‫Quindi ora potresti ovviamente discutere, ehi, c'è qualcosa di simile con e decidere che non hai detto,
‫beh, posso farlo molto facilmente qui.
‫Potrei semplicemente dire pulsante che larghezza e potrei impostarlo a centocinquanta e pulsante quell'altezza e
‫impostare a cento per esempio.
‫Quindi il pulsante verrà regolato di conseguenza.
‫E come puoi vedere ora, è già distribuito su due righe, quindi questo è Zemel e il codice dietro con il codice.
‫So che era un video lungo, ma vedremo cose ancora più fantasiose nel prossimo video.
‫Quindi ci vediamo lì.