Develop Reference

Why Toolbar not showing on iOS display using Xamarin

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());
}

Xamarin App won't launch when trying to make popup page

I have a problem. I am using the Nuget package: Rg.Plugins.Popup.Pages with this colorPicker: Spillman.Xamarin.Forms.ColorPicker.
I created this page:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="Memento.Dialogs.ColorPicker"
xmlns:colorPicker="clr-namespace:Spillman.Xamarin.Forms.ColorPicker;assembly=Spillman.Xamarin.Forms.ColorPicker">
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<pages:PopupPage.BindingContext>
<colorPicker:ColorPickerViewModel />
</pages:PopupPage.BindingContext>
<ContentView HorizontalOptions="Center" VerticalOptions="Center"
Padding="8" BackgroundColor="White">
<colorPicker:ColorPickerView />
</ContentView>
</pages:PopupPage>
But when I try to define the page like this: ColorPicker_Popup = new ColorPicker(); I get the following error:
Android.Content.Res.Resources+NotFoundException: 'Resource ID #0x7f0700c3'
What am I doing wrong?

Can't you do it like this?
await PopupNavigation.PushAsync(new ColorPicker(), true);

Xamarin.Forms Shell + ReactiveUI Tab loading performance (on Android)

I've been testing ReactiveUI for a while now (highly recommend it!) but recently came across a performance issue that I'm not sure if it's due to ReactiveUI itself (given that it seems to rely on reflection for some things) OR the Xamarin.Forms App Shell. There's a distinct delay when changing to a Tab whose content has ReactiveUI bindings, this is more noticeable when running on an emulator but can also be experienced on a real device too (tested on Android 6 and Android 9 devices). Is there a strategy to improve App Shell tab performance? The performance issue is only on the tab's first load. Relevant code below (simplified example based on base App Shell visual studio template):
AppShell.Xaml
<?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"
xmlns:local="clr-namespace:ReactiveXam.Views"
Title="ReactiveXam"
x:Class="ReactiveXam.AppShell"
Visual="Material">
<!-- Your Pages -->
<TabBar>
<Tab Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</Tab>
<Tab Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</Tab>
<Tab Title="Test" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:TestPage}" /> <!-- The relevant tab -->
</Tab>
</TabBar>
</Shell>
TestPage.Xaml (TestPageViewModel is an "empty" class inheriting from ReactiveObject)
<?xml version="1.0" encoding="utf-8" ?>
<rxui:ReactiveContentPage 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"
xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
xmlns:local="clr-namespace:ReactiveXam.Views"
xmlns:vms="clr-namespace:ReactiveXam.ViewModels"
x:TypeArguments="vms:TestPageViewModel"
x:Class="ReactiveXam.Views.TestPage">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<local:Exposure />
</StackLayout>
</ContentPage.Content>
</rxui:ReactiveContentPage>
Exposure.Xaml
<?xml version="1.0" encoding="UTF-8"?>
<rxui:ReactiveContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:vms="clr-namespace:ReactiveXam.ViewModels"
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"
x:TypeArguments="vms:ExposureViewModel"
xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
x:Class="ReactiveXam.Views.Exposure">
<StackLayout>
<Label x:Name="balance" />
<Label x:Name="exposure" />
</StackLayout>
</rxui:ReactiveContentView>
Exposure.xaml.cs
public partial class Exposure : ReactiveContentView<ExposureViewModel>
{
public Exposure()
{
InitializeComponent();
ViewModel = new ExposureViewModel();
// The code below slows down the loading of the tab (~5x slower).
this.WhenActivated((disposable) =>
{
this.OneWayBind(ViewModel, vm => vm.Exposure, v => v.exposure.Text).DisposeWith(disposable);
this.OneWayBind(ViewModel, vm => vm.Balance, v => v.balance.Text).DisposeWith(disposable);
});
}
}
ExposureViewModel
public class ExposureViewModel : ReactiveObject
{
double balance, exposure;
public double Balance
{
get => balance = 500.00d;
set => this.RaiseAndSetIfChanged(ref balance, value);
}
public double Exposure
{
get => exposure = 25.00d;
set => this.RaiseAndSetIfChanged(ref exposure, value);
}
public ExposureViewModel()
{
}
}

Well, I have been giving a lot of my time to the awesome Xamarin Forms Shell and I think that itself is the reason for the performance delay that you are talking about right now.
When you read the Microsoft documents it clearly says:
In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. However, Shell is also capable of creating pages on demand, in response to navigation. For more information, see Efficient page loading.
The good thing is that you can fix this by loading these pages on Demand as you may see here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs#efficient-page-loading
Basically, This can be accomplished by using the DataTemplate markup extension to convert each ContentPage into a DataTemplate and then setting the result as the ShellContent.ContentTemplate property value.

How do you set the width of tabs in a TabbedPage in Xamarin

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!

Set content page icon

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.