Xamarin Shell Floyout Tabs hiding parts of the content page

Question

I am using Xamarin Shell flyoutpage and have a tab menu on the button. When I load a content page from the floutpage the lower part of the content page is hidden behind the tabs

This is my appshell.xaml.cs

    <?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:EY365OCMobileApp" xmlns:local1="clr-namespace:EY365OCMobileApp.Pages"
             x:Class="EY365OCMobileApp.AppShell"
             Shell.TabBarBackgroundColor="White"
             Shell.TabBarUnselectedColor="Black"
             Shell.TabBarTitleColor="Gray"
             Shell.TitleColor="Black"
             Shell.BackgroundColor="White"
             Shell.ForegroundColor="Black"
             >
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Offerings" Icon="{local:ImageResource EY365OCMobileApp.Images.offeringsicon.png}" ContentTemplate="{DataTemplate local:OffersPage}" />
        <ShellContent Title="Products" Icon="{local:ImageResource EY365OCMobileApp.Images.assortmenticon.png}" ContentTemplate="{DataTemplate local:AssortmentPage}"/>
        <ShellContent Title="Cart" Icon="{local:ImageResource EY365OCMobileApp.Images.carticon.png}" ContentTemplate="{DataTemplate local:CartPage}"/>
        <ShellContent Title="Orders" Icon="{local:ImageResource EY365OCMobileApp.Images.yourordericon.png}" ContentTemplate="{DataTemplate local:OrdersPage}"/>
        <ShellContent Title="Sets" Icon="{local:ImageResource EY365OCMobileApp.Images.combinations.png}" ContentTemplate="{DataTemplate local1:ProductCombinations_Header}"/>
        <ShellContent Title="Questions" Icon="{local:ImageResource EY365OCMobileApp.Images.questionsproblemsicon.png}" ContentTemplate="{DataTemplate local:CasesPage}"/>
        <ShellContent Title="Notifications" Icon="{local:ImageResource EY365OCMobileApp.Images.notification.png}" ContentTemplate="{DataTemplate local1:ProductCombinations_Header}"/>
        <ShellContent Title="Sustainability" Icon="{local:ImageResource EY365OCMobileApp.Images.sustainability.png}" ContentTemplate="{DataTemplate local:SustainabilityPage}"/>
        <ShellContent Title="Our Stores" Icon="{local:ImageResource EY365OCMobileApp.Images.store.png}" ContentTemplate="{DataTemplate local1:StoreLocationPage}"/>
        <ShellContent Title="Settings" Icon="{local:ImageResource EY365OCMobileApp.Images.yourprofileicon.png}" ContentTemplate="{DataTemplate local:UserProfilePage}"/>
        <ShellContent Title="App News" Icon="{local:ImageResource EY365OCMobileApp.Images.appoverview.png}" ContentTemplate="{DataTemplate local1:AppOverviewPage}"/>
    </FlyoutItem>
    <MenuItem Text="Login" IconImageSource="{local:ImageResource EY365OCMobileApp.Images.login.png}" Clicked="OnSignIn"/>
</Shell>

And this is the content page I load (BTW: I set TitleColor to black but it is still white?!?!?)

<?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:local="clr-namespace:EY365OCMobileApp"
             x:Class="EY365OCMobileApp.OffersPage"
             ControlTemplate="{StaticResource SpeechBotIconTemplate}"
             Title="Offerings"
             BackgroundColor="white"
             Shell.TitleColor="white">
    
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Create Bug" Clicked="ToolbarItem_Clicked" Order="Default" Priority="0" IconImageSource="{local:ImageResource EY365OCMobileApp.Images.bugicon.png}"/>
    </ContentPage.ToolbarItems>
    <ContentPage.Content>

        <StackLayout>

            <CarouselView x:Name="CarouselView" IndicatorView="indicatorView">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Frame HasShadow="True"
                                       BorderColor="DarkGray"
                                       CornerRadius="5"
                                       Margin="20,20,20,80"
                                       
                                       HorizontalOptions="CenterAndExpand"
                                       VerticalOptions="FillAndExpand">
                                <AbsoluteLayout >

                                    <Image Source="{Binding ImageURL}" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" />
                                    <StackLayout Margin="20,20,20,20" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
                                        <Label Text="{Binding Name}"
                                                   FontAttributes="Bold"
                                                   FontSize="Large"
                                                   HorizontalOptions="CenterAndExpand"
                                                   VerticalOptions="Start"
                                                   TextColor="#FFE600" HorizontalTextAlignment="Center"/>
                                    </StackLayout>
                                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="1,1,1,.70" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
                                        <StackLayout Orientation="Vertical" Margin="20,20,20,20" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
                                            <Label Text="{Binding Offer}"
                                                       TextColor="White" 
                                                       VerticalOptions="StartAndExpand"
                                                       FontSize="Medium"/>
                                        </StackLayout>
                                    </AbsoluteLayout>
                                </AbsoluteLayout>
                            </Frame>
                            
                        </StackLayout>
                        
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <Label Text="Swipe for more!" TextColor="Black" FontSize="Small" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
            <IndicatorView x:Name="indicatorView"
                       IndicatorsShape="Square"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="DarkGray"
                       HorizontalOptions="Center"
                       Margin="0,0,0,40" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

I have tried to use margins but this did not helped here. Paddings create the same result. I want to have this as a fixed page and not a scrollview. So it should fit onto the screen of the device above the tabs

AbsoluteLayout.LayoutBounds="1,1,1,1" what happens if you change it for the Image Source — Bas H, Feb 19 '22 at 15:26
I have tested your code on my side.It looks like change the margin of the frame(the fourth value of margin) will help change the position of the CarouselView.Could you please help try it?Also,could you please provide a demo for this issue if possible? — Alexandar May - MSFT, Feb 21 '22 at 09:21
Yes, the frame margin value solved it. But to be honest this could not be the solution. I have other content pages where listviews having the same issue. There should be a solution where the Shell is reserving the space it needs for the tabs. However if you change your comment into a reply I can mark it as solution. Thank you guys! — Ricardo Jahn, Feb 22 '22 at 15:10

score 1 · Accepted Answer · answered Feb 24 '22 at 00:14

1

I have tested your code on my side.To be clear,changing the margin of the frame(the fourth value of margin) will help change the position of the CarouselView.

answered Feb 24 '22 at 00:14

Alexandar May - MSFT

6,536
1
8
15

Xamarin Shell Floyout Tabs hiding parts of the content page

1 Answers1