From ebbea4c1d4a8909a36bb2563b86942b8753dc33c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20=C3=96man?= <tommy@oeman.se>
Date: Mon, 18 Aug 2025 08:05:28 +0200
Subject: [PATCH] Borders, Frames scrollers

---
 .../AdventureWorks.MAUI.csproj                |  3 +
 AdventureWorks.MAUI/MainPage.xaml             | 15 ++--
 .../Resources/Styles/AppStyles.xaml           |  9 ++
 AdventureWorks.MAUI/Views/LoginView.xaml      | 20 ++---
 .../Views/ProductDetailView.xaml              | 87 ++++++++++---------
 AdventureWorks.MAUI/Views/UserDetailView.xaml | 87 ++++++++++---------
 .../ViewsPartial/AddressView.xaml             | 38 ++++++++
 .../ViewsPartial/AddressView.xaml.cs          |  9 ++
 8 files changed, 170 insertions(+), 98 deletions(-)
 create mode 100644 AdventureWorks.MAUI/ViewsPartial/AddressView.xaml
 create mode 100644 AdventureWorks.MAUI/ViewsPartial/AddressView.xaml.cs

diff --git a/AdventureWorks.MAUI/AdventureWorks.MAUI.csproj b/AdventureWorks.MAUI/AdventureWorks.MAUI.csproj
index a8c8ced..215ef3d 100644
--- a/AdventureWorks.MAUI/AdventureWorks.MAUI.csproj
+++ b/AdventureWorks.MAUI/AdventureWorks.MAUI.csproj
@@ -71,6 +71,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <MauiXaml Update="ViewsPartial\AddressView.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="ViewsPartial\HeaderView.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
diff --git a/AdventureWorks.MAUI/MainPage.xaml b/AdventureWorks.MAUI/MainPage.xaml
index b418bd3..78ff1b0 100644
--- a/AdventureWorks.MAUI/MainPage.xaml
+++ b/AdventureWorks.MAUI/MainPage.xaml
@@ -3,10 +3,13 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="AdventureWorks.MAUI.MainPage"
              Title="{StaticResource ApplicationTitle}">
-
-<Label Text="{StaticResource ApplicationTitle}"
-       FontSize="Large"
-       HorizontalOptions="Center"
-       VerticalOptions="Center" />
-
+    <Border Stroke="Black" StrokeThickness="2"
+            HorizontalOptions="Center"
+            VerticalOptions="Center"
+            Padding="10">
+        <Label Text="{StaticResource ApplicationTitle}"
+               FontSize="Large"
+               HorizontalOptions="Center"
+               VerticalOptions="Center" />
+    </Border>
 </ContentPage>
diff --git a/AdventureWorks.MAUI/Resources/Styles/AppStyles.xaml b/AdventureWorks.MAUI/Resources/Styles/AppStyles.xaml
index 0df153c..5a26d9b 100644
--- a/AdventureWorks.MAUI/Resources/Styles/AppStyles.xaml
+++ b/AdventureWorks.MAUI/Resources/Styles/AppStyles.xaml
@@ -15,6 +15,15 @@
         <Setter Property="Margin" Value="{StaticResource DefaultSpacingForGrid}" />
         <Setter Property="Padding" Value="{StaticResource DefaultSpacingForGrid}" />
     </Style>
+
+    <Style TargetType="Border"
+           x:Key="Border.Page">
+        <Setter Property="Stroke" Value="Gray" />
+        <Setter Property="StrokeThickness" Value="1" />
+        <Setter Property="Margin" Value="5" />
+        <Setter Property="HorizontalOptions" Value="Fill" />
+        <Setter Property="VerticalOptions" Value="Fill" />
+    </Style>
     <Style TargetType="Label">
         <Setter Property="VerticalTextAlignment" Value="Center" />
     </Style>
diff --git a/AdventureWorks.MAUI/Views/LoginView.xaml b/AdventureWorks.MAUI/Views/LoginView.xaml
index a426528..cf443d8 100644
--- a/AdventureWorks.MAUI/Views/LoginView.xaml
+++ b/AdventureWorks.MAUI/Views/LoginView.xaml
@@ -4,32 +4,32 @@
              xmlns:partial="clr-namespace:AdventureWorks.MAUI.ViewsPartial"
              x:Class="AdventureWorks.MAUI.Views.LoginView"
              Title="Login">
-
-    <Grid RowDefinitions="Auto, Auto, Auto, Auto"
+    <Border Style="{StaticResource Border.Page}">
+        <Grid RowDefinitions="Auto, Auto, Auto, Auto"
           ColumnDefinitions="Auto, *"
           Style="{StaticResource Grid.Page}">
 
-        <partial:HeaderView Grid.Row="0"
+            <partial:HeaderView Grid.Row="0"
                             Grid.ColumnSpan="2"
                             ViewTitle="Login"
                             ViewDescription="Please enter your credentials to login." />
 
-        <Label Grid.Row="1"
+            <Label Grid.Row="1"
                Text="Login ID" />
-        <Entry Grid.Row="1"
+            <Entry Grid.Row="1"
                Grid.Column="1"
                Placeholder="Enter your username" />
-        <Label Grid.Row="2"
+            <Label Grid.Row="2"
                Text="Password" />
-        <Entry Grid.Row="2"
+            <Entry Grid.Row="2"
                Grid.Column="1"
                Placeholder="Enter your password"
                IsPassword="True" />
-        <Button Grid.Row="3"
+            <Button Grid.Row="3"
                 Grid.ColumnSpan="2"
                 Text="Login"
                 HorizontalOptions="Center" />
-     </Grid> 
-
+        </Grid>
+    </Border>
 
 </ContentPage>
\ No newline at end of file
diff --git a/AdventureWorks.MAUI/Views/ProductDetailView.xaml b/AdventureWorks.MAUI/Views/ProductDetailView.xaml
index acbfdd6..6a8c1db 100644
--- a/AdventureWorks.MAUI/Views/ProductDetailView.xaml
+++ b/AdventureWorks.MAUI/Views/ProductDetailView.xaml
@@ -5,78 +5,81 @@
             xmlns:partial="clr-namespace:AdventureWorks.MAUI.ViewsPartial"
              Title="Product Information">
 
-    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"
+    <Border Style="{StaticResource Border.Page}">
+        <ScrollView>
+            <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"
           ColumnDefinitions="Auto, *"
           Style="{StaticResource Grid.Page}">
-        
-    
-        <partial:HeaderView Grid.Row="0"
+
+
+                <partial:HeaderView Grid.Row="0"
                                 Grid.ColumnSpan="2"
                                 ViewTitle="Product Information"
                                 ViewDescription="Use this Screen to Modify Product Information." />
 
-        <Label Grid.Row="1"
+                <Label Grid.Row="1"
                Text="Product Name" />
-        <Entry Grid.Row="1"
+                <Entry Grid.Row="1"
                Grid.Column="1" />
-        <Label Grid.Row="2"
-               Text="Xxx" />
-        <Entry Grid.Row="2"
+                <Label Grid.Row="2"
+               Text="Product Number" />
+                <Entry Grid.Row="2"
                Grid.Column="1" />
-        <Label Grid.Row="3"
-               Text="Xxx" />
-        <Entry Grid.Row="3"
+                <Label Grid.Row="3"
+               Text="Color" />
+                <Entry Grid.Row="3"
                Grid.Column="1" />
-        <Label Grid.Row="4"
-               Text="Xxx" />
-        <Entry Grid.Row="4"
+                <Label Grid.Row="4"
+               Text="Cost" />
+                <Entry Grid.Row="4"
                Grid.Column="1" />
 
-        <Label Grid.Row="5"
-               Text="Xxx" />
-        <Entry Grid.Row="5"
+                <Label Grid.Row="5"
+               Text="Price" />
+                <Entry Grid.Row="5"
                Grid.Column="1" />
 
-        <Label Grid.Row="6"
-               Text="Xxx" />
-        <Entry Grid.Row="6"
+                <Label Grid.Row="6"
+               Text="Size" />
+                <Entry Grid.Row="6"
                Grid.Column="1" />
 
-        <Label Grid.Row="7"
-               Text="Xxx" />
-        <Entry Grid.Row="7"
+                <Label Grid.Row="7"
+               Text="Weight" />
+                <Entry Grid.Row="7"
                Grid.Column="1" />
 
-        <Label Grid.Row="8"
-               Text="Xxx" />
-        <Entry Grid.Row="8"
+                <Label Grid.Row="8"
+               Text="Category" />
+                <Entry Grid.Row="8"
                Grid.Column="1" />
 
-        <Label Grid.Row="9"
+                <Label Grid.Row="9"
                Text="Model" />
-        <Entry Grid.Row="9"
+                <Entry Grid.Row="9"
                Grid.Column="1" />
 
-        <Label Grid.Row="10"
+                <Label Grid.Row="10"
                Text="Selling Start Date" />
-        <Entry Grid.Row="10"
+                <Entry Grid.Row="10"
                Grid.Column="1" />
 
-        <Label Grid.Row="11"
+                <Label Grid.Row="11"
                Text="Selling End Date" />
-        <Entry Grid.Row="11"
+                <Entry Grid.Row="11"
                Grid.Column="1" />
 
-        <Label Grid.Row="12"
+                <Label Grid.Row="12"
                Text="Discontinued Date" />
-        <Entry Grid.Row="12"
+                <Entry Grid.Row="12"
                Grid.Column="1" />
-        
-        <HorizontalStackLayout Grid.Row="13"
-                           Grid.ColumnSpan="1">
-            <Button Text="Save" />
-            <Button Text="Cancel" />
-        </HorizontalStackLayout>
-    </Grid>
 
+                <HorizontalStackLayout Grid.Row="13"
+                           Grid.ColumnSpan="1">
+                    <Button Text="Save" />
+                    <Button Text="Cancel" />
+                </HorizontalStackLayout>
+            </Grid>
+        </ScrollView>
+    </Border>
 </ContentPage>
\ No newline at end of file
diff --git a/AdventureWorks.MAUI/Views/UserDetailView.xaml b/AdventureWorks.MAUI/Views/UserDetailView.xaml
index d822129..d2affd9 100644
--- a/AdventureWorks.MAUI/Views/UserDetailView.xaml
+++ b/AdventureWorks.MAUI/Views/UserDetailView.xaml
@@ -5,71 +5,78 @@
              xmlns:partial="clr-namespace:AdventureWorks.MAUI.ViewsPartial"
              Title="User Information">
 
-    <Grid RowDefinitions="Auto, Auto, Auto,Auto, Auto, Auto , Auto"
+    <Border Style="{StaticResource Border.Page}">
+        <ScrollView>
+            <Grid RowDefinitions="Auto, Auto, Auto, Auto,Auto, Auto, Auto , Auto"
           ColumnDefinitions="Auto, *"
           Style="{StaticResource Grid.Page}">
 
 
-        <partial:HeaderView Grid.Row="0"
+                <partial:HeaderView Grid.Row="0"
                             Grid.ColumnSpan="2"
                             ViewTitle="User Information"
                             ViewDescription="Use this Screen to Modify User Information." />
 
-        <Label Grid.Row="1"
+                <Label Grid.Row="1"
                Text="Login ID" />
-        
-        <VerticalStackLayout Grid.Row="3"
+
+                <VerticalStackLayout Grid.Row="3"
                              Grid.Column="1">
-            <Entry Text="" 
+                    <Entry Text="" 
                    Placeholder="Please use a combination of letters and numbers."/>
-            <Label FontSize="Micro"
+                    <Label FontSize="Micro"
                    Text="Please use a combination of letters and numbers." />
-        </VerticalStackLayout>
-        <Label Grid.Row="2"
+                </VerticalStackLayout>
+                <Label Grid.Row="2"
                Text="First Name" />
-        <Entry Grid.Row="2"
+                <Entry Grid.Row="2"
                Grid.Column="1"
                Text=""/>
-        <Label Grid.Row="3"
+                <Label Grid.Row="3"
                Text="Last Name" />
-        <Entry Grid.Row="3"
+                <Entry Grid.Row="3"
                Grid.Column="1"
                Text=""/>
-        <Label Grid.Row="4"
+                <Label Grid.Row="4"
                Text="Email Address" />
-        <Entry Grid.Row="4"
+                <Entry Grid.Row="4"
                Grid.Column="1"
                Text=""/>
-        <Label Grid.Row="5" Text="Is Enrolled ?"/>
-        
-        <FlexLayout Grid.Row="5"
+                <Label Grid.Row="5" Text="Is Enrolled ?"/>
+
+                <FlexLayout Grid.Row="5"
                     Grid.Column="1"
                     Wrap="Wrap"
                     Direction="Row">
-            <HorizontalStackLayout>
-                <Label Text="401k?"/>
-                <CheckBox IsChecked="True"/>
-            </HorizontalStackLayout>
-            <HorizontalStackLayout >
-                <Label Text="Flex Time?"/>
-                <CheckBox IsChecked="False"/>
-            </HorizontalStackLayout>
-            <HorizontalStackLayout >
-                <Label Text="Health Care?"/>
-                <CheckBox IsChecked="True"/>
-            </HorizontalStackLayout>
-            <HorizontalStackLayout >
-                <Label Text="Health Savings Account?"/>
-                <CheckBox IsChecked="True"/>
-            </HorizontalStackLayout>
-        </FlexLayout>
-        <HorizontalStackLayout Grid.Row="6"
+                    <HorizontalStackLayout>
+                        <Label Text="401k?"/>
+                        <CheckBox IsChecked="True"/>
+                    </HorizontalStackLayout>
+                    <HorizontalStackLayout >
+                        <Label Text="Flex Time?"/>
+                        <CheckBox IsChecked="False"/>
+                    </HorizontalStackLayout>
+                    <HorizontalStackLayout >
+                        <Label Text="Health Care?"/>
+                        <CheckBox IsChecked="True"/>
+                    </HorizontalStackLayout>
+                    <HorizontalStackLayout >
+                        <Label Text="Health Savings Account?"/>
+                        <CheckBox IsChecked="True"/>
+                    </HorizontalStackLayout>
+                </FlexLayout>
+
+                <partial:AddressView Grid.Row="6"
+                              Grid.ColumnSpan="2" />
+
+                <HorizontalStackLayout Grid.Row="7"
                                Grid.Column="1"
                                Spacing="5">
-            <Button Text="Save" />
-            <Button Text="Cancel" />
-        </HorizontalStackLayout>
-    </Grid>
-
+                    <Button Text="Save" />
+                    <Button Text="Cancel" />
+                </HorizontalStackLayout>
+            </Grid>
+        </ScrollView>
+    </Border>
 
 </ContentPage>
\ No newline at end of file
diff --git a/AdventureWorks.MAUI/ViewsPartial/AddressView.xaml b/AdventureWorks.MAUI/ViewsPartial/AddressView.xaml
new file mode 100644
index 0000000..20b156f
--- /dev/null
+++ b/AdventureWorks.MAUI/ViewsPartial/AddressView.xaml
@@ -0,0 +1,38 @@
+<?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="AdventureWorks.MAUI.ViewsPartial.AddressView">
+    <Frame>
+        <StackLayout>
+            <Label Text="Address Information"
+                   FontSize="Small"
+                   FontAttributes="Bold"    />
+            <BoxView Color="Gray"
+                     HeightRequest="1"
+                     HorizontalOptions="Fill"/>
+            <Grid RowDefinitions="Auto,Auto,Auto,Auto"
+                  ColumnDefinitions="Auto,*"
+                  Style="{StaticResource Grid.Page}">
+                <Label Grid.Row="0"
+                       Text="Street"/>
+                <Entry Grid.Row="0"
+                       Grid.Column="1"/>
+                <Label Grid.Row="1"
+                       Text="City"/>
+                <Entry Grid.Row="1"
+                       Grid.Column="1"
+                       Text="" />
+                <Label Grid.Row="2"
+                       Text="State/Province"/>
+                <Entry Grid.Row="2"
+                       Grid.Column="1"
+                       Text="" />
+                <Label Grid.Row="3"
+                       Text="Postal Code"/>
+                <Entry Grid.Row="3"
+                       Grid.Column="1"
+                       Text="" />
+            </Grid>
+        </StackLayout>
+    </Frame>
+</ContentView>
diff --git a/AdventureWorks.MAUI/ViewsPartial/AddressView.xaml.cs b/AdventureWorks.MAUI/ViewsPartial/AddressView.xaml.cs
new file mode 100644
index 0000000..641f7ef
--- /dev/null
+++ b/AdventureWorks.MAUI/ViewsPartial/AddressView.xaml.cs
@@ -0,0 +1,9 @@
+namespace AdventureWorks.MAUI.ViewsPartial;
+
+public partial class AddressView : ContentView
+{
+	public AddressView()
+	{
+		InitializeComponent();
+	}
+}
\ No newline at end of file