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

Z tego samouczka dowiesz się, jak utworzyć aplikację Windows Presentation Foundation (WPF) przy użyciu programu Visual Studio. W programie Visual Studio dodasz kontrolki do okien i obsłużysz zdarzenia. Na końcu tego samouczka masz prostą aplikację, która dodaje nazwy do pola listy.

W tym samouczku nauczysz się następujących rzeczy:

Utwórz nową aplikację WPF.
Dodawanie kontrolek do okna.
Obsługa zdarzeń sterowania w celu zapewnienia funkcjonalności aplikacji.
Uruchom aplikację.

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

Ukończono przykładową aplikację na potrzeby samouczka dotyczącego platformy WPF

Wymagania wstępne

Visual Studio 2026
- Wybieranie obciążenia programowanie aplikacji klasycznych platformy .NET
- Wybieranie pojedynczego składnika platformy .NET 10

Tworzenie aplikacji WPF

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

Otwórz program Visual Studio.
Wybierz pozycję Utwórz nowy projekt.
W polu Wyszukaj szablony wpisz wpf i poczekaj na wyświetlenie wyników wyszukiwania.
Z listy rozwijanej języka kodu wybierz pozycję C# lub Visual Basic.
Na liście szablonów wybierz pozycję Aplikacja WPF , a następnie wybierz pozycję Dalej.

Ważne

Nie wybieraj szablonu Aplikacja WPF (.NET Framework).

Na poniższej ilustracji przedstawiono zarówno szablony projektów C#, jak i Visual Basic .NET. Jeśli zastosowano filtr języka kodu , zostanie wyświetlony odpowiedni szablon.
W oknie Konfigurowanie nowego projektu ustaw nazwę projektu na Nazwy i wybierz przycisk Dalej.

Projekt można również zapisać w innym folderze, dostosowując ścieżkę Lokalizacja .
Na koniec w oknie Dodatkowe informacje wybierz pozycję .NET 10.0 (obsługa długoterminowa) dla ustawienia Framework , a następnie wybierz pozycję Utwórz.

Po wygenerowaniu aplikacji przez program Visual Studio zostanie otwarte 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:

Ważne składniki programu Visual Studio 2026 należy wiedzieć podczas tworzenia projektu WPF dla platformy .NET.

Eksplorator rozwiązań

Wszystkie pliki projektu, kod, okna i zasoby są wyświetlane w tym oknie.
Właściwości

W tym oknie przedstawiono ustawienia właściwości, które można skonfigurować na podstawie kontekstu wybranego elementu. Jeśli na przykład wybierzesz element z Eksploratora rozwiązań, zostaną wyświetlone ustawienia związane z plikiem. Jeśli zaznaczono obiekt w Projektancie , zostaną wyświetlone właściwości kontrolki lub okna.
Skrzynka z narzędziami

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ę do projektanta. 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.
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.
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 zostanie otwarty edytor kodu XAML. Przedstawia minimalną ilość 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>

Ważne

Jeśli kodujesz w języku Visual Basic, kod XAML jest nieco inny, w szczególności atrybut x:Class=".." . Język XAML w języku Visual Basic używa nazwy klasy obiektu i pomija przestrzeń nazw do klasy.

Aby lepiej zrozumieć język XAML, podzielmy go na podział. XAML to po prostu XML, który WPF przetwarza 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. Plik deklaruje osiem atrybutów i zazwyczaj należą do trzech kategorii:

Przestrzenie nazw XML

Przestrzeń nazw XML zapewnia strukturę xml. Określa zawartość XML, którą można zadeklarować w pliku.

xmlns Główny atrybut importuje przestrzeń nazw XML dla całego pliku. 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.

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

Zostanie wyświetlone okno domyślne wygenerowane przez szablon bez żadnych kontrolek i tytuł MainWindow:
Zmień tytuł okna, ustawiając wartość Title na Names.

Zmień rozmiar okna, ustawiając wartość na Height180 i Width 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 podana 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. Do siatki można dodać dowolną liczbę kontrolek podrzędnych lub innych kontrolek układu. 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 ustawienie domyślne nie zapewnia większej elastyczności podczas umieszczania kontrolek.

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

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

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

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>

Wybierz siatkę w edytorze kodu XAML lub projektancie XAML. Projektant XAML pokazuje każdy wiersz i kolumnę:

Dodawanie pierwszej kontrolki

Po skonfigurowaniu siatki możesz rozpocząć dodawanie do niej kontrolek. Najpierw dodaj kontrolkę etykiety.

Utwórz nowy <Label> element wewnątrz <Grid> elementu po definicjach wierszy i kolumn. Ustaw zawartość elementu na ciąg o wartości 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ść . Jeśli ustawisz zawartość za pomocą składni atrybutu XAML, użyj 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.

Etykieta zajmuje połowę okna, ponieważ została automatycznie umieszczona w pierwszym wierszu i kolumnie siatki. W pierwszym wierszu nie potrzebujesz tyle miejsca, ponieważ użyjesz tylko tego wiersza do etykiety.
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>
```
Projektant pokazuje teraz etykietę zajmującą małą część dostępnej wysokości. Jest więcej miejsca na następny wiersz do zajmowania.

Umieszczanie kontrolek

Porozmawiajmy o umieszczaniu kontrolek. Etykieta utworzona w poprzedniej sekcji jest automatycznie umieszczana 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 wykorzystuje system właściwości udostępniany 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, ale stają się 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 pominiesz te właściwości z kontrolki, wartości domyślne to 0. Dlatego kontrolka jest umieszczana 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ć właściwości dołączonych Grid.Row i Grid.Column, aby umieścić następne kontrolki, które utworzysz. 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.

Zadeklaruj kontrolkę <ListBox /> pod <Label> kontrolą.
Ustaw właściwość Grid.Row na wartość 1.
Ustaw właściwość x:Name na wartość lstNames.

Gdy kontrolka jest nazwana, można odwoływać się do niej w kodzie. Przypisz nazwę do kontrolki przy użyciu atrybutu 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

Dodaj pole tekstowe i przycisk. Użytkownik używa tych kontrolek, aby wprowadzić nazwę, która ma zostać dodana do pola listy. Zamiast tworzyć więcej wierszy i kolumn w siatce, aby rozmieścić te elementy sterujące, umieść je w kontrolce układu <StackPanel>.

Panel stosu różni się od siatki sposobem, w jaki umieszcza kontrolki. Gdy używasz właściwości Grid.Row i dołączonych Grid.Column do określenia, gdzie w siatce mają się znajdować kontrolki, stos działa automatycznie. Kontrolki podrzędne układa sekwencyjnie. To "stosy" każdej kontrolki po drugiej.

Zadeklaruj kontrolkę <StackPanel> pod <ListBox> kontrolą.
Ustaw właściwość Grid.Row na wartość 1.
Ustaw właściwość Grid.Column na wartość 1.
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>
```
Wcześniej użyłeś atrybutu Margin w siatce, ale umieściłeś tylko jedną wartość, 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.
Wewnątrz kontrolki <StackPanel> utwórz kontrolkę <TextBox /> .
1. Ustaw właściwość x:Name na wartość txtName.
Na koniec po <TextBox>pliku , nadal wewnątrz <StackPanel>elementu , utwórz kontrolkę <Button> .
1. Ustaw właściwość x:Name na wartość 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 aplikacja nie ma żadnej logiki, aby rzeczywiście była funkcjonalna. Następnie należy podłączyć zdarzenia sterujące do kodu i sprawić, by aplikacja faktycznie coś zrobiła.

Dodawanie kodu dla zdarzenia Click

Utworzony <Button> obiekt zawiera Click zdarzenie, które zgłasza aplikacja po naciśnięciu przycisku przez użytkownika. Zasubskrybuj to zdarzenie i dodaj kod, aby dodać nazwę do pola listy. Użyj atrybutów XAML, aby subskrybować zdarzenia, tak jak używasz ich do ustawiania właściwości.

Znajdź kontrolkę <Button> .

Ustaw atrybut Click na ButtonAddName_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>

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

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

Upewnij się, że pole tekstowe zawiera nazwę.
Sprawdź, czy nazwa wprowadzona w polu tekstowym jeszcze nie istnieje.
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ę

Po obsłudze zdarzenia uruchom aplikację. Zostanie wyświetlone okno i możesz wprowadzić nazwę w polu tekstowym. Dodaj nazwę, wybierając przycisk .

Uruchamianie aplikacji WPF dla platformy .NET w programie Visual Studio 2026.

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-12-28