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());
}
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'm using a TabbedPage type in my Xamarin app. I've got the icons and content working perfectly.
The Problem: I can't see to find any way to setting the width of a tab. I want it to be such that the tab widths stretch to match the screen on which they are being rendered
I've tried using a TabbedPageRenderer for Android but none of the properties on their seem to be non-zero so I cannot perform the calculation manually
<?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:IGNORETHIS="clr-namespace:IGNORETHIS;assembly=IGNORETHIS"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
x:Class="IGNORETHIS" <!-- INTENTIONAL -->
android:TabbedPage.ToolbarPlacement="Bottom">
<!-- Account Page -->
<ContentPage Title="Account"
Icon="AccountTabIcon.png">
<StackLayout>
<!-- Blabla some stuff -->
</StackLayout>
</ContentPage>
<!-- Settings Page -->
<ContentPage Title="Settings"
Icon="SettingsTabIcon.png"/>
</TabbedPage>
What I would like is a set of tabs that take up the entire width of the screen. This should be default behavior!
I created an hamburguer menu with master detail page. In the detail page i would like to have a botton navigation bar with shortcuts (like twitter app for android) but icons of eash shortcuts are not being displayed.
I tried using url, file path and ImageSource but none of these displayed the image icon.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="KiaiDay.Views.Main.HomePage"
xmlns:pages="clr-namespace:KiaiDay.Views.Main"
xmlns:local="clr-namespace:KiaiDay.MarkupExtensions" NavigationPage.HasNavigationBar="False">
<MasterDetailPage.Master>
...
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:HomePageDetail />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Homepagedetail
<?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="KiaiDay.Views.Main.HomePageDetail"
Title="Pagina Inicial"
xmlns:local="clr-namespace:KiaiDay.MarkupExtensions"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:view ="clr-namespace:KiaiDay.Views.PosLogin"
BarBackgroundColor="LightGray" BarTextColor="White"
android:TabbedPage.ToolbarPlacement="Bottom">
<ContentPage Title="Home" Icon="{local:ImageResource KiaiDay.Images.calendarWhite.png}" NavigationPage.TitleIcon="calendarWhite.png"/>
<ContentPage Icon="calendarWhite.png"/>
<ContentPage Icon="https://img.icons8.com/ios/50/000000/calendar-11.png" />
</TabbedPage>
I tried Url of the image, using file path located at android project (Resources/drawable) and ImageSource. None of these were able to display the icon.
So, i solved the problem. It was needed to have the image files in each platform. Android on Resources/drawable and iOS Resources. After that change build action of each image , for Android set AndroidResource and iOS bundleResource.
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());