Merge PR #270 from webwarrior-ws/stacklayout-to-grid

Extracted some things from MAUI PR:
#241

src/GWallet.Frontend.XF/BalancesPage.xaml

@@ -4,81 +4,91 @@
              xmlns:local="clr-namespace:GWallet.Frontend.XF"
              xmlns:controls="clr-namespace:GWallet.Frontend.XF.Controls"
              x:Class="GWallet.Frontend.XF.BalancesPage">
-    <StackLayout x:Name="mainLayout"
-                 Padding="0,0,0,0"
-                 VerticalOptions="FillAndExpand">
+    <Grid
+        x:Name="mainLayout"
+        Padding="0,0,0,0"
+        RowDefinitions="*,Auto,Auto"
+        RowSpacing="0"
+        VerticalOptions="FillAndExpand"
+    >
 
-        <StackLayout Orientation="Horizontal"
-                     Padding="15, 10"
-                     Spacing="30"
-                     VerticalOptions="FillAndExpand"
-                     HorizontalOptions="FillAndExpand">         
+        <FlexLayout 
+            Direction="Row"
+            JustifyContent="SpaceEvenly"
+            AlignItems="Center"
+            Margin="15, 10"
+            VerticalOptions="FillAndExpand"
+            HorizontalOptions="FillAndExpand"
+            Grid.Row="0"
+        >
 
             <!-- we add {V|H}Options=Center* not only to the Label, as a workaround to
             https://github.com/xamarin/Xamarin.Forms/issues/4655 -->
             <Frame x:Name="totalFiatAmountFrame" 
                    HasShadow="false"
                    BackgroundColor="Transparent"
                    BorderColor="Transparent"
-                   VerticalOptions="CenterAndExpand"
-                   HorizontalOptions="End"
+                   VerticalOptions="Center"
                    Padding="0"
-                   Margin="0,0,0,0">
-                <StackLayout x:Name="totalFiatAmountLayout"
-                             Orientation="Horizontal"
-                             VerticalOptions="CenterAndExpand"
-                             HorizontalOptions="Center"
-                             Margin="0,0,0,0">
-                    <Label Text="..." x:Name="totalFiatAmountLabel"
-                           VerticalOptions="CenterAndExpand"
-                           HorizontalOptions="Center"
+                   Margin="0,0,10,0"
+            >
+                <Label Text="..." x:Name="totalFiatAmountLabel"
                            Margin="0,0,0,0"
                            FontSize="22" />
-                </StackLayout>
             </Frame>
 
-            <!-- keep this frame&stacklayout&label below almost same as previous! -->
+            <!-- keep this frame&label below almost same as previous! -->
             <Frame x:Name="totalReadOnlyFiatAmountFrame"
                    HasShadow="false"
                    IsVisible="false"
                    BackgroundColor="Transparent"
                    BorderColor="Transparent"
-                   VerticalOptions="CenterAndExpand"
-                   HorizontalOptions="End"
+                   VerticalOptions="Center"
                    Padding="0"
-                   Margin="0,0,0,0">
-                <StackLayout x:Name="totalReadOnlyFiatAmountLayout"
-                             Orientation="Horizontal"
-                             VerticalOptions="CenterAndExpand"
-                             HorizontalOptions="Center"
-                             Margin="0,0,0,0">
-                    <Label Text="..." x:Name="totalReadOnlyFiatAmountLabel"
-                           VerticalOptions="CenterAndExpand"
-                           HorizontalOptions="Center"
+                   Margin="0,0,10,0"
+            >
+                <Label Text="..." x:Name="totalReadOnlyFiatAmountLabel"
                            Margin="0,0,0,0"
                            FontSize="22"
                            TextColor="DarkBlue" />
-                </StackLayout>
             </Frame>
 
             <controls:CircleChartView x:Name="normalChartView"
                                      HorizontalOptions="FillAndExpand"
-                                     VerticalOptions="FillAndExpand"/>
-
+                                     VerticalOptions="FillAndExpand"
+                                     FlexLayout.Grow="1.0"
+                                     FlexLayout.AlignSelf="Stretch"
+            />
+
             <controls:CircleChartView x:Name="readonlyChartView"
                                      IsVisible="False"
                                      HorizontalOptions="FillAndExpand"
-                                     VerticalOptions="FillAndExpand"/>
+                                     VerticalOptions="FillAndExpand"
+                                     FlexLayout.Grow="1.0"
+                                     FlexLayout.AlignSelf="Stretch"/>
 
-        </StackLayout>
+        </FlexLayout>
 
-        <ScrollView HorizontalOptions="FillAndExpand">
-            <StackLayout x:Name="contentLayout" />
+        <ScrollView
+            HorizontalOptions="FillAndExpand"
+            Grid.Row="1"
+        >
+            <Grid x:Name="contentLayout" />
         </ScrollView>
 
-        <Label Text="www.geewallet.com" x:Name="footerLabel"
+        <Frame x:Name="footerLabelFrame"
+               Grid.Row="2"
                VerticalOptions="End"
                HorizontalOptions="Center"
-               Margin="0,10,0,10" />
-    </StackLayout>
+               BorderColor="Transparent"
+               BackgroundColor="Transparent"
+               Margin="0"
+               Padding="0"
+        >
+            <Label
+                x:Name="footerLabel"
+                Text="www.geewallet.com"
+            />
+        </Frame>
+    </Grid>
 </ContentPage>

src/GWallet.Frontend.XF/BalancesPage.xaml.fs

@@ -40,10 +40,10 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
     let normalAccountsBalanceSets = normalBalanceStates.Select(fun balState -> balState.BalanceSet)
     let readOnlyAccountsBalanceSets = readOnlyBalanceStates.Select(fun balState -> balState.BalanceSet)
-    let mainLayout = base.FindByName<StackLayout>("mainLayout")
+    let mainLayout = base.FindByName<Grid> "mainLayout"
     let totalFiatAmountLabel = mainLayout.FindByName<Label> "totalFiatAmountLabel"
     let totalReadOnlyFiatAmountLabel = mainLayout.FindByName<Label> "totalReadOnlyFiatAmountLabel"
-    let contentLayout = base.FindByName<StackLayout> "contentLayout"
+    let contentLayout = base.FindByName<Grid> "contentLayout"
     let normalChartView = base.FindByName<CircleChartView> "normalChartView"
     let readonlyChartView = base.FindByName<CircleChartView> "readonlyChartView"
 
@@ -134,7 +134,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                                             tail
                                             totalFiatAmountLabel
 
-    let rec FindCryptoBalances (cryptoBalanceClassId: string) (layout: StackLayout) 
+    let rec FindCryptoBalances (cryptoBalanceClassId: string) (layout: Grid) 
                                (elements: List<View>) (resultsSoFar: List<Frame>): List<Frame> =
         match elements with
         | [] -> resultsSoFar
@@ -239,7 +239,12 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
             for activeCryptoBalance in activeCryptoBalances do
                 activeCryptoBalance.IsVisible <- true
         else
-            for balanceState in balances do
+            for _ in balances do
+                contentLayout.RowDefinitions.Add(
+                    RowDefinition(Height = GridLength.Auto)
+                )
+
+            balances |> Seq.iteri (fun balanceIndex balanceState ->
                 let balanceSet = balanceState.BalanceSet
                 let tapGestureRecognizer = TapGestureRecognizer()
                 tapGestureRecognizer.Tapped.Subscribe(fun _ ->
@@ -252,6 +257,9 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                 frame.GestureRecognizers.Add tapGestureRecognizer
                 contentLayout.Children.Add frame
 
+                Grid.SetRow(frame, balanceIndex)
+            )
+
         contentLayout.BatchCommit()
 
     member __.UpdateGlobalFiatBalanceSum (fiatBalancesList: List<MaybeCached<decimal>>) totalFiatAmountLabel =
@@ -498,6 +506,12 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
         self.BalanceRefreshCancelSources <- Seq.empty
 
     member private self.Init () =
+        if Device.RuntimePlatform = Device.GTK then
+            // workaround layout issues in Xamarin.Forms/GTK
+            mainLayout.RowDefinitions.[1] <- RowDefinition(
+                Height = GridLength 550.0
+            )
+
         normalChartView.DefaultImageSource <- FrontendHelpers.GetSizedImageSource "logo" 512
         readonlyChartView.DefaultImageSource <- FrontendHelpers.GetSizedImageSource "logo" 512
 

src/GWallet.Frontend.XF/Controls/CircleChartView.fs

@@ -144,14 +144,15 @@ type CircleChartView () =
        ()         
 
     member private self.CreateAndSetImageSource (imageSource : ImageSource) =
-        let image =
-            Image (
-                HorizontalOptions = LayoutOptions.FillAndExpand,
-                VerticalOptions = LayoutOptions.FillAndExpand,
-                Aspect = Aspect.AspectFit,
-                Source = imageSource
-            )
-        self.Content <- image
+        if not (self.Content :? Image) then
+            let image =
+                Image (
+                    HorizontalOptions = LayoutOptions.FillAndExpand,
+                    VerticalOptions = LayoutOptions.FillAndExpand,
+                    Aspect = Aspect.AspectFit,
+                    Source = imageSource
+                )
+            self.Content <- image
 
     member self.Draw () =
         let width = 

src/GWallet.Frontend.XF/LoadingPage.xaml

@@ -3,7 +3,8 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:GWallet.Frontend.XF"
              x:Class="GWallet.Frontend.XF.LoadingPage">
-    <StackLayout x:Name="mainLayout"
+    <Grid x:Name="mainLayout"
+                 RowDefinitions="*,Auto,*"
                  Padding="20,150,20,50"
                  VerticalOptions="Start">
 
@@ -12,14 +13,17 @@
                HorizontalOptions="Center"
                IsVisible="false"
                Margin="40,40,40,40"
-               FontAttributes="Bold" FontSize="Large" />
+               FontAttributes="Bold" FontSize="Large"
+               Grid.Row="0"
+        />
 
         <StackLayout
             IsVisible="false"
             x:Name="progressBarLayout"
             Orientation="Horizontal"
             Spacing="0,0,0,0"
             HeightRequest="10"
+            Grid.Row="1"
             >
             <Frame BackgroundColor="Transparent"
                    BorderColor="Gray"
@@ -46,6 +50,8 @@
                VerticalOptions="End"
                HorizontalOptions="Center"
                IsVisible="false"
-               Margin="40,40,40,40" />
-    </StackLayout>
+               Margin="40,40,40,40"
+               Grid.Row="2"
+        />
+    </Grid>
 </ContentPage>

src/GWallet.Frontend.XF/LoadingPage.xaml.fs

@@ -19,7 +19,7 @@ type LoadingPage(state: FrontendHelpers.IGlobalAppState, showLogoFirst: bool) as
 
     let _ = base.LoadFromXaml(typeof<LoadingPage>)
 
-    let mainLayout = base.FindByName<StackLayout> "mainLayout"
+    let mainLayout = base.FindByName<Grid> "mainLayout"
     let titleLabel = mainLayout.FindByName<Label> "titleLabel"
     let progressBarLayout = base.FindByName<StackLayout> "progressBarLayout"
     let loadingLabel = mainLayout.FindByName<Label> "loadingLabel"

src/GWallet.Frontend.XF/PairingFromPage.xaml

@@ -32,17 +32,12 @@
                      VerticalOptions="CenterAndExpand"
                      >
             <zx:ZXingBarcodeImageView x:Name="qrCode"
-                                      BarcodeFormat="QR_CODE"
                                       HorizontalOptions="Start"
                                       VerticalOptions="Start"
                                       IsVisible="false"
                                       WidthRequest="400"
                                       HeightRequest="400"
                                       >
-                <zx:ZXingBarcodeImageView.BarcodeOptions>
-                    <zxcm:EncodingOptions Width="400"
-                                          Height="400" />
-                </zx:ZXingBarcodeImageView.BarcodeOptions>
             </zx:ZXingBarcodeImageView>
         </StackLayout>
         <StackLayout Padding="0,0,0,0"

src/GWallet.Frontend.XF/PairingFromPage.xaml.fs

@@ -33,6 +33,8 @@ type PairingFromPage(previousPage: Page,
             failwith "Couldn't find QR code"
         qrCode.BarcodeValue <- qrCodeContents
         qrCode.IsVisible <- true
+        qrCode.BarcodeFormat <- ZXing.BarcodeFormat.QR_CODE
+        qrCode.BarcodeOptions <- ZXing.Common.EncodingOptions(Width = 400, Height = 400)
 
         let nextStepButton = mainLayout.FindByName<Button> "nextStepButton"
         match nextButtonCaptionAndSendPage with

src/GWallet.Frontend.XF/PairingToPage.xaml

@@ -2,12 +2,14 @@
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="GWallet.Frontend.XF.PairingToPage">
-    <StackLayout x:Name="mainLayout"
+    <Grid x:Name="mainLayout"
+                 RowDefinitions="*,*,*,*"
                  Padding="10,10,10,10"
                  VerticalOptions="Center"
                  HorizontalOptions="FillAndExpand">
         <StackLayout Orientation="Horizontal"
                      HorizontalOptions="FillAndExpand"
+                     Grid.Row="0"
                      >
             <Label Text="Cold storage addresses:"
                    HorizontalOptions="Start"
@@ -34,17 +36,22 @@
                TextChanged="OnEntryTextChanged"
                IsSpellCheckEnabled="false"
                IsTextPredictionEnabled="false"
+               Grid.Row="1"
                 />
 
         <Button x:Name="pairButton"
                 Text="Pair"
                 IsEnabled="false"
                 HorizontalOptions="Center"
-                Clicked="OnPairButtonClicked"/>
+                Clicked="OnPairButtonClicked"
+                Grid.Row="2"
+        />
         <Button x:Name="cancelButton"
                 Text="Cancel"
                 IsEnabled="true"
                 HorizontalOptions="Center"
-                Clicked="OnCancelButtonClicked"/>
-    </StackLayout>
+                Clicked="OnCancelButtonClicked"
+                Grid.Row="3"
+        />
+    </Grid>
 </ContentPage>

src/GWallet.Frontend.XF/PairingToPage.xaml.fs

@@ -18,7 +18,7 @@ type PairingToPage(balancesPage: Page,
     inherit ContentPage()
     let _ = base.LoadFromXaml(typeof<PairingToPage>)
 
-    let mainLayout = base.FindByName<StackLayout>("mainLayout")
+    let mainLayout = base.FindByName<Grid> "mainLayout"
     let scanQrCodeButton = mainLayout.FindByName<Button>("scanQrCode")
     let coldAddressesEntry = mainLayout.FindByName<Entry>("coldStorageAddresses")
     let pairButton = mainLayout.FindByName<Button>("pairButton")