Självstudie: Skapa en ny WPF-app med .NET

I den här självstudien lär du dig hur du använder Visual Studio för att skapa en ny WPF-app (Windows Presentation Foundation). Med Visual Studio lägger du till kontroller i windows för att utforma appens användargränssnitt och hantera indatahändelser från dessa kontroller för att interagera med användaren. I slutet av den här självstudien har du en enkel app som lägger till namn i en listruta.

I den här handledningen:

• Skapa en ny WPF-app.
• Lägg till kontroller i ett fönster.
• Hantera kontrollhändelser för att tillhandahålla appfunktioner.
• Kör appen.

Här är en förhandsvisning av appen som skapats genom att följa den här handledningen:

Förutsättningar

• Visual Studio 2022 version 17.12 eller senare versioner
  • Välj arbetsbelastningen .NET Desktop Development
  • Välj den enskilda komponenten .NET 9

Skapa en WPF-app

Det första steget för att skapa en ny app är att öppna Visual Studio och generera appen från en mall.

1. Öppna Visual Studio.

2. Välj Skapa ett nytt projekt.

   

3. I rutan Sök efter mallar skriver du wpfoch trycker sedan på Retur.

4. I listrutan kodspråket väljer du C# eller Visual Basic.

5. I malllistan väljer du WPF-program och väljer sedan Nästa.

   Viktig

   Välj inte mallen WPF-program (.NET Framework).

   Följande bild visar både C# och Visual Basic .NET-projektmallar. Om du använde kodspråket filter visas endast mallen för det språket.

   

6. I fönstret Konfigurera ditt nya projekt gör du följande:

   1. I rutan Projektnamn anger du Namn.
   2. Markera kryssrutan Placera lösning och projekt i samma katalog.
   3. Välj eventuellt en annan Plats för att spara koden.
   4. Välj knappen Nästa.

   

7. I fönstret Ytterligare information väljer du .NET 9.0 (Standard Term Support) för Target Framework. Välj knappen Skapa.

   

När appen har genererats bör Visual Studio öppna XAML-designerfönstret för standardfönstret, MainWindow. Om designern inte visas dubbelklickar du på filen MainWindow.xaml i Solution Explorer-fönstret för att öppna designern.

Viktiga delar av Visual Studio

Stödet för WPF i Visual Studio har fem viktiga komponenter som du interagerar med när du skapar en app:

1. Solution Explorer

   Alla dina projektfiler, kod, fönster, resurser, visas i det här fönstret.

2. Egenskaper

   Det här fönstret visar egenskapsinställningar som du kan konfigurera baserat på det markerade objektet. Om du till exempel väljer ett objekt från Solution Explorervisas egenskapsinställningar relaterade till filen. Om du väljer ett objekt i Designervisas inställningarna för elementet. När det gäller den föregående bilden valdes fönstrets titelrad i designern.

3. Verktygslåda

   Verktygslådan innehåller alla kontroller som du kan lägga till på en designyta. Om du vill lägga till en kontroll på den aktuella ytan dubbelklickar du på kontrollen eller drar och släpper kontrollen på ytan. Det är vanligt att i stället använda XAML-kodredigerarens fönster för att utforma ett användargränssnitt (UI) när du använder XAML-designerfönstret för att förhandsgranska resultatet.

4. XAML-designer

   Det här är designern för ett XAML-dokument. Det är interaktivt och du kan dra och släppa objekt från Toolbox-. Genom att välja och flytta objekt i designern kan du visuellt skapa användargränssnittet för din app.

   När både designern och redigeraren visas återspeglas ändringar i den ena i den andra.

   När du väljer objekt i designern visas egenskaperna och attributen för objektet i fönstret Egenskaper.

5. XAML-kodredigeraren

   Det här är XAML-kodredigeraren för ett XAML-dokument. XAML-kodredigeraren är ett sätt att skapa användargränssnittet för hand utan designer. Designern kan automatiskt ange egenskaper för en kontroll när kontrollen läggs till i designern. XAML-kodredigeraren ger dig mycket mer kontroll.

   När både designern och redigeraren visas återspeglas ändringar i den ena i den andra. När du navigerar med textmarkören i kodredigeraren visas egenskaperna och attributen om det objektet i fönstret Egenskaper.

Granska XAML

När projektet har skapats visas XAML-kodredigeraren med en minimal mängd XAML-kod för att visa fönstret. Om redigeraren inte är öppen dubbelklickar du på objektet MainWindow.xaml i Solution Explorer-fönstret. Du bör se XAML som liknar följande exempel:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Viktig

Om du kodar i Visual Basic skiljer sig XAML något, särskilt attributet x:Class="..". XAML i Visual Basic använder objektets klassnamn och utelämnar namnområdet till klassen.

För att bättre förstå XAML ska vi dela upp det. XAML är helt enkelt XML som bearbetas av WPF för att skapa ett användargränssnitt. För att förstå XAML bör du åtminstone känna till grunderna i XML.

Dokumentroten <Window> representerar den typ av objekt som beskrivs av XAML-filen. Det finns åtta attribut deklarerade och de tillhör vanligtvis tre kategorier:

• XML-namnområden

  Ett XML-namnområde tillhandahåller struktur för XML-koden och avgör vilket XML-innehåll som kan deklareras i filen.

  Det huvudsakliga xmlns-attributet importerar XML-namnområdet för hela filen och mappar i det här fallet till de typer som deklareras av WPF. De andra XML-namnrymderna deklarerar ett prefix och importerar andra typer och objekt för XAML-filen. Till exempel deklarerar xmlns:local-namnområdet local prefixet och mappar till de objekt som deklareras av projektet, de som deklareras i Names kodnamnområdet.

• x:Class attribut

  Det här attributet mappar <Window> till den typ som definieras av koden: filen MainWindow.xaml.cs eller MainWindow.xaml.vb, som är klassen Names.MainWindow i C# och MainWindow i Visual Basic.

• Title attribut

  Alla normala attribut som deklareras i XAML-objektet anger en egenskap för objektet. I det här fallet anger attributet Title egenskapen Window.Title.

Ändra fönstret

För vår exempelapp är det här fönstret för stort och namnlisten är inte beskrivande. Vi fixar det.

1. Kör först appen genom att trycka på F5- eller genom att välja Felsöka>Starta felsökning på menyn.

   Du ser standardfönstret som genereras av mallen som visas, utan några kontroller, och en rubrik på MainWindow:

   

2. Ändra fönstrets rubrik genom att ange Title till Names.

3. Ändra fönstrets storlek genom att ange Height till 180 och Width till 260.

   <Window x:Class="Names.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:local="clr-namespace:Names"
           mc:Ignorable="d"
           Title="Names" Height="180" Width="260">
       <Grid>
           
       </Grid>
   </Window>
   

Förbereda layouten

WPF har ett kraftfullt layoutsystem med många olika layoutkontroller. Layoutkontroller hjälper till att placera och ändra storlek på underordnade kontroller, och kan även göra det automatiskt. Standardlayoutkontrollen som du får med den här XAML-filen är <Grid>-kontrollen.

Med rutnätskontrollen kan du definiera rader och kolumner, ungefär som en tabell, och placera kontroller inom gränserna för en specifik rad- och kolumnkombination. Du kan lägga till ett valfritt antal barnkontroller eller andra layoutkontroller i rutnätet. Du kan till exempel placera en annan <Grid> kontroll i en viss rad- och kolumnkombination, och det nya rutnätet kan sedan definiera fler rader och kolumner och ha egna underordnade.

Rutnätskontrollen placerar sina underordnade kontrollelement i rader och kolumner. Ett rutnät har alltid en enskild rad och kolumn deklarerad, vilket innebär att rutnätet som standard är en enda cell. Det ger dig egentligen inte mycket flexibilitet när det gäller att placera kontroller.

Justera rutnätets layout för de kontroller som krävs för den här appen.

1. Lägg till ett nytt attribut i elementet <Grid>: Margin="10".

   Den här inställningen tar in rutnätet från fönsterkanterna och gör att det ser lite snyggare ut.

2. Definiera två rader och två kolumner och dela upp rutnätet i fyra celler:

   <Grid Margin="10">
       
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="*" />
       </Grid.RowDefinitions>
   
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
       
   </Grid>
   

3. Välj rutnätet i XAML-kodredigeraren eller XAML-designern. Du ser att XAML-designern visar varje rad och kolumn:

   

Lägg till den första kontrollen

Nu när rutnätet har konfigurerats kan vi börja lägga till kontroller i det. Börja först med etikettkontrollen.

1. Skapa ett nytt <Label> element i elementet <Grid> efter rad- och kolumndefinitionerna. Ange innehållet i elementet till strängvärdet för Names:

   <Grid Margin="10">
   
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="*" />
       </Grid.RowDefinitions>
   
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
   
       <Label>Names</Label>
   
   </Grid>
   

   <Label>Names</Label> definierar innehållet Names. Vissa kontroller förstår hur man hanterar innehåll, andra inte. Innehållet i en kontroll motsvarar egenskapen Content. Om du ställer in innehållet via XAML-attributsyntaxen använder du det här formatet: <Label Content="Names" />. Båda sätten åstadkommer samma sak och anger innehållet i etiketten så att texten visas Names.

   Observera att etiketten tar upp halva fönstret, eftersom den automatiskt placerades på den första raden och kolumnen i rutnätet. För vår första rad behöver vi inte så mycket utrymme eftersom vi bara ska använda den raden för etiketten.

2. Ändra attributet Height för den första <RowDefinition> från * till Auto.

   Värdet Auto storleksanpassar rutnätsraden automatiskt till storleken på dess innehåll, i det här fallet etikettkontrollen.

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   

   Observera att designern nu visar etiketten som upptar en liten mängd av den tillgängliga höjden. Det finns nu mer utrymme för nästa rad att uppta.

   

Placering av kontroller

Nu ska vi prata om kontrollplacering. Etiketten som skapades i föregående avsnitt placerades automatiskt i rad 0 och kolumn 0 i rutnätet. Numreringen för rader och kolumner börjar vid 0 och ökar med 1. Kontrollen känner inte till något om rutnätet och kontrollen definierar inga egenskaper för att styra dess placering i rutnätet.

Hur talar du om för en kontroll att använda en annan rad eller kolumn när kontrollen inte har någon kunskap om rutnätet? Bifogade egenskaper! Rutnätet utnyttjar det kraftfulla egenskapssystem som tillhandahålls av WPF.

Rutnätskontrollen definierar nya egenskaper som de underordnade kontrollerna kan koppla till sig själva. Egenskaperna finns faktiskt inte på själva kontrollen, de är tillgängliga för kontrollen när den har lagts till i rutnätet.

Rutnätet definierar två egenskaper för att fastställa placeringen i rad och kolumn av en underordnad kontroll: Grid.Row och Grid.Column. Om dessa egenskaper utelämnas från kontrollen är det underförstått att de har standardvärdena 0, så kontrollen placeras i rad 0 och kolumn 0 i rutnätet. Prova att ändra placeringen av <Label>-kontrollen genom att ange attributet Grid.Column till 1:

<Label Grid.Column="1">Names</Label>

Observera att etiketten har flyttats till den andra kolumnen. Du kan använda de anslutna egenskaperna Grid.Row och Grid.Column för att placera nästa kontroll som vi skapar. För tillfället återställer du dock etiketten till kolumn 0.

Skapa namnlistrutan

Nu när rutnätet har rätt storlek och etiketten har skapats lägger du till en listboxkontroll på raden under etiketten.

1. Deklarera <ListBox /> kontroll under <Label> kontroll.

2. Ange egenskapen Grid.Row till 1.

3. Ange egenskapen x:Name till lstNames.

   När en kontroll har fått namnet kan den refereras i koden bakom. Namnet tilldelas kontrollobjektet med attributet x:Name.

Så här bör XAML se ut:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Lägg till de återstående kontrollerna

De två sista kontrollerna vi lägger till är en textruta och en knapp som användaren använder för att ange ett namn att lägga till i listrutan. Men i stället för att försöka skapa fler rader och kolumner i rutnätet för att ordna dessa kontroller placerar vi dessa kontroller i <StackPanel> layoutkontroll.

Stackpanelen skiljer sig från rutnätet i hur kontrollerna placeras. När ni berättar för rutnätet var kontrollerna ska placeras med hjälp av de anslutna egenskaperna Grid.Row och Grid.Column, fungerar stackpanelen automatiskt genom att lägga ut var och en av sina underordnade kontroller i tur och ordning. Den "staplar" varje kontroll ovanpå den andra.

1. Deklarera <StackPanel> kontroll under <ListBox> kontroll.

2. Ange egenskapen Grid.Row till 1.

3. Ange egenskapen Grid.Column till 1.

4. Ange Margin till 5,0,0,0.

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   
   <Label>Names</Label>
   <ListBox Grid.Row="1" x:Name="lstNames" />
   
   <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
       
   </StackPanel>
   

   Attributet Margin användes tidigare i rutnätet, men vi lägger bara till ett enda värde, 10. Den här marginalen har värdet 5,0,0,0, vilket skiljer sig mycket från 10. Egenskapen margin är en Thickness typ och kan tolka båda värdena. En tjocklek definierar utrymmet runt varje sida av en rektangulär ram, vänster, övre, höger, nedre, respektive. Om värdet för marginalen är ett enda värde använder det värdet för alla fyra sidorna.

5. Inuti <StackPanel>-kontrollen, skapa en <TextBox />-kontroll.

   1. Ange egenskapen x:Name till txtName.

6. Slutligen skapar du en <Button>-kontroll efter <TextBox>, som fortfarande finns i <StackPanel>.

   1. Ange egenskapen x:Name till btnAdd.
   2. Ange Margin till 0,5,0,0.
   3. Ställ in innehållet på Add Name.

Så här bör XAML se ut:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Layouten för fönstret är klar. Men vår app har ingen logik i den för att faktiskt fungera. Sedan måste vi ansluta kontrollhändelserna för att koda och få appen att faktiskt göra något.

Lägg till kod för click-händelsen

Den <Button> vi skapade har en Click händelse som aktiveras när användaren trycker på knappen. Du kan prenumerera på den här händelsen och lägga till kod för att lägga till ett namn i listrutan. XAML-attribut används för att prenumerera på händelser precis som de används för att ange egenskaper.

1. Lokalisera kontrollen <Button>.

2. Ange attributet Click till ButtonAddName_Click

   <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
       <TextBox x:Name="txtName" />
       <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
   </StackPanel>
   

3. Generera händelsehanterarkoden. Högerklicka på ButtonAddName_Click och välj Gå till definition.

   Den här åtgärden genererar en metod i koden bakom som matchar det angivna hanterarnamnet.

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

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

4. Lägg sedan till följande kod för att utföra följande tre steg:

   1. Kontrollera att textrutan innehåller ett namn.
   2. Kontrollera att namnet som anges i textrutan inte redan finns.
   3. Lägg till namnet i listrutan.

   private void ButtonAddName_Click(object sender, RoutedEventArgs e)
   {
       if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
       {
           lstNames.Items.Add(txtName.Text);
           txtName.Clear();
       }
   }
   

   Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
       If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
           lstNames.Items.Add(txtName.Text)
           txtName.Clear()
       End If
   End Sub
   

Kör appen

Nu när händelsen hanteras kör du appen. Fönstret visas och du kan ange ett namn i textrutan och sedan lägga till det genom att klicka på knappen.

Relaterat innehåll

• Läs mer om Windows Presentation Foundation
• XAML-översikt