Esercitazione: creare una finestra non rettangolare

Nelle applicazioni Microsoft Expression Blend può essere necessario creare una finestra che in fase di esecuzione assume una forma non rettangolare. Alcuni esempi comuni includono le applet per il desktop, i widget e i lettori multimediali. Per creare una finestra non rettangolare, è necessario modificare alcune proprietà dell'elemento Window nell'applicazione e quindi creare un metodo di gestore eventi che consenta di spostare la finestra senza che sia necessaria una barra del titolo.

Creare una finestra non rettangolare trasparente

1. Creare un nuovo documento Window denominato Window1.xaml. A tale scopo, scegliere Nuovo elemento dal menu File. Nella finestra Nuovo elemento verificare che la casella di controllo Includi file di codice sia selezionata per generare un file code-behind associato all'elemento Window1.xaml.

2. In Oggetti e sequenza temporale, nel pannello Interazione, selezionare l'elemento Window e quindi, nella sezione Aspetto del pannello Proprietà, modificare la proprietà WindowStyle impostandola su None per rimuovere la struttura esterna della finestra, ovvero la barra del titolo. Premere F5 per verificare l'aspetto della finestra senza la struttura esterna predefinita. Si noti che i pulsanti standard Riduci a icona, Ingrandisci, Ripristina e Chiudi non sono più visibili. Inoltre non è più possibile trascinare la finestra. Premere ALT+F4 per chiudere la finestra.

   [!NOTA]

   Per informazioni sulle altre opzioni disponibili per la proprietà WindowStyle, vedere "WindowStyle" nell'argomento Cenni preliminari sulle finestre WPF su MSDN.

3. In Aspetto, nel pannello Proprietà, selezionare la casella di controllo AllowsTransparency . Si noti che a questo punto il bordo della finestra non è più visibile.

4. Per rendere trasparente la finestra, nella categoria Pennelli del pannello Proprietà impostare la proprietà Background dell'elemento Window su Nessun pennello. In alternativa, se si desidera che l'utente possa fare clic sull'area invisibile della finestra, impostare la proprietà Background su Pennello tinta unita e quindi impostare su 1 la proprietà Alfa del pennello utilizzato per lo sfondo. In questo modo l'area della finestra in cui è possibile fare clic non verrà rimossa ma diventerà invisibile.

5. Infine, in Oggetti e sequenza temporale fare doppio clic su LayoutRoot per attivare l'elemento e quindi aggiungere alla tavola da disegno gli elementi desiderati della casella degli strumenti. È possibile creare vari effetti impostando un pennello OpacityMask per un elemento. Per informazioni su come eseguire tale operazione, vedere Creare una maschera di opacità. È inoltre possibile aggiungere forme e disegnare tracciati utilizzando strumenti di disegno, ad esempio lo strumento Ellipse e lo strumento Penna, e quindi spostare tali elementi dietro ad altri. A tale scopo, fare clic con il pulsante destro del mouse su un elemento e quindi scegliere Ordine. Il contenuto dell'elemento LayoutRoot definirà il contorno dell'applicazione.

6. Premere nuovamente F5 per verificare il nuovo aspetto della finestra. Si noti che non è ancora possibile trascinare la finestra. Premere ALT+F4 per chiudere la finestra.

Aggiungere codice per consentire il trascinamento della finestra in fase di esecuzione

Dopo aver reso trasparente la finestra, non è disponibile una barra del titolo con cui riposizionare la finestra. Per fare in modo che sia nuovamente possibile spostare la finestra, è necessario aggiungere alla finestra un gestore di evento e quindi aggiungere alcune righe di codice al file code-behind correlato.

1. Salvare il progetto nel disco rigido. A tale scopo, scegliere Salva tutto dal menu File. Non è possibile aggiungere metodi dei gestori degli eventi a un progetto che non è mai stato salvato.

2. Selezionare l'elemento Window in Oggetti e sequenza temporale, quindi fare clic sul pulsante Eventi nel pannello Proprietà.

3. Accanto a MouseLeftButtonDown digitare OnMouseLeftButtonDown e quindi premere INVIO.

   • Se nel sistema è installato Microsoft Visual Studio 2008 Standard Edition o versione successiva, il codice del gestore di evento generato alla pressione del tasto INVIO verrà automaticamente aggiunto al file code-behind (Window1.xaml.cs), che verrà aperto per la modifica in Visual Studio.

   • Se invece Visual Studio non è installato, il codice del metodo del gestore dell'evento verrà copiato negli Appunti in modo da poterlo incollare nel file code-behind. Aprire il file code-behind facendo doppio clic su di esso nel pannello Progetto. Incollare il codice del metodo di gestore eventi generato nel file code-behind prima della penultima parentesi graffa chiusa (se il file code-behind utilizza C#) o prima dell'istruzione End Class (se il file code-behind utilizza VB.NET).

     [!NOTA]

     Se non è possibile aprire il file code-behind facendo doppio clic su di esso nel pannello Progetto di Expression Blend, è probabile che non esista alcuna applicazione associata all'estensione del file code-behind (cs o vb) e che pertanto il sistema operativo non sia in grado di aprirlo automaticamente. Per informazioni su come associare file con estensione cs e vb a un editor, ad esempio il Blocco note, vedere Modificare un file code-behind.

4. Modificare il metodo di gestore eventi generato nel file code-behind, in modo che abbia un aspetto simile al seguente:

   private void OnMouseLeftButtonDown(object sender,
            System.Windows.Input.MouseButtonEventArgs e)
   {
     this.DragMove();
   }
   

   Private Sub OnMouseLeftButtonDown(ByVal sender As System.Object,
            ByVal e As System.Windows.Input.MouseButtonEventArgs)
     Me.DragMove()
   End Sub
   

5. Premere F5 per eseguire l'applicazione.

6. È possibile aggiungere ulteriori metodi di gestore eventi al file code-behind, ad esempio un metodo per l'evento Click di un pulsante che chiama il metodo Close(). Per ulteriori informazioni su come creare metodi di gestore eventi, vedere Cenni preliminari sulla gestione di eventi.