Condividi tramite


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

È 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

  1. 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.

  2. 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

  1. In visualizzazione Progettazione selezionare Grid. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

  2. 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.

  3. Fare tre volte clic su Aggiungi per aggiungere tre righe.

  4. Impostare la proprietà Height della seconda riga su Auto.

  5. Impostare la proprietà MinHeight della terza riga su 70.

  6. 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.

  7. Scegliere Salva tutto dal menu File.

Aggiunta di un oggetto GridSplitter orizzontale

Aggiungere quindi l'oggetto GridSplitter.

Per aggiungere un oggetto GridSplitter orizzontale

  1. In visualizzazione Progettazione selezionare Grid.

  2. Trascinare un controllo GridSplitter dalla Casella degli strumenti su Grid.

  3. 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

  4. 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

  1. In visualizzazione Progettazione selezionare Grid.

  2. Trascinare un controllo DockPanel dalla Casella degli strumenti su Grid.

  3. 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

  4. Trascinare un controllo Label dalla Casella degli strumenti su DockPanel.

  5. 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

  6. In visualizzazione Progettazione selezionare DockPanel.

    SuggerimentoSuggerimento

    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.

  7. Trascinare un controllo RichTextBox dalla Casella degli strumenti su DockPanel.

  8. 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)

  9. 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

  1. In visualizzazione Progettazione selezionare Grid.

  2. Trascinare un controllo Grid dalla Casella degli strumenti su Grid.

  3. 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

  4. 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.

  5. Fare due volte clic su Aggiungi per aggiungere due colonne.

  6. Impostare la proprietà Width della seconda colonna su Auto.

  7. Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.

  8. Trascinare un controllo Button dalla Casella degli strumenti su Grid.

  9. 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

  10. Trascinare un controllo RichTextBox dalla Casella degli strumenti su Grid.

  11. 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)

  12. Scegliere Salva tutto dal menu File.

Verifica dell'applicazione

La procedura finale consiste nel test dell'applicazione.

Per eseguire il test dell'applicazione

  1. Scegliere Avvia debug dal menu Debug.

    L'applicazione verrà avviata e verrà visualizzato MainWindow.

  2. Ridimensionare la finestra verticalmente e orizzontalmente.

    Le metà superiore e inferiore dell'applicazione si espandono e si comprimono per utilizzare lo spazio disponibile.

  3. Trascinare il separatore per ridimensionare le parti dell'applicazione. Rendere una parte dell'applicazione più piccola rispetto all'altra.

  4. Ridimensionare nuovamente la finestra.

    Le metà superiore e inferiore dell'applicazione si espandono e si comprimono in proporzione in base alla posizione del separatore.

  5. Trascinare il separatore quanto più in alto possibile nell'applicazione.

    La metà superiore dell'applicazione scompare e viene visualizzata solo la metà inferiore.

  6. 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)

  1. Chiudere la finestra.

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

Attività

Procedura: creare applicazioni ridimensionabili dall'utente con GridSplitter

Concetti

Layout con posizionamento assoluto e dinamico

Altre risorse

Procedure dettagliate relative ai layout