Útmutató: WPF-alkalmazás létrehozása .NET használatával

Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre Windows megjelenítési alaprendszer (WPF) alkalmazásokat Visual Studio. A Visual Studio vezérlőket adhat hozzá az ablakokhoz, és kezelheti az eseményeket. Az oktatóanyag végére egy egyszerű alkalmazással rendelkezik, amely neveket ad hozzá egy listamezőhöz.

Ebben az útmutatóban Ön:

  • Hozzon létre egy új WPF alkalmazást.
  • Vezérlők hozzáadása egy ablakhoz.
  • Vezérlőesemények kezelése az alkalmazásfunkciók biztosításához.
  • Nyisd meg az alkalmazást.

Az alábbi oktatóanyag során létrehozott alkalmazás előnézete:

Befejezett mintaalkalmazás a WPF oktatóanyaghoz

Előfeltételek

WPF-alkalmazás létrehozása

Az új alkalmazás létrehozásának első lépése a Visual Studio megnyitása és az alkalmazás sablonból való létrehozása.

  1. Nyissa meg a Visual Studio.

  2. Válassza az Új projekt létrehozása lehetőséget.

    A 2026 Visual Studio kezdő párbeszédpaneljének képernyőképe. Az „Új projekt létrehozása” gomb piros kerettel van kiemelve.

  3. A Sablonok keresése mezőbe írja be a wpf kifejezést, és várja meg, amíg a keresési eredmények megjelennek.

  4. A kódnyelv legördülő menüben válassza a C# vagy Visual Basic lehetőséget.

  5. A sablonok listájában válassza az WPF Alkalmazás, majd a Next lehetőséget.

    Fontos

    Ne válassza ki a WPF alkalmazás (.NET Framework) sablont.

    Az alábbi képen c# és Visual Basic .NET projektsablonok láthatók. Ha a kódnyelv-szűrőt alkalmazta, a megfelelő sablon megjelenik a listában.

    A Visual Studio

  6. Az új projekt konfigurálása ablakban állítsa a Projekt nevéta Nevek értékre, és válassza a Tovább gombot.

    A projekt másik mappába is menthető a Hely elérési út beállításával.

    A képernyőkép a 2026-os Visual Studio-ből származó

  7. Végül a Additional information ablakban válassza .NET 10.0 (hosszú távú támogatás) a Framework beállításhoz, majd válassza a Create lehetőséget.

    A 2026 Visual Studio

Miután Visual Studio létrehozta az alkalmazást, megnyitja az alapértelmezett ablak XAML tervezőablakát, MainWindow. Ha a tervező nem látható, kattintson duplán a MainWindow.xaml fájlra a Megoldáskezelő ablakban a tervező megnyitásához.

A Visual Studio fontos részei

A Visual Studio WPF támogatása öt fontos összetevővel rendelkezik, amelyekkel az alkalmazás létrehozásakor kapcsolatba léphet:

Azok a fontos összetevők a Visual Studio 2026-ban, amelyeket ismernie kell WPF projekt létrehozásakor a .NET-hez.

  1. Megoldáskezelő

    Ebben az ablakban minden projektfájl, kód, ablak és erőforrás megjelenik.

  2. Tulajdonságok

    Ebben az ablakban a kiválasztott elem környezete alapján konfigurálható tulajdonságbeállítások láthatók. Ha például kiválaszt egy elemet a Megoldáskezelő fájlból, a fájlhoz kapcsolódó beállítások jelennek meg. Ha a Tervezőben egy objektum van kijelölve, megjelenik a vezérlő vagy az ablak tulajdonságai.

  3. Szerszámosláda

    Az eszközkészlet tartalmazza a tervezőfelülethez hozzáadható összes vezérlőt. Ha vezérlőt szeretne hozzáadni az aktuális felülethez, kattintson duplán egy vezérlőre, vagy húzza át a vezérlőt a tervező felületre. A felhasználói felület (UI) tervezésekor gyakran az XAML-kódszerkesztő ablakát használja, miközben az XAML tervezőablakot használja az eredmények előnézetének megtekintéséhez.

  4. XAML-tervező

    Ez egy XAML-dokumentum tervezője. Interaktív, és az eszközkészletbőlhúzással helyezheti el az objektumokat. A tervező elemeinek kiválasztásával és áthelyezésével vizuálisan megírhatja az alkalmazás felhasználói felületét.

    Ha a tervező és a szerkesztő is látható, az egyik módosításai megjelennek a másikban.

    Amikor elemeket jelöl ki a tervezőben, a Tulajdonságok ablak megjeleníti az objektum tulajdonságait és attribútumait.

  5. XAML-kódszerkesztő

    Ez egy XAML-dokumentum XAML-kódszerkesztője. Az XAML-kódszerkesztővel kézzel hozhatja létre a felhasználói felületet tervező nélkül. A tervező automatikusan beállíthat tulajdonságokat egy vezérlőn, amikor a vezérlőt hozzáadja a tervezőhez. Az XAML-kódszerkesztő sokkal több vezérlést biztosít.

    Ha a tervező és a szerkesztő is látható, az egyik módosításai megjelennek a másikban. Amikor a kódszerkesztőben navigál a szövegrészleten, a Tulajdonságok ablak megjeleníti az objektum tulajdonságait és attribútumait.

Az XAML vizsgálata

A projekt létrehozása után megnyílik az XAML-kódszerkesztő. Az ablak megjelenítéséhez minimális mennyiségű XAML-kódot jelenít meg. Ha a szerkesztő nincs megnyitva, kattintson duplán a MainWindow.xaml elemre a Megoldáskezelő ablakban. Az XAML-nek az alábbi példához hasonlóan kell megjelennie:

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

Fontos

Ha Visual Basic-ban kódol, az XAML kissé eltér, különösen a x:Class=".." attribútumtól. A Visual Basic XAML az objektum osztálynevét használja, és kihagyja a névteret az osztályból.

Az XAML jobb megértéséhez bontsuk le. A XAML egyszerűen XML, amelyet a WPF dolgoz fel a felhasználói felület létrehozásához. Az XAML megértéséhez legalább ismernie kell az XML alapjait.

A dokumentum gyökér az XAML-fájl által leírt objektumtípust jelöli. A fájl nyolc attribútumot deklarál, és általában három kategóriába tartoznak:

  • XML-névterek

    Az XML-névtér struktúrát biztosít az XML-nek. Meghatározza, hogy milyen XML-tartalmat deklarálhat a fájlban.

    A fő attribútum a teljes fájl XML-névterét importálja. Ebben az esetben a WPF által deklarált típusokhoz lesz leképezve. A többi XML-névtér deklarál egy előtagot, és importálja az XAML-fájl egyéb típusait és objektumait. A névtér például deklarálja a előtagot, és leképezi a projekt által deklarált objektumokat, a kódnévtérben deklarált objektumokat.

  • attribútum

    Ez az attribútum a <Window>-t a kód által meghatározott típusra képezi le: a MainWindow.xaml.cs, vagy a MainWindow.xaml.vb fájlra, amely a C#-ban a Names.MainWindow osztály, illetve a MainWindow a Visual Basic nyelvben.

  • attribútum

    Az XAML-objektumon deklarált bármely normál attribútum beállítja az objektum tulajdonságát. Ebben az esetben a attribútum beállítja a tulajdonságot.

Az ablak módosítása

A példaalkalmazás esetében ez az ablak túl nagy, és a címsor nem leíró. Javítsuk ki.

  1. Először futtassa az alkalmazást az F5 billentyű lenyomásával vagy a hibakeresésistart hibakeresés kiválasztásával a menüből.

    Megjelenik a sablon által létrehozott alapértelmezett ablak vezérlők nélkül, valamint a MainWindow címe:

    A üres WPF alkalmazás

  2. Módosítsa az ablak címét úgy, hogy a értékre állítja.

  3. Az ablak méretének módosításához állítsa a értékre, és a a értékre.

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

Az elrendezés előkészítése

WPF hatékony elrendezési rendszert biztosít számos különböző elrendezésvezérlővel. Az elrendezésvezérlők segítenek a gyermekvezérlők elhelyezésében és méretében, és ezt automatikusan is megtehetik. Az ebben az XAML-ben megadott alapértelmezett elrendezésvezérlő a vezérlő.

A rács vezérlőelem lehetővé teszi a sorok és oszlopok definiálását, hasonlóan a táblázathoz, és vezérlőket helyezhet egy adott sor- és oszlopkombináció keretei közé. Tetszőleges számú gyermekvezérlőt vagy más elrendezésvezérlőt hozzáadhat a rácshoz. Elhelyezhet például egy másik vezérlőelemet egy adott sor- és oszlopkombinációban, és az új rács több sort és oszlopot definiálhat, és saját gyermekekkel rendelkezhet.

A rács vezérlőelem sorba és oszlopba helyezi a gyermekvezérlőket. A rácsok mindig egyetlen sort és oszlopot deklaráltak, ami azt jelenti, hogy a rács alapértelmezés szerint egyetlen cella. Ez az alapértelmezett beállítás nem nyújt nagy rugalmasságot a vezérlők elhelyezésében.

Módosítsa a rács elrendezését az alkalmazáshoz szükséges vezérlőkhöz.

  1. Adjon hozzá egy új attribútumot a elemhez: .

    Ez a beállítás behozza a rácsot az ablak széleiből, és egy kicsit szebbnek tűnik.

  2. Definiáljon két sort és két oszlopot, és osztja el a rácsot négy cellára:

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

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

  3. Válassza ki a rácsot az XAML-kódszerkesztőben vagy az XAML-tervezőben. Az XAML-tervező megjeleníti az egyes sorokat és oszlopokat:

    A WPF alkalmazás rácson beállított margóval

Az első vezérlő hozzáadása

Most, miután a rácsot konfigurálta, elkezdhet hozzá vezérlőket adni. Először adja hozzá a címkevezérlőt.

  1. Hozzon létre egy új elemet a elemen belül a sor- és oszlopdefiníciók után. Az elem tartalmának beállítása a sztringértékre :

    <Grid Margin="10">

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

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

    <Label>Names</Label>

</Grid>

    A határozza meg a tartalom . Egyes vezérlők megértik, hogyan kell kezelni a tartalmakat, mások nem. A vezérlő tartalma a tulajdonságra van leképzve. Ha xAML attribútumszintaxissal állítja be a tartalmat, használja a következő formátumot: . Mindkét módszer ugyanazt a dolgot valósítja meg, a címke tartalmát úgy állítva, hogy megjelenjen a szöveg .

    A címke az ablak felét foglalja el, mivel automatikusan a rács első sorába és oszlopába van helyezve. Az első sorban nincs szükség annyi helyre, mert csak ezt a sort fogja használni a címkéhez.

  2. Az első attribútumának módosítása -ról - ra.

    A érték automatikusan a tartalom méretére állítja a rács sorát, ebben az esetben a címke méretéhez igazodva.

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

    A tervező ekkor megjeleníti a feliratot, amely a rendelkezésre álló magasság kis részét foglalja el. A következő sornak több helye van.

    WPF alkalmazás egy rácsra beállított margóval és egy címke vezérlő az első sorban

Az elhelyezés szabályozása

Beszéljünk az irányítás elhelyezéséről. Az előző szakaszban létrehozott címke automatikusan a rács 0. sorába és 0. oszlopába kerül. A sorok és oszlopok számozása 0-nál kezdődik, és 1-zel növekszik. A vezérlő nem tud semmit a rácsról, és a vezérlő nem határoz meg tulajdonságokat a rácson belüli elhelyezés szabályozásához.

Hogyan lehet azt mondani egy vezérlőnek, hogy egy másik sort vagy oszlopot használjon, ha a vezérlőelem nem ismeri a rácsot? Csatolt tulajdonságok! A rács kihasználja a WPF által biztosított tulajdonságrendszert.

A rácsvezérlő új tulajdonságokat határoz meg, amelyeket a gyermekvezérlők magukhoz csatolhatnak. A tulajdonságok valójában nem léteznek a vezérlőn, de a rácshoz való hozzáadás után elérhetővé válnak a vezérlő számára.

A rács két tulajdonságot határoz meg a gyermekvezérlő sor- és oszlopelhelyezésének meghatározásához: és . Ha kihagyja ezeket a tulajdonságokat a vezérlőből, az alapértelmezett értékek 0. A vezérlő tehát a rácsháló sorába és oszlopába kerül. Próbálja megváltoztatni a vezérlőelem elhelyezését úgy, hogy a attribútumot -re állítja be.

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

Figyelje meg, hogy a címke a második oszlopba került. A következő létrehozandó vezérlők elhelyezéséhez használhatja a csatolt tulajdonságokat. Egyelőre azonban állítsa vissza a címkét a 0 oszlopra.

Hozd létre a névlista mezőt

Most, hogy a rács megfelelően lett méretezve, és létrehozta a címkét, adjon hozzá egy listamező vezérlőelemet a címke alatti sorhoz.

  1. Deklarálja a vezérlőt a vezérlő alatt.

  2. Állítsa a tulajdonságot értékre.

  3. Állítsa a tulajdonságot értékre.

    Miután elnevezte a vezérlőt, hivatkozhat rá a kód mögötti részben. Rendelje hozzá a nevet a vezérlőhöz az attribútum használatával.

Így kell kinéznie az XAML-nek:

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

A fennmaradó vezérlők hozzáadása

Adjon hozzá egy szövegdobozt és egy gombot. A felhasználó ezekkel a vezérlőkkel adja meg a listamezőbe felvenni kívánt nevet. Ahelyett, hogy további sorokat és oszlopokat hoz létre a rácsban a vezérlők elrendezéséhez, helyezze ezeket a vezérlőket az elrendezésvezérlőbe.

A verempanel különbözik a rácstól abban, hogy hogyan helyezi el a vezérlőket. Miközben a és csatolt tulajdonságok segítségével jelezheti a ráccsal, hogy hol helyezze el a vezérlőket, a verempanel automatikusan működik. Az egyes gyermekvezérlőket egymás után helyezi el. Mindegyik vezérlőt egymás után halmozza.

  1. Deklarálja a vezérlőt a vezérlő alatt.

  2. Állítsa a tulajdonságot értékre.

  3. Állítsa a tulajdonságot értékre.

  4. Állítsa be a -t -re.

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

    Korábban a rácson használta az attribútumot, de csak egyetlen értéket adott meg: . Ennek a margónak az értéke , ami nagyon különbözik a -től. A margó tulajdonság egy típusú, és mindkét értéket képes értelmezni. A vastagság határozza meg a téglalap alakú keret mindkét oldalán lévő helyet, bal, felső, jobb, alsó. Ha a margó értéke egyetlen érték, akkor mind a négy oldalon ezt az értéket használja.

  5. A vezérlőn belül hozzon létre egy vezérlőt.

    1. Állítsa a tulajdonságot értékre.

  6. Végül a után , még a belül, hozzon létre egy vezérlőt.

    1. Állítsa a tulajdonságot értékre.
    2. Állítsa be a -t -re.
    3. Állítsa be a tartalmat .

Így kell kinéznie az XAML-nek:

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

Az ablak elrendezése kész. Az alkalmazásnak azonban nincs olyan logikája, amely ténylegesen működőképes lenne. Ezután össze kell kapcsolnia a vezérlőeseményeket a kódhoz, és le kell kérnie az alkalmazást, hogy ténylegesen tegyen valamit.

Kód hozzáadása a Click eseményhez

A(z) által létrehozott esemény akkor lép fel, amikor a felhasználó megnyomja a gombot. Iratkozzon fel erre az eseményre, és adjon hozzá kódot, hogy nevet adjon a listamezőhöz. Az XAML-attribútumok használatával előfizethet az eseményekre, ugyanúgy, mint a tulajdonságok beállítására.

  1. Keresse meg a vezérlőt.

  2. Állítsa az attribútumot .

    <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. Hozza létre az eseménykezelő kódot. Kattintson jobb gombbal a elemre, és válassza az Ugrás a definícióhozlehetőséget.

    Ez a művelet létrehoz egy metódust a mögöttes kódban, amely megfelel a megadott kezelőnévnek.

    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

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

End Sub

  4. Ezután adja hozzá a következő kódot a következő három lépés végrehajtásához:

    1. Győződjön meg arról, hogy a szövegmező tartalmaz egy nevet.
    2. Ellenőrizze, hogy a szövegmezőben megadott név még nem létezik-e.
    3. Adja hozzá a nevet a listamezőhöz.
    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

Az alkalmazás futtatása

Az esemény kezelése után futtassa az alkalmazást. Megjelenik az ablak, és megadhat egy nevet a szövegmezőbe. Adja hozzá a nevet a gomb kiválasztásával.

WPF alkalmazás futtatása .NET-hez Visual Studio 2026-ban.

Kapcsolódó tartalom

  • Tudjon meg többet a Windows megjelenítési alaprendszerről
  • XAML-áttekintés
  • Last updated on