There are two title bars in my app when I navigate to another page:
The first one contains back button and the second one contains title of content page. My question is how is it possible to merge them into a single title bar. Here's my code:
Page1.cs
await Navigation.PushAsync(new NavigationPage(new Page2()));
Page2.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="TestApp1.Page2" Title="Page 2">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin Forms!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Screenshot
For the first page in your app add a new NavigationPage and your page within it:
MainPage = new NavigationPage(new FirstPage());
For the second page, do not create a new NavigationPage, just Push a new page onto the existing NavigationPage:
await Navigation.PushAsync(new SecondPage());
Related
In Xamarin, I frequently used <NavigationPage.TitleView> to customize the navigation title bar in my views. Now that I am working in MAUI, this tag seems to have no effect on a ShellItem view.
Here is AppShell.xaml:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MyApp.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:localize="clr-namespace:FleetHDMobile.Resources.Strings"
xmlns:local="clr-namespace:FleetHDMobile.Views"
Shell.FlyoutBehavior="Disabled">
<ShellItem Route="MainPage">
<ShellContent
Title="MainPage"
ContentTemplate="{DataTemplate local:MainPage}"
/>
</ShellItem> . . .
Here is MainPage.xaml:
<?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"
xmlns:localize="clr-namespace:FleetHDMobile.Resources.Strings"
Shell.FlyoutBehavior="Flyout"
x:Class="FleetHDMobile.Views.MainPage">
<NavigationPage.TitleView>
<Label
Text="XXX"
HeightRequest="44"
WidthRequest="300" />
</NavigationPage.TitleView>
<ScrollView>
I have tried making MainPage a tab in the tabbar, but that didn't customize the title view either.
The <NavigationPage.TitleView> tag has no effect on the rendered view. I would like to put small logo icons in the title bar, but cannot figure out how to do so.
There are some known issues about this problem.
You can follow up them here:
https://github.com/dotnet/maui/issues/9269
https://github.com/dotnet/maui/issues/9687
Thanks for your support and feedback.
Did you try doing it through the ViewModel or the .cs of your View ?
Such as for MainPage.xaml.cs or MainPageViewModel.cs
public class MainPageViewModel
{
public MainPageViewModel
{
Title = “”; // or this.Title = “”;
}
}
I created a TabbedPage which opens the various pages that I created within my project.
<myapp:MainPage Title="Page1" IconImageSource="IC001.png" BackgroundColor="Gainsboro"></myapp:MainPage>
<myapp:DiaryPage Title="Page2" IconImageSource="IC002.png" BackgroundColor="Gainsboro"></myapp:MainPage>
Through this namespace on Android I can see the NavigationBar at the bottom of the screen.
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom"
I would like to be able to place a Custom Button above the NavigationBar, a button that is within my Page Layout and that covers a portion of the NavigationBar. it's possible?
Example of my page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
x:Class="MotiVApp.DiaryPage">
<Grid>
<Button/>
</Grid>
I want to display very simple Toolbar using xamarin on iOS, but I can't see the toolbar on display.
I use this code:
<?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="Test.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example Item"
IconImageSource="https://img.icons8.com/cute-clipart/64/000000/menu.png"
Order="Primary"
Priority="0" />
</ContentPage.ToolbarItems>
</ContentPage>
There are no errors in the code and the display is empty..
What needs to change to see the toolbar ?
Are you putting your page in NavigationPage? By default ContentPage does not have Navigation bar (Toolbar), you must put your page in NavigationPage, after that Navigation bar will show up with its functionality.
have a look at here : Xamarin.Forms Navigation
So I assume you should do something like this
public App ()
{
MainPage = new NavigationPage (new MainPage());
}
image
refer to the above image. It is a TabbedPage with 4 tab page. May I know how can we perform this action. When user click the list, it will navigate to a new page (outside of the tabbedpage). Then, it can go back to the TabbedPage when back button clicked.
Is it using ListView or navigation page?
Please advise. thank you.
1.create a Tabbed Page and set it as mainPage of app.
in App.xaml.cs
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MyTabbedPage());
}
2.Put the contentPage in the Tabbed Page which contain the listview.
For example ,I put the listview in MainPage.
<?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:local="clr-namespace:App8"
x:Class="App8.MyTabbedPage">
<!--Pages can be added as references or inline-->
<ContentPage Title="Tab 1" Icon="xxx.png"/> //set the title and icon of toolbar item
<local:MainPage Title="Tab 1" Icon="xxx.png"/>
<ContentPage Title="Tab 1" Icon="xxx.png"/>
</TabbedPage>
in MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App8"
x:Class="App8.MainPage">
<ListView x:Name="listView" ItemTapped="ListView_ItemTapped" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="30">
...
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
3.When you click the item of listview navigate to a new contentPage which contain your other listview
in MainPage.xaml.cs
private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
Navigation.PushAsync(new xxxContentPage(),true);
}
I have xamarin form application that has login page. When user login successfully, the application navigate to MainPageMenu which is a master detail page. I have the same problem. This is my code in app.cs:
public App ()
{
InitializeComponent();
if (ApplicationSettings.NotLogin()) // Method to check if use if logged in or not
MainPage = new LoginPage();
else
MainPage = new NavigationPage(new MainPageMenus());
}
In login Page, I write this code:
//Some code for login .....
MasterDetailPage fpm = new MasterDetailPage
{
Master = new MainPageMenus(),
Detail = new NavigationPage(new MainPage())
};
Application.Current.MainPage = fpm;
The application navigate to fpm page correctly, but the problem is that when I press menu icon, I get the detail page not the master page.
This problem is similar to one described in this post. And the code above is the selected as the answer to the question. But code doesn't work for me. In stack Overflow, there is a similar question and the answer was to use this:
Application.Current.MainPage = new NavigationPage(new MainPageMenus());
But in this case the menu icon is hidden.
Here is the Xml of MainPageMenus:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XProject.Menus.MainPageMenus"
xmlns:local="clr-namespace:XProject"
Title="E-Clinic"
>
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<Button Clicked="GoToApplicationSettingsPage" Text="Application Settings"></Button>
<Button Clicked="GoToHxSettingsPage" Text="Medical History Settings"></Button>
<Button Clicked="GoToVisitsSettingsPage" Text="Visits Settings"></Button>
<Button Clicked="GoToCustomFieldsPage" Text="Custom Fields"></Button>
<Button Clicked="GoToAddCustomFieldsPage" Text="Add Custom Fields"></Button>
<Button Clicked="GoToAddCommonInfoPage" Text="Common Info"></Button>
<Button Clicked="GoToAddStatisticsPage" Text="Statistics"></Button>
<Button Clicked="GoToBackupPage" Text="Create Backup"></Button>
<Button Clicked="GoToRestoreBackupPage" Text="Restore Backup"></Button>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:MainPage></local:MainPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
This:
Application.Current.MainPage = new NavigationPage(new MainPageMenus());
is definitely wrong. Here you are assigning a NavigationPage with a MasterDetailPage as a root page.
This is not gonna work, because only the detail page of the MasterDetailPage can be a navigation page. The Master Page should not be affected by the navigation.
What you should actually do is having the DETAIL PAGE of your MasterDetailPage a NavigationPage with child Pages (ContentPages).
This code is actually looking well, but the only problem is: You are setting "MainPageMenus" (which is in fact your MasterDetailPage) as the master page of ANOTHER MasterDetailPage.
//Some code for login .....
MasterDetailPage fpm = new MasterDetailPage
{
Master = new MainPageMenus(),
Detail = new NavigationPage(new MainPage())
};
Application.Current.MainPage = fpm;
What you should do is: Create a ContentPage that is the same as MainPageMenus and lets name it as MainPageMenusAsContentPage. The Xaml of MainPageMenusAsContentPage 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="XProject.Menus.MainPageMenusAsContentPage"
Title="Menu"
>
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Button Clicked="GoToApplicationSettingsPage" Text="Application Settings"></Button>
<Button Clicked="GoToHxSettingsPage" Text="Medical History Settings"></Button>
<Button Clicked="GoToVisitsSettingsPage" Text="Visits Settings"></Button>
<Button Clicked="GoToCustomFieldsPage" Text="Custom Fields"></Button>
<Button Clicked="GoToAddCustomFieldsPage" Text="Add Custom Fields"></Button>
<Button Clicked="GoToAddCommonInfoPage" Text="Common Info"></Button>
<Button Clicked="GoToAddStatisticsPage" Text="Statistics"></Button>
<Button Clicked="GoToBackupPage" Text="Create Backup"></Button>
<Button Clicked="GoToRestoreBackupPage" Text="Restore Backup"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Then use this code:
var masterDetailPage = new MasterDetailPage()
{
Master =new MainPageMenusAsContentPage(),
Detail = new NavigationPage(new MainPage())
};
Application.Current.MainPage = masterDetailPage;
EDIT: For navigation:
either masterDetailPage.Detail.PushAsync(new CoolPage()); or masterDetailPage.Detail = new NavigationPage(new CoolPage());
They behave different, the first pushes a page to the stack, the second replaces the current detail page
For the reference, from the official documentation:
A MasterDetailPage is designed to be a root page, and using it as a
child page in other page types could result in unexpected and
inconsistent behavior. In addition, it's recommended that the master
page of a MasterDetailPage should always be a ContentPage instance,
and that the detail page should only be populated with TabbedPage,
NavigationPage, and ContentPage instances. This will help to ensure a
consistent user experience across all platforms.
Commonly, mobile applications communicate with APIs using an authentication token which may expire or get rejected any moment. Which means that you also have to be prepared for user re-authentication any moment. In this case, your MainPage can be freely a MasterDetailPage and a login page could come as a modal page on a top of it when it or any other page when it is required.