Gyakorlat – WPF-alkalmazás írása

Befejeződött

UWP, WPF és Windows Forms embléma.

Windows megjelenítési alaprendszer (WPF) a Visual Studio egy API-felületet biztosít a fejlesztőknek az asztali, jegyzettömb- és táblagépes alkalmazások építéséhez. A WPF a hatékony DirectX grafikus rendszerre épül, és sok nagyszerű felhasználói felületi funkciót és hatást biztosít kevés programozási erőfeszítéssel.

Ebben a leckében a következőkkel foglalkozunk:

  • WPF Visual Studio létrehozásához használja a Visual Studio.
  • Adjon 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 there!" A szöveg és a szegély színe minden alkalommal véletlenszerűen változik, amikor a Say hello (Üdvözöljük) gombra kattint.
  • Megtudhatja, hogyan állíthat be tulajdonságokat és hozhat létre eseményeket.

Megjegyzés

Feltételezzük, hogy a számítógépét a Windows 10 és Visual Studio is beállította, amint azt a Bevezetés a fejlesztésbe Windows 10 Learn-modulban leírtak szerint.

WPF "Üdvözöljük" oktatóanyag

A projekt létrehozása

  1. Nyissa Visual Studio, és válassza a menüben Project File > New > Project (Új fájl) lehetőséget. A projekt nyelveként válassza a Visual C# lehetőséget. Ezután válassza ki a WPF-alkalmazás (.NET-keretrendszer) projekttípust, és a Név mezőbe írjon be egy felhasználóbarát nevet, például Mondja el a következőt:. Ha végzett, kattintson az OK gombra.

WPF-projekt létrehozása.

  1. Amikor megnyílik a projekt, győződjön meg arról, hogy a Megoldáskezelő és a Tulajdonságok panel meg van nyitva. Alapértelmezés szerint a jobb oldalon találhatók a Visual Studio ablakban. Ha nem láthatók, nyissa meg a Nézet menüt, és válassza ki mindkettőt.

  2. Ebben Megoldáskezelő ellenőrizze, hogy látja-e a két fájl nevét, amelyeken dolgozni fogunk: MainWindow.xaml és annak a MainWindows.xaml.cs fájl mögötti kódja. Válassza a MainWindow.xaml lehetőséget a megnyitásához.

A MainWindow-fájlok megnyitása.

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

  1. Ha még nincs megnyitva, nyissa meg az Eszközkészletet. (A Nézet menüben válassza az Eszközkészlet lehetőséget.) Az Eszközkészletben válassza a Gyakori WPF-vezérlők lehetőséget.

Az Eszközkészlet menü megjelenítése.

  1. Húzzon egy gombot a tervező elrendezésének alsó részére. Ezután húzzon egy szövegmezőt az elrendezés felső részéhez, és húzza a sarkait egy kicsit úgy, hogy az itt láthatóhoz hasonlítsa:

A felhasználói felület megtervezése.

Megjegyzés

Figyelje meg, hogyan jelennek meg gomb- és eszközkészlet-bejegyzések a < Rács > elemhez az elrendezés alatt megjelenő XAML-definícióban.

  1. Most néhány tulajdonságot szeretnénk beállítani ezekre a felhasználói felületi elemekre. Kattintson a gombra, hogy a tulajdonságai megjelenjenek a Tulajdonságok panelen. Módosítsa a Nevet valami egyszerűre, például SayHelloButton névre, és módosítsa a Tartalmat (a közös tulajdonságokban) a Következőre: Hello.

A gomb tulajdonságainak beállítása.

  1. Eseményt kell csatolnunk a gombhoz. Ezt a gomb kiválasztásával is meg lehet tenni, de ez csak akkor működik, ha a tervező elrendezése a szükséges állapotban van. Az események beírhatóbb módja az adott felhasználói felületi elemhez elérhető események megnyitása. Ehhez válassza az itt látható villám ikont a Tulajdonságok panelen, majd egyszerűen válassza ki a Kattintás esemény bejegyzését. Ezzel automatikusan létrehozza a megnevezett esemény SayHelloButton_Click, hozzáadja a megfelelő kódbejegyzést a MainWindow.xaml.cs fájlhoz, és megnyitja a fájlt.

Gombkattintás esemény beállítása.

  1. Egyelőre nem adjuk meg a kódot, ezért a fő nézetben válassza a MainWindow.xaml lehetőséget. Jelenleg a felhasználói felületen fogunk dolgozni.

  2. Válassza ki a tervezőben létrehozott szövegmezőt a tulajdonságainak beállításhoz. Jelentős módosításokat fogunk eszközlünk a szövegdoboz tulajdonságain. Ha az események a Tulajdonságok panelen megjelenik, válassza a csavarkulcs ikont (a név jobb oldalon) a nevesült tulajdonságokhoz való visszatéréshez.

  3. Módosítsa a Name (Név) bejegyzést a textBox1 szövegmezőre, majd az Elrendezés tulajdonságai között módosítsa a Width (Szélesség) és a Height (Magasság) tulajdonságot 360-ra, illetve a 80-ra.

Elrendezési tulajdonságok beállítása.

  1. Csukja össze az Elrendezés szakaszt.

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

Szövegtulajdonságok beállítása.

  1. Vegye figyelembe, hogy az A betűvel ellátott betűtípus lap alapértelmezés szerint meg van nyitva a Text (Szöveg) szakaszban. Válassza ki a bekezdés ikont, és módosítsa az igazítást Középre.

További Szövegtulajdonságok beállítása.

  1. Csukja össze a Szöveg szakaszt, és bontsa ki a Megjelenés részt. A teljes lista felfedése érdekében válassza a 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ő, illetve a 8-asra a jobb és alsó szegélyek esetén. Ez csupán egy kis árnyékhatást ad!

Megjelenési tulajdonságok beállítása.

  1. A Megjelenés összecsukása és a Gyakori kibontása. Írja be a szövegmező szövegét: valami barátságos, például Hello there!.

Általános tulajdonságok beállítása.

Épp most végzett az alkalmazás felhasználói felületi elemeivel. Az XAML-fájl Rács bejegyzésének az alábbihoz kell hasonlítanunk: < >

Az XAML-fájl ellenőrzése.

Megjegyzés

A rekordhoz igen, közvetlenül szerkesztheti az XAML-t, módosíthatja a numerikus értékeket, vagy akár teljes felhasználói felületi elemeket is hozzáadhat. Ezt ebben az oktatóanyagban nem fogjuk megtenni.

A kód megírása

  1. Most már továbbléphet a felhasználói felületről az alkalmazás kódjére. Ideje újra megnyitni a MainWindow.xaml.cs fájlt. (Ehhez válassza ki a nevét a fő nézet felett vagy a Megoldáskezelő .) A MainWindow osztálynak az alábbihoz kell hasonlítani:
public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
        }

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
        {

        }
    }
  1. Győződjön meg arról, hogy minden szükséges using utasításunk van. Győződjön meg arról, hogy az itt láthatóak megjelennek, és ha nem, adja hozzá őket. Ha szeretné, eltávolíthatja a szükségtelen utasításokat, Visual Studio a projekt létrehozásakor szerepel. (A nem használt névterek szürke színnel jelennek meg.)
using System;
using System.Windows;
using System.Windows.Media;
  1. Az alkalmazás véletlenszerű színben rendereli a hello szöveget a gomb minden egyes kiválasztásakor. Ezért hozzá kell adnunk egy globális Random objektumot és a GetRandomBytes metódust, amely véletlenszerűen tölti ki az RGB-beállításként használni kívánt értékeket. Másolja és illessze be ezt a kódot, vagy gépelje be saját maga is, hogy a MainWindow osztály így néz ki:
    public partial class MainWindow : Window
    {
        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)
        {

        }
    }
  1. Végül meg kell hívnunk a GetRandomBytes et a gombkattintás eseményből, létre kell hoznunk egy véletlenszerű színt a visszaadott bájttömbből, majd a szövegmező tulajdonságait erre a színre kell módosítanunk. A befejezett SayHelloButton_Click metódusnak a következő módon 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;
        }
  1. Vegyen egy-két másodpercet a kód ellenőrzéshez. Ha bármi pirossal van aláhúzva, valami nem teljesen helyes. Ez lehet egy helytelenül írt szó, vagy egy kód olyan része, ahol nem kellene.

Fuss!

Fordítsuk le és futtatjuk a programot!

  1. A Visual Studio a Hibakeresés menüben válassza a Start Without Debugging (Indítás hibakeresés nélkül) lehetőséget (vagy a Start Debugging(Hibakeresés elkezdését), bár ebben az oktatóanyagban nem végzünk hibakeresést), vagy egyszerűen válassza az F5 billentyűt. Ha mindent helyesen megadott meg, egy ehhez nagyon hasonló futó alkalmazást kell látnia:

Az alkalmazás futtatása.

  1. A "Hello there!" (Hello there! A szöveg és a szegély véletlenszerű színre változik.

Ha ezt látja, akkor szép munka! Befejezte ezt az oktatóanyagot. Ha nem így van, gondosan újra kell vizsgálnia a kód és a felhasználói felület tulajdonságbeállítását olyanra, ami nem működik.