Header and footer fixed with expander floating - xaml

Question

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

Answer 1

CollectionView Headers and Footers are not designed with the idea that they are supposed to stick to a particular area of the screen they are like screen the header and the footer of your list so if it contracts they come close to each other with it.
But if you want a View that sticks to the bottom of the screen regardless of what you add to it just use a Grid to do this instead.
<Grid RowDefinitions="Auto,*,Auto">
<StackLayout Grid.Row="0" >
<!--Whatever view you wanna display...-->
</StackLayout>
<CollectionView Grid.Row= "1">
......
</CollectionView >
<StackLayout Grid.Row="2" >
<!--Whatever view you wanna display...-->
</StackLayout>
</Grid>
Hope this helps,
Feel free to ask me if you have queries