Självstudie: Skapa ett WPF-program med Visual Basic

I den här självstudien skapar du ett program med Visual Basic i Visual Studio Integrated Development Environment (IDE). Programmet använder UI-ramverket för Windows Presentation Foundation (WPF). Använd den här självstudien för att bekanta dig med många av de verktyg, dialogrutor och designers som du kan använda i Visual Studio.

I den här tutorialen lär du dig följande:

Vad är WPF?

WPF, eller Windows Presentation Foundation, är ett gränssnittsramverk (användargränssnitt) som skapar skrivbordsklientprogram. WPF-utvecklingsplattformen stöder en bred uppsättning funktioner för programutveckling, inklusive en programmodell, resurser, kontroller, grafik, layout, databindning, dokument och säkerhet.

WPF är en del av .NET, så om du tidigare har skapat program med .NET med hjälp av ASP.NET eller Windows Forms bör programmeringsupplevelsen vara bekant. WPF använder XAML extensible Application Markup Language för att tillhandahålla en deklarativ modell för programprogrammering. Mer information finns i WPF .NET-översikt.

Förutsättningar

Skapa projektet

När du skapar ett program i Visual Studio skapar du först ett projekt. I den här självstudien skapar du ett Windows Presentation Foundation-projekt.

Konfigurera fönster och lägg till text

Med hjälp av fönstret Egenskaper kan du visa och ändra alternativ för projektobjekt, kontroller och andra objekt.

1. Öppna MainWindow.xaml i Solution Explorer.

2. I XAML-vyn ändrar du värdet för egenskapen Window.Title från Title="MainWindow" till Title="Greetings".

3. Till vänster i Visual Studio IDE väljer du fliken Toolbox. Om du inte ser den väljer du Visa>Toolbox från menyraden eller Ctrl+Alt+X.

4. Expandera antingen Vanliga WPF-kontroller eller ange Text i sökfältet för att hitta TextBlock.

   

5. Välj objektet TextBlock och dra det till fönstret på designytan. Du kan flytta TextBlock-kontrollen genom att dra den. Använd riktlinjerna för att placera kontrollen.

   

   XAML-markering bör se ut som i följande exempel:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. I XAML-vyn letar du upp markering för TextBlock och ändrar attributet Text :

   Text="Select a message option and then choose the Display button."
   

   Centrera textblocket igen om det behövs

7. Spara din app genom att välja knappen Spara alla i verktygsfältet. Du kan också spara appen genom att välja Arkiv>Spara alla från menyraden eller trycka på Ctrl+Skift+S. Det är en bra idé att spara tidigt och ofta.

Lägga till knappar och kod

Din applikation använder två radioknappar och en knapp. Använd de här stegen för att lägga till dem. Du lägger till Visual Basic-kod på knappen. Den koden refererar till radioknappens val.

1. Leta reda på RadioButton i verktygslådan.

   

2. Lägg till två RadioButton-kontroller till designytan genom att välja RadioButton-objektet och dra det till designytan. Flytta knapparna genom att välja dem och använda piltangenterna. Placera knapparna sida vid sida under TextBlock-kontrollen.

   

3. I fönstret Egenskaper för den vänstra RadioButton-kontrollen ändrar du egenskapen Namn överst i fönstret Egenskaper till HelloButton.

   

4. I fönstret Egenskaper för rätt RadioButton-kontroll ändrar du egenskapen Namn till GoodbyeButton.

5. Uppdatera innehållsattributet för HelloButton och GoodbyeButton till "Hello" och "Goodbye" i XAML.

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

6. Leta upp markering för HelloButton i XAML-vyn och lägg till ett IsChecked-attribut :

   IsChecked="True"
   

   Attributet IsChecked med värdet True innebär att HelloButton är markerat som standard. Den här inställningen innebär att valknappen alltid är vald, även när programmet startas.

7. Leta reda på knappkontrollen i verktygslådan och dra sedan en knapp till designytan under RadioButton-kontrollerna.

8. I XAML-vyn ändrar du värdet för Innehåll för knappkontrollen från Content="Button" till Content="Display".

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   Fönstret bör likna följande bild.

   

9. Dubbelklicka på knappen Visa på designytan.

   MainWindow.xaml.vb öppnas med markören i Button_Click händelsen.

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

10. Lägg till följande kod:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

Felsöka och testa programmet

Därefter ska du felsöka programmet för att söka efter fel och testa att båda meddelanderutorna visas korrekt. För att se hur den här processen fungerar introducerar det första steget avsiktligt ett fel i programmet.

1. Högerklicka på MainWindow.xaml i Solution Explorer och välj Byt namn. Byt namn på filen till Greetings.xaml.

2. Starta felsökningsprogrammet genom att trycka på F5 eller välja Felsök och sedan Starta felsökning.

   Ett fönster i brytläge visas och fönstret Utdata anger att ett undantag har inträffat.

   

   Skärmbild som visar fönstret "Ohanterat undantag" med ett System.IO.Exception-meddelande som lyder "Det går inte att lokalisera resursen mainwindow.xaml".

3. Stoppa felsökningsprogrammet genom att välja Felsök>Sluta felsöka.

   Du bytte namn på MainWindow.xaml till Greetings.xaml i början av det här avsnittet. Koden refererar fortfarande till MainWindow.xaml som start-URI för programmet, så projektet kan inte starta.

4. Öppna filen Application.xaml i Solution Explorer.

5. Ändra StartupUri="MainWindow.xaml" till StartupUri="Greetings.xaml"

6. Starta felsökningsprogrammet igen (tryck på F5). Nu bör du se fönstret Hälsningar i din applikation.

   

   

7. Välj Hello och knappen Visa och sedan Adjö och knappen Visa . Använd stängningsikonen i det övre högra hörnet för att sluta felsöka.

Mer information finns i Build a WPF application (WPF) and Debug WPF.

Felsöka med brytpunkter

Du kan testa koden under felsökningen genom att lägga till några brytpunkter.

1. Öppna Greetings.xaml.vb och välj följande rad: MessageBox.Show("Hello.")

2. Lägg till en brytpunkt genom att trycka på F9 eller välja Felsökning och sedan växla brytpunkt.

   En röd cirkel visas bredvid kodraden i redigeringsfönstrets vänstermarginal.

3. Välj följande rad: MessageBox.Show("Goodbye.").

4. Tryck på F9-tangenten för att lägga till en brytpunkt och tryck sedan på F5 för att börja felsöka.

5. I fönstret Hälsningar väljer du knappen Hello och sedan Visa.

   Linjen MessageBox.Show("Hello.") är markerad i gult. Längst ned i IDE-fönstret är fönstren Autos, Locals och Watch dockade tillsammans på vänster sida. Anropsstack, Brytpunkter, Undantagsinställningar, Kommando, Omedelbartoch Utdata fönsterna är dockade tillsammans på höger sida.

   

6. På menyraden väljer du Felsöka>Steg ut.

   Programmet startar igen. En dialogruta med ordet "Hello" visas.

7. Välj ok-knappen för att stänga dialogrutan.

8. I fönstret Hälsningar väljer du radioknappen Hejdå och väljer sedan knappen Visa.

   Linjen MessageBox.Show("Goodbye.") är markerad i gult.

9. Välj nyckeln F5 för att fortsätta felsökningen. När dialogrutan visas väljer du OK för att stänga dialogrutan.

10. Stäng programfönstret för att sluta felsöka.

11. På menyraden väljer du Felsök>Inaktivera alla brytpunkter.

Skapa en releaseversion

Nu när du har kontrollerat att allt fungerar kan du förbereda en release av ditt program.

1. Välj Skapa>ren lösning för att ta bort mellanliggande filer och utdatafiler som skapades under tidigare versioner.

2. Byt versionskonfigurationen för HelloWPFApp från Debug till Release via listrutan i verktygsfältet.

3. Välj Skapa>bygglösning.

Grattis till att du har slutfört den här tutorialen! Du kan hitta.exesom du skapade under din lösning och projektkatalog (...\HelloWPFApp\bin\Release).

Nästa steg

Gå vidare till nästa artikel för att lära dig hur du skapar en Windows Forms-app i Visual Studio med Visual Basic.

Relaterade länkar

Mer information om Visual Studio finns i följande resurser: