.NET MAUI Windows app. tabbed page white area - xaml

Hello everyone I am developing a Windows app with .net Maui. I am using a tabbed a page and there is a little white area on the very right of the navigation bar. narrow white area where it makes a contrast with green on the right upper corner I do not know which causes it and couldn`t get rid of it. I am also adding the photos of my navigation page and appshell. I am assuming it has something to do with the appshell, because the background color I use on the weather page is actually not white, it is a yellowish color. Would to happy to have any suggestions.
AppShell code:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MauiApp2.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp2"
Shell.FlyoutBehavior="Flyout"
FlyoutBackgroundColor="White"
BackgroundColor="White">
<ShellContent
Title=""
ContentTemplate="{DataTemplate local:WeatherPage}"
Route="WeatherPage"
Content="white"
/>
</Shell>
Navigation page frontend code:
<?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"
xmlns:local="clr-namespace:MauiApp2"
x:Class="MauiApp2.NaviPage"
BackgroundColor="Black"
BarBackgroundColor="Green"
BarTextColor="White"
SelectedTabColor="White"
>
<local:WeatherPage
Title="Weather"/>
<local:AboutPage1
Title="About"/>
</TabbedPage>

Related

FlyoutLayout in FlyoutPage not appearing when FlyoutLayoutBehavior is set to Popover (works fine if it is set to Split instead)

I have a FlyoutPage in which I want to have a 'Popover' flyout layout on the left and the detail page on the right. In other words, I only want the flyout on the left to show up if I click a button, and for it to remain hidden otherwise.
I believe that's what should happen if I set FlyoutLayoutBehavior to Popover. But when I do that, no flyout menu shows up at all on the left (the detail page on the right continues working fine).
If I set FlyoutLayoutBehavior to Split instead of Popover, it works as it should (the flyout is always visible on the left, splitting the screen).
What is wrong?
This is my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.FlyoutPage"
FlyoutLayoutBehavior="Popover">
<FlyoutPage.Flyout>
<local:FlyoutMenu x:Name="menu" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:Contacts />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
Thanks.

How to nest Tab views in Xamarin.Forms

I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView. I want 3 main tabs in the bottom and for each page 1-2 subtabs. On each subtab I will need to have a ScrollView(I think thats the right element to use) with list items, which makes it even more complex. Like this picture:
Any idea or guidance of how to achieve this?
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView.
If you want to do that, you could nest a TabView in Tabbed page.
TabView:https://github.com/chaosifier/TabView
Create three tab pages in views folder.
Tabbed Page:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">
<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />
</TabbedPage>
And then use TabView in you tab1 page.
Tab1_Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
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:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
<local:TabViewControl>
<local:TabViewControl.ItemSource>
<local:TabItem HeaderText="SUBTAB1">
<StackLayout VerticalOptions="Start" Padding="10">
<Button
BackgroundColor="White"
Text="List Item"
TextColor="Black"/>
</StackLayout>
</local:TabItem>
<local:TabItem HeaderText="SUBTAB2">
<Image Source="pink.jpg" />
</local:TabItem>
</local:TabViewControl.ItemSource>
</local:TabViewControl>
</ContentPage.Content>
</ContentPage>
Please note, if you want to make the tabs in tabbed page in the bottom. Add the code below in your MainPage.
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemo
https://github.com/WendyZang/Test.git

How to add content page or view before tabbed page

I want to add Page/View before TabbedPage, how can I do that?
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:TestProject.TabbedPages"
x:Class="TestProject.ItemPage"
Title = "Home Page">
<TabbedPage.Children>
<views:AprovedLeaves Title="Approved leaves"/>
<views:PendingLeaves Title="Pending leaves"/>
<views:DeniedLeaves Title="Denied leaves"/>
</TabbedPage.Children>
</TabbedPage>
Above code showing output like this
But I need some space before tabs. Like this
I would suggest you use the Segmented Control Plugin for this look for Plugin.Segmentedon Nuget and install Plugin.SegmentedControl.NetStandard
Initialize it on iOS something like this:
SegementedControlRenderer.Initialize();
Then use it in XAML like this
<control:SegmentedControl x:Name="SegmentedControl" SelectedSegment="{Binding SegmentSelection}" TintColor="White" SelectedTextColor="BlueViolet" DisabledColor="Gray" Margin="8,8,8,8">
<control:SegmentedControl.Children>
<control:SegmentedControlOption Text="Item 1" />
<control:SegmentedControlOption Text="Item 2" />
<control:SegmentedControlOption Text="Item 3" />
<control:SegmentedControlOption Text="Item 4" />
</control:SegmentedControl.Children>
</control:SegmentedControl>
A step by step guide is available on this C# corner blog
Feel free to revert in case of queries

background and toolbar apear sometimes xamarin forms

I have this page in xamarin.forms
the problem is: mainly when it's the first time that the device is opened, My first page is bad loaded and I don't know why
this is the xaml
<?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="neoFly_Montana.Views.Splash2"
BackgroundImage="Abertura.jpg"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
</ContentPage.Content>
The background is not loaded and I have a blank screen, and the HasNavigationBar="False" doesn't work...and a toolbar appears...but, always in the first time that the app is oppened...I don't understand that...

Xamarin Forms: How to add controls on MasterDetail Tool Bar

I am creating a master detail page in Xamarin Forms. I want to have Menu icon on top left, searcher on the right and another label on the menu bar.
Can some help help me with how I can be done? I added the menu icon. I want help with adding other controls on the toolbar/Menubar/Navigation bar what ever it is called. Its the bar on top of the master detail page.
Code:
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:PCL.Core.Views;assembly=PCL.Core"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PCL.Core.Views.RootPage" MasterBehavior="Popover" >
<MasterDetailPage.Master>
<local:MasterPage/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor="Maroon" >
<x:Arguments >
<local:DetailPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Thanks.
If you talking about this kind of controls as on image than:
"Hamburger menu" image you set in MasterDetail page;
Icons (GPS and DATA on image) - are ToolbarItem's that you need to add to Detail Page
There is plenty of examples available:
https://forums.xamarin.com/discussion/17339/navigationpage-and-toolbaritems
https://forums.xamarin.com/discussion/17351/making-a-toolbar