Självstudie: Skapa ett WPF program med Visual Basic

I den här självstudien skapar du ett program med hjälp av Visual Basic i Visual Studio integrerad utvecklingsmiljö (IDE). Programmet använder UI-ramverket 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 användargränssnittsramverk (UI) som skapar skrivbordsklientprogram. Den WPF utvecklingsplattformen stöder en bred uppsättning funktioner för programutveckling, inklusive:

• En programmodell
• Resurser
• Kontroller
• Graphics
• Utformning
• Datalänkning
• Dokument
• Säkerhet

WPF ingår i .NET. 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 Extensible Application Markup Language XAML för att tillhandahålla en deklarativ modell för programprogrammering. Mer information finns i WPF .NET översikt.

Förutsättningar

Du behöver Visual Studio för att slutföra den här självstudien. En kostnadsfri version finns i Visual Studio nedladdningar.

Skapa projektet

När du skapar ett program i Visual Studio skapar du först ett projekt. I den här guiden 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 Prieskumník riešení.

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

3. Välj fliken Toolbox till vänster i Visual Studio IDE. Om du inte ser det väljer du View>Toolbox från menyraden eller Ctrl+Alt+X.

4. Expandera antingen Common WPF Controls 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.

   Skärmbild som visar textblockskontrollen placerad i formuläret Hälsningar med riktlinjerna synliga.

   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 TextBlock 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 ArkivSpara alla från menyraden eller trycka på CtrlSkiftS. 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 också till Visual Basic kod i 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.

   Skärmbild som visar ett hälsningsformulär med en TextBlock-kontroll och två alternativknappar.

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 och till och 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. I verktygslådan hittar du kontrollen Knapp. 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 till .

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

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

   Skärmbild som visar formuläret Hälsningar med TextBlock, RadioButtons märkta "Hello" och "Goodbye" och knappkontrollen märkt "Visa" som alla är placerade i formuläret.

9. Dubbelklicka på knappen Visa på designytan.

   MainWindow.xaml.vb öppnas med markören i 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

Felsök sedan 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. I Prieskumník riešení högerklickar du på MainWindow.xaml och väljer Rename. 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 Ej hanterat undantag med ett System.IO.Exception-meddelande med texten "Det går inte att hitta resursen mainwindow.xaml".

3. Stoppa felsökningsprogrammet genom att välja FelsökSluta 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 Prieskumník riešení.

5. Ändra till .

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

   Skärmbild av fönstret Hälsningar med kontrollerna TextBlock, RadioButtons och Button synliga. Alternativknappen "Hello" är markerad.

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 Compile a WPF Application 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:

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

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 ä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ökaSteg 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 ä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ökInaktivera alla brytpunkter.

Skapa en releaseversion

När du har kontrollerat att allt fungerar kan du förbereda en versionsversion av ditt program.

1. Välj Skaparen 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 Skapabygglö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.

Mer information om Visual Studio finns i:

• Produktivitetstips