Dela via

Självstudie: Skapa en 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 WPF-app (Windows Presentation Foundation). Med Visual Studio lägger du till kontroller i fönster och hanterar händelser. 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 kommer du att:

  • 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ärdig exempelapp för WPF-självstudie

Förutsättningar

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.

    En skärmbild av startdialogrutan från Visual Studio 2026. Knappen Skapa ett nytt projekt är markerad med en röd ruta.

  3. I rutan Sök efter mallar skriver du wpf och väntar tills sökresultaten visas.

  4. I listrutan för kodspråket, välj C# eller Visual Basic.

  5. I listan med mallar väljer du WPF-program och sedan Nästa.

    Viktigt!

    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åkfiltret visas motsvarande mall.

    Skärmbild av dialogrutan Skapa ett nytt projekt i Visual Studio med

  6. I fönstret Konfigurera det nya projektet anger du Projektnamn till Namn och väljer Nästa.

    Du kan också spara projektet i en annan mapp genom att justera sökvägen.

    En skärmbild av dialogrutan

  7. I fönstret Ytterligare information väljer du slutligen .NET 10.0 (långsiktig support) för framework-inställningen och väljer sedan Skapa.

    En skärmbild av dialogrutan Ytterligare information från Visual Studio 2026. Listrutan Framework har

När Visual Studio har genererat appen öppnas 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:

De viktiga komponenterna i Visual Studio 2026 bör du känna till när du skapar ett WPF-projekt för .NET.

  1. Solution Explorer

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

  2. Egenskaper

    Det här fönstret visar egenskapsinställningar som du kan konfigurera baserat på kontexten för det markerade objektet. Om du till exempel väljer ett objekt från Solution Explorer visas inställningar som är relaterade till filen. Om ett objekt i designern är markerat visas egenskaperna för kontrollen eller fönstret.

  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å en kontroll eller drar och släpper kontrollen till designern. 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 du har skapat projektet öppnas XAML-kodredigeraren. Den visar 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>

Viktigt!

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 WPF bearbetar 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. Filen deklarerar åtta attribut och tillhör vanligtvis tre kategorier:

  • XML-namnområden

    Ett XML-namnområde ger XML-strukturen. Det avgör vilket XML-innehåll du kan deklarera i filen.

    Huvudattributet xmlns importerar XML-namnområdet för hela filen. I det här fallet mappas den 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 du deklarerar på 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-tangenten eller genom att välja Felsöka>Starta felsökning från menyn.

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

    En tom WPF-app

  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 tillhandahålls i denna XAML ä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 valfritt antal underordnade kontroller 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. Den här standardinställningen ger dig 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. XAML-designern visar varje rad och kolumn:

    en WPF-app med marginalen inställd på ett rutnät

Lägg till den första kontrollen

Nu när rutnätet har konfigurerats kan du börja lägga till kontroller i det. Lägg först till etikettkontrollen.

  1. Skapa ett nytt <Label> element i elementet <Grid> efter rad- och kolumndefinitionerna. Ange innehållet i elementet till strängvärdet 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 anger 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.

    Etiketten tar upp halva fönstret, eftersom den automatiskt placerades till den första raden och kolumnen i rutnätet. För den första raden behöver du inte så mycket utrymme eftersom du 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>

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

    EN WPF-app med marginalen inställd på ett rutnät och en etikettkontroll på den första raden

Placering av kontroller

Nu ska vi prata om kontrollplacering. Etiketten som du skapade i föregående avsnitt placeras 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 egenskapssystemet 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, men de blir 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 du utelämnar dessa egenskaper från kontrollen är standardvärdena 0. Kontrollen placeras alltså 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 Grid.Row bifogade egenskaperna och Grid.Column för att placera nästa kontroller som du 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 du referera till den i koden bakom. Tilldela namnet till kontrollen med hjälp av 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

Lägg till en textruta och en knapp. Användaren använder dessa kontroller för att ange ett namn som ska läggas till i listrutan. I stället för att skapa fler rader och kolumner i rutnätet för att ordna dessa kontroller placerar du dessa kontroller i <StackPanel> layoutkontrollen.

Stackpanelen skiljer sig från rutnätet i hur den placerar kontroller. Medan du använder de Grid.Row och Grid.Column anslutna egenskaperna för att tala om för rutnätet var du vill ha kontrollerna, fungerar stackpanelen automatiskt. Den beskriver var och en av sina underordnade kontroller sekventiellt. 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>

    Du använde Margin tidigare attributet i rutnätet, men du har bara lagt 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 <TextBox>-kontroll efter <StackPanel>, som fortfarande finns i <Button>.

    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. Appen har dock ingen logik för att faktiskt fungera. Därefter måste du 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

Du har skapat en <Button> med en Click-händelse som appen utlöser när användaren trycker på knappen. Prenumerera på den här händelsen och lägg till kod för att lägga till ett namn i listrutan. Använd XAML-attribut för att prenumerera på händelser, precis som du använder dem 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 hanteringsnamn som du angav.

    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

När du har hanterat händelsen kör du appen. Fönstret visas och du kan ange ett namn i textrutan. Lägg till namnet genom att välja knappen .

Köra en WPF för .NET-app i Visual Studio 2026.

Relaterat innehåll

  • Last updated on