I'm building a page in XAML. On this page I want to make the header and footer fixed. The content will have a scrool and will also have a floating button with the expander.
The code is like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- MAIN CONTAINER -->
<Grid Grid.Row="0" RowSpacing="0" BackgroundColor="#e6e6e6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- CUSTOM NAVBAR -->
<Grid Grid.Row="0" BackgroundColor="{DynamicResource DarkAccentColor}" HeightRequest="64">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<!-- BACK ICON -->
<ffimageloading:CachedImage Grid.Column="0" HeightRequest="20" WidthRequest="20" Margin="0,0,0,12" VerticalOptions="End" HorizontalOptions="Center" BackgroundColor="Transparent" CacheType="All" FadeAnimationEnabled="false" Opacity="1" Source="{StaticResource BackArrowWhite}" Aspect="AspectFit">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateBackCommand}"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<!-- APP NAME -->
<Label Grid.Column="1" VerticalOptions="End" Margin="5,0,0,10" Text="{Binding PageTitle}" FontSize="20" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource BaseTextColor }" />
<!-- SETTINGS ICON -->
<ffimageloading:CachedImage Grid.Column="2" HeightRequest="20" WidthRequest="20" Margin="0,0,10,12" VerticalOptions="End" HorizontalOptions="Center" BackgroundColor="Transparent" CacheType="All" FadeAnimationEnabled="false" Opacity="1" Source="{StaticResource ThreeDotsWhite}" Aspect="AspectFit">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateToSettingsCommand}"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
<!-- MAIN AREA -->
<ScrollView Grid.Row=1" BackgroundColor="#e6e6e6" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" Margin="0">
<!-- MAIN GRID -->
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="4" />
<RowDefinition Height="Auto" />
<RowDefinition Height="0" />
<RowDefinition Height="Auto" />
<RowDefinition Height="0" />
<RowDefinition Height="Auto" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Expander One -->
<xct:Expander Grid.Row="1" Background="Transparent" ExpandAnimationLength="500" CollapseAnimationLength="500" Padding="10,0,10,10">
<xct:Expander.Header>
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent" Padding="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{ StaticResource CollapseUp }" HeightRequest="15" WidthRequest="15" HorizontalOptions="End" VerticalOptions="Start" Margin="5,5,0,0">
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}" Value="True">
<Setter Property="Source" Value="{ StaticResource CollapseDown }" />
</DataTrigger>
</Image.Triggers>
</Image>
<Label Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoRegular}" VerticalOptions="End" Margin="15,0,0,0" Text="Expander One" FontSize="18" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource ServiceOrderInfoValueColor }" />
</Grid>
</xct:Expander.Header>
<xct:Expander.ContentTemplate>
<DataTemplate>
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- SEPARATOR -->
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Opacity="0.30" Margin="0,10" HeightRequest="0.8" Color="#9B9B9B"/>
</Grid>
</DataTemplate>
</xct:Expander.ContentTemplate>
</xct:Expander>
<!-- Expander Two -->
<xct:Expander Grid.Row="3" Background="Transparent" ExpandAnimationLength="500" CollapseAnimationLength="500" Padding="10,0,10,10">
<xct:Expander.Header>
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent" Padding="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{ StaticResource CollapseUp }" HeightRequest="15" WidthRequest="15" HorizontalOptions="End" VerticalOptions="Start" Margin="5,5,0,0">
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}" Value="True">
<Setter Property="Source" Value="{ StaticResource CollapseDown }" />
</DataTrigger>
</Image.Triggers>
</Image>
<Label Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoRegular}" VerticalOptions="End" Margin="15,0,0,0" Text="Expander Two" FontSize="18" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource ServiceOrderInfoValueColor }" />
</Grid>
</xct:Expander.Header>
<xct:Expander.ContentTemplate>
<DataTemplate>
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
</DataTemplate>
</xct:Expander.ContentTemplate>
</xct:Expander>
<!-- Expander Three -->
<xct:Expander Grid.Row="5" Background="Transparent" ExpandAnimationLength="500" CollapseAnimationLength="500" Padding="10,0,10,10">
<xct:Expander.Header>
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent" Padding="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{ StaticResource CollapseUp }" HeightRequest="15" WidthRequest="15" HorizontalOptions="End" VerticalOptions="Start" Margin="5,5,0,0">
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}" Value="True">
<Setter Property="Source" Value="{ StaticResource CollapseDown }" />
</DataTrigger>
</Image.Triggers>
</Image>
<Label Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoRegular}" VerticalOptions="End" Margin="15,0,0,0" Text="Expander Three" FontSize="18" FontAttributes="None" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Center" TextColor="{ DynamicResource ServiceOrderInfoValueColor }" />
</Grid>
</xct:Expander.Header>
<xct:Expander.ContentTemplate>
<DataTemplate>
<Grid VerticalOptions="StartAndExpand" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- SEPARATOR -->
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Opacity="0.30" Margin="0,10" HeightRequest="0.8" Color="#9B9B9B"/>
</Grid>
</DataTemplate>
</xct:Expander.ContentTemplate>
</xct:Expander>
</Grid>
</ScrollView>
<!-- Footer -->
<Grid Grid.Row="2" BackgroundColor="White" RowSpacing="10" ColumnSpacing="20" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- YES BUTTON -->
<artina:Button BorderColor="#7b7b7b" BorderWidth="1" Grid.Column="0" Grid.Row="0" FontFamily="{StaticResource RobotoMonoBold}" Margin="15" FontSize="14" FontAttributes="Bold" Style="{StaticResource RatButtonStylePrevious}" VerticalOptions="EndAndExpand" Text="Back" WidthRequest="160" Command="{Binding ToBack}"/>
<!-- NO BUTTON-->
<artina:Button Grid.Column="1" Grid.Row="0" FontFamily="{StaticResource RobotoMonoBold}" Margin="15" FontSize="14" FontAttributes="Bold" Style="{StaticResource RatButtonStyleNext}" VerticalOptions="EndAndExpand" Text="Next" WidthRequest="160" Command="{Binding ToNext}"/>
</Grid>
</Grid>
</Grid>
<!-- Floating expander -->
<Frame CornerRadius="30"
Padding="15"
Margin="0,0,15,40"
HorizontalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"
VerticalOptions="End">
<xct:Expander Rotation="180">
<xct:Expander.Header>
<Label
Style="{StaticResource LabelStyle}"
Text="Item">
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
TargetType="Label" Value="True">
<Setter Property="Text" Value="a" />
</DataTrigger>
</Label.Triggers>
</Label>
</xct:Expander.Header>
<StackLayout>
<Label Style="{StaticResource LabelStyle}"
Text="01" />
<Label Style="{StaticResource LabelStyle}"
Text="02" />
<Label Style="{StaticResource LabelStyle}"
Text="03" />
</StackLayout>
</xct:Expander>
</Frame>
</AbsoluteLayout>
</ContentPage>
But I'm not able to make the footer fixed, there is always some conflict with my floating expander
