flyout, tab, routes-gotoasync

MyFirstMauiApp/FlyoutTabSearch/AppShell.xaml

@@ -3,12 +3,34 @@
     x:Class="FlyoutTabSearch.AppShell"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-    xmlns:local="clr-namespace:FlyoutTabSearch.Pages">
+    xmlns:local="clr-namespace:FlyoutTabSearch.Pages"
+    FlyoutIcon="moon.png">
     
+    <!--Combine-->
+    <FlyoutItem Title="Astronomy" Icon="moon.png">
+        <ShellContent Title="Moon Phase" Icon="moon.png"
+                      ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
+        <ShellContent Title="Sunrise" Icon="sun.png"
+              ContentTemplate="{DataTemplate local:SunrisePage}"/>
+        <ShellContent Title="Bodies" Icon="comet.png"
+            ContentTemplate="{DataTemplate local:AstronomicalBodiesPage}"/>
+    </FlyoutItem>
+    <FlyoutItem Title="About" Icon="question.png">
+        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}"/>
+    </FlyoutItem>
 
+    <!--TabBar-->
+    <!--<TabBar>
+        <Tab Title="Moon Phase" Icon="moon.png">
+            <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
+        </Tab>
+        <Tab Title="Sunrise" Icon="sun.png">
+            <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
+        </Tab>
+    </TabBar>-->
     
     <!--Flyout-->
-    <Shell.FlyoutIcon>moon.png</Shell.FlyoutIcon>
+    <!--<Shell.FlyoutIcon>moon.png</Shell.FlyoutIcon>
     <Shell.FlyoutHeader>
         <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
             <Image Source="moon.png"/>
@@ -28,6 +50,6 @@
     <FlyoutItem Title="About" Icon="question.png">
         <ShellContent
             ContentTemplate="{DataTemplate local:AboutPage}"/>
-    </FlyoutItem>
+    </FlyoutItem>-->
     
 </Shell>

MyFirstMauiApp/FlyoutTabSearch/AppShell.xaml.cs

@@ -1,10 +1,14 @@
-namespace FlyoutTabSearch
+using FlyoutTabSearch.Pages;
+
+namespace FlyoutTabSearch
 {
     public partial class AppShell : Shell
     {
         public AppShell()
         {
             InitializeComponent();
+
+            Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
         }
     }
 }

MyFirstMauiApp/FlyoutTabSearch/Data/AstronomicalBody.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace FlyoutTabSearch.Data
+{
+    internal class AstronomicalBody
+    {
+        public string Name { get; set; }
+        public string Mass { get; set; }
+        public string Circumference { get; set; }
+        public string Age { get; set; }
+        public string EmojiIcon { get; set; }
+    }
+}

MyFirstMauiApp/FlyoutTabSearch/Data/SolarSystemData.cs

@@ -0,0 +1,47 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace FlyoutTabSearch.Data
+{
+    internal class SolarSystemData
+    {
+        public static AstronomicalBody Sun = new AstronomicalBody()
+        {
+            Name = "The Sun (Sol)",
+            Mass = "1.9855*10^30 kg",
+            Circumference = "4,379,000 km",
+            Age = "4.57 billion years",
+            EmojiIcon = "☀️",
+        };
+
+        public static AstronomicalBody Earth = new AstronomicalBody()
+        {
+            Name = "Earth",
+            Mass = "5.97237*10^24 kg",
+            Circumference = "40,075 km",
+            Age = "4.54 billion years",
+            EmojiIcon = "🌎",
+        };
+
+        public static AstronomicalBody Moon = new AstronomicalBody()
+        {
+            Name = "Moon",
+            Mass = "7.342*10^22 kg",
+            Circumference = "10,921 km",
+            Age = "4.53 billion years",
+            EmojiIcon = "🌕",
+        };
+
+        public static AstronomicalBody HalleysComet = new AstronomicalBody()
+        {
+            Name = "Halley's Comet",
+            Mass = "22 * 10^14 kg",
+            Circumference = "11 km",
+            Age = "4.6 billion years",
+            EmojiIcon = "☄",
+        };
+    }
+}

MyFirstMauiApp/FlyoutTabSearch/FlyoutTabSearch.csproj

@@ -64,6 +64,12 @@
 	  <MauiXaml Update="Pages\AboutPage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Pages\AstronomicalBodiesPage.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	  <MauiXaml Update="Pages\AstronomicalBodyPage.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Pages\MoonPhasePage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

MyFirstMauiApp/FlyoutTabSearch/Pages/AstronomicalBodiesPage.xaml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="FlyoutTabSearch.Pages.AstronomicalBodiesPage"
+             Title="AstronomicalBodiesPage">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <Style TargetType="Button">
+                <Setter Property="FontSize" Value="100" />
+                <Setter Property="BorderColor" Value="DarkGray" />
+            </Style>
+            <Style TargetType="Label">
+                <Setter Property="HorizontalOptions" Value="Center" />
+                <Setter Property="VerticalOptions" Value="End" />
+                <Setter Property="Margin" Value="5" />
+                <Setter Property="FontAttributes" Value="Bold" />
+            </Style>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <Grid Margin="8">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="*"/>
+        </Grid.ColumnDefinitions>
+
+        <Image Source="starfield.png" Aspect="AspectFill" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
+
+        <Button x:Name="btnEarth" Grid.Row="0" Grid.Column="0" Text="🌎" Background="Transparent" />
+        <Button x:Name="btnMoon"  Grid.Row="0" Grid.Column="1" Text="🌕" Background="Transparent"/>
+        <Button x:Name="btnSun"   Grid.Row="1" Grid.Column="0" Text="☀️" Background="Transparent"/>
+        <Button x:Name="btnComet" Grid.Row="1" Grid.Column="1" Text="☄" Background="Transparent"/>
+    </Grid>
+</ContentPage>

MyFirstMauiApp/FlyoutTabSearch/Pages/AstronomicalBodiesPage.xaml.cs

@@ -0,0 +1,14 @@
+namespace FlyoutTabSearch.Pages;
+
+public partial class AstronomicalBodiesPage : ContentPage
+{
+	public AstronomicalBodiesPage()
+	{
+		InitializeComponent();
+
+        btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
+        btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
+        btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
+        btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");
+    }
+}

MyFirstMauiApp/FlyoutTabSearch/Pages/AstronomicalBodyPage.xaml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="FlyoutTabSearch.Pages.AstronomicalBodyPage"
+             Title="Astronomical Data">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <Color x:Key="textColor">White</Color>
+            <Style TargetType="Label">
+                <Setter Property="TextColor" Value="{StaticResource textColor}" />
+            </Style>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <Shell.BackButtonBehavior>
+        <BackButtonBehavior IconOverride="comet.png"/>
+    </Shell.BackButtonBehavior>
+
+    <Grid RowSpacing="10" ColumnSpacing="10">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Aspect="AspectFill" Grid.RowSpan="6" Grid.ColumnSpan="2" Source="starfield.png" />
+
+        <Label x:Name="lblIcon" FontSize="96" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="Center" />
+        <Label x:Name="lblName" FontSize="Medium" FontAttributes="Bold" Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="Center" />
+
+        <Label FontSize="Medium" FontAttributes="Bold" Grid.Row="2" HorizontalOptions="End" Text="Mass:" />
+        <Label FontSize="Medium" FontAttributes="Bold" Grid.Row="3" HorizontalOptions="End" Text="Circumference:" />
+        <Label FontSize="Medium" FontAttributes="Bold" Grid.Row="4" HorizontalOptions="End" Text="Age:" />
+
+        <Label x:Name="lblMass" FontSize="Medium" Grid.Row="2" Grid.Column="1" />
+        <Label x:Name="lblCircumference" FontSize="Medium" Grid.Row="3" Grid.Column="1" />
+        <Label x:Name="lblAge" FontSize="Medium" Grid.Row="4" Grid.Column="1" />
+    </Grid>
+</ContentPage>

MyFirstMauiApp/FlyoutTabSearch/Pages/AstronomicalBodyPage.xaml.cs

@@ -0,0 +1,48 @@
+using FlyoutTabSearch.Data;
+
+namespace FlyoutTabSearch.Pages;
+
+[QueryProperty(nameof(AstroName), "astroName")]
+public partial class AstronomicalBodyPage : ContentPage
+{
+    private string _astroName;
+    public string AstroName
+    {
+        get { return _astroName; }
+        set
+        {
+            _astroName = value;
+            UpdateAstroBodyUI(_astroName);
+        }
+    }
+
+    public AstronomicalBodyPage()
+	{
+		InitializeComponent();
+	}
+
+    void UpdateAstroBodyUI(string astroName)
+    {
+        AstronomicalBody body = FindAstroData(astroName);
+
+        Title = body.Name;
+
+        lblIcon.Text = body.EmojiIcon;
+        lblName.Text = body.Name;
+        lblMass.Text = body.Mass;
+        lblCircumference.Text = body.Circumference;
+        lblAge.Text = body.Age;
+    }
+
+    AstronomicalBody FindAstroData(string astronomicalBodyName)
+    {
+        return astronomicalBodyName switch
+        {
+            "comet" => SolarSystemData.HalleysComet,
+            "earth" => SolarSystemData.Earth,
+            "moon" => SolarSystemData.Moon,
+            "sun" => SolarSystemData.Sun,
+            _ => throw new ArgumentException()
+        };
+    }
+}