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
Related
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>
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.
I am trying to create a popup using the Xamarin.CommunityToolkit package but the popup is rendering with extra spacing across the top. Because of hardware limitations I am forced to develop using a much older version of CommunityToolkit (1.2.0) and Xamarin.Forms (5.0) so the issue may be from this.
This is the sample popup I am trying to render.
<?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="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,300"
Color="Blue"
x:Class="floorplanner.Dialogs.RoomDetailsDialog"
xct:Clip="">
<Label Text="Hello World" BackgroundColor="Green"/>
</xct:Popup>
This is what the popup looks like when it's opened:
So far I have tried configuring my MainTheme to have:
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
I have also tried specifying the size in a child layout element instead of the popup itself but it still rendered with the top spacing.
I have tried setting the VerticalOptions of the label to "Fill" and it still rendered as shown in the image. Originally, I had the label inside of a StackLayout but I removed this nesting to simplify the example for this post.
From more experiments I found that the Label itself is still rendering with a height of 300 units and the bottom the the Label's region is being clipped off the bottom. So essentially, there are ~50 units of height that are being pushed off the bottom.
As a workaround the the problem I have set the background of popup to transparent and set the inner content of the popup to the height - 50.
As you set the Color="Blue", the whole background of popup is blue.
You add a label to in the popup layout however you haven't set the location of the label. You can set VerticalOptions and HorizontalOptions to set the location.
Here is the xaml code:
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,300"
Color="Blue"
x:Class="floorplanner.Dialogs.RoomDetailsDialog"
xct:Clip="">
<Label Text="Hello World" BackgroundColor="Green" VerticalOptions="Start" HorizontalOptions="Start"/>
</xct:Popup>
Reference links:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options
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
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...