Criar um aplicativo simples com o Visual

['Dionísio 4.369]

Ao concluir essa explicação, com o passo a passo, você estará familiarizado com muitas das ferramentas, caixas de diálogo e designers que você pode usar quando desenvolver aplicativos com Visual Studio. Você criará um simples aplicativo no estilo "Hello, World", fará o design da interface do usuário, adicionará código e depurará erros enquanto aprende mais sobre como o trabalho no ambiente de desenvolvimento integrado (IDE).

 

Este tópico contém as seguintes seções:

Configurar o IDE

 

criar um aplicativo simples

 

Depurar e testar o aplicativo

Observação:

Este passo a passo se baseia no Visual Studio Professional, que oferece o modelo de aplicativo WPF no qual você criará o projeto. O Visual Studio Express para Windows Desktop também oferece esse modelo, mas o Visual Studio Express para Windows e Visual Studio Express for Web, não. Para obter informações introdutórias sobre como usar o Visual Studio Express para Windows, consulte o Developer Center para aplicativos da Windows Store. Para obter informações introdutórias sobre como usar o Visual Studio Express para Web, consulte Introdução ao ASP.NET. Além disso, sua edição do Visual Studio e as configurações que você usa determinam os nomes e os locais de alguns elementos da interface do usuário. Consulte Customizing Development Settings in Visual Studio.

Configurar o IDE:

 

Quando você iniciar o Visual Studio pela primeira vez, o Visual Studio solicita que você entre com uma conta de serviço MSA (Microsoft). entrar no Visual Studio. Você não precisa entrar e pode fazer isso mais tarde.

 

Após abrir o Visual Studio, você precisa escolher uma combinação de configurações que serão aplicadas a um conjunto de personalizações pré-definidas do IDE. Cada combinação de configurações foi criada para facilitar o desenvolvimento de aplicativos para você.

 

Este passo a passo supõem que você aplicou Configurações gerais de desenvolvimento, que se aplica a menor quantidade de personalização ao IDE. Se você já tiver escolhido o c# ou Visual Basic (ambas são boas opções), você não precisa alterar suas configurações. Se você quiser alterar suas configurações, você pode usar o Import and Export Settings Wizard. Consulte Customizing Development Settings in Visual Studio.

 

Depois de abrir o Visual Studio, você poderá identificar as janelas de ferramenta, os menus e barras de ferramentas e o espaço da janela principal. As janelas de ferramenta estão encaixadas nos lados esquerdo e direito da janela do aplicativo, com Início Rápido, a barra de menus e a barra de ferramentas padrão na parte superior. No centro da janela do aplicativo está a Página Inicial. Quando você carrega uma solução ou projeto, editores e designers aparecem no espaço onde o Start Page está. Quando você desenvolver um aplicativo, passará a maior parte do seu tempo nesta área central.

Figura 2: IDE do Visual Studio

 

 

 

 

Você pode fazer personalizações adicionais no Visual Studio, como alterar a fonte e o tamanho do texto no editor ou o tema de cores do IDE, usando a caixa de diálogo Opções. Dependendo da combinação de configurações que você tiver aplicado, alguns itens na caixa de diálogo poderão não aparecer automaticamente. Você pode garantir que todas as opções possíveis apareçam escolhendo a caixa de seleção Mostrar todas as configurações.

Figura 3: Caixa de diálogo Opções

 

 

 

 

Nesse exemplo, você irá alterar o tema de cor da IDE entre claro e escuro. Você poderá pular para criar um projeto se desejar.

Para alterar o tema de cores do IDE

Abra o opções caixa de diálogo, escolhendo o ferramentas menu na parte superior e, em seguida, oOpções... item.

Altere Tema de cores para Escuro e então clique em OK.

 

 

 

 

 

As cores no Visual Studio devem corresponder à seguinte imagem:

 

 

 

 

 

 

O tema de cor usado para imagens no restante deste passo a passo é o tema no claro. Para obter mais informações sobre como personalizar o IDE, consulte

Somente usuários registrados podem ver o link. Registre-se

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Criar um aplicativo simples

 

 

Criar o projeto

Quando você cria um aplicativo no Visual Studio, primeiro cria um projeto e uma solução. Para este exemplo, você criará um projeto do Windows Presentation Foundation (WPF).

Para criar o projeto WPF

 

Criar um novo projeto. Na barra de menus, escolha arquivo, novo, projeto....

 

 

 

 

 

Você também pode digitar Novo Projeto na caixa Início Rápido fazer a mesma coisa.

 

 

Escolha do Visual Basic ou o modelo de aplicativo do Visual c# WPF escolhendo-o no painel esquerdoinstalados, modelos, Visual C#, Windows, por exemplo, em seguida, escolhendo o aplicativo do WPF no painel do meio. Nomeie o projeto HelloWPFApp na parte inferior da caixa de diálogo Novo projeto.

 

 

 

 

 

 

 

 

 

 

 

O Visual Studio cria o projeto HelloWPFApp e a solução e o Solution Explorer mostra vários arquivos. O WPF Designer mostra um modo de exibição de design e um modo de exibição XAML de MainWindow. XAML em um modo divisão. Você pode deslizar o divisor para mostrar mais ou menos de dois modos de exibição. Você pode optar por ver apenas a exibição visual ou apenas o modo de exibição XAML. (Para obter mais informações, consulte Somente usuários registrados podem ver o link. Registre-se

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Figura 5: Itens de projeto

 

Depois de criar o projeto, você poderá personalizá-lo. Usando o propriedades janela (encontrados no exibiçãomenu), você pode exibir e alterar as opções de itens de projeto, controles e outros itens em um aplicativo. Usando as propriedades e as páginas de propriedades do projeto, você pode exibir e alterar opções para projetos e soluções.

Para alterar o nome de MainWindow.xaml

 

No procedimento a seguir, você dará a MainWindow um nome mais específico. No Gerenciador de Soluções, selecione MainWindow.xaml. Você deve ver a janela Propriedades, caso contrário, escolha o menu Exibição e depois o item Janela de Propriedade. Altere a propriedade Nome do arquivo para Greetings.xaml.

 

Solution Explorer mostra que o nome do arquivo agora é Greetings. XAML e, se você expandir o nó de MainWindow. XAML (por colocar o foco no nó e pressionando a tecla de seta para a direita), você verá o nome MainWindow.xaml.vb ou MainWindow.xaml.cs agora é Greetings.xaml.vb ou Greetings.xaml.cs. Esse arquivo de código está aninhado sob o nó do arquivo. XAML para mostrar a que eles estão intimamente relacionados uns aos outros.

 

Essa alteração causa um erro que você aprenderá a depurar e corrigir em uma etapa posterior.

Em Solution Explorer, abra Greetings. XAML no modo de exibição Designer (pressionando a tecla Enter enquanto o nó tem foco) e selecione a barra de título da janela usando o mouse.

Na janela Propriedades, altere o valor da propriedade Título de Greetings.

 

A barra de título de MainWindow.xaml agora exibe Saudações.

 

Criar a interface do usuário (IU)

 

Adicionaremos três tipos de controles a este aplicativo: um controle TextBlock, dois controles RadioButton e um controle Button.

Para adicionar um controle TextBlock

 

 

Abra o ferramentas janela escolhendo o exibição menu e o Toolbox item.

Na Caixa de Ferramentas, procure pelo controle TextBlock.

Adicione um controle TextBlock à superfície de design, escolhendo o item de TextBlock e arrastando-o para a janela na superfície de design. Centralize o controle na parte superior da janela

 

Sua janela deve se parecer com a ilustração a seguir:

Figura 7: Janela Saudações com controle TextBlock

 

 

 

 

A marcação XAML deve ter uma aparência semelhante a esta:

 

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

 

 

 

Para personalizar o texto no bloco de texto

 

No modo de exibição XAML, localize a marcação para TextBlock e altere o atributo de texto: Text=”Select a message option and then choose the Display button.”

Se o TextBlock se expandir para ajustar o modo de exibição de Design, amplie o controle TextBlock (usando as alças de captura nas bordas) para que ele exiba todo o texto.

Salve suas alterações pressionando Ctrl-s ou usando o arquivo item de menu.

 

Em seguida, você adicionará dois RadioButton controles ao formulário.

Para adicionar botões de opção

 

 

Na Caixa de Ferramentas, procure pelo controle RadioButton.

 

Adicione dois controles RadioButton no design da superfície, escolhendo o item RadioButton e arrastando-a janela na superfície de design duas vezes e mover os botões (selecionando-as e usando as teclas de direção) para que os botões são exibidos lado a lado sob o controle TextBlock.

A sua janela deve se parecer com esta:

Figura 8: RadioButtons na janela Saudações.

 

 

 

 

Na janela Propriedades para o controle RadioButton esquerdo, altere a propriedade Nome (a propriedade na parte superior da janela Propriedades) para RadioButton1. Verifique se que você selecionou o RadioButton e não o plano de fundo grade no formulário; o campo tipo de janela de propriedade no campo nome deve dizer RadioButton.

No propriedades janela controle RadioButton direito, altere o nome propriedade RadioButton2, e, em seguida, salve as alterações pressionando Ctrl-s ou usando o arquivo item de menu. Verifique se que você selecionou o RadioButton antes de alterar e salvar.

 

 

Agora você pode adicionar o texto exibido para cada controle RadioButton. O procedimento a seguir atualiza a propriedade Conteúdo para um controle RadioButton.

Para adicionar texto de exibição para cada botão de opção

 

 

Na superfície de design, abra o menu de atalho de RadioButton1 pressionando o botão direito do mouse enquanto selecionando o RadioButton1, escolha Editar texto, e, em seguida, digite Hello.

Abra o menu de atalho de RadioButton2, pressionando o botão direito do mouse enquanto seleciona RadioButton2, escolha Editar texto, e, em seguida, digite Goodbye.

 

 

É o elemento de interface do usuário final que você adicionará um Botão controle.

Para adicionar o controle de botão

 

 

No Toolbox, procure o botão controlar e adicioná-lo à superfície de design nos controles RadioButton selecionando o botão e arrastando-o para o formulário no modo design.

No modo de exibição XAML, altere o valor de conteúdo para o controle de botão de Content=”Button” paraContent=”Display”, e, em seguida, salve as alterações (Ctrl-s ou use o arquivo menu).

A marcação deve se parecer com o exemplo a seguir: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

 

 

Sua janela deve se parecer com a ilustração a seguir.

Figura 9: Interface do usuário de Saudações Finais

 

 

 

 

Adicione código ao botão Exibir

Quando o aplicativo é executado, uma caixa de mensagem aparece depois que um usuário escolhe pela primeira vez um botão de opção e clica no botão Exibir. Uma caixa de mensagem será exibida para Hello e outra para Goodbye.Para criar esse comportamento, você adicionará código ao evento Button_Click em Greetings.xaml.vb ou em Greetings.xaml.cs.

Adicionar código a caixas de mensagem de exibição

 

 

Na superfície de design, clique duas vezes o exibição botão.

Greetings.xaml.vb ou Greetings.xaml.cs é aberto, com o cursor no evento Button_Click. Você também pode adicionar um manipulador de eventos da seguinte maneira (se o código colado tiver um rabisco vermelho em todos os nomes, você provavelmente não selecionar os controles RadioButton na superfície de design e renomeá-las):

Para o Visual Basic, o manipulador de eventos deve ser assim:

VB

 

 

 

Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)End Sub

 

 

 

Para o Visual C#, o manipulador de eventos deve ser assim:

C#

 

 

 

 

private void Button_Click_1(object sender, RoutedEventArgs e){}

Para o Visual Basic, insira o código a seguir:

VB

 

 

 

 

If RadioButton1.IsChecked = True Then MessageBox.Show("Hello.")Else RadioButton2.IsChecked = True MessageBox.Show("Goodbye.")End If

 

 

 

Para o Visual C#, insira o código a seguir:

 

 

 

 

if (RadioButton1.IsChecked == true){ MessageBox.Show("Hello.");}else{ RadioButton2.IsChecked = true; MessageBox.Show("Goodbye.");}

Salve o aplicativo.

 

 

 

 

Depurar e testar o aplicativo

 

Em seguida, você depurará o aplicativo para procurar erros e testar se ambas as caixas de mensagem são exibidas corretamente. As instruções a seguir descrevem como criar e iniciar o depurador, mas posteriormente você pode lerCompilando um aplicativo WPF (WPF) e Depurando WPF para obter mais informações.

Localizar e corrigir erros

 

Nesta etapa, você encontrará o erro que nós causamos anteriormente alterando o nome da janela principal do arquivo XAML.

Para iniciar a depuração e localizar o erro

 

 

Inicie o depurador selecionando Depurar e então em Iniciar Depuração.

Uma caixa de diálogo aparece, indicando que um IOException ocorreu: não é possível localizar o recurso 'mainwindow.xaml'.

Escolha o botão OK e então pare o depurador.

 

Renomeamos MainWindow. XAML para Greetings. XAML no início deste passo a passo, mas o código ainda se refere a MainWindow. XAML como o URI de inicialização para o aplicativo, portanto não é possível iniciar o projeto.

Para especificar Greetings. XAML como o URI de inicialização

 

 

Em Solution Explorer, abra o arquivo App. XAML (no projeto do c#) ou o arquivo Application XAML (no projeto do Visual Basic) no modo de exibição XAML (ele não pode ser aberto no modo Design) selecionando o arquivo e pressionando Enter ou clicando nele duas vezes.

Alterar StartupUri="MainWindow.xaml" para StartupUri="Greetings.xaml", e, em seguida, salve as alterações com Ctrl-s.

 

 

Inicie o depurador novamente (pressione F5). Você deve ver a janela Saudações do aplicativo.

 

Para depurar com pontos de interrupção

 

Ao adicionar alguns pontos de interrupção, você pode testar o código durante a depuração. Você pode adicionar pontos de interrupção escolhendo Depurar no menu principal, em seguida, Alternar ponto de interrupção ou clicando na margem esquerda do editor ao lado da linha de código onde você deseja que a quebra ocorra.

Para adicionar pontos de interrupção

 

 

Abra Greetings.xaml.vb ou Greetings.xaml.cs e selecione a linha a seguir: MessageBox.Show("Hello.")

Adicionar um ponto de interrupção no menu selecionando Depurar, em seguida, Alternar ponto de interrupção.

Um círculo vermelho aparece ao lado da linha de código na margem da extrema esquerda da janela do editor.

Selecione a linha a seguir: MessageBox.Show("Goodbye.").

Pressione a tecla F9 para adicionar um ponto de interrupção e, em seguida, pressione a tecla F5 para iniciar a depuração.

Na janela Saudações, escolha o botão de opção Hello e então escolha o botão Exibir.

A linha MessageBox.Show("Hello.") é realçada em amarelo. Na parte inferior do IDE, Autos, locais e inspeção janelas são encaixadas no lado esquerdo e as janelas pilha de chamadas, pontos de interrupção, comando, imediato e saída são encaixadas no lado direito.

Na barra de menu, escolha Depurar, Depuração Circular.

O aplicativo retomará a execução e uma caixa de mensagem com a palavra "Hello" aparecerá.

Escolha o botão OK na caixa de mensagem para fechá-la.

Na janela Saudações, escolha o botão de opção Goodbye e então escolha o botão Exibir.

A linha MessageBox.Show("Goodbye.") é realçada em amarelo.

Escolha a tecla F5 para continuar a depuração. Quando a caixa de mensagem aparecer, escolha o botão OK na caixa de mensagem para fechá-la.

Pressione SHIFT + F5 chaves (pressione shift primeiro e mantendo-o para baixo, pressione F5) para parar a depuração.

Na barra de menu, escolha Depurar, Desabilitar Todos os Pontos de Interrupção.

 

 

 

Criar uma versão de lançamento do aplicativo

 

Agora que você selecionou que tudo funciona, poderá preparar uma compilação de lançamento do aplicativo.

Para limpar os arquivos de solução e criar uma versão de lançamento

 

 

No menu principal, selecione criar, em seguida, Limpar solução para excluir arquivos intermediários e arquivos de saída que foram criados durante compilações anteriores. Isso não é necessário, mas ele limpa as saídas de compilação de depuração.

 

Alterar a configuração de compilação de HelloWPFApp, de Depurar para versão usando o controle de lista suspensa na barra de ferramentas (ela diz "Depuração" no momento).

 

 

 

 

 

 

Crie a solução escolhendo criar, em seguida, Compilar solução ou pressione a tecla F6.

 

 

Parabéns por concluir esta explicação passo a passo! Você pode encontrar o .exe criado no diretório do projeto e solução (... \HelloWPFApp\HelloWPFApp\bin\Release\).

 

Creditos:

McKee

microsoft

Visual Basic C++