Samouczek: tworzenie nowej aplikacji WPF przy użyciu platformy .NET

Z tego samouczka dowiesz się, jak za pomocą programu Visual Studio utworzyć nową aplikację Windows Presentation Foundation (WPF). W programie Visual Studio dodasz kontrolki do okien, aby zaprojektować interfejs użytkownika aplikacji i obsługiwać zdarzenia wejściowe z tych kontrolek w celu interakcji z użytkownikiem. Na końcu tego samouczka masz prostą aplikację, która dodaje nazwy do pola listy.

W tym samouczku zostały wykonane następujące czynności:

Oto wersja zapoznawcza aplikacji utworzonej podczas wykonywania czynności w tym samouczku:

Wymagania wstępne

Tworzenie aplikacji WPF

Pierwszym krokiem tworzenia nowej aplikacji jest otwarcie programu Visual Studio i wygenerowanie aplikacji na podstawie szablonu.

Po wygenerowaniu aplikacji program Visual Studio powinien otworzyć okno projektanta XAML dla okna domyślnego MainWindow. Jeśli projektant nie jest widoczny, kliknij dwukrotnie plik MainWindow.xaml w oknie Eksplorator rozwiązań, aby otworzyć projektanta.

Ważne części programu Visual Studio

Obsługa platformy WPF w programie Visual Studio ma pięć ważnych składników, z którymi korzystasz podczas tworzenia aplikacji:

1. Eksplorator rozwiązań

   Wszystkie pliki projektu, kod, okna, zasoby są wyświetlane w tym oknie.

2. Właściwości

   W tym oknie przedstawiono ustawienia właściwości, które można skonfigurować na podstawie wybranego elementu. Jeśli na przykład wybierzesz element z Eksplorator rozwiązań, zobaczysz ustawienia właściwości powiązane z plikiem. Jeśli wybierzesz obiekt w Projektancie, zobaczysz ustawienia elementu . Jeśli chodzi o poprzedni obraz, pasek tytułu okna został wybrany w projektancie.

3. Przybornik

   Przybornik zawiera wszystkie kontrolki, które można dodać do powierzchni projektowej. Aby dodać kontrolkę do bieżącej powierzchni, kliknij dwukrotnie kontrolkę lub przeciągnij i upuść kontrolkę na powierzchni. Zamiast tego często używa się okna edytora kodu XAML do projektowania interfejsu użytkownika podczas korzystania z okna projektanta XAML w celu wyświetlenia podglądu wyników.

4. Projektant XAML

   Jest to projektant dokumentu XAML. Jest to interaktywne i można przeciągać i upuszczać obiekty z przybornika. Wybierając i przenosząc elementy w projektancie, możesz wizualnie utworzyć interfejs użytkownika dla aplikacji.

   Gdy zarówno projektant, jak i edytor są widoczne, zmiany w jednym są odzwierciedlane w drugim.

   Po wybraniu elementów w projektancie w oknie Właściwości zostaną wyświetlone właściwości i atrybuty dotyczące tego obiektu.

5. Edytor kodu XAML

   Jest to edytor kodu XAML dla dokumentu XAML. Edytor kodu XAML to sposób tworzenia interfejsu użytkownika ręcznie bez projektanta. Projektant może automatycznie ustawiać właściwości kontrolki po dodaniu kontrolki w projektancie. Edytor kodu XAML zapewnia znacznie większą kontrolę.

   Gdy zarówno projektant, jak i edytor są widoczne, zmiany w jednym są odzwierciedlane w drugim. Podczas nawigowania po karetce tekstu w edytorze kodu w oknie Właściwości zostaną wyświetlone właściwości i atrybuty dotyczące tego obiektu.

Sprawdzanie kodu XAML

Po utworzeniu projektu edytor kodu XAML jest widoczny z minimalną ilością kodu XAML do wyświetlenia okna. Jeśli edytor nie jest otwarty, kliknij dwukrotnie element MainWindow.xaml w oknie Eksplorator rozwiązań. Powinien zostać wyświetlony kod XAML podobny do następującego przykładu:

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

Aby lepiej zrozumieć język XAML, podzielmy go na podział. XAML to po prostu kod XML, który jest przetwarzany przez WPF w celu utworzenia interfejsu użytkownika. Aby zrozumieć język XAML, należy zapoznać się co najmniej z podstawami kodu XML.

Katalog główny <Window> dokumentu reprezentuje typ obiektu opisanego przez plik XAML. Zadeklarowane są osiem atrybutów i zazwyczaj należą do trzech kategorii:

• Przestrzenie nazw XML

  Przestrzeń nazw XML zapewnia strukturę xml, określając, jaką zawartość XML można zadeklarować w pliku.

  Główny xmlns atrybut importuje przestrzeń nazw XML dla całego pliku, a w tym przypadku mapuje na typy zadeklarowane przez WPF. Inne przestrzenie nazw XML deklarują prefiks i importują inne typy i obiekty dla pliku XAML. Na przykład xmlns:local przestrzeń nazw deklaruje prefiks i mapuje local je na obiekty zadeklarowane przez projekt, czyli te zadeklarowane w Names przestrzeni nazw kodu.

• Atrybut x:Class

  Ten atrybut mapuje typ <Window> na typ zdefiniowany przez kod: plik MainWindow.xaml.cs lub MainWindow.xaml.vb , który jest klasą Names.MainWindow w języku C# i MainWindow Visual Basic.

• Atrybut Title

  Każdy atrybut normalny zadeklarowany w obiekcie XAML ustawia właściwość tego obiektu. W tym przypadku Title atrybut ustawia Window.Title właściwość .

Zmienianie okna

W naszej przykładowej aplikacji to okno jest zbyt duże, a pasek tytułu nie jest opisowy. Naprawmy to.

1. Najpierw uruchom aplikację, naciskając F5 lub wybierając pozycję Debuguj>rozpocznij debugowanie z menu.

   Zobaczysz domyślne okno wygenerowane przez wyświetlony szablon, bez żadnych kontrolek i tytuł MainWindow:

   

2. Zmień tytuł okna, ustawiając wartość Title na Names.

3. Zmień rozmiar okna, ustawiając wartość na Width180 i Height na 260.

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

Przygotowywanie układu

WPF zapewnia zaawansowany system układu z wieloma różnymi kontrolkami układu. Kontrolki układu ułatwiają umieszczanie i ustawianie rozmiaru kontrolek podrzędnych, a nawet mogą to zrobić automatycznie. Domyślna kontrolka układu udostępniona w tym kodzie XAML to kontrolka <Grid> .

Kontrolka siatki umożliwia definiowanie wierszy i kolumn, podobnie jak tabela, oraz umieszczanie kontrolek w granicach określonej kombinacji wierszy i kolumn. Możesz mieć dowolną liczbę kontrolek podrzędnych lub innych kontrolek układu dodanych do siatki. Na przykład można umieścić kolejną <Grid> kontrolkę w określonej kombinacji wierszy i kolumn, a nowa siatka może następnie zdefiniować więcej wierszy i kolumn i mieć własne elementy podrzędne.

Kontrolka siatki umieszcza kontrolki podrzędne w wierszach i kolumnach. Siatka zawsze ma zadeklarowany pojedynczy wiersz i kolumnę, co oznacza, że siatka domyślnie jest pojedynczą komórką. To naprawdę nie daje dużo elastyczności w umieszczaniu kontrolek.

Dostosuj układ siatki dla kontrolek wymaganych dla tej aplikacji.

1. Dodaj nowy atrybut do <Grid> elementu : Margin="10".

   To ustawienie powoduje przeniesienie siatki z krawędzi okna i sprawia, że wygląda trochę ładniej.

2. Zdefiniuj dwa wiersze i dwie kolumny, dzieląc siatkę na cztery komórki:

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

3. Wybierz siatkę w edytorze kodu XAML lub projektancie XAML. Zobaczysz, że projektant XAML pokazuje każdy wiersz i kolumnę:

   

Dodawanie pierwszej kontrolki

Teraz, gdy siatka została skonfigurowana, możemy rozpocząć dodawanie do niej kontrolek. Najpierw zacznij od kontrolki etykiety.

1. Utwórz nowy <Label> element wewnątrz <Grid> elementu po definicjach wierszy i kolumn. Ustaw zawartość elementu na wartość ciągu :Names

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

   Element <Label>Names</Label> definiuje zawartość Names. Niektóre kontrolki rozumieją sposób obsługi zawartości, inne nie. Zawartość kontrolki mapuje na Content właściwość . Ustawienie zawartości za pomocą składni atrybutu XAML, należy użyć następującego formatu: <Label Content="Names" />. Oba sposoby umożliwiają osiągnięcie tego samego celu, ustawiając zawartość etykiety, aby wyświetlić tekst Names.

   Zwróć uwagę, że etykieta zajmuje połowę okna, ponieważ została automatycznie umieszczona w pierwszym wierszu i kolumnie siatki. W naszym pierwszym wierszu nie potrzebujemy tyle miejsca, ponieważ będziemy używać tylko tego wiersza dla etykiety.

2. Height Zmień atrybut pierwszego <RowDefinition> elementu z * na Auto.

   Wartość Auto automatycznie zmienia rozmiar wiersza siatki na rozmiar jego zawartości, w tym przypadku kontrolkę etykiety.

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

   Zwróć uwagę, że projektant pokazuje teraz etykietę zajmującą niewielką ilość dostępnej wysokości. Jest teraz więcej miejsca na następny wiersz do zajmowania.

   

Umieszczanie kontrolek

Porozmawiajmy o umieszczaniu kontrolek. Etykieta utworzona w poprzedniej sekcji została automatycznie umieszczona w wierszu 0 i kolumnie 0 siatki. Numerowanie wierszy i kolumn rozpoczyna się od 0 i zwiększa się o 1. Kontrolka nie wie nic o siatce, a kontrolka nie definiuje żadnych właściwości do kontrolowania jej położenia w siatce.

Jak poinformować kontrolkę o użyciu innego wiersza lub kolumny, gdy kontrolka nie zna siatki? Dołączone właściwości! Siatka korzysta z zaawansowanego systemu właściwości dostarczonego przez WPF.

Kontrolka siatki definiuje nowe właściwości, które kontrolki podrzędne mogą dołączać do siebie. Właściwości nie istnieją w samej kontrolce, są dostępne dla kontrolki po dodaniu jej do siatki.

Siatka definiuje dwie właściwości, aby określić położenie wiersza i kolumny kontrolki podrzędnej: Grid.Row i Grid.Column. Jeśli te właściwości zostaną pominięte w kontrolce, oznacza to, że mają wartości domyślne 0, dlatego kontrolka zostanie umieszczona w wierszu 0 i kolumnie 0 siatki. Spróbuj zmienić położenie kontrolki <Label> , ustawiając Grid.Column atrybut na 1:

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

Zwróć uwagę, że etykieta została przeniesiona do drugiej kolumny. Możesz użyć Grid.Row właściwości i Grid.Column dołączonych, aby umieścić następne kontrolki, które utworzymy. Na razie jednak przywróć etykietę do kolumny 0.

Tworzenie pola listy nazw

Teraz, gdy siatka ma prawidłowy rozmiar i utworzoną etykietę, dodaj kontrolkę pola listy w wierszu poniżej etykiety.

1. Zadeklaruj kontrolkę <ListBox /> pod <Label> kontrolą.

2. Ustaw właściwość Grid.Row na 1.

3. Ustaw właściwość x:Name na lstNames.

   Po nazwie kontrolki można odwoływać się do niej w kodzie. Nazwa jest przypisywana do kontrolki z atrybutem x:Name .

Oto jak powinien wyglądać kod XAML:

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

Dodawanie pozostałych kontrolek

Ostatnie dwie kontrolki, które dodamy, to pole tekstowe i przycisk, którego użytkownik używa do wprowadzania nazwy w celu dodania do pola listy. Jednak zamiast próbować utworzyć więcej wierszy i kolumn w siatce, aby rozmieścić te kontrolki, umieścimy te kontrolki w kontrolce <StackPanel> układu.

Panel stosu różni się od siatki w sposobie umieszczania kontrolek. Gdy informujesz siatkę, w której kontrolki mają znajdować się we Grid.Row właściwościach i Grid.Column dołączonych, panel stosu działa automatycznie, układając poszczególne kontrolki podrzędne sekwencyjnie. To "stosy" każdej kontrolki po drugiej.

1. Zadeklaruj kontrolkę <StackPanel> pod <ListBox> kontrolą.

2. Ustaw właściwość Grid.Row na 1.

3. Ustaw właściwość Grid.Column na 1.

4. Ustaw opcję Margin na 5,0,0,0.

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

   Atrybut Margin był wcześniej używany w siatce, ale umieszczamy tylko w jednej wartości 10. Ten margines ma wartość 5,0,0,0, która różni się bardzo od 10. Właściwość margin jest typem Thickness i może interpretować obie wartości. Grubość definiuje przestrzeń wokół każdej strony prostokątnej ramki, lewej, górnej, prawej, dolnej, odpowiednio. Jeśli wartość marginesu jest pojedynczą wartością, używa tej wartości dla wszystkich czterech stron.

5. Wewnątrz kontrolki <StackPanel> utwórz kontrolkę <TextBox /> .

   1. Ustaw właściwość x:Name na txtName.

6. Na koniec po <TextBox>pliku , nadal wewnątrz <StackPanel>elementu , utwórz kontrolkę <Button> .

   1. Ustaw właściwość x:Name na btnAdd.
   2. Ustaw opcję Margin na 0,5,0,0.
   3. Ustaw zawartość na Add Name.

Oto jak powinien wyglądać kod XAML:

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

Układ okna został ukończony. Jednak nasza aplikacja nie ma w niej żadnej logiki, aby rzeczywiście była funkcjonalna. Następnie musimy podłączyć zdarzenia sterujące do kodu i pobrać aplikację, aby rzeczywiście coś zrobiła.

Dodawanie kodu dla zdarzenia Click

Utworzony <Button> obiekt zawiera Click zdarzenie, które jest zgłaszane, gdy użytkownik naciska przycisk. Możesz zasubskrybować to zdarzenie i dodać kod, aby dodać nazwę do pola listy. Atrybuty XAML są używane do subskrybowania zdarzeń, tak jak są używane do ustawiania właściwości.

1. Znajdź kontrolkę <Button> .

2. Ustaw atrybut na ClickButtonAddName_Click

   <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. Wygeneruj kod programu obsługi zdarzeń. Kliknij prawym przyciskiem myszy ButtonAddName_Click i wybierz polecenie Przejdź do definicji.

   Ta akcja generuje metodę w kodzie, która jest zgodna z podaną nazwą programu obsługi.

   private void ButtonAddName_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

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

4. Następnie dodaj następujący kod, aby wykonać trzy kroki:

   1. Upewnij się, że pole tekstowe zawiera nazwę.
   2. Sprawdź, czy nazwa wprowadzona w polu tekstowym jeszcze nie istnieje.
   3. Dodaj nazwę do pola listy.

   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
   

Uruchom aplikację

Teraz, gdy zdarzenie jest obsługiwane, uruchom aplikację. Zostanie wyświetlone okno i możesz wprowadzić nazwę w polu tekstowym, a następnie dodać je, klikając przycisk.

Powiązana zawartość

• Dowiedz się więcej o programie Windows Presentation Foundation
• Omówienie języka XAML