Oktatóanyag: Új WPF-alkalmazás létrehozása .NET-tel

Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre új Windows Presentation Foundation (WPF) alkalmazást a Visual Studióval. A Visual Studióval vezérlőket adhat hozzá a windowsokhoz az alkalmazás felhasználói felületének megtervezéséhez, és kezelheti a vezérlők bemeneti eseményeit a felhasználóval való interakcióhoz. 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:

Előfeltételek

• Visual Studio 2022 17.12-es vagy újabb verziói
  • Válassza ki a .NET asztali fejlesztési számítási feladatát
  • Válassza ki a .NET 9-összetevőt

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 Studiót.

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

   

3. A Sablonok keresése mezőbe írja be wpf, majd nyomja le a Enterbillentyűt.

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

5. A sablonok listájában válassza WPF-alkalmazás, majd a Továbblehetőséget.

   Fontos

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

   Az alábbi képen a C# és a Visual Basic .NET projektsablonok láthatók. Ha a kódnyelvet szűrőt alkalmazta, csak az adott nyelvhez tartozó sablon jelenik meg.

   

6. Az Új projekt konfigurálása ablakban tegye a következőket:

   1. A Projektnév mezőbe írja be Nevek.
   2. Jelölje be a Megoldás és projekt elhelyezése ugyanabban a könyvtárban jelölőnégyzetet.
   3. Ha szeretné, válasszon másik helyet a kód mentéséhez.
   4. Válassza a Tovább gombot.

   

7. A További információk ablakban válassza a .NET 9.0 (Standard támogatás) lehetőséget a Target Framework-hez. Válassza a Létrehozás gombot.

   

Az alkalmazás létrehozása után a Visual Studiónak meg kell nyitnia 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ásának öt fontos összetevője van, amelyekkel az alkalmazás létrehozásakor kommunikál:

1. Megoldáskezelő

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

2. Tulajdonságok

   Ebben az ablakban a kiválasztott elem alapján konfigurálható tulajdonságbeállítások láthatók. Ha például kiválaszt egy elemet Megoldáskezelő, megjelenik a fájlhoz kapcsolódó tulajdonságbeállítások. Ha kijelöl egy objektumot a Tervező, látni fogja az elem beállításait. Az előző képen az ablak címsora lett kiválasztva a tervezőben.

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 a vezérlőre, vagy húzza a vezérlőt a 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 az XAML-kódszerkesztő minimális mennyiségű XAML-kóddal jelenik meg az ablakban. 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 a Visual Basicben kódol, az XAML kissé eltér, különösen a x:Class=".." attribútumtól. Az XAML a Visual Basicben 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. Az XAML egyszerűen xml, amelyet a WPF dolgoz fel 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 <Window> az XAML-fájl által leírt objektumtípust jelöli. Nyolc attribútum deklarálva van, és általában három kategóriába tartoznak:

• XML-névterek

  Az XML-névtér struktúrát biztosít az XML számára, meghatározva, hogy milyen XML-tartalom deklarálható a fájlban.

  A fő xmlns attribútum importálja a teljes fájl XML-névterét, és ebben az esetben a WPF által deklarált típusokra leképezi. 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 xmlns:local névtér például deklarálja a local előtagot, és leképezi a projekt által deklarált objektumokat, a Names kódnévtérben deklarált objektumokat.

• x:Class attribútum

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

• Title 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 Title attribútum beállítja a Window.Title 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 válassza Hibakeresés>A hibakeresés indítása lehetőséget a menüből.

   Ekkor megjelenik a sablon által létrehozott alapértelmezett ablak vezérlők nélkül, valamint MainWindowcíme:

   üres WPF-alkalmazás

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

3. Az ablak méretének módosításához állítsa a Height180 értékre, és a Width a 260é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

A 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. Ebben az XAML-ben az alapértelmezett elrendezésvezérlő a <Grid> vezérlőelem.

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 adhat hozzá a rácshoz. Elhelyezhet például egy másik <Grid> 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 nem igazán biztosít 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 <Grid> elemhez: Margin="10".

   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. Jelölje ki a rácsot az XAML-kódszerkesztőben vagy az XAML-tervezőben, láthatja, hogy az XAML-tervező megjeleníti az egyes sorokat és oszlopokat:

   

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

Most, hogy a rács konfigurálva lett, elkezdhetjük hozzá adni a vezérlőket. Először kezdje a címkevezérlővel.

1. Hozzon létre egy új <Label> elemet a <Grid> elemen belül a sor- és oszlopdefiníciók után. Állítsuk be az elem tartalmát a Nameskarakterlánc értékére.

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

   A <Label>Names</Label> határozza meg a tartalom Names. Egyes vezérlők megértik, hogyan kell kezelni a tartalmakat, mások nem. A vezérlő tartalma a Content tulajdonságra van leképzve. A tartalom XAML attribútumszintaxissal való beállításához a következő formátumot kell használnia: <Label Content="Names" />. Mindkét módszer ugyanazt a dolgot valósítja meg, a címke tartalmát úgy állítva, hogy megjelenjen a szöveg Names.

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

2. Az első Height<RowDefinition> attribútumának módosítása *-ról Auto- ra.

   A Auto é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>
   

   Figyelje meg, hogy a tervezőprogram láthatóan megjeleníti a feliratot, amely kis mértékben foglalja el a rendelkezésre álló magasságot. Most már több hely van a következő sor elfoglalására.

   

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ült. 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 grid kihasználja a WPF által biztosított hatékony tulajdonságokat.

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 magán a vezérlőn; a vezérlő számára válnak elérhetővé, miután hozzáadják a rácshoz.

A rács két tulajdonságot határoz meg a gyermekvezérlő sor- és oszlopelhelyezésének meghatározásához: Grid.Row és Grid.Column. Ha ezek a tulajdonságok nincsenek megadva a vezérlőből, az azt feltételezi, hogy az alapértelmezett értékük 0, ezért a vezérlőelem a rács 0 sorába és oszlopába 0 kerül. Próbálja megváltoztatni a <Label> vezérlőelem elhelyezését úgy, hogy a Grid.Column attribútumot 1-re állítja be.

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

Figyelje meg, hogy a címke a második oszlopba került. A Grid.Row és Grid.Column csatolt tulajdonságok használatával helyezheti el a következő létrehozandó vezérlőket. 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 <ListBox /> vezérlőt a <Label> vezérlő alatt.

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

3. Állítsa a x:Name tulajdonságot lstNamesértékre.

   Miután elneveztünk egy vezérlőt, a mögöttes kódban hivatkozhatunk rá. A név hozzá van rendelve a vezérlőhöz a x:Name attribútummal.

Í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

Az utolsó két vezérlő, amit hozzáadunk, egy szövegdoboz és egy gomb, amelyek segítségével a felhasználó egy nevet adhat meg, amit hozzáadunk a listamezőhöz. Azonban ahelyett, hogy több sort és oszlopot próbálnánk létrehozni a rácsban a vezérlők elrendezéséhez, ezeket a vezérlőket a <StackPanel> elrendezésvezérlőbe fogjuk helyezni.

A stack panel különbözik a rácstól abban, hogyan helyezik el a vezérlőket. Bár a Grid.Row és Grid.Column csatolt tulajdonságokkal megadja a rácsnak, hogy hol legyenek a vezérlők, a verempanel automatikusan, sorban rendezi el az összes gyermekvezérlőt. Mindegyik vezérlőt egymás után halmozza.

1. Deklarálja a <StackPanel> vezérlőt a <ListBox> vezérlő alatt.

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

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

4. Állítsa be a Margin-t 5,0,0,0-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>
   

   A Margin attribútumot korábban a hálón használták, de csak egyetlen értéket, 10-et helyeztünk el. Ennek a margónak az értéke 5,0,0,0, ami nagyon különbözik a 10-től. A margó tulajdonság egy Thickness 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 <StackPanel> vezérlőn belül hozzon létre egy <TextBox /> vezérlőt.

   1. Állítsa a x:Name tulajdonságot txtNameértékre.

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

   1. Állítsa a x:Name tulajdonságot btnAddértékre.
   2. Állítsa be a Margin-t 0,5,0,0-re.
   3. Állítsa be a tartalmat Add Name.

Í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ás azonban nem rendelkezik logikával ahhoz, hogy ténylegesen működőképes legyen. Ezután össze kell kapcsolnunk a vezérlőeseményeket a kódhoz, és le kell kérnünk az alkalmazást, hogy ténylegesen tegyen valamit.

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

A létrehozott <Button> egy Click eseményt hoz létre, amely akkor jön létre, amikor a felhasználó megnyomja a gombot. Feliratkozhat erre az eseményre, és kódot adhat hozzá a listamező név hozzáadásához. Az XAML-attribútumokat eseményekre való feliratkozásra használjuk, ugyanúgy, ahogy a tulajdonságok beállítására.

1. Keresse meg a <Button> vezérlőt.

2. Állítsa be a Click attribútumot ButtonAddName_Click-re

   <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 ButtonAddName_Click 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 a szövegmezőbe beírhat egy nevet, majd a gombra kattintva hozzáadhatja.

Kapcsolódó tartalom

• További információ a Windows Presentation Foundationről
• XAML-áttekintés