Partilhar via

Demonstra Passo a passo: Criando um aplicativo de redimensionamento por meio do WPF Designer

  • Artigo

Você pode usar o controle GridSplitter em conjunto com a Grid caixa de controles para criar janela layouts que são redimensionáveis pelo usuário em tempo de execução.Por exemplo, em um aplicativo que tenha um interface do usuário dividido em áreas, o usuário pode arrastar um separador para tornar uma área maior, dependendo o que o usuário deseja ver mais do.Nessa explicação passo a passo, você cria o layout de um aplicativo estilo messenger.

Nesta explicação passo a passo, você executa as seguintes tarefas:

  • Criar um aplicativo WPF.

  • Configura o painel de grade padrão.

  • Adiciona um GridSplitter horizontal.

  • Adiciona um painel dock e controles.

  • Adiciona um painel de grades e controles.

  • Teste o aplicativo.

A ilustração a seguir mostra como o aplicativo será exibido.

Observação:

As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

  • Visual Studio 2008

Criando o projeto

O primeiro procedimento é criar um projeto para o aplicativo.

Para criar o projeto

  1. Criar um novo projeto de Aplicativo WPF em Visual Basic ou Visual C# chamado ResizableApplication.Para obter mais informações, consulte Como: Criar um novo projeto de aplicativo do WPF.

    Observação:

    Nessa explicação passo a passo, você não irá escrever nenhum código de programa.O idioma que você escolhe para seu projeto é o idioma que é usado para as páginas code-behind de seu aplicativo.

    Window1.xaml é aberto no WPF Designer.

  2. No menu File, clique em Save All.

Configurando o Controle do Painel de Grade Padrão

Por padrão, o novo aplicativo WPF contém um Window com um painel Grid.Para seguir as práticas recomendadas, você dedica este Grid para o GridSplitter.O plano para a grade é o seguinte:

Linha 1: A Dock painel para a primeira parte do layout.

Linha 2: A GridSplitter.

Linha 3: A Grid painel para o restante do layout.

Configurar o controle do painel de grade padrão

  1. No modo Design, selecione Grid.Para obter mais informações, consulte Como: Selecionar e mover elementos na área de design.

  2. Na janela Properties,localize a propriedade RowDefinitions e clique no botão de reticências na coluna valor da propriedade.

    O Editor de coleção aparece.

  3. Clique em Add três vezes para adicionar três linhas.

  4. Defina a propriedade Altura da segunda linha para Automático.

  5. Defina a propriedade MinHeight da terceira linha como 70.

  6. Clique em OK para fechar o Editor de coleção e retornar para a WPF Designer.

    Agora há três linhas na grade, mas aparecem apenas duas linhas.A linha cuja propriedade altura estiver definida como automática está temporariamente oculta porque ela não tem qualquer conteúdo.Para essa explicação passo a passo, está tudo bem.Para evitar que isso aconteça no futuro, você pode usar dimensionamento de estrela enquanto você trabalha, e alterar para automático quando tiver terminado.

  7. No menu File, clique em Save All.

Adicionando um GridSplitter horizontal

Em seguida, adicione o GridSplitter.

Para adicionar um GridSplitter horizontal

  1. No modo Design, selecione Grid.

  2. Da Caixa de Ferramentas, arraste um controle GridSplitter para o Grid.

  3. Na janela Properties, defina as propriedades a seguir GridSplitter:

    Propriedade

    Valor

    ResizeDirection

    Rows

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    10

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. No menu File, clique em Save All.

Adicionando um painel dock e controles.

Em seguida você adiciona um DockPanel e configura o layout de metade superior do aplicativo.O DockPanel contém um Label e um RichTextBox.Você define a cor do Label e o RichTextBox para realçar o tamanho da metade superior do aplicativo quando você move o GridSplitter.

Para adicionar um painel dock e controles

  1. No modo Design, selecione Grid.

  2. Da Caixa de Ferramentas, arraste um controle DockPanel para o Grid.

  3. Na janela Properties, defina as propriedades a seguir DockPanel:

    Propriedade

    Valor

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    LastChildFill

    True (Marcado)

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. Da Caixa de Ferramentas, arraste um controle Label para o DockPanel.

  5. Na janela Properties, defina as propriedades a seguir Label:

    Propriedade

    Valor

    Segundo plano

    Blue (#FF0000FF)

    Primeiro plano

    White (#FFFFFFFF)

    Conteúdo

    Exibir

    DockPanel.Dock

    Início

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  6. No modo Design, selecione DockPanel.

    Dica:

    Porque há vários controles cobrindo a grade, você pode usar a tecla TAB, a janela Document Outline ou modo de exibição XAML para selecionar o DockPanel mais facilmente.Para obter mais informações, consulte Como: Selecionar e mover elementos na área de design.

  7. Da Caixa de Ferramentas, arraste um controle RichTextBox para o DockPanel.

  8. Na janela Properties, defina as propriedades a seguir RichTextBox:

    Propriedade

    Valor

    Segundo plano

    LightBlue (#FFADD8E6)

    DockPanel.Dock

    Parte Inferior

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    True (Marcado)

  9. No menu File, clique em Save All.

Adicionando um painel de grades e controles

Em seguida você adiciona um Grid e configura o layout da metade inferior do aplicativo.O Grid contém um Button e um RichTextBox.Você define a cor do RichTextBox para realçar o tamanho da metade inferior do aplicativo quando você move o GridSplitter .

Para adicionar um painel de grades e controles

  1. No modo Design, selecione Grid.

  2. Da Caixa de Ferramentas, arraste um controle Grid para o Grid.

  3. Na janela Properties, defina as propriedades a seguir para o novo Grid:

    Propriedade

    Valor

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    2

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. Na janela Properties,localize a propriedade ColumnDefinitions e clique no botão de reticências na coluna valor da propriedade.

    O Editor de coleção aparece.

  5. Clique em Add duas vezes para adicionar duas colunas.

  6. Defina a propriedade Width da segunda coluna como Auto.

  7. Clique em OK para fechar o Editor de coleção e retornar para a WPF Designer.

  8. Da Caixa de Ferramentas, arraste um controle Button para o Grid.

  9. Na janela Properties, defina as propriedades a seguir Button:

    Propriedade

    Valor

    Conteúdo

    OK

    Grid.Column

    1

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    60

    Height

    60

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    5

  10. Da Caixa de Ferramentas, arraste um controle RichTextBox para o Grid.

  11. Na janela Properties, defina as propriedades a seguir RichTextBox:

    Propriedade

    Valor

    Segundo plano

    PaleGoldenrod (#FFEEE8AA)

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    False (Não marcado)

  12. No menu File, clique em Save All.

Testando o aplicativo

O procedimento final é testar o aplicativo.

Para testar o aplicativo

  1. No menu Depuração, clique em Iniciar Depuração.

    O aplicativo inicia e Window1 é exibida.

  2. Redimensione a janela tanto vertical quanto horizontalmente.

    As metades superior e inferior do aplicativo expandem e contraem para uso do espaço disponível.

  3. Arraste o separador para redimensionar as partes do aplicativo.Torne uma parte do aplicativo pequena em comparação com a outra.

  4. Redimensione a janela novamente.

    As metades superior e inferior do aplicativo expandem e contraem proporcionalmente com base no localização do separador.

  5. Arraste o separador para a parte superior do aplicativo o quanto for possível.

    A metade superior do aplicativo desaparece e somente a metade inferior aparece.

  6. Arraste o separador para a parte inferior do aplicativo o quanto for possível.

    A metade inferior do aplicativo ainda aparece.Isso ocorre porque você definiu a propriedade MinHeight da terceira linha como 70.

    Observação:

    70 = 60 (a altura do botão) + 5 (a margem superior do botão) + 5 (a margem inferior do botão)

  7. Feche a janela.

Colocando tudo junto

Este é o arquivo Window1.xaml concluído:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" 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>

Próximas etapas

O aplicativo que você criou nessa explicação passo a passo continha um separador horizontal.Você pode fazer experiências criando o mesmo aplicativo usando uma divisão vertical em vez disso.

O aplicativo que você criou demonstrou somente técnicas de layout.Você pode fazer experiências adicionando código para tornar o aplicativo funcional.Por exemplo, você pode adicionar código ao evento de clique do botão que copia texto da caixa de texto inferior para a caixa de texto superior.

Consulte também

Tarefas

Como: Crie aplicativos de usuário redimensionamento com GridSplitter

Conceitos

Layout com absoluto e dinâmica posicionamento

Outros recursos

Walkthroughs de layout