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>
Related
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.
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>
In my xamarin.forms app I am using shell component.I have a tabbed page named TimeSheetsTab. When I navigate from Shell tabbed page to the TimeSheetsTab, in ios it only shows a black page. In android it works fine. Please refer the screenshots.
My Appshell page
<?xml version="1.0" encoding="utf-8" ?>
<Shell 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Shell.NavBarIsVisible="False"
xmlns:local="clr-namespace:Sample.Views"
x:Class="Sample.AppShell">
<TabBar>
<Tab Title="Dashboard" Icon="icon_dashboard.png" >
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
<Tab Title="Notifications" Icon="icon_notifications.png">
<ShellContent ContentTemplate="{DataTemplate local:Notifications}" />
</Tab>
<Tab Title="Account" Icon="icon_user.png">
<ShellContent ContentTemplate="{DataTemplate local:Account}" />
</Tab>
</TabBar>
</Shell>
My Dashboard which is the first tab page of shell
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Dashboard"
x:Class="Sample.Views.Dashboard">
<ContentPage.Content>
<Button BackgroundColor="Black" Clicked="Button_Clicked" Text="Click to tabpapge" >
</Button>
</ContentPage.Content>
</ContentPage>
Button Click for navigating to tabbed page
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new TabPage(), true);
}
My tabbed page
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Views="clr-namespace:Sample.Views"
BarBackgroundColor="{DynamicResource NavigationBarColor}"
mc:Ignorable="d"
NavigationPage.HasNavigationBar="False"
Shell.BackgroundColor="{DynamicResource NavigationBarColor}"
Shell.NavBarIsVisible="True"
x:Class="Sample.Views.TimeSheetsTab">
<Shell.TitleView>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" >
<Label FontSize="Medium" Text="Timesheets" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="White"></Label>
<Image Source="search.png" HorizontalOptions="EndAndExpand" HeightRequest="25" Margin="0,2,10,2"></Image>
</StackLayout>
</Shell.TitleView>
<TabbedPage.Children>
<Views:PendingTimesheets Title="Pending" IconImageSource="icon_pending.png"/>
<Views:ApprovedTimesheets Title="Approved" IconImageSource="icon_approved.png"/>
</TabbedPage.Children>
</TabbedPage>
I didnt added the code of TimesheetTab's child pages, because it shows properly when navigate directly to it. What will be the cause of issue in ios? Any help is appreciated.
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"}
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>