How to create a tabbed page in .Net Maui? - c#

I have a tabbed page in .Net Maui as follows :
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Pages.SomeClass"
xmlns:Controls="clr-namespace:MyApp.Resources.Controls"
xmlns:local="clr-namespace:MyApp.Pages"
Title="Some title">
<local:Page1 />
<local:Page2 />
<local:Page3 />
</TabbedPage>
The pages are more or less the same :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Pages.Page1"
xmlns:Controls="clr-namespace:MyApp.Resources.Controls"
xmlns:VerticalStackLayout="clr-namespace:MyApp.Resources.Controls"
Title="Vente">
<VerticalStackLayout>
<Label Text="Page 1"/>
</VerticalStackLayout>
</ContentPage>
C# code :
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
}
The tabbed page works properly on windows :
However on physical android device, I'm getting the following exception when opening my tabbed page. None of these pages have a C# stuff. They are 100% empty.
0xFFFFFFFFFFFFFFFF in Android.Runtime.JNIEnv.monodroid_debugger_unhandled_exception C#
0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:12,5 C#
0x23 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PPLLL_L at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:353,26 C#
0xEE in Microsoft.Maui.Controls.Handlers.TabbedPageManager.SetTabLayout at D:\a\_work\1\s\src\Controls\src\Core\Platform\Android\TabbedPageManager.cs:240,5 C#
0x1BD in Microsoft.Maui.Controls.Handlers.TabbedPageManager.SetElement at D:\a\_work\1\s\src\Controls\src\Core\Platform\Android\TabbedPageManager.cs:162,5 C#
0x20 in Microsoft.Maui.Controls.TabbedPage.CreatePlatformView at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\TabbedPage\TabbedPage.Android.cs:23,4 C#
0x10 in Microsoft.Maui.Controls.TabbedPage.OnCreatePlatformView at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\TabbedPage\TabbedPage.Android.cs:30,5 C#
0x15 in Microsoft.Maui.Handlers.ViewHandler<Microsoft.Maui.ITabbedView,Android.Views.View>.OnCreatePlatformView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:72,4 C#
0x1 in Microsoft.Maui.Handlers.ViewHandler.OnCreatePlatformElement at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandler.cs:119,4 C#
0x1 in Microsoft.Maui.Handlers.ElementHandler.CreatePlatformElement at D:\a\_work\1\s\src\Core\src\Handlers\Element\ElementHandler.cs:96,4 C#
0x49 in Microsoft.Maui.Handlers.ElementHandler.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\Element\ElementHandler.cs:52,4 C#
0x2 in Microsoft.Maui.Handlers.ViewHandler.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandler.cs:125,4 C#
0x2 in Microsoft.Maui.Handlers.ViewHandler<Microsoft.Maui.ITabbedView,Android.Views.View>.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:53,4 C#
0x7 in Microsoft.Maui.Handlers.ViewHandler<Microsoft.Maui.ITabbedView,Android.Views.View>.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:56,4 C#
0x65 in Microsoft.Maui.Controls.Element.SetHandler at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\Element\Element.Impl.cs:64,6 C#
0x2 in Microsoft.Maui.Controls.Element.set_Handler at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\Element\Element.Impl.cs:20,11 C#
0x18 in Microsoft.Maui.Controls.VisualElement.Microsoft.Maui.IElement.set_Handler at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\VisualElement\VisualElement.Impl.cs:301,5 C#
0xB0 in Microsoft.Maui.Platform.ElementExtensions.ToHandler at D:\a\_work\1\s\src\Core\src\Platform\ElementExtensions.cs:96,4 C#
0x2 in Microsoft.Maui.Platform.ViewExtensions.ToHandler at D:\a\_work\1\s\src\Core\src\Platform\ViewExtensions.cs:44,4 C#
0xAA in Microsoft.Maui.Controls.Platform.Compatibility.ShellContentFragment.OnCreateView at D:\a\_work\1\s\src\Controls\src\Core\Compatibility\Handlers\Shell\Android\ShellContentFragment.cs:145,4 C#
0x24 in AndroidX.Fragment.App.Fragment.n_OnCreateView_Landroid_view_LayoutInflater_Landroid_view_ViewGroup_Landroid_os_Bundle_ at C:\a\_work\3\s\generated\androidx.fragment.fragment\obj\Release\net6.0-android\generated\src\AndroidX.Fragment.App.Fragment.cs:1999,4 C#
0xD in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PPLLL_L at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:352,5 C#
Does anyone know if .Net Maui tabbed pages work on Android please ?
Thanks

If you are interested to use a TabbedPage to navigate through a collection of pages see the maui sample here: TabbedPage
It works on my Android physical device.
Another option is to use a shell tab bar like in this one sample: ShellTabBar

I have tested it and if I use TabbedPage, I will have similar errors on the Android simulator. So you may need to use ShellTabBar as much as possible, just like this:
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Pages.SomeClass"
xmlns:Controls="clr-namespace:MyApp.Resources.Controls"
xmlns:local="clr-namespace:MyApp.Pages"
Title="Some title">
<TabBar>
<ShellContent Title="Cats"
ContentTemplate="{DataTemplate local:Page1}" />
<ShellContent Title="Dogs"
ContentTemplate="{DataTemplate local:Page2}" />
<ShellContent Title="Monkeys"
ContentTemplate="{DataTemplate local:Page3}" />
</TabBar>
</Shell>

Related

ShellContent tag in .net maui not working

trying to make a flyout menu in .net maui, from what i found out i have to use App.xaml for it, it does not seem to be working, here is the code in App.xaml
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSM_Maui"
x:Class="NSM_Maui.App">
<Application.MainPage>
<Shell FlyoutBehavior="Flyout" FlyoutHeaderBehavior="Fixed" FlyoutVerticalScrollMode="Auto">
<FlyoutItem Title="Home" >
<ShellContent ContentTemplate="{DataTemplate local:HomePage}"/>
</FlyoutItem>
</Shell>
</Application.MainPage>
it work fine up to the but the does not seem to be working, the Datatemplate string is a ContentPage xaml file that i made its called "HomePage" i was also following this videoenter image description here https://youtu.be/KUzpFrReJNQ
i fixed it, iam not really sure what i changed but i had to make a new project and in the AppShell.xaml there is the tag and you have to add Shell.FlyoutBehavior="Flyout" and also add the <ShellContent> tag <ShellContent>

How to set size of Xamarin Community Toolkit Popup to wrap content dynamically in Xamarin Forms?

I have a Xamarin.CommunityToolkit - Popup. I don't want to predefine its size. I want it to size according to the content dynamically. Is there any way to achieve this?
Here is my XAML code:
<?xml version="1.0" encoding="UTF-8"?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="SampleProject.Views.SamplePopup">
<StackLayout>
<Label Text="Hello Xamarin.Forms!" />
<Button Text="Close Popup" Clicked="ClosePopup" />
</StackLayout>
</xct:Popup>
The current implementation doesn't support such feature, as Amjad mentioned in his comment there was a similar feature request in the past but it was closed as things were migrating to the new repo .NET MAUI community toolkit.
If you are interested you can open a discussion explaining or pointing to the link of that feature request.

Xamarin forms maps error :"Not compatable code running

I am trying to create a simple map page using Xamarin forms maps checking this project only on Andorid.
I Installed the Xamarin forms map. and added the Xaml Below,
in addition I've added the in the Android manifest XML all the relavent
premiisions and Key.
however I am getting this error:Not compatable code running the selected debug engine does not support any code executing on the current thread
would appericate any help
<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
x:Class="MashamApp.mapPage" Title="מפה" >
<ContentPage.Content>
</ContentPage.Content>
<Grid>
<maps:Map x:Name="LocationMap"
IsEnabled="True" IsVisible="True"
MapType="Hybrid"
HasScrollEnabled="True"
HasZoomEnabled="True"
HeightRequest="480"
WidthRequest="480"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" >
</maps:Map>
</Grid>
As pointed out by Yuri, a content page should only have a single view or layout.
Change your page to look 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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
x:Class="MashamApp.mapPage" Title="מפה" >
<Grid>
<maps:Map x:Name="LocationMap"
IsEnabled="True" IsVisible="True"
MapType="Hybrid"
HasScrollEnabled="True"
HasZoomEnabled="True"
HeightRequest="480"
WidthRequest="480"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" >
</maps:Map>
</Grid>
</ContentPage>
You don't even need the Grid unless you are going to add more views inside it.
See here for more details

BottomNavigationBarXF design issue

i created a blank forms app and implemented the library BottomNavigationBarXF with nuget.
but the design is not working or maybe a part, i see it like a normal toolbar:
https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bzhp5Z4wHba3ckpYOVVyMFpJSzg/components_tabs_usage_desktop7.png
After the installation of the library i implement this:
<?xml version="1.0" encoding="utf-8" ?>
<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
xmlns:example="clr-namespace:BottomBarXFExampleXaml;assembly=BottomBarXFExampleXaml"
x:Class="BottomBarXFExampleXaml.BarPage">
<example:TabPage Title="Favorites" Icon="ic_favorites.png" />
<example:TabPage Title="Friends" Icon="ic_friends.png" />
<example:TabPage Title="Nearby" Icon="ic_nearby.png" />
<example:TabPage Title="Recents" Icon="ic_recents.png" />
<example:TabPage Title="Restaurants" Icon="ic_restaurants.png"/>
</xf:BottomBarPage>
public App()
{
InitializeComponent();
MainPage = new BarPage();
}
Must i implement something else, maybe a design file or should all be in the library?
Thanks
I solved the problem. The library was only implemented to the forms project not to the droid project.

Xamarin Forms: System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation

I am struggling with this issue. I created just a simple cross platform page here is XAML code:
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ForTesting.TestPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<ContentPage>
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" Android="0,40,0,0" />
</ContentPage.Padding>
</ContentPage>
</CarouselPage>
And here is same cross platform page class:
public partial class TestPage: CarouselPage
{
public TestPage()
{
InitializeComponent();
new Label
{
Text = "heelow",
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
HorizontalOptions = LayoutOptions.Center
};
}
}
For testing I created simple label, but even without label it is doesn't work.
I am calling this page in my MainPage.xaml :
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ForTesting;assembly=ForTesting"
x:Class="ForTesting.MainPage"
MasterBehavior="Popover">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="CClick"
Text="C :"
Order="Primary">
</ToolbarItem>
</ContentPage.ToolbarItems>
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:TestPage/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
And on this line of class: ForTesting.MainPage.xaml.g.cs I am getting error when I am executing program:
public partial class MainPage : global::Xamarin.Forms.MasterDetailPage {
[System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "0.0.0.0")]
private global::Xamarin.Forms.ToolbarItem CClick;
[System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "0.0.0.0")]
private global::ForTesting.MasterPage masterPage;
[System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.Tasks.XamlG", "0.0.0.0")]
private void InitializeComponent() {
--> this.LoadFromXaml(typeof(MainPage));
}
}
Error:
Unhandled Exception: System.Reflection.TargetInvocationException:
Exception has been thrown by the target of an invocation.
And I have another cross platform page which is same as TestPage.xaml , but it is working when I am executing.
To build upon #Wes answer, you can make the error message clearer by telling Visual Studio to automatically break at any exception:
Go to Debug > Windows > Exception Settings to open the Exception Settings window
Select the checkbox for the base exception System.Exception
Start debugging again.
In general, I've noticed that any syntax errors in XAML may show up as this exception.
You have mistake in your Carousel page
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ForTesting.TestPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<ContentPage>
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" Android="0,40,0,0" />
</ContentPage.Padding>
</ContentPage>
</CarouselPage>
Carousel page should have only one child, and it should be a ContentPage, you won't be able to add both label and content page. Remove this line
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
If you want to have both label and content in a Carousel, I would suggest using something like CarouselView.
EDIT 1
I've create a sample Carousel project with latest Xamarin.Forms (2.2.0.31), I've tested it on iOS and Android and it works. You can use it as a starter to implement your version. I use this control in production app.

Categories