Föregående

Nästa

Övning – Skriva en WPF-app

Slutförd

Windows Presentation Foundation (WPF) i Visual Studio ger utvecklare ett API-gränssnitt för att skapa appar för stationära datorer, anteckningsblock och surfplattor. WPF bygger på det kraftfulla DirectX-grafiksystemet och ger många bra gränssnittsfunktioner och effekter med liten programmeringsinsats.

I den här lektionen:

• Använd Visual Studio för att skapa ett WPF-projekt.
• Lägg till gränssnitts- och kodelement i projektet för att skapa en rolig variant av ett "hello world"-program. Texten "Hello there!" och kantlinjen ändrar färg slumpmässigt varje gång du väljer knappen Säg hej .
• Lär dig hur du anger egenskaper och skapar händelser.

Kommentar

Vi antar att du har konfigurerat datorn med Windows och Visual Studio enligt beskrivningen i Learn-modulen Introduktion till Windows 10-utveckling.

Självstudiekurs om WPF "Say hello"

Skapa projektet

1. Öppna Visual Studio och välj Arkiv>Nytt>projekt på menyn. Välj C# som projektspråk. Välj sedan projekttypen WPF-program och i fältet Namn anger du ett eget namn som Säg hej. Välj Nästa när du är klar.

   

2. Välj din .NET-version och välj sedan Skapa.

3. När projektet öppnas är det en bra idé att se till att fönstret Solution Explorer och Egenskaper är öppna. De finns som standard till höger i Visual Studio-fönstret. Om de inte visas öppnar du menyn Visa och väljer båda.

4. I Solution Explorer ser du till att du kan se namnen på de två filer som vi arbetar med: MainWindow.xaml och dess kod bakom filen, MainWindows.xaml.cs. Välj MainWindow.xaml för att öppna den.

   

Utforma användargränssnittet

1. Om verktygslådan inte är öppen väljer du menyn Visa och väljer sedan Verktygslåda. I verktygslådan väljer du Vanliga WPF-kontroller.

   

2. Dra en knapp till den nedre delen av designerlayouten. Dra sedan en textruta till den övre delen av layouten och dra ut dess hörn lite så att det ser ut som det du ser här:

   

   Kommentar

   Observera hur knapp- och textbox-poster läggs till <i rutnätet> i XAML-definitionen som visas under layouten.

3. Sedan vill vi uppdatera texten som visas i fönstrets namnlist. Välj fönstret i designerlayouten så att dess egenskaper visas i fönstret Egenskaper och ändra sedan rubriken till Säg hej.

4. Nu vill vi ange vissa egenskaper för de nya gränssnittselementen. Välj knappen så att dess egenskaper visas i fönstret Egenskaper . Ändra Namnet till något enkelt, till exempel SayHelloButton, och ändra innehållet i de gemensamma egenskaperna till Säg hej.

   

5. Vi måste koppla en händelse till knappen. Du kan välja själva knappen, men det fungerar bara om designerlayouten är i det tillstånd som krävs. Ett mer säkert sätt att ange en händelse är att öppna de händelser som är tillgängliga för det användargränssnittsobjektet. Det gör du genom att välja blixtikonen som visas här i fönstret Egenskaper och sedan helt enkelt välja posten för klicka-händelsen . Detta skapar automatiskt den namngivna händelsen SayHelloButton_Click, lägger till lämplig kodpost i filen MainWindow.xaml.cs och öppnar filen åt dig.

   

6. Vi anger ingen kod ännu, så välj MainWindow.xaml i huvudvyn. Vi fortsätter att arbeta med användargränssnittet för tillfället.

7. Välj textrutan som du skapade i designern för att visa dess egenskaper. Vi kommer att göra en hel del ändringar i egenskaperna för textrutan. Om händelserna visas i fönstret Egenskaper väljer du skiftnyckelikonen bredvid namnet för att återgå till de namngivna egenskaperna.

8. Ändra posten Namn till textBox1 och ändra sedan Bredd och Höjd till 360respektive 80 i layoutegenskaperna.

   

9. Dölj avsnittet Layout.

10. I listan Textstorlek ändrar du punktstorleken till 36: något trevligt och synligt!

    

11. Teckensnittsfliken, märkt med A, är öppen som standard för avsnittet Text. Välj styckeikonen och ändra justeringen till Center.

    

12. Dölj avsnittet Text och expandera Utseende. Välj nedåtpilen längst ned i den exponerade listan med utseendeegenskaper för att exponera den fullständiga listan. Ändra kanttjockleken till 1 för vänster och övre kantlinjer och till 8 för höger och nedre kantlinjer. Nu har rutan lite av en skuggeffekt!

    

13. Dölj utseende och expandera Common. Ange texten för textrutan: något vänligt som Hello there!.

    

Du är nästan klar med användargränssnittselementen för din app. Rutnätsposten <> i XAML-filen bör se ut så här:

Kommentar

Du kan redigera XAML direkt, ändra numeriska värden eller till och med lägga till hela användargränssnittselement. Det gör vi inte i den här självstudien.

Skriv koden bakom

1. Nu kan vi gå från användargränssnittet till koden för vår app. Det är dags att öppna filen MainWindow.xaml.cs igen. Välj filen ovanför huvudvyn eller i Solution Explorer. Klassen MainWindow bör se ut så här:

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

2. Nu ska vi se till att vi har alla nödvändiga användningsuttryck . Se till att du har de som visas här och lägg till dem om du inte gör det. När du har redigerat filen kan du ta bort onödiga instruktioner som Visual Studio inkluderade när projektet skapades. (Oanvända namnområden visas i grått.)

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

3. Appen renderar hello-texten i en slumpmässig färg varje gång knappen väljs. Därför måste vi lägga till ett slumpmässigt objekt på klassnivå och metoden GetRandomBytes som slumpmässigt fyller i värden som vi använder som RGB-inställningar. Kopiera och klistra in den här koden eller skriv in den själv så att klassen MainWindow ser ut så här:

   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. Slutligen måste vi anropa GetRandomBytes från knappklickshändelsen, skapa en slumpmässig färg från den returnerade bytematrisen och sedan ändra textruteegenskaperna till den färgen. Den färdiga SayHelloButton_Click-metoden bör se ut så här:

       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. Ta en sekund eller två för att kontrollera koden. Om något är understruket i rött är något inte rätt. Det kan vara ett felstavat ord eller ett kodstycke där det inte ska vara.

Kör

Nu ska vi kompilera och köra programmet!

1. I Visual Studio går du till felsökningsmenyn och väljer Starta utan felsökning (eller Starta felsökning, även om vi inte gör någon felsökning i den här självstudien) eller väljer bara F5-nyckeln. Om du har angett allt korrekt bör du se en app som körs som liknar den här:

   

2. Välj knappen Säg hej upprepade gånger för att se texten Hello there! och kantlinjen ändras till slumpmässiga färger.

Om det är vad du ser, bra gjort! Du har slutfört den här självstudien. Om inte kan du noggrant granska inställningarna för kod- och användargränssnittsegenskapen för något som har gått fel.

Fortsätt