Share
Come afferma il titolo, creeremo Wallview ispirato ad iTunes. Questo tutorial è diviso in due parti: una per il design in Blend e l'altra per il codice in Visual Studio.
Dai un'occhiata a questo video dimostrativo del risultato finale a cui stiamo lavorando (o guarda la demo basata sul web qui sopra):
In questa parte del tutorial progetteremo due UserControls in Expression Blend. Questo tutorial sembra abbastanza lungo rispetto alla quantità di passaggi, ma è perché è molto completo; c'è una spiegazione e uno screenshot per quasi ogni clic che devi fare. Il motivo per cui l'ho scritto così dettagliatamente è che i miei compagni di università hanno trovato Blend troppo complesso e difficile da usare.
Apri Visual Studio e fai clic su "File"> "Nuovo"> "Progetto" nella barra dei menu in alto.
Seleziona Silverlight Application Visual C # dal menu e inserisci "WallviewApp" per il nome di un progetto in basso e la posizione in cui salvare il progetto.
Dopodiché vedrai un popup. Assicurati di selezionare la casella in basso e seleziona Silverlight 4 dalla casella combinata.
Avvia Expression Blend e apri il progetto appena creato in Visual Studio.
Passare al file di progetto all'interno della directory del progetto e aprirlo.
Fai clic con il tasto destro del mouse sul progetto WallviewApp all'interno dell'albero del progetto e seleziona "Aggiungi nuova cartella". Fatelo due volte, chiamate le cartelle "usercontrols" e "image".
Fai clic destro sulla cartella appena creata "usercontrols" e seleziona "Aggiungi nuovo elemento ...".
Nel popup assicurati che UserControl sia selezionato e inserisci "image.xaml" come nome.
Scegli il contenitore StackPanel dalla barra degli strumenti, che dovrebbe essere sul lato sinistro per impostazione predefinita ...
... e disegna un rettangolo nel mezzo di LayoutRoot che era lì dall'inizio.
Assicurati che lo StackPanel sia selezionato sul lato sinistro nel pannello "Oggetti e sequenza temporale". Sul lato destro vedete i parametri dell'elemento attualmente selezionato. Cambia larghezza e altezza su "Auto (0)" facendo clic sulle frecce incrociate accanto al campo di testo. HorizontalAlignment to "Center" e VerticalAlignment su "Top". Reimposta il margine facendo clic sull'icona quadrata bianca accanto ai campi di testo e seleziona Ripristina dal menu. Successivamente, imposta il margine superiore su "5". Ora il pannello Layout dovrebbe apparire come questo e dato che StackPanel ha una dimensione di 0x0 pixel non puoi più vederlo:
Vai avanti e seleziona il contenitore Grid dalla barra degli strumenti sul lato sinistro (dove abbiamo selezionato StackPanel in precedenza) e traccia un altro rettangolo nel mezzo dell'area di lavoro.
Dai un'occhiata al pannello "Oggetti e tempistica" e assicurati che la Griglia si trovi all'interno di StackPanel. Se non è solo clic e trascinalo nello StackPanel.
Regola le impostazioni del layout mentre la griglia è ancora selezionata. Imposta Larghezza e Altezza su "200" pixel, Orizzontale e Verticale su "Allunga" se non lo sono già.
Ora stiamo andando a creare un confine. Puoi selezionarlo come Grid e StackPanel dalla barra degli strumenti sul lato sinistro. Disegna un rettangolo con il bordo e spostalo nella griglia se non lo è già.
Aprire l'area per Pennelli sul lato destro e cambiare il BorderBrush con il seguente Colore: "# 0076A2F9". Quindi imposta BorderThickness nel pannello Aspetto su "5" pixel in tutte e quattro le direzioni e CornerRadius su "5" pixel. Larghezza e Altezza dovrebbero essere impostati su "Auto" facendo clic sulle frecce incrociate accanto alla casella di testo. L'HorizontalAlignment deve essere impostato su "Center" e VerticalAlignment su "Bottom":
Ora stiamo per aggiungere un effetto ombra al bordo. Fai clic sul pulsante "Nuovo" nell'area Aspetto accanto a Effetto. Nel prossimo popup selezionare "DropShadowEffect" e fare clic su "OK".
Regola le impostazioni dell'ombra che si trovano proprio sotto il pulsante "Nuovo" impostando BlurRadius su "10" e ShadowDepth su "1":
Ora stiamo per importare un'immagine in Blend. A tale scopo, fai clic con il pulsante destro del mouse sulla cartella denominata "immagine" creata in precedenza e selezionando "Aggiungi elemento esistente" o selezionando la cartella e trascinando un'immagine direttamente su di essa dal desktop o da Esplora risorse..
Dopo l'importazione, l'albero del tuo progetto dovrebbe assomigliare a questo:
Per utilizzare l'immagine nel controllo, è sufficiente trascinarla dal browser del progetto, dove è stata importata, direttamente nell'area di lavoro. Come puoi vedere è troppo grande e nel contenitore sbagliato:
Per risolvere il problema, trasciniamo l'immagine nel bordo:
Cambia Altezza e Larghezza dell'immagine in "Auto", Orizzontale e Verticale in "Centra", Margini su "0" e Allunga su "Uniforme" nel pannello Proprietà comuni:
Seleziona lo strumento TextBlock dalla barra degli strumenti sul lato sinistro e crea un TextBlock da qualche parte nell'area di lavoro.
Premere il tasto "ESC" sulla tastiera per annullare la modifica del testo all'interno di TextBlock.
Fai clic e trascina TextBlock nel pannello "Oggetti e sequenza temporale" nello StackPanel creato in precedenza.
Dopodiché, modifica il colore di primo piano con "# FF1F1F1F" e le impostazioni di layout a destra con i seguenti valori: Larghezza: "Auto", Altezza: "Auto", HorizontalAlignment: "Center", VerticalAlignment: "Top", Margin -Top: "8". Imposta il testo su nulla contrassegnando il testo "TextBlock" e cancellandolo o facendo clic sul quadrato bianco accanto ad esso e facendo clic su "Ripristina". Cambia anche il carattere del testo in "Verdana":
Crea un altro TextBlock ripetendo i passaggi 16 e 17 o selezionando quello che abbiamo creato già nel pannello "Oggetti e sequenza temporale" e premendo Ctrl + C, quindi Ctrl + V per duplicarlo. L'unica cosa che dobbiamo fare in modo diverso dal passaggio 17 è che non vogliamo impostare alcun margine. Se hai fatto il metodo duplicato hai semplicemente impostato il margine superiore su "0" o fai clic sul quadratino bianco accanto ad esso e reimposta il margine:
Per essere in grado di lavorare con gli elementi che abbiamo creato finora, dobbiamo dare loro dei nomi. Quindi vai avanti e rinomina il TextBlock in fondo a "imgDate" facendo clic due volte lentamente o facendo clic con il pulsante destro del mouse e selezionando "rinomina". Cambia il nome dell'altro TextBlock in "imgName", l'immagine in "img", il bordo in "imgBorder" e la griglia in "imgSize". Ora abbiamo finito con la progettazione di questo controllo e la tua gerarchia dovrebbe assomigliare a questa:
E il design dovrebbe assomigliare a questo:
Ovviamente non puoi vedere i due TextBlocks nel tuo progetto dato che non abbiamo impostato il loro testo su alcuni passaggi precedenti.
Personalmente, lascio i nomi di Textblock finché ne ho bisogno per fare il disegno prima di rimuoverli. In questo modo, puoi controllare se tutto è nel posto giusto.
Se vuoi dare un'occhiata al codice che abbiamo appena generato clicca l'icona "< >"al centro nella parte superiore della barra di scorrimento a destra dell'area di lavoro. Per tornare alla vista di progettazione, fare clic sull'icona in alto.
Il nostro codice si presenta così:
Assicurati di tornare alla visualizzazione del progetto.
Crea un altro UserControl nella cartella "usercontrols" facendo clic con il pulsante destro del mouse sulla cartella e scegliendo "Aggiungi nuovo elemento" dal menu.
Dal popup seleziona "UserControl" e per il nome inserisci "wallview-img.xaml":
Scegli il contenitore ScrollViewer dalla barra degli strumenti a sinistra ...
... e disegna un rettangolo con esso nell'area di lavoro.
Mentre è selezionato ScrollViewer, ispeziona l'area Pennelli sul lato destro e cambia il BorderBrush in "No Brush".
Impostare BorderThickness su "0" per tutte le quattro direzioni, su Horizontal e VerticalAlignment su "Stretch", Margine superiore su "29" pixel e gli altri Margini su "0". Controlla anche se Larghezza e Altezza sono su "Auto" facendo clic sulle frecce incrociate. Estendi ulteriormente l'area di layout facendo clic sulla piccola freccia e imposta tutte e quattro le direzioni di riempimento su "0":
Seleziona StackPanel dalla barra degli strumenti a sinistra ...
... e crea uno StackPanel nel mezzo di ScrollViewer.
Seleziona lo StackPanel se non è già presente nel pannello "Oggetti e sequenza temporale", quindi fai clic sul pulsante "Pennello colori solido" nell'area Pennelli (è il secondo da sinistra, accanto a "Nessun pennello") e impostare il colore di sfondo su "# FFB8B8B8". Inoltre, modifica Horizontal e VerticalAlignment su "Stretch", controlla se Width e Height sono impostati su "Auto" e se i Margins sono tutti "0":
Scegli il contenitore della griglia dalla barra degli strumenti e crea una griglia.
Se lo hai creato all'interno di StackPanel, trascinalo nella griglia di LayoutRoot:
Cambia l'altezza della griglia in "30" pixel e la larghezza in "Auto". HorizontalAlignment to "Stretch", VerticalAlignment to "Top" e Margin to (-1, -1, -1, 0) per (a sinistra, in alto, a destra, in basso):
Seleziona lo strumento Rettangolo dal lato sinistro che si trova sopra i contenitori che abbiamo usato più volte ...
... e disegna una scatola nell'area di lavoro.
Sposta il rettangolo nella griglia che abbiamo creato nel passaggio precedente:
Cambia il colore di riempimento del rettangolo su "# FF4E4E4E":
E il colore tratto per "# FF1F1F1F":
Imposta Altezza e Larghezza su "Auto", Horizontal e VerticalAlignment su "Stretch" e resetta il Margine se ce n'è:
Ora creiamo uno StackPanel e lo spostiamo nella griglia:
Modifica i parametri di StackPanel come segue: Larghezza e Altezza su "Auto", Orientamento su "Orizzontale", Allineamento orizzontale su "Sinistra", Allineamento verticale su "Centro" e Margine-Sinistra su "10":
Seleziona lo strumento Button dalla barra degli strumenti ...
... e crea un pulsante da qualche parte nell'area di lavoro.
Quindi trascinalo nello StackPanel che abbiamo appena creato:
Imposta la larghezza e l'altezza del pulsante su "Auto", HorizontalAlignment su "Stretch", VerticalAlignment su "Center", Margins se ce ne sono a "0", il Contenuto su "All Albums" (spazi vuoti in modo tale che il pulsante di default appaia leggermente migliore) e il carattere a "Verdana":
Seleziona il pulsante e premi Ctrl + C, Ctrl + V per copiare e incollare il pulsante nello stesso StackPanel, quindi Cambia Margine-Sinistra su "5" e il Contenuto su "Album corrente":
Seleziona lo StackPanel con i due pulsanti in esso contenuti nel pannello "Oggetti e sequenza temporale" e premi CTRL + C, CTRL + V per duplicarlo. Ora la tua gerarchia dovrebbe assomigliare a questa:
Seleziona lo StackPanel duplicato se non lo hai già fatto, modifica l'HorizontalAlignment su "Right" e imposta tutti i Margini su "0" tranne quello a destra che hai impostato su "10" pixel.
Seleziona uno dei pulsanti nello StackPanel duplicato e cambia il suo contenuto in " < " if you selected the left one and to " > "per quello giusto Ora abbiamo due pulsanti con un simbolo a freccia che verrà utilizzato in seguito per la navigazione.
Seleziona lo Strumento di scorrimento dalla barra degli strumenti e crea un dispositivo di scorrimento nell'area di lavoro.
Quindi trascinalo nella parte superiore dello StackPanel inferiore:
Seleziona il dispositivo di scorrimento e regolalo alle seguenti impostazioni:
E sotto Proprietà comuni:
Come nell'immagine UserControl che abbiamo creato in precedenza, rinomineremo gli elementi di cui abbiamo bisogno in seguito. Dal basso verso l'alto: Button: "btnNext", Button: "btnPrev", Slider: "slider", salta StackPanel, Button: "btnCurrentAlbum", Button: "btnAllAlbums", salta gli elementi successivi fino allo StackPanel che è all'interno di ScrollViewer. Rinominare StackPanel in "contenuto". Ora la gerarchia dovrebbe assomigliare a questa:
Ecco come dovrebbe apparire l'UserControl "wallview-img":
Ecco come appare il codice xaml per il nostro UserControl "wallview.img.xaml":
Blend è un ottimo strumento per creare bellissimi disegni e animazioni. Puoi anche scrivere l'intero codice in Blend, ma preferisco usare Visual Studio poiché è più potente, ha un debugger e un IntelliSense migliore per le proposte e il completamento automatico.
Nella seconda parte di questo tutorial scriveremo l'intero codice per i nostri due UserControls in C # e il nostro webservice che porta ogni immagine da una particolare cartella nel nostro wallview.
Dato che questo è il mio primo tutorial, spero che ti sia piaciuto superarlo e aver imparato qualcosa di utile. Per eventuali commenti, suggerimenti o dubbi, si prega di lasciare una nota nella sezione commenti.
Grazie per aver letto!
30 giorni di prova di Blend
Un'introduzione a Microsoft Silverlight 4 - Miscela
Accentsconagua