Procedura dettagliata: creazione di un' applicazione ridimensionabile tramite Progettazione WPF

Articolo
08/11/2011

È possibile utilizzare il controllo GridSplitter insieme al controllo contenitore Grid per creare layout di finestre ridimensionabili dall'utente in fase di esecuzione. Ad esempio, in un'applicazione la cui interfaccia utente è divisa in aree, l'utente può trascinare un separatore per ingrandire un'area e visualizzarne una quantità maggiore di contenuto. In questa procedura dettagliata verrà creato il layout per un'applicazione in stile Messenger.

Questa procedura dettagliata prevede l'esecuzione delle attività seguenti:

Creazione di un'applicazione WPF.
Configurazione del pannello griglia predefinito.
Aggiunta di un controllo GridSplitter orizzontale.
Aggiunta di un pannello di ancoraggio e dei controlli.
Aggiunta di un pannello griglia e dei controlli.
Test dell'applicazione.

Nella figura seguente è illustrata l'applicazione finale.

Applicazione ridimensionabile

Nota

È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/Esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

Visual Studio 2010

Creazione del progetto

La prima procedura consiste nella creazione del progetto per l'applicazione.

Per creare il progetto

In Visual Basic o Visual C# creare un nuovo progetto di applicazione WPF denominato ResizableApplication. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

Nota

In questa procedura dettagliata non verrà scritto codice. Il linguaggio scelto per il progetto è quello utilizzato per le pagine code-behind nell'applicazione.

MainWindow.xaml viene aperto in WPF Designer.
Scegliere Salva tutto dal menu File.

Configurazione del controllo Panel predefinito della griglia

Per impostazione predefinita, la nuova applicazione WPF contiene un oggetto Window con un pannello Grid. Per seguire le procedure consigliate, dedicare questo oggetto Grid a GridSplitter. Di seguito è riportato il piano per la griglia:

Riga 1: un pannello Dock per la prima parte del layout.

Riga 2: un oggetto GridSplitter.

Riga 3: un pannello Grid per il resto del layout.

Per configurare il controllo pannello griglia predefinito

In visualizzazione Progettazione selezionare Grid. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.
Nella finestra Proprietà individuare la proprietà RowDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

Verrà visualizzato l'Editor dell'insieme.
Fare tre volte clic su Aggiungi per aggiungere tre righe.
Impostare la proprietà Height della seconda riga su Auto.
Impostare la proprietà MinHeight della terza riga su 70.
Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.

Nella griglia sono ora presenti tre righe, ma ne vengono visualizzate solo due. La riga la cui proprietà Height è impostata su Auto viene temporaneamente nascosta perché è priva di contenuto. Per questa procedura, tale impostazione risulta appropriata. Per evitare tale comportamento in futuro, è possibile utilizzare il ridimensionamento proporzionale durante la progettazione e impostare il valore su Auto al termine.
Scegliere Salva tutto dal menu File.

Aggiunta di un oggetto GridSplitter orizzontale

Aggiungere quindi l'oggetto GridSplitter.

Per aggiungere un oggetto GridSplitter orizzontale

In visualizzazione Progettazione selezionare Grid.
Trascinare un controllo GridSplitter dalla Casella degli strumenti su Grid.

Nella finestra Proprietà impostare le seguenti proprietà per GridSplitter:

Proprietà	Valore
ResizeDirection	Rows
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Larghezza	Auto
Altezza	10
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

Scegliere Salva tutto dal menu File.

Aggiunta di un pannello di ancoraggio e dei controlli.

Aggiungere quindi un oggetto DockPanel e configurare il layout della metà superiore dell'applicazione. DockPanel contiene Label e RichTextBox. Impostare il colore di Label e RichTextBox per evidenziare le dimensioni della metà superiore dell'applicazione quando viene spostato GridSplitter.

Per aggiungere un pannello di ancoraggio e i controlli

In visualizzazione Progettazione selezionare Grid.
Trascinare un controllo DockPanel dalla Casella degli strumenti su Grid.

Nella finestra Proprietà impostare le seguenti proprietà per DockPanel:

Proprietà	Valore
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
LastChildFill	True (selezionato)
Larghezza	Auto
Altezza	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

Trascinare un controllo Label dalla Casella degli strumenti su DockPanel.

Nella finestra Proprietà impostare le seguenti proprietà per Label:

Proprietà	Valore
Background	Blue (#FF0000FF)
Primo piano	White (#FFFFFFFF)
Contenuto	Visualizzazione
DockPanel.Dock	Top
Larghezza	Auto
Altezza	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

In visualizzazione Progettazione selezionare DockPanel.

Suggerimento
Poiché molti controlli coprono la griglia, è possibile utilizzare il tasto TAB, la finestra Struttura documento o la visualizzazione XAML per selezionare più agevolmente DockPanel. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

Trascinare un controllo RichTextBox dalla Casella degli strumenti su DockPanel.

Nella finestra Proprietà impostare le seguenti proprietà per RichTextBox:

Proprietà	Valore
Background	LightBlue (#FFADD8E6)
DockPanel.Dock	Bottom
Larghezza	Auto
Altezza	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0
IsReadOnly	True (selezionato)

Scegliere Salva tutto dal menu File.

Aggiunta di un pannello griglia e dei controlli.

Aggiungere quindi un oggetto Grid e configurare il layout della metà inferiore dell'applicazione. Grid contiene Button e RichTextBox. Impostare il colore di RichTextBox per evidenziare le dimensioni della metà inferiore dell'applicazione quando viene spostato GridSplitter.

Per aggiungere un pannello griglia e i controlli

In visualizzazione Progettazione selezionare Grid.
Trascinare un controllo Grid dalla Casella degli strumenti su Grid.
Nella finestra Proprietà impostare le seguenti proprietà per il nuovo oggetto Grid:

Proprietà

Valore

Grid.Column

0

Grid.ColumnSpan

1

Grid.Row

2

Grid.RowSpan

1

Larghezza

Auto

Altezza

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

0
Nella finestra Proprietà, individuare la proprietà ColumnDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

Verrà visualizzato l'Editor dell'insieme.
Fare due volte clic su Aggiungi per aggiungere due colonne.
Impostare la proprietà Width della seconda colonna su Auto.
Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.
Trascinare un controllo Button dalla Casella degli strumenti su Grid.

Nella finestra Proprietà impostare le seguenti proprietà per Button:

Proprietà	Valore
Contenuto	OK
Grid.Column	1
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Larghezza	60
Altezza	60
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	5

Trascinare un controllo RichTextBox dalla Casella degli strumenti su Grid.

Nella finestra Proprietà impostare le seguenti proprietà per RichTextBox:

Proprietà	Valore
Background	PaleGoldenrod (#FFEEE8AA)
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Larghezza	Auto
Altezza	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0
IsReadOnly	False (deselezionato)

Scegliere Salva tutto dal menu File.

Verifica dell'applicazione

La procedura finale consiste nel test dell'applicazione.

Per eseguire il test dell'applicazione

Scegliere Avvia debug dal menu Debug.

L'applicazione verrà avviata e verrà visualizzato MainWindow.
Ridimensionare la finestra verticalmente e orizzontalmente.

Le metà superiore e inferiore dell'applicazione si espandono e si comprimono per utilizzare lo spazio disponibile.
Trascinare il separatore per ridimensionare le parti dell'applicazione. Rendere una parte dell'applicazione più piccola rispetto all'altra.
Ridimensionare nuovamente la finestra.

Le metà superiore e inferiore dell'applicazione si espandono e si comprimono in proporzione in base alla posizione del separatore.
Trascinare il separatore quanto più in alto possibile nell'applicazione.

La metà superiore dell'applicazione scompare e viene visualizzata solo la metà inferiore.
Trascinare il separatore quanto più in basso possibile nell'applicazione.

La metà inferiore dell'applicazione scompare e viene visualizzata solo la metà superiore. Questo comportamento si verifica perché la proprietà MinHeight della terza riga è impostata su 70.

Nota

70 = 60 (altezza del pulsante) + 5 (margine superiore del pulsante) + 5 (margine inferiore del pulsante)

Chiudere la finestra.

Riepilogo

Di seguito è riportato il file MainWindow.xaml completato:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

Passaggi successivi

L'applicazione creata con questa procedura dettagliata contiene un separatore orizzontale. Provare a creare la stessa applicazione utilizzando invece un separatore verticale.

Con l'applicazione creata sono state illustrate solo le tecniche di layout. È possibile provare ad aggiungere codice per renderla funzionale. Ad esempio, è possibile aggiungere codice all'evento Click del pulsante che copia il testo dalla casella di testo inferiore in quella superiore.

Vedere anche

Share via