Udostępnij za pomocą

Konfiguracja projektu

Zanim przejdziesz do kodowania aplikacji, przyjrzymy się projektowi programu Visual Studio i zajmiemy się konfiguracją projektu. Gdy program Visual Studio tworzy projekt WinUI 3, generowanych jest kilka ważnych folderów i plików kodu. Są one widoczne w okienku Eksplorator rozwiązań programu Visual Studio:

Eksplorator rozwiązań przedstawiający pliki projektu WinUI 3 w programie Visual Studio.

Wymienione tutaj elementy to te, z którymi będziesz korzystać przede wszystkim. Te pliki ułatwiają skonfigurowanie i uruchomienie aplikacji WinUI 3. Każdy plik ma inny cel, opisany poniżej:

  • Folder Assets

    Ten folder zawiera logo aplikacji, obrazy i inne zasoby multimedialne. Rozpoczyna się on od wypełnienia plikami zastępczymi logo aplikacji. To logo reprezentuje twoją aplikację w menu Start systemu Windows, pasku zadań systemu Windows i w sklepie Microsoft Store po opublikowaniu aplikacji.

  • App.xaml i App.xaml.cs

    Plik App.xaml zawiera zasoby XAML dla całej aplikacji, takie jak kolory, style lub szablony. Plik App.xaml.cs zazwyczaj zawiera kod, który tworzy wystąpienie i aktywuje okno aplikacji. W tym projekcie wskazuje klasę MainWindow .

  • MainWindow.xaml i MainWindow.xaml.cs

    Te pliki reprezentują okno aplikacji.

  • Package.appxmanifest

    Ten plik manifestu pakietu umożliwia skonfigurowanie informacji o wydawcy, logo, architektury procesora i innych szczegółów określających sposób wyświetlania aplikacji w Sklepie Microsoft Store.

Pliki XAML i klasy częściowe

Extensible Application Markup Language (XAML) to język deklaratywny, który może inicjować obiekty i ustawiać właściwości obiektów. Widoczne elementy interfejsu użytkownika można utworzyć w deklaratywnych znacznikach XAML. Następnie można skojarzyć oddzielny plik kodu dla każdego pliku XAML (zazwyczaj nazywanego plikiem za kodem ), który może reagować na zdarzenia i manipulować obiektami, które pierwotnie zadeklarowane w języku XAML.

Zazwyczaj istnieją dwa pliki z dowolnym plikiem XAML, .xaml samym plikiem i odpowiadającym mu kodem, który jest elementem podrzędnym w Eksploratorze rozwiązań.

  • Plik .xaml zawiera znaczniki XAML definiujące interfejs użytkownika aplikacji. Nazwa klasy jest zadeklarowana za pomocą atrybutu x:Class .
  • Plik kodu zawiera utworzony kod umożliwiający interakcję z adiustacjami XAML i wywołaniem InitializeComponent metody . Klasa jest zdefiniowana jako .partial class

Podczas kompilowania projektu metoda jest wywoływana w InitializeComponent celu przeanalizowania .xaml pliku i wygenerowania kodu połączonego z kodem partial class w celu utworzenia pełnej klasy.

Dowiedz się więcej w dokumentacji:

Aktualizowanie systemu MainWindow

Klasa MainWindow dołączona do projektu jest podklasą klasy okna XAML, która służy do definiowania powłoki aplikacji. Okno aplikacji ma dwie części:

  • Część klienta okna to miejsce, w którym znajduje się zawartość.
  • Część niekliencka jest częścią kontrolowaną przez system operacyjny Windows. Zawiera pasek tytułu, w którym znajdują się kontrolki podpisów (przyciski Min/Max/Close), ikona aplikacji, tytuł i obszar przeciągania. Zawiera również ramkę wokół okna zewnętrznego.

Aby aplikacja Notatek WinUI była zgodna z wytycznymi fluent design, wprowadź kilka modyfikacji elementu MainWindow. Najpierw zastosujesz materiał Mica jako tło okna. Mica jest nieprzezroczystym, dynamicznym materiałem, który zawiera motyw i tapetę pulpitu do malowania tła okna. Następnie rozszerzysz zawartość aplikacji na obszar paska tytułu i zastąpisz pasek tytułu systemowego kontrolką Pasek tytułu XAML. Dzięki temu lepiej wykorzystuje miejsce i zapewnia większą kontrolę nad projektem, zapewniając jednocześnie wszystkie funkcje wymagane przez pasek tytułu.

Dodasz również ramkę jako zawartość okna. Klasa Frame współpracuje z klasą Page , aby umożliwić przechodzenie między stronami zawartości w aplikacji. Strony zostaną dodane w późniejszym kroku.

Wskazówka

Możesz pobrać lub wyświetlić kod tego samouczka z repozytorium GitHub. Aby zobaczyć kod w tym kroku, zobacz to zatwierdzenie: strona notatek — początkowa.

  1. MainWindow.xaml Kliknij dwukrotnie w Eksploratorze rozwiązań, aby go otworzyć.

  2. Między tagami otwierania i zamykania<Window.. > zastąp dowolny istniejący kod XAML następującymi elementami:

    <Window.SystemBackdrop>
    <MicaBackdrop Kind="Base"/>
</Window.SystemBackdrop>

<Grid>
    <Grid.RowDefinitions>
        <!-- Title Bar -->
        <RowDefinition Height="Auto" />
        <!-- App Content -->
        <RowDefinition Height="*" />     
    </Grid.RowDefinitions>
    <TitleBar x:Name="AppTitleBar"
              Title="WinUI Notes">
        <TitleBar.IconSource>
            <FontIconSource Glyph="&#xF4AA;"/>
        </TitleBar.IconSource>
    </TitleBar>

    <!-- App content -->
    <Frame x:Name="rootFrame" Grid.Row="1"/>
</Grid>

  3. Zapisz plik, naciskając CTRL + S, klikając ikonę Zapisz na pasku narzędzi lub wybierając menu Plik>Zapisz plik MainPage.xaml.

Nie martw się, jeśli nie rozumiesz, co to wszystko robi teraz adiustacja XAML. Podczas tworzenia pozostałej części interfejsu użytkownika aplikacji bardziej szczegółowo wyjaśnimy pojęcia dotyczące języka XAML.

Uwaga / Notatka

W tym znaczniku zobaczysz dwa różne sposoby ustawiania właściwości w języku XAML. Pierwszym i najkrótszym sposobem jest użycie składni atrybutów XAML, w następujący sposób: <object attribute="value">. Doskonale sprawdza się w przypadku prostych wartości, takich jak <MicaBackdrop Kind="Base"/>. Działa jednak tylko w przypadku wartości, w których analizator XAML wie, jak przekonwertować ciąg na oczekiwany typ wartości.

Jeśli wartość właściwości jest bardziej złożona lub analizator XAML nie wie, jak ją przekonwertować, należy użyć składni elementu właściwości , aby utworzyć obiekt. Jak to:

<object ... >
    <object.property>
        value
    </object.property>
</object>

Aby na przykład ustawić Window.SystemBackdrop właściwość, musisz użyć składni elementu właściwości i jawnie utworzyć MicaBackdrop element. Można jednak użyć prostej składni atrybutu MicaBackdrop.Kind , aby ustawić właściwość.

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

W MainWindow.xamlpliku , <Window.SystemBackdrop><Grid.RowDefinitions>i <TitleBar.IconSource> zawierają złożone wartości, które muszą być ustawione przy użyciu składni elementu właściwości.

Dowiedz się więcej w dokumentacji:

Jeśli teraz uruchomisz aplikację, zobaczysz dodany element XAML TitleBar , ale będzie on poniżej paska tytułu systemu, który nadal jest wyświetlany.

Puste okno aplikacji Notatek WinUI z wyświetlonym paskiem tytułu systemu i niestandardowym paskiem tytułu.

Aby zakończyć zastępowanie paska tytułu systemu, musisz napisać trochę kodu.

  1. Otwórz MainWindow.xaml.cs. Kod do MainWindow.xaml pliku (lub dowolnego pliku XAML) można otworzyć na trzy sposoby:

    • MainWindow.xaml Jeśli plik jest otwarty i jest aktywnym dokumentem edytowanym, naciśnij F7.
    • MainWindow.xaml Jeśli plik jest otwarty i jest aktywnym dokumentem edytowanym, kliknij prawym przyciskiem myszy w edytorze tekstów i wybierz polecenie Wyświetl kod.
    • Użyj EksploratoraMainWindow.xaml rozwiązań, aby rozwinąć wpis, ujawniając MainWindow.xaml.cs plik. Kliknij dwukrotnie plik, aby go otworzyć.

  2. W konstruktorze dla MainWindowpolecenia dodaj ten kod po wywołaniu metody :InitializeComponent

    public MainWindow()
{
    this.InitializeComponent();

    // ↓ Add this. ↓
    // Hide the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar.
    SetTitleBar(AppTitleBar);
    // ↑ Add this. ↑
}

    Właściwość ExtendsContentIntoTitleBar ukrywa domyślny pasek tytułu systemu i rozszerza kod XAML aplikacji na ten obszar. Wywołanie polecenia SetTitleBar informuje system o traktowaniu określonego elementu XAML (AppTitleBar) jako paska tytułu aplikacji.

  3. Skompiluj i uruchom projekt, naciskając F5, klikając przycisk Debuguj "Start" na pasku narzędzi lub wybierając menu Uruchom uruchom>debugowanie.

Po uruchomieniu aplikacji zobaczysz puste okno z tłem mica i paskiem tytułu XAML, który zastąpił pasek tytułu systemu.

Puste okno aplikacji Notes WinUI z ikoną i nazwą aplikacji na pasku tytułu.

Przejdź do kroku 2 — Dodawanie strony notatki

  • Last updated on