Ćwiczenie: implementowanie nawigacji wysuwanych

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.

Otwieranie rozwiązania startowego

1. Sklonuj lub pobierz repozytorium ćwiczenia.

   Uwaga

   Najlepiej sklonować lub pobrać zawartość ćwiczenia do krótkiej ścieżki folderu, takiej jak C:\dev, aby uniknąć plików generowanych przez kompilację przekraczającą 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ę wysuwaną

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

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

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

3. FlyoutIcon Dodaj właściwość 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.

   

   Naciśnij ikonę i zostanie wyświetlone okno wysuwane.

   

5. Teraz dodaj więcej opcji wysuwanych. Utwórz nową <FlyoutItem> poniżej właśnie wykonanej i ustaw jej Title wartość na Sunrise. Powinna ShellContent wskazywać SunrisePage stronę.

6. Dodaj kolejny <FlyoutItem>element , ustaw jego tytuł na About (Informacje). Tym razem ustaw parametr na ShellContentAboutPagewartość . 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 ponownie aplikację, a teraz w wysuwaniu są dostępne trzy opcje. Naciśnięcie elementu wysuwanych 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 wysuwanych przy użyciu Icon właściwości .

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

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

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

2. Powtórz pozostałe 2 elementy wysuwane, 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 wysuwany ma teraz skojarzona ikona.

   

Dodawanie nagłówka wysuwanego

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 wysuwany jako element podrzędny węzła <Shell> :

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. Możesz utworzyć dowolną hierarchię widoków w obiekcie <Shell.FlyoutHeader>. Umieśćmy element z Grid elementem Image.

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