Page Layout

MyFirstMauiApp/PageLayout/ByGridLayout.xaml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="PageLayout.ByGridLayout">
+    
+    <Grid RowDefinitions="Auto,Auto,Auto,*,Auto,Auto,Auto"
+      ColumnDefinitions="*,*"
+      Padding="40">
+
+        <Label Grid.Row="0" Grid.Column="0" Text="Bill" VerticalTextAlignment="Center"/>
+        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" 
+           Grid.Row="0" Grid.Column="1" />
+
+        <Label Grid.Row="1" Grid.Column="0" Text="Tip"   />
+        <Label Grid.Row="1" Grid.Column="1" x:Name="tipOutput" Text="0.00" />
+
+        <Label Grid.Row="2" Grid.Column="0" Text="Total" />
+        <Label x:Name="totalOutput" Text="0.00" 
+           Grid.Row="2" Grid.Column="1"/>
+
+        <Label Grid.Row="3" Grid.Column="0" Text="Tip Percentage" />
+        <Label Grid.Row="3" Grid.Column="1" x:Name="tipPercent" Text="15%" />
+        <Slider Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />
+
+        <Button Grid.Row="5" Grid.Column="0" Margin="5" Text="15%" />
+        <Button Grid.Row="5" Grid.Column="1" Margin="5" Text="20%" />
+
+        <Button Grid.Row="6" Grid.Column="0" Margin="5" x:Name="roundDown" Text="Round Down" />
+        <Button Grid.Row="6" Grid.Column="1" Margin="5" x:Name="roundUp"   Text="Round Up" />
+    </Grid>
+    
+</ContentView>

MyFirstMauiApp/PageLayout/ByGridLayout.xaml.cs

@@ -0,0 +1,9 @@
+namespace PageLayout;
+
+public partial class ByGridLayout : ContentView
+{
+	public ByGridLayout()
+	{
+		InitializeComponent();
+	}
+}

MyFirstMauiApp/PageLayout/ByStackLayout.xaml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="PageLayout.ByStackLayout">
+    <VerticalStackLayout Padding="40" Spacing="10">
+
+        <HorizontalStackLayout Spacing="10">
+            <Label Text="Bill" WidthRequest="100" VerticalOptions="Center" />
+            <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
+            <Label Text="Tip" WidthRequest="100" />
+            <Label x:Name="tipOutput" Text="0.00" />
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout Spacing="10">
+            <Label Text="Total" WidthRequest="100" />
+            <Label x:Name="totalOutput" Text="0.00" />
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout VerticalOptions="End" Spacing="10">
+            <Label Text="Tip Percentage" WidthRequest="100" />
+            <Label x:Name="tipPercent" Text="15%" />
+        </HorizontalStackLayout>
+
+        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />
+
+        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
+            <Button Text="15%" WidthRequest="150" HorizontalOptions="Center" />
+            <Button Text="20%" WidthRequest="150" HorizontalOptions="Center" />
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
+            <Button x:Name="roundDown" WidthRequest="150" HorizontalOptions="Center" Text="Round Down" />
+            <Button x:Name="roundUp" WidthRequest="150" HorizontalOptions="Center"   Text="Round Up" />
+        </HorizontalStackLayout>
+
+    </VerticalStackLayout>
+</ContentView>

MyFirstMauiApp/PageLayout/ByStackLayout.xaml.cs

@@ -0,0 +1,9 @@
+namespace PageLayout;
+
+public partial class ByStackLayout : ContentView
+{
+	public ByStackLayout()
+	{
+		InitializeComponent();
+	}
+}

MyFirstMauiApp/PageLayout/MainPage.xaml

@@ -1,41 +1,11 @@
 <?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"
+             xmlns:myApp="clr-namespace:PageLayout"
              x:Class="PageLayout.MainPage">
 
     <ScrollView>
-        <VerticalStackLayout
+        <myApp:ByGridLayout/>
-            Spacing="25"
-            Padding="30,0"
-            VerticalOptions="Center">
-
-            <Image
-                Source="dotnet_bot.png"
-                SemanticProperties.Description="Cute dot net bot waving hi to you!"
-                HeightRequest="200"
-                HorizontalOptions="Center" />
-
-            <Label
-                Text="Hello, World!"
-                SemanticProperties.HeadingLevel="Level1"
-                FontSize="32"
-                HorizontalOptions="Center" />
-
-            <Label
-                Text="Welcome to .NET Multi-platform App UI"
-                SemanticProperties.HeadingLevel="Level2"
-                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
-                FontSize="18"
-                HorizontalOptions="Center" />
-
-            <Button
-                x:Name="CounterBtn"
-                Text="Click me"
-                SemanticProperties.Hint="Counts the number of times you click"
-                Clicked="OnCounterClicked"
-                HorizontalOptions="Center" />
-
-        </VerticalStackLayout>
     </ScrollView>
 
 </ContentPage>

MyFirstMauiApp/PageLayout/MainPage.xaml.cs

@@ -8,18 +8,6 @@
         {
             InitializeComponent();
         }
-
-        private void OnCounterClicked(object sender, EventArgs e)
-        {
-            count++;
-
-            if (count == 1)
-                CounterBtn.Text = $"Clicked {count} time";
-            else
-                CounterBtn.Text = $"Clicked {count} times";
-
-            SemanticScreenReader.Announce(CounterBtn.Text);
-        }
     }
 
 }

MyFirstMauiApp/PageLayout/PageLayout.csproj

@@ -52,4 +52,13 @@
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <MauiXaml Update="ByGridLayout.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	  <MauiXaml Update="ByStackLayout.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	</ItemGroup>
+
 </Project>