Előző

Következő

Gyakorlat – WPF-alkalmazás írása

Befejeződött

Windows megjelenítési alaprendszer (WPF) a Visual Studióban api-felületet biztosít a fejlesztőknek asztali, jegyzettömb- és táblagépekhez készült alkalmazások készítéséhez. A WPF a hatékony DirectX grafikus rendszerre épül, és számos nagyszerű felhasználói felületi funkciót és effektust biztosít kevés programozási erőfeszítéssel.

Ebben a leckében:

• WPF-projekt létrehozása a Visual Studióval.
• Adjon hozzá felhasználói felületet és kódelemeket a projekthez a "hello world" program szórakoztató változatának létrehozásához. A "Hello ott!" szöveg és a szegély színe véletlenszerűen változik minden alkalommal, amikor a "Hello" gombot választja.
• Megtudhatja, hogyan állíthat be tulajdonságokat és hozhat létre eseményeket.

Megjegyzés:

Feltételezzük, hogy a Windows és a Visual Studio használatával állította be a számítógépet a Learn modul – Bevezetés a Windows 10 fejlesztésébe című témakörben leírtak szerint.

WPF "Say hello" oktatóanyag

A projekt létrehozása

1. Nyissa meg a Visual Studiót, és válassza az Új>projekt fájlja>lehetőséget a menüből. Projektnyelvként válassza a C# lehetőséget. Ezután válassza ki a WPF-alkalmazás projekttípusát, és a Név mezőbe írjon be egy rövid nevet, például a Say hello nevet. Ha elkészült, válassza a Tovább gombot.

   

2. Válassza ki a .NET-verziót , majd válassza a Létrehozás lehetőséget.

3. Amikor megnyílik a projekt, érdemes meggyőződni arról, hogy a Megoldáskezelő és a Tulajdonságok ablaktáblák meg vannak nyitva. Alapértelmezés szerint a Visual Studio ablakának jobb oldalán találhatók. Ha nem láthatók, nyissa meg a Nézet menüt, és jelölje ki mindkettőt.

4. A Megoldáskezelő győződjön meg arról, hogy láthatja a két fájl nevét, amelyen dolgozunk: MainWindow.xaml és annak kódja a MainWindows.xaml.cs fájl mögött. Nyissa meg a MainWindow.xaml lehetőséget.

   

A felhasználói felület tervezése

1. Ha az eszközkészlet nincs megnyitva, válassza a Nézet menüt, majd az Eszközkészlet lehetőséget. Az Eszközkészletben válassza a Közös WPF-vezérlők lehetőséget.

   

2. Húzza a gombot a tervező elrendezésének alsó részére. Ezután húzzon egy Szövegdobozt az elrendezés felső részére, és húzza ki egy kicsit a sarkait, hogy az itt láthatóhoz hasonlóan nézzen ki:

   

   Megjegyzés:

   Figyelje meg, hogy az elrendezés alatt megjelenő XAML-definícióban hogyan lesznek hozzáadva< a rácshoz> a gomb- és Szövegdoboz-bejegyzések.

3. Ezután frissíteni szeretnénk az ablak címsorában megjelenő szöveget. Jelölje ki az ablakot a tervező elrendezésében, hogy a tulajdonságok láthatóak legyenek a Tulajdonságok panelen, majd módosítsa a Címet a Say hello értékre.

4. Most meg szeretnénk adni néhány tulajdonságot az új felhasználói felületi elemeken. Jelölje ki a gombot, hogy tulajdonságai megjelenjenek a Tulajdonságok panelen. Módosítsa a nevet egy egyszerűre, például SayHelloButtonra, és módosítsa a Közös tulajdonságok tartalmát a Say Hello névre.

   

5. Egy eseményt kell csatolnunk a gombhoz. Kiválaszthatja magát a gombot, de ez csak akkor működik, ha a tervező elrendezése a szükséges állapotban van. Az esemény megadásának egy bizonyosabb módja az adott felhasználói felület elemhez elérhető események megnyitása. Ehhez válassza a Tulajdonságok panelen látható villámgyorsító ikont, majd egyszerűen válassza ki a Kattintás esemény bejegyzését. Ezzel automatikusan létrehozza a nevesített eseményt SayHelloButton_Click, hozzáadja a megfelelő kódbejegyzést a MainWindow.xaml.cs fájlhoz, és megnyitja a fájlt.

   

6. Még nem írjuk be a kódot, ezért válassza a MainWindow.xaml lehetőséget a fő nézetben. Egyelőre dolgozunk a felhasználói felületen.

7. Jelölje ki a tervezőben létrehozott szövegdobozt a tulajdonságainak megjelenítéséhez. A szövegdoboz tulajdonságain számos módosítást hajtunk végre. Ha az események megjelennek a Tulajdonságok panelen, a név melletti kulcs ikont választva térjen vissza az elnevezett tulajdonságokhoz.

8. Módosítsa a Név bejegyzést szövegmező1 értékre, majd az Elrendezés tulajdonságai között módosítsa a Szélesség és a Magasság 360, illetve 80 értékre.

   

9. Az Elrendezés szakasz összecsukása.

10. A Szövegméret listában módosítsa a pontméretet 36-ra: valami szép és látható!

    

11. Az A címkével ellátott betűtípus lap alapértelmezés szerint meg van nyitva a Szöveg szakaszhoz. Jelölje ki a bekezdés ikont, és módosítsa az igazítást középre.

    

12. A Szöveg szakasz összecsukása és a Megjelenés kibontása. A teljes lista megjelenítéséhez válassza a közzétett megjelenési tulajdonságok listájának alján található lefelé mutató nyilat. Módosítsa a szegély vastagságát 1-re a bal és a felső szegélynél, a jobb és az alsó szegélynél pedig 8-ra. Most a doboz egy kicsit csepp árnyék effektust!

    

13. A Megjelenés összecsukása és a Common kibontása. Írja be a szövegdoboz szövegét: valami olyan barátságos, mint a Hello ott!.

    

Már majdnem elkészült az alkalmazás felhasználói felületi elemeivel. Az <XAML-fájl Rács> bejegyzésének a következőképpen kell kinéznie:

Megjegyzés:

Az XAML-et közvetlenül szerkesztheti, módosíthatja a numerikus értékeket, vagy akár teljes felhasználói felületi elemeket is hozzáadhat. Ebben az oktatóanyagban nem fogjuk ezt megtenni.

A kód írása

1. Most már áttérhetünk a felhasználói felületről az alkalmazás kódjába. Ideje újra megnyitni a MainWindow.xaml.cs fájlt. Válassza ki a fájlt a fő nézet felett vagy a Megoldáskezelő. A MainWindow osztálynak a következőképpen kell kinéznie:

   public partial class MainWindow : Window
   {
       public MainWindow()
       {
           InitializeComponent();
       }
   
       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
   
       }
   }
   

2. Győződjön meg arról, hogy minden szükséges utasítással rendelkezünk. Győződjön meg arról, hogy az itt látható elemek láthatók, és ha nem, vegye fel őket. Miután befejezte a fájl szerkesztését, a Visual Studio által a projekt létrehozásakor tartalmazott utasítások használatával igény szerint eltávolíthatja a szükségtelen elemeket. (A nem használt névterek szürke színnel jelennek meg.)

   using System;
   using System.Windows;
   using System.Windows.Media;
   

3. Az alkalmazás véletlenszerű színnel jeleníti meg a hello szöveget minden egyes gomb kijelölésekor. Ezért hozzá kell adnunk egy osztályszintű Véletlenszerű objektumot és a GetRandomBytes metódust, amely véletlenszerűen kitölti az RGB-beállításokként használt értékeket. Másolja és illessze be a kódot, vagy írja be saját maga, hogy a MainWindow osztály így nézzen ki:

   public partial class MainWindow : Window
   {
       private Random rand;
   
       public MainWindow()
       {
           InitializeComponent();
           rand = new Random();
       }
   
       private byte[] GetRandomBytes(int n)
       {
           // Fill an array of bytes of length "n" with random numbers.
           var randomBytes = new byte[n];
           rand.NextBytes(randomBytes);
           return randomBytes;
       }
   
       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
   
       }
   }
   

4. Végül meg kell hívnunk a GetRandomBytes függvényt a gombkattintási eseményből, véletlenszerű színt kell létrehoznunk a visszaadott bájttömbből, majd módosítani kell a szövegdoboz tulajdonságait erre a színre. A befejezett SayHelloButton_Click metódusnak a következőképpen kell kinéznie:

       private void SayHelloButton_Click(object sender, RoutedEventArgs e)
       {
           byte[] rgb = GetRandomBytes(3);
   
           // Create a solid color brush using the three random numbers.
           var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));
   
           // Set both the text color and the text box border to the random color.
           textBox1.BorderBrush = randomColorBrush;
           textBox1.Foreground = randomColorBrush;
       }
   

5. A kód ellenőrzéséhez vegyen igénybe egy-két másodpercet. Ha valami pirossal van aláhúzva, valami nem helyes. Lehet, hogy egy hibásan írt szó vagy egy kódrészlet, ahol nem szabadna.

Futtatás

Fordítsuk le és futtassuk a programot!

1. A Visual Studióban a Hibakeresés menüben válassza a Hibakeresés nélkül start (vagy a Hibakeresés indítása lehetőséget, bár ebben az oktatóanyagban nem végezünk hibakeresést), vagy egyszerűen válassza az F5 billentyűt. Ha mindent helyesen adott meg, az alábbihoz hasonló futó alkalmazást kell látnia:

   

2. Ha a Hello ott! szöveget és a szegélyt véletlenszerű színre szeretné módosítani, kattintson többször a Hello gombra.

Ha ez az, amit látsz, akkor jól csináld! Befejezte ezt az oktatóanyagot. Ha nem, gondosan gondolja át újra a kód és a felhasználói felület tulajdonságbeállításait valamiért, ami nem megy.

Folytatás