MasterDetail ToolbarItem present in Detail - xamarin

I have a MasterDetailPage and I put a ToolbarItem in the parent controller, but it appears in the Detail as well. Any ideas why?
<MasterDetailPage.ToolbarItems>
<ToolbarItem Name="addMeterReading" Order="Primary" Icon="add.png" Text="Add Reading" Priority="0" Clicked="NewMeterReading_Clicked" />
</MasterDetailPage.ToolbarItems>


In you detail page, not in your master page. Add the following:
<?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="MyProject.MyPage">
<ContentPage.ToolbarItems>
<ToolbarItem
Name="addMeterReading"
Order="Primary"
Icon="add.png"
Text="Add Reading"
Priority="0"
Clicked="NewMeterReading_Clicked" />
</ContentPage.ToolbarItems>
</ContentPage>

Related

How do I get MAUI to show an image on all pages?

I am designing an App for my company and I need it to show the company's logo on every page of the application. How do I achieve this in MAUI?
What I've tried:
AppShell.xaml:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="FusionPortalDemo.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FusionPortalDemo"
Shell.FlyoutBehavior="Disabled">
<ShellContent Title="RootPage"
ContentTemplate="{DataTemplate local:GlobalLogoPage}"
Route="GlobalLogoPage" />
<ShellContent Title="Home"
ContentTemplate="{DataTemplate local:HomePage}"
Route="HomePage" />
</Shell>
GlobalLogoPage:
<?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="FusionPortalDemo.GlobalLogoPage"
Title="GlobalLogoPage">
<Image Source="psl_logo.jpeg"
VerticalOptions="Center"
HorizontalOptions="Center" />
</ContentPage>
However, this only brings up one page with the entire logo. What I suspect is that the other page is being shown, but hidden because it has 0 height. How exactly do I move forward?

#1 WORKAROUND:
You can create a common TitleView that includes the logo and then reuse it in your Content pages that you want to show.
1.Create a ContentView : Title.xaml to your Project.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppCustomTitleView.Title">
<ContentView.Content>
<Image Source="dotnet_bot.png" HorizontalOptions="Center" VerticalOptions="Center"> </Image>
</ContentView.Content>
</ContentView>
Consume the TitleView:Title.xaml in your MainPage like below:
<?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:TitleView="clr-namespace:MauiAppCustomTitleView"
x:Class="MauiAppCustomTitleView.MainPage">
<Shell.TitleView>
<TitleView:Title></TitleView:Title>
</Shell.TitleView>
</ContentPage>
#2 WORKAROUND:
Or you can use Control templates enabling you to design template controls or template pages for reuse in MAUI.

How to remove upper header content with xamarian forms

i am new to xamarian app development. now this is my markup code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SmartEntry.DashBoard"
BackgroundColor="White"
Title="DASHBOARD"
NavigationPage.HasBackButton="False"
NavigationPage.HasNavigationBar="True">
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logout_icon.png" Order="Primary" Priority="1" Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>
and this is my view on android emulator :
---------------------------updated-----------------------------

How to remove upper header content with xamarian forms
If you want to remove the upper header content(the back button),you can set
NavigationPage.HasBackButton="False"
In this condition, the Title(DASHBOARD) will move to the left.
If you want to remove the back button and make the Title(DASHBOARD) display in the middle , then you can use Title View to achieve this.
Please refer to the following 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="FormApp118.TestPage2"
Title="DASHBOARD"
NavigationPage.HasBackButton="False"
NavigationPage.HasNavigationBar="True"
>
<NavigationPage.TitleView>
<StackLayout>
<Label Text="DASHBOARD" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" TextColor="White" FontSize="20" />
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.ToolbarItems >
<ToolbarItem Icon="cherry.png" Order="Primary" Priority="1" Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>
<!-- other code-->
</ContentPage>

How to display image in Xamarin Form ContentPage IconImageSource

Could anyone advice how to add the image in ContentPage IconImageSource?
Trying to display "icon.png" in Title bar.
The image from the ToolbarItem, "toolbar_icon.png", is able to display.
Both icons are place together in Android Resources drawable folder.
Haven't tried for iOS platform yet.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HelloWorld.Views.AboutPage"
Title="{Binding Title}"
IconImageSource="icon.png">
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="toolbar_icon.png"></ToolbarItem>
</ContentPage.ToolbarItems>
</ContentPage>
App.xml file is default and doesn't update it.
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloWorld.Views"
Title="HelloWorldApp"
x:Class="HelloWorldApp.AppShell">
<TabBar>
<ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</TabBar>
</Shell>
Thanks.

We can use Shell.TitleView as the workaround .
<Shell.TitleView>
<Image Source="icon_feed.png"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Shell.TitleView>
Refer to
https://stackoverflow.com/a/58969359/8187800 .

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Notes.Views.ConnectionPage"
Title="Connection">
<!-- Add an item to the toolbar -->
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="/Images/Satellite.ico" />
</ContentPage.ToolbarItems>
</ContentPage>

how add icon in toolbarItem in xamarin?

My xamarin android project does not have Drawawble folders under Resources, I haveI'm trying to set icon for a toolbar item in shared project. If I set an image as embedded resource I should be able to access it from the shared project, am I wrong
<?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="BoringAppUi.MainPage" Title="Main Page">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Logout" Clicked="OnLogoutButtonClicked" Order="Primary" Priority="0"/>
<ToolbarItem Text="Home" Icon="#mipmap/baseline_home_blue_48.png" Clicked="OnHomeIconClicked" Order="Primary" Priority="1"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Label Text="Main app content goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

You also need to create the Folder Resources and Drawable to add Images.
Link
<ContentPage.ToolbarItems>
<ToolbarItem Text="Logout" Clicked="OnLogoutButtonClicked" Order="Primary" Priority="0"/>
<ToolbarItem Text="Home" Icon="baselinehomeblue48.png" Clicked="OnHomeIconClicked" Order="Primary" Priority="1"/>
</ContentPage.ToolbarItems>

Here is xaml based code *<ToolbarItem Name="iconexample" Icon="icon.png" Priority="0" Order="Primary" Activated="Onclick" />*
and C# based code
new ToolbarItem () { Icon = "icon.png"}

Why xaml tabbed page attribute local is not working in this case?

I have a very simple xaml code but attribute local:Page simply doesn't work, when I type "local" it gets underlined as if there is an error.
MainPage.xaml:
<?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:Solution;assembly=Solution"
x:Class="Solution.MainPage">
<local:Listar Title="XXXX" />
</TabbedPage>
Listar.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"
xmlns:local="clr-namespace:Solution;assembly=Solution"
x:Class="Solution.Listar">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

TabbedPage must contain child pages.
<TabbedPage.Children>
<local:Listar Title="XXX"/>
</TabbedPage.Children>

Try to use the following code
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Solution"
x:Class="Solution.MainPage">
<ContentPage Title="Main">
<ContentPage.ToolbarItems>
<ToolbarItem Text="xxx" Order="Primary"/>
</ContentPage.ToolbarItems>
<StackLayout>
//. . .
</StackLayout>
</ContentPage>
<local:Listar Title="XXXX" >
</TabbedPage>

Resources