I'm using Shell with buttom nav and want to be able to have one of the tabs as a TabbedPage. Also one of my contentpages in Shell have a toolbar item which leads to a tabbedpage, this also does not work in iOS, but both working fine in Android.
What I mean by not working is that even though I set the background color to white, I just get a black "blank-screen", I see nothing.
I tried to create a new TabbedPage, same issue, tryed the newest 3.6 forms release and also the 4.0 beta 9pre release, still same issue.
Update
Here is my tabbedpage:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Page.TabbedPageTest"
BackgroundColor="White">
<!--Pages can be added as references or inline-->
<ContentPage Title="Tab 1" BackgroundColor="White">
<Label Text="Label in tab 1" TextColor="Orange" />
</ContentPage>
<ContentPage Title="Tab 2" BackgroundColor="White">
<Label Text="Label in tab 2" TextColor="Orange" />
</ContentPage>
<ContentPage Title="Tab 3" BackgroundColor="White">
<Label Text="Label in tab 3" TextColor="Orange" />
</ContentPage>
</TabbedPage>
Here is where I load it:
<ShellItem>
<ShellSection Title="PageOne" Icon="ic_action_myicon1.png">
<ShellContent ContentTemplate="{DataTemplate local:MyListView}" />
</ShellSection>
<ShellSection Title="PageTwo" Icon="ic_action_myicon2.png">
<ShellContent ContentTemplate="{DataTemplate local:MyContentPage}" />
</ShellSection>
<ShellSection Title="PageThree" Icon="ic_action_myicon3.png">
<ShellContent ContentTemplate="{DataTemplate local:TabbedPageTest}"/>
</ShellSection>
</ShellItem>
The listview and contentPage works fine. The TabbedPage are just black from top to buttom.
Related
Just a simple project of maui,it use tabbar shell
------AppShell-----
<Shell
x:Class="TABSample.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TABSample"
Shell.FlyoutBehavior="Disabled">
<TabBar>
<Tab Title="Test">
<ShellContent Title="Test1" ContentTemplate="{DataTemplate local:NewPage1}" />
<ShellContent Title="Test2" ContentTemplate="{DataTemplate local:NewPage2}" />
</Tab>
</TabBar>
</Shell>
-----NewPage1---------------
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TABSample.NewPage1"
Title="NewPage1">
<StackLayout>
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
-----------Iphone 14 pro IOS 16.2------------------
enter image description here
cannot see the label text
----------Android--------------------------
enter image description here
A part of tabbedPage is sheltered in IOS, the reason is iOS Simulator? Screen content is only shown in a part of screen in iOS Simulator
but ohter page is ok
Yes I could reproduce your issue. Just as #Bas H mentioned, the control is behind the tabs. I also found the same issue in Github: Contentpage is cut off in iOS #8778. You could follow it.
For a workaround, you could set the page padding
protected override void OnAppearing()
{
base.OnAppearing();
Padding = new Thickness(0, 40, 0, 0);
}
or set like #Bas H suggested but i think use Margin is better:
<VerticalStackLayout Margin="{x:OnPlatform iOS='0,40,0,0', Android='0'}" >
In this example,
enter image description here
click the item item to jump to the detail page,
enter image description here
but I don't want to display the bottom tab on the total page. I used [shell. Current. Navigation. Pushmodal async], but the result is that it doesn't realize the top navigation bar. Now I want to ask how to jump to display the top navigation bar without displaying the bottom tab
some code:
<FlyoutItem Route="animals"
FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="Domestic"
Route="domestic"
Icon="paw.png">
<ShellContent Route="cats"
Style="{StaticResource DomesticShell}"
Title="Cats"
Icon="cat.png"
ContentTemplate="{DataTemplate views:CatsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
</Tab>
<ShellContent Route="monkeys"
Style="{StaticResource MonkeysShell}"
Title="Monkeys"
Icon="monkey.png"
ContentTemplate="{DataTemplate views:MonkeysPage}" />
<ShellContent Route="elephants"
Style="{StaticResource ElephantsShell}"
Title="Elephants"
Icon="elephant.png"
ContentTemplate="{DataTemplate views:ElephantsPage}" />
<ShellContent Route="bears"
Style="{StaticResource BearsShell}"
Title="Bears"
Icon="bear.png"
ContentTemplate="{DataTemplate views:BearsPage}" />
</FlyoutItem>
and
await Shell.Current.GoToAsync($"//animals/monkeys/monkeydetails?name={monkeyName}");
Now I want to ask how to jump to display the top navigation bar
without displaying the bottom tab
The simplest method is to add following code for your detail page:
Shell.TabBarIsVisible="False"
The whole sample code is:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xaminals.Views.ElephantDetailPage"
Shell.TabBarIsVisible="False"
Title="Elephant Details">
<ScrollView>
<StackLayout Margin="20">
<!--other code-->
</StackLayout>
</ScrollView>
</ContentPage>
I make a customize title in the titleview,
and I want to show different content(with other pages) by pressing the tabs I customize.(like pic shows below)
I am wondering how to change the content with different pages...
<ContentPage>
<NavigationPage.TitleView>
<Button x:Name="energy" />
<Button x:Name="history" />
...
</NavigationPage.TitleView>
<ContentPage.Content>
//when I press energy, and content shows the Energy.xaml
//when I press history, and content shows the History.xaml
</ContentPage.Content>
</ContentPage>
You can use TabView from XamarinCommunityToolkit package, here is a sample page you can find it in their sample repo.
<ContentPage xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
...
>
<ContentPage.Content>
<Grid>
<xct:TabView
TabStripBackgroundColor="Blue"
TabStripHeight="40"
TabIndicatorColor="Yellow"
TabContentBackgroundColor="Yellow">
<xct:TabViewItem
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<--Here you define the content of Tab1 -->
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<--Here you define the content of Tab2 : it can be the ContentView defined in your Energy.xaml -->
</xct:TabViewItem>
</xct:TabView>
</Grid>
<ContentPage.Content>
</ContentPage>
There is plenty of stuff you can customize take a look at the official documentation.
I have a master detail page with a burger icon at the top that shows the drawer menu. But the master detail itself is only one page, id like it to be 2 pages ( like in the tabbed page, where u can swipe between the two).
I have tried the following:
<MasterDetailPage.Detail>
<TabbedPage>
<TabbedPage.Children>
<ContentPage Title="Page 1" Icon="ja.png" />
<ContentPage Title="Page 2" Icon="ja.png" />
<ContentPage Title="Page 3" Icon="ja.png" />
</TabbedPage.Children>
</TabbedPage>
</MasterDetailPage.Detail>
This does display mulitple pages inside the master detail, but it also removes the burger and the whole navigation bar also.
Is there a way to enable a tabbed page inside a master detail and still have the navigation bar with the burger icon?
Thank you!
I only works when you have another page that is a tabbed page and render it here:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Q2go.View.MasterDetailPage1"
xmlns:pages="clr-namespace:Q2go.View">
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:TabbedPage1/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Try wrapping your TabbedPage in a NavigationPage as such:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<TabbedPage>
<TabbedPage.Children>
<ContentPage Title="Page 1" Icon="ja.png" />
<ContentPage Title="Page 2" Icon="ja.png" />
<ContentPage Title="Page 3" Icon="ja.png" />
</TabbedPage.Children>
</TabbedPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
Image:
I would like to add a frame to toolbar in Xamarin forms. But toolbar is not accepting.
You cannot add a frame as a Toolbar Item.
You can use, for example the TitleView and customize the whole NavigationView yourself.
For example:
<?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:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Label Text="Hello World" HorizontalOptions="Center"/>
<Frame BackgroundColor="Yellow" HorizontalOptions="End"/>
</StackLayout>
</NavigationPage.TitleView>
</ContentPage>