Hello World-alkalmazás létrehozása c# és WinUI 3 / Windows App SDK használatával

Ebben az útmutatóban a Visual Studio 2022 és a WinUI 3/Windows App SDK használatával készítünk egy windowsos asztali alkalmazást, amely az indításkor a "Hello world!" szöveget jeleníti meg:

Ez az útmutató kezdőknek szól,, és nem feltételezi a Windows asztali fejlesztéssel kapcsolatos ismereteit.

Előfeltételek

Ez az oktatóanyag a Visual Studiót használja, és a WinUI 3 üres alkalmazássablonra épül. A beállításhoz kövesse A WinUIhasználatának első lépéseit. Telepíti a Visual Studiót, konfigurálja az alkalmazásfejlesztéshez a WinUI-val, létrehozza a Hello World projektet, és győződjön meg arról, hogy a WinUI legújabb verziójával rendelkezik.

Ha ezt megtette, térjen vissza ide, és tudjon meg többet a Hello World projektről, és frissítse azt.

Az üres alkalmazásprojekt áttekintése

A Visual Studio WinUI-projektsablonjai mindent tartalmaznak, amire szüksége van az alkalmazás létrehozásához és futtatásához. Az Üres alkalmazás sablon létrehoz egy ablakot egy interaktív gombbal, amely így néz ki, amikor hibakeresési módban futtatja.

alatt fut

Kattintson a Click Me gombra a eseménykezelésbemutatásához.

Ebben az esetben a gomb vezérlőelem Click eseménye a myButton_Clicklévő MainWindow.xaml.cs eseménykezelőhöz van kötve.

Bár MainWindow.xaml.cs a főablak üzleti logikáját problémákat tartalmazza kód mögötti fájl formájában, bemutatása problémák MainWindow.xaml:

A üzleti logika és a megjelenítéssel kapcsolatos kérdések elkülönítése lehetővé teszi az adatok és események oda-vissza kötését az alkalmazás felhasználói felületéhez, egy konzisztens alkalmazásfejlesztési minta használatával.

A projekt fájlstruktúrája

A kód módosítása előtt tekintsük át a projekt fájlstruktúráját. Ez a(z) Megoldáskezelőtalálható.

A projekt fájlstruktúrája jelenleg így néz ki:

Ez a táblázat a fájlokat írja le, felülről kiindulva és lefelé dolgozva:

"Hello world!" megjelenítése

Ha a "Hello world!" szöveget szeretné megjeleníteni a "Kattintásra" gomb helyett, navigáljon a MainWindow.xaml-hoz. Látnia kellene egy StackPanel vezérlőelem XAML-jelölését.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Frissítsük a StackPanel vezérlőt, hogy piros szöveggel jelenítsük meg a Hello world!:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Ha most próbálja futtatni az alkalmazást, a Visual Studio hibaüzenetet küld a The name 'myButton' does not exist in the current contextsorai mentén. Ennek az az oka, hogy a bemutató réteget egy új vezérlővel frissítettük, de a régi vezérlő üzleti logikáját nem frissítettük a kód mögötti fájlban.

Lépjen rá MainWindow.xaml.cs, majd törölje a myButton_Click eseménykezelőt. Ezt megteheti, mert az interaktív Click me gombot statikus Hello world! szövegre cseréltük. A főablak üzleti logikájának most a következőképpen kell kinéznie:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Az alkalmazás alaphelyzetbe állításához válassza a Build > Rebuild Solution (Build > Rebuild Solution) lehetőséget a menüből, vagy nyomja le a Ctrl + Shift + B billentyűkombinációt. Ezután indítsa újra az alkalmazást a Visual Studio eszköztár "Start" gombjára kattintva vagy az F5 billentyű lenyomásával.

Az alkalmazás frissülni fog, és piros Hello world!-t kellene látnia.

Az alkalmazás címsorának frissítése

this.Title = "Hello world!"; hozzáadása a MainWindow.xaml.cs kód mögötti fájlhoz:

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Ha újraindítja az alkalmazást, a szövegtörzsben és a címsorban is látnia kell a Hello world!:

Gratulálok! Elkészítette az első Windows App SDK/WinUI 3 alkalmazást.

Emlékeztető

Az alábbiakat hajtotta végre ebben az útmutatóban:

1. A Visual Studio projektsablonnal kezdte.
2. Olyan eseménykezelő tapasztalt, amely egy Button vezérlőelemClick eseményét egy felhasználói felület frissítéséhez kötötte.
3. Megismerkedett a bemutatók üzleti logikával szorosan összekapcsolt XAML-korrektúrafájlokkal és C#-kód mögötti fájlok.
4. Ön áttekintette a WinUI 3 alapértelmezett projekt fájlstruktúráját.
5. A prezentációs réteget (XAML-jelölést) és az üzleti logikát (kód háttér) is módosította, hogy támogassa a TextBlock-en belüli új StackPanel.
6. Áttekintette referencia-dokumentumokat a StackPanel vezérlő tulajdonságainakjobb megértéséhez.
7. Frissítette a főablak címsorát.

Teljes kódfájlok

<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}

<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

GYIK

K: Mit jelent a "csomagolt" kifejezés?

A Windows-alkalmazások különböző alkalmazáscsomagolási formátumok használatával kézbesíthetők a végfelhasználóknak. Amikor WinUI-t és Windows App SDK-t használ, a csomagolt alkalmazások az MSIX segítségével csomagolják az alkalmazást, biztosítva ezzel a végfelhasználóknak a kényelmes telepítést és frissítéseket. További információért tekintse meg központi telepítési architektúrát és a keretrendszerfüggő alkalmazások áttekintését.

K: Használhatom a VS Code-ot WinUI-alkalmazások létrehozásához?

Bár technikailag lehetséges, határozottan javasoljuk a Visual Studio 2022 használatát asztali alkalmazások WinUI és Windows App SDK használatával történő létrehozásához. A Windows fejlesztői GYIK további információért.

K: Használhatom a C++-ot WinUI-alkalmazások létrehozásához?

Igen! További információért lásd: A C++/WinRTbevezetése.

Kapcsolódó

• Mintaalkalmazások Windows fejlesztéshez
• Windows-fejlesztő – gyakori kérdések
• Windows fejlesztői szószedet
• ajánlott windowsos fejlesztési eljárások