I've created an app in Maui with a TabbedPage at the bottom. But I would like to have a fixed expander at the bottom just above the tabs which will always be visible. It's an app to listen to music from a stream and therefore it's not convenient as the user switches to another page and the music keeps stop playing. And when the user clicks on the expander, they will see extra info about the songs and can choose another stream.
How can I do this? I already tried to create a ContentPage and added a grid where I added a TabbedPage. But at Debug, it works fine but not in release.
Here is my MainPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=";
xmlns:x=";
x:Class="KickitRadio.MainPage"
xmlns:tool=";
xmlns:viewmodels="clr-namespace:KickitRadio.ViewModels"
xmlns:views="clr-namespace:KickitRadio.Views"
Title="MainPage">
<NavigationPage.TitleView>
<Image Source="kickit_logo_new.jpg" Aspect="AspectFill" HorizontalOptions="Center" VerticalOptions="Center" />
</NavigationPage.TitleView>
<ContentPage.BindingContext>
<viewmodels:MainPageModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<Grid RowDefinitions="*" ColumnDefinitions="*">
<Grid x:Name="tabView" Grid.Row="0">
<TabbedPage xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
xmlns:windows="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;assembly=Microsoft.Maui.Controls"
windows:TabbedPage.HeaderIconsEnabled="True" Padding="0, 0,0,10"
android:TabbedPage.ToolbarPlacement="Bottom" Grid.Row="1" BackgroundColor="Black">
<views:HomePage BackgroundColor="Black" />
<views:NewsPage BackgroundColor="Black" />
<views:RequestPage BackgroundColor="Black" />
<views:StreamsPage BackgroundColor="Black" />
<views:ThemeSwitch BackgroundColor="Black" />
</TabbedPage>
<StackLayout Margin="0,0,0,2" VerticalOptions="End" Grid.Row="2">
<tool:Expander Padding="0" BackgroundColor="#3184ca" Margin="0" Direction="Down">
<tool:Expander.Header>
<Grid RowDefinitions="*" ColumnDefinitions="60, 8*, 55">
<ImageButton BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0"
HorizontalOptions="Start" x:Name="btnPushPlay" Command="{Binding btnPlay}">
<ImageButton.Source>
<FileImageSource File="{Binding playImage}" />
</ImageButton.Source>
</ImageButton>
<Label Text="{Binding lblSongInfo}" FontSize="16" TextColor="White" Grid.Row="0" Grid.Column="1" x:Name="lblSong" Margin="0,4,0,0" />
<ImageButton BackgroundColor="Transparent" Source="arrow_collapse.png" Grid.Column="2" Grid.Row="0">
<ImageButton.Triggers>
<DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type tool:Expander}}, Path=IsExpanded}" TargetType="ImageButton" Value="true">
<Setter Property="Rotation" Value="180" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
</Grid>
</tool:Expander.Header>
<Border BackgroundColor="Black" HeightRequest="320" Padding="2,12,5,0">
<Grid Padding="0, 0, 0, 0" Margin="0" RowDefinitions="35, 25, 30, 35, 25, 30, 35, 25, 30">
<Border Margin="0" BackgroundColor="#2F2F2F" Grid.Row="0" Padding="0, 4">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="Now on air:" TextColor="#FFFFFF" FontAttributes="Italic,Bold" FontSize="18" Grid.Column="0" Padding="8,0,0,0" />
<Label Text="{Binding trackCounter}" FontSize="18" TextColor="#4786C6" Grid.Column="1" Padding="0,4,0,0" />
</Grid>
</Border>
<Label Text="{Binding lblArtistNow}" TextColor="#4786C6" FontSize="18" Grid.Row="1" Padding="8,0,0,0" />
<Label Text="{Binding lblTitleNow}" TextColor="#646664" FontSize="16" FontAttributes="Italic" Grid.Row="2" Padding="8,0,0,0" />
<Border BackgroundColor="#2F2F2F" Grid.Row="3" Padding="0,4,0,0">
<Label Text="Previously:" TextColor="#FFFFFF" FontAttributes="Italic" FontSize="18" Padding="15,0" />
</Border>
<Label Text="{Binding lblArtistPrevious}" TextColor="#4786C6" FontSize="18" Grid.Row="4" Padding="8,0,0,0"/>
<Label Text="{Binding lblTitlePrevious}" TextColor="#646664" FontSize="16" FontAttributes="Italic" Grid.Row="5" Padding="8,0,0,0" />
<Border BackgroundColor="#2F2F2F" Grid.Row="6" Padding="0, 5">
<Label Text="Coming up:" TextColor="White" FontAttributes="Italic" FontSize="18" Padding="15,0" />
</Border>
<Label Text="{Binding lblArtistNext}" TextColor="#4786C6" FontSize="18" Grid.Row="7" Padding="8,0,0,0" />
<Label Text="{Binding lblTitleNext}" TextColor="#646664" FontSize="16" FontAttributes="Italic" Grid.Row="8" Padding="8,0,0,0" />
</Grid>
</Border>
</tool:Expander>
</StackLayout>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>