Ćwiczenie: implementacja nawigacji wysuwanej

W przykładowym scenariuszu masz aplikację .NET MAUI zawierającą strony do wyświetlania informacji o ciałach astronomicznych, fazach księżyca i godzinach słońca/zachodu słońca. Aplikacja zawiera również stronę Informacje. Obecnie wszystkie te strony są autonomiczne, ale chcesz zapewnić użytkownikowi logiczny sposób przechodzenia między nimi.

W tym ćwiczeniu dodasz nawigację wysuwaną do aplikacji.

W tym module jest używany zestaw .NET 10.0 SDK. Upewnij się, że masz zainstalowany program .NET 10.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 10 . Jeśli żaden nie jest wymieniony lub nie można odnaleźć polecenia, zainstaluj najnowszy zestaw SDK .NET 10.0.

Otwórz rozwiązanie początkowe

1. Sklonuj lub pobierz repozytorium z ćwiczeniem.

   Uwaga

   Najlepiej sklonować lub pobrać pliki ćwiczeniowe do folderu o krótkiej ścieżce, takiego jak C:\dev, aby uniknąć sytuacji, w której ścieżki do plików generowanych podczas kompilacji przekroczą maksymalną długość ścieżki.

2. Przejdź do folderu exercise1 w sklonowanym repozytorium, a następnie przejdź do folderu Start .

3. Użyj programu Visual Studio, aby otworzyć rozwiązanie Astronomy.sln lub folder w programie Visual Studio Code.

4. W oknie Eksplorator rozwiązań w projekcie Astronomia rozwiń folder Pages. Ten folder zawiera następujące strony:

   • AboutPage. Na tej stronie są wyświetlane informacje o aplikacji.
   • MoonPhasePage. Na tej stronie są wyświetlane konkretne informacje o fazach Księżyca, jak widać na Ziemi.
   • SunrisePage. Na tej stronie są wyświetlane godziny słońca i zachodu słońca dla lokalizacji na Ziemi. Dane są dostarczane przez usługę internetową Sunrise Sunset.

5. Skompiluj i uruchom aplikację. Po uruchomieniu aplikacji zostanie wyświetlony element MoonPhasePage , ale obecnie nie ma możliwości umożliwienia użytkownikowi przechodzenia do innych stron.

   Na poniższej ilustracji przedstawiono aplikację uruchomioną w emulatorze systemu Android:

   

6. Zamknij aplikację i wróć do programu Visual Studio lub Visual Studio Code.

Dodaj nawigację rozwijaną

1. W oknie Eksplorator rozwiązań otwórz stronę AppShell.xaml .

2. W edytorze znaczników XAML otocz istniejący element <ShellContent> elementem <FlyoutItem>. Ustaw właściwość Title elementu <Flyout> na wartość Faza Księżyca. Znacznik powinien wyglądać następująco:

   <FlyoutItem Title="Moon Phase">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
   </FlyoutItem>
   

3. Dodaj właściwość FlyoutIcon do węzła <Shell>, aby wyświetlić obraz. Domyślnie wyświetla trzy poziome paski, ale możemy zmienić ją tak, aby była dowolna. Znacznik powinien wyglądać następująco:

   <Shell
       x:Class="Astronomy.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Astronomy.Pages"
       FlyoutIcon="moon.png">
   

4. Uruchom aplikację. Powinien zostać wyświetlony obraz księżyca w lewym górnym rogu aplikacji.

   

   Stuknij ikonę, a pojawi się wysuwane okno.

   

5. Teraz dodaj więcej opcji menu wysuwanego. Utwórz nową <FlyoutItem> poniżej tej, którą właśnie utworzono, i ustaw jej Title na Sunrise. Jej ShellContent powinien prowadzić do strony SunrisePage.

6. Dodaj kolejny <FlyoutItem>, ustaw jego tytuł na Informacje. Tym razem ustaw ShellContent na AboutPage. Kod XAML dla tych dwóch elementów powinien wyglądać następująco:

   <FlyoutItem Title="Sunrise">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

7. Uruchom aplikację ponownie, a teraz w wysuwanym menu są trzy opcje. Naciśnięcie elementu menu wysuwanego powoduje wyświetlenie odpowiedniej strony.

   

   Uwaga

   Jeśli korzystasz z platformy innej niż Windows, może być konieczne włączenie uprawnień Lokalizacja dla aplikacji na tej platformie, aby strona Sunrise/Sunset Times działała. Na przykład na urządzeniu z systemem Android ustaw opcję Dostęp do lokalizacji na wartość Zezwalaj tylko podczas korzystania z aplikacji.

Dodawanie ikon

Być może zauważysz, że elementy wysuwane wyglądają nieco puste. Ikony można dodawać do elementów menu wysuwanego za pomocą właściwości Icon.

Niektóre obrazy zostały już dodane do folderu Resources\Images do użycia.

1. Ustaw Icon właściwość pierwszego FlyoutItem na moon.png.

   <FlyoutItem Title="Moon Phase" Icon="moon.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}" />
   </FlyoutItem>
   

2. Powtórz to dla pozostałych 2 elementów menu wysuwanego, używając odpowiednio sun.png i question.png.

   <FlyoutItem Title="Sunrise" Icon="sun.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About" Icon="question.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

3. Uruchom aplikację i otwórz okno wysuwane. Każdy element menu wysuwanego ma teraz skojarzoną z nim ikonę.

   

Dodaj wysuwany nagłówek

Elementy wysuwane znajdują się w górnej części menu wysuwanego, co utrudnia ich rozróżnienie. Możemy dodać trochę miejsca na górę, a nawet całe View za pomocą elementu <Shell.FlyoutHeader>.

1. Dodaj nagłówek wysuwanego okna jako element podrzędny węzła <Shell>:

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. Możesz utworzyć dowolną hierarchię widoków w obiekcie <Shell.FlyoutHeader>. Wstawmy Grid z Image.

   <Shell.FlyoutHeader>
       <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
           <Image Source="moon.png" />
       </Grid>
   </Shell.FlyoutHeader>