How set OnPLatform value of "nothing" - xamarin.forms

I see threads about default values for OnPlatform, but I don't want a default value, I want a value of "nothing."
Here is my code, with a ToolbarItem for UWP and "nothing" for Android. Unfortunately, it throws an exception. How do I code an On Platform value of "nothing"? I can get rid of the exception by coding <ToolbarItem Text=""/> but it takes up Toolbar real estate that gets in the way of other controls.
<ContentPage.ToolbarItems>
<OnPlatform x:TypeArguments="ToolbarItem">
<On Platform="UWP">
<ToolbarItem IconImageSource="MyIcon.png"/>
</On>
<On Platform="Android">
</On>
</OnPlatform>
...

It appears you cannot do this in XAML. OnPlatform must provide a TypeArguments object for each platform on which it executes, or an exception will be thrown. Seems to me like a shortcoming in the XAML design, but no one asked me.
The solution, and in fewer lines of code than the XAML above, is in the page constructor:
if (Device.RuntimePlatform == Device.UWP)
{
ToolbarItem tbi = new ToolbarItem();
tbi.IconImageSource = "MyIcon.png";
this.ToolbarItems.Insert(0, tbi);
}
You could vary the 0 in the Insert depending on where you wanted the ToolbarItem to appear (untested). I wanted it first of the ToolbarItems, hence 0.

You could use the code below:
<ContentPage.ToolbarItems>
<OnPlatform x:TypeArguments="ToolbarItem">
<On Platform="UWP">
<ToolbarItem IconImageSource="MyIcon.png"/>
</On>
<On Platform="Android">
<ToolbarItem IconImageSource=""></ToolbarItem>
</On>
</OnPlatform>
</ContentPage.ToolbarItems>

Keep the ToolbarItem in XAML ResourceDictionary (e.g. in <ContentPage.Resources>):
<ResourceDictionary>
<OnPlatform x:Key="toolbarItem" x:TypeArguments="ToolbarItem">
<On Platform="iOS">
<ToolbarItem
...
<On Platform="UWP">
<ToolbarItem
...
<!-- Android: No ToolbarItem -->
Add it in the code behind page constructor using the resource key "toolbarItem":
InitializeComponent();
...
if (Resources.TryGetValue(key: "toolbarItem", out object value) &&
value is OnPlatform<ToolbarItem> onPlatform)
{
IEnumerable<ToolbarItem> items = GetElement(onPlatform);
if (items.Any() &&
items.FirstOrDefault() is ToolbarItem toolbarItem)
{
ToolbarItems.Add(toolbarItem);
GetElement example implementation:
IEnumerable<T> GetElement<T>(OnPlatform<T> onPlatform) where T : Element
{
foreach (var platforms in onPlatform.Platforms)
{
foreach (string platform in platforms.Platform)
{
if (platform == Device.RuntimePlatform)
{
yield return platforms.Value as T;
}
}
}
}

Related

Xamarin.Forms: Display additional tab on specific Platform

Good morning
I have a TabbedPage in my application. Due to restictions I would like to display one more tab on Android than on iOS.
My current TabbedPage look like:
<TabbedPage>
...
<ContentPage x:Name="Page1"/>
<ContentPage x:Name="Page2"/>
<ContentPage x:Name="Page3"/>
<ContentPage x:Name="Page4"/>
</TabbedPage>
I have decided to render Page3 only for Android. I changed my code into:
<TabbedPage>
...
<ContentPage x:Name="Page1"/>
<ContentPage x:Name="Page2"/>
<OnPlatform x:TypeArguments="Page">
<On Platform="Android">
<On.Value>
<ContentPage x:Name="Page3"/>
</On.Value>
</On>
</OnPlatform>
<ContentPage x:Name="Page4"/>
</TabbedPage>
This leads to runtime exception when entering into this TabbedPage:
An error occurred: 'Value cannot be null. Parameter name: item'.
Callstack: ' at
Xamarin.Forms.ObservableWrapper`2[TTrack,TRestrict].Add (TRestrict
item) [0x00008] in D:\a\1\s\Xamarin.Forms.Core\ObservableWrapper.cs:27
I tried to remove x:Name but did not work. Any ideas?
PS. As a workaround I am always able to:
Constructor()
{
if(Runtime.IsIOS)
{
this.Children.Remove(this.Page3)
}
}
However would be better to not render it at all and have it at XAML level.
Unless someone comes up with a way to do this in XAML, this is the best you can do (building on Jason's comment):
xaml:
<ContentPage x:Name="Page1"/>
<ContentPage x:Name="Page2"/>
<!-- no Page3 in XAML -->
<ContentPage x:Name="Page4"/>
c#:
private ContentPage page3;
Constructor()
{
InitializeComponent();
if (Runtime.IsAndroid)
{
page3 = new ContentPage();
// After pages 1 and 2.
Children.Insert(2, page3);
}
}
// Elsewhere in code-behind.
if (page3 != null)
{
...refer to page3...
}
This has the advantage of not constructing the page at all on iOS.
It also makes it easy to test whether page3 is there (page3 != null).
In practice, the other pages will typically be their own classes. Given partial class Page3 : ContentPage elsewhere:
private Page3 page3;
...
page3 = new Page3();
According to this,xaml is an alternative to programming code for instantiating and initializing objects, and organizing those objects in parent-child hierarchies.If you add one additional tab on android it will cause a NullReferenceException on ios.So you may want to do it in codebehind with Device.RuntimePlatform.
Here is my test you can refer to:
switch (Device.RuntimePlatform)
{
case Device.Android:
Children.Add(page1);
Children.Add(page2);
break;
case Device.iOS:
Children.Add(page1);
break;
case Device.UWP:
Children.Add(page1);
break;
}

xamarin System.InvalidOperationException: 'Cannot convert "VerticalGrid, 2" into Xamarin.Forms.IItemsLayout'

I'm getting the error System.InvalidOperationException: 'Cannot convert "VerticalGrid, 2" into Xamarin.Forms.IItemsLayout' during InitalizeComponent() of my ContentPage containing a CollectionsView.
The code works properly on UWP, and the error occurs when running on Android. Being new to xamarin.forms, I'm not really sure what to start looking for.
EDIT: it works if I choose "VerticalList".
Here's a bit of my xaml:
<ContentPage ... >
<StackLayout>
<CollectionView
x:Name="DetailGrid"
ItemsLayout="VerticalGrid, 2" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="20" BackgroundColor="Crimson">
<Image Source= "{Binding Path}" WidthRequest="300"/>
<Label Text="{Binding FileName}" TextColor ="Bisque" LineBreakMode="WordWrap" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
And here's some code-behind:
namespace varlist
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CollectionPage : ContentPage
{
public ObservableCollection<NodeData> nodes = new ObservableCollection<NodeData>();
public CollectionPage ()
{
InitializeComponent ();
nodes.Add (new ImageData { FileName = "image_chair_pk.jpg" });
...
DetailGrid.ItemsSource = nodes;
}
}
}
I got the same error with you when I use a Xamarin.forms version 4.5.0.725.
After I update my Xamarin.forms to the latest version 4.8.0.1687, everything works well.
Please update your Xamarin.forms version to fix this problem:
I found a workaround. This appears to be a framework bug.
According to Xamarin.Forms CollectionView Layout the syntax I used should work - and it does work for UWP.
They also show an alternate declaration to specify ItemsLayout:
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
And, this syntax works on Android.
I filed a bug on github:[Bug] CollectionView with ItemsLayout=VerticalGrid crashes on Android #12920
You can omit this property if you wish it vertical, the default is set to VerticalList. If you want your collectionView to be Horizontal, just use HorizontalList.
See https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout

Images not shown in CarouselView on first load

The scenario is, a content page is opened with a carousel displaying multiple images.
The images are bound as an observable collection of ImageSource and they're fine
When the page is displayed, I can see the carousels empty.
I have tried with two different CarouselView. The one that xamarin brings by default and the one from CardsView nuget library. With both of them the result is the same.
The page shows the carousel views without the image, but with the right amount of items (i.e: I can see that the observable collection has 3 items).
I suspect it must be some kind of racing condition because as soon as I force a hot reload of the view while debuggin (ie: I save the XAML and the view reloads in the device) I can see the carousels with the images displayed properly.
To reproduce it I have also added the images separately outside the carousel to prove that they're there.
I've also added both carousels to the view. This is the result on the first load:
and after I save the xaml (without doing anything on it at all) and the view refreshes, this is what I see, and it's correct.
Notice how in the first load, the 3 images are displayed correctly outside the carousel, but not inside any of the carousels, although there is no problem if what I add in the carousel is text.
Any idea where may be the issue? Is it a racing condition? Or is it a problem with both different carousels?
This is my 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:Sasw.AforoPass.ViewModels;assembly=Sasw.AforoPass"
xmlns:panCardView="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
mc:Ignorable="d"
x:Class="Sasw.AforoPass.Views.MainPage"
x:DataType="viewModels:MainViewModel">
<ContentPage.Content>
<StackLayout>
<StackLayout.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</StackLayout.Resources>
<CarouselView BackgroundColor="White"
x:Name="Carousel"
ItemsSource="{Binding Images}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding .}"></Image>
<Label Text="image should be here"></Label>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<panCardView:CarouselView
ItemsSource="{Binding Images}"
BackgroundColor="{StaticResource ColorPrimary}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<panCardView:CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding .}"></Image>
<Label Text="image should be here"></Label>
</StackLayout>
</DataTemplate>
</panCardView:CarouselView.ItemTemplate>
<controls:LeftArrowControl />
<controls:RightArrowControl />
<controls:IndicatorsControl ToFadeDuration="1500"/>
</panCardView:CarouselView>
<Image WidthRequest="20" HeightRequest="20" Source ="{Binding Images[0]}"></Image>
<Image WidthRequest="20" HeightRequest="20" Source ="{Binding Images[1]}"></Image>
<Image WidthRequest="20" HeightRequest="20" Source ="{Binding Images[2]}"></Image>
<Button Text="Close"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
and the collection bound is:
public ObservableCollection<ImageSource> Images
{
get => _images;
set
{
_images = value;
OnPropertyChanged();
}
}
UPDATE 1:
I've just edited the whole question because at first I though the problem could be related with Rg.Plugins.Popup because it was happening within a popup. But I've tried the same with a normal content page and the problem remains, so it's definitely something to do with the carousel.
UPDATE 2
I keep investigating. So far, the problem seems to be with image streams in carousels, either the Xamarin carousel or the CardView's library carousel (which have different mechanisms).
I've tried adding options and height and width request to the image that accesses the stream without luck
<!--in DataTemplate within the carousel-->
<Image Source="{Binding .}" HeightRequest="100"
WidthRequest="100"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"></Image>
<Label Text="image should be here"></Label>
UPDATE 3:
Thanks to Jack Hua for his comment and repo, I updated it to reflect the issue I have and managed to reproduce it at this specific commit here
Basically I have taken the same repo, added a QRCoder library to quickly generate images as byte[] at runtime and added the image sources from stream.
public Model() {
Images = new ObservableCollection<ImageSource>();
var imageOne = GetQrImageAsBytes();
var imageTwo = GetQrImageAsBytes();
var imageThree = GetQrImageAsBytes();
// This works
//Images.Add(ImageSource.FromFile("logo.jpg"));
//Images.Add(ImageSource.FromFile("sample.jpg"));
//Images.Add(ImageSource.FromFile("ttt.png"));
Images.Add(ImageSource.FromStream(() => new MemoryStream(imageOne)));
Images.Add(ImageSource.FromStream(() => new MemoryStream(imageTwo)));
Images.Add(ImageSource.FromStream(() => new MemoryStream(imageThree)));
}
private byte[] GetQrImageAsBytes()
{
var randomText = Guid.NewGuid().ToString();
var qrGenerator = new QRCodeGenerator();
var qrCodeData = qrGenerator.CreateQrCode(randomText, QRCodeGenerator.ECCLevel.L);
var qRCode = new PngByteQRCode(qrCodeData);
var qrCodeBytes = qRCode.GetGraphic(20);
return qrCodeBytes;
}
UPDATE 4:
I found the issue, I had to try a few times to make sure this really was the problem, but it certainly is.
Re-Sharper suggests me to make a change in ItemsSource="{Binding Images}" as it does not recognize Images. So I follow Re-Sharper recommendation and let it add a x:DataType="app265:Model" in xaml's ContentPage tag. That causes the problem. I don't really know why, but I'll sleep better tonight :)
<?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"
xmlns:app265="clr-namespace:App265;assembly=App265"
mc:Ignorable="d"
x:Class="App265.MainPage"
x:DataType="app265:Model"><!--this line that Re-Sharper adds causes the issue-->
Is this a Xamarin bug? or does it make sense to you? An explanation to why this x:DataType breaks things but only on the first load would be chosen as the right answer.
x:DataType="ImageSource"
Add this to your carousel view DataTemplate. It should solve your problem.
It seems there some issues with BindignContext detecting, so you should "help" to detect it yourself.
Same problem here with xamarin.forms 5.0.0.2012 but in my case my image sources are urls. It worked with x:DataType="x:String" in the carousel view DataTemplate
<CarouselView
ItemsSource="{Binding ImageSources}"
>
<CarouselView.ItemTemplate>
<DataTemplate
x:DataType="x:String">
<forms:CachedImage
Aspect="AspectFit"
ErrorPlaceholder="Placeholder"
LoadingPlaceholder="Placeholder"
DownsampleWidth="300"
DownsampleToViewSize="True"
Source="{Binding .}">

How to bind image icon on ToolbarItem on Platform tag

How to bind an image icon on the ToolbarItem OnPlatform tag in Xamarin.Forms
This is my code:
<ToolbarItem
Icon="{OnPlatform iOS='iconscalendarplus64.png', Android='iconscalendarplus64.png'}"
Priority="0"
Order="Primary"
Command="{Binding PrikaziCommand}"
I am trying to bind images for the Android OnPlatform, but it is not working.
Since the Android and iOS properties of the OnPlatform are not BindableProperty
They don't support Data Binding. Hence you cannot bind those Property.
As an alternative you can set the platform specific image source to a property in the ViewModel and you it instead.
XAML
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="{Binding PlatformSpecificImage}"/>
</ContentPage.ToolbarItems>
View Model
public ImageSource PlatformSpecificImage { get; set; }
public ViewModel()
{
if(Device.RuntimePlatform == Device.Android)
{
PlatformSpecificImage = "android_image.png";
}
else
{
PlatformSpecificImage = "iOS_image.png";
}
}
Hope this could help!
The easiest way would be something like :
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="ImageSource">
<OnPlatform.iOS><FileImageSource File=""icon.png""/></OnPlatform.iOS>
<OnPlatform.Android><FileImageSource File=""icon.png""/></OnPlatform.Android>
<OnPlatform.WinPhone><FileImageSource File=""Images/icon.png""/></OnPlatform.WinPhone>
</OnPlatform>
</ToolbarItem.Icon>
The good thing is you can use all 4 types of ImageSource here based on platforms.
Good luck feel free to get back if you have queries

Tab icons in a Xamarin.Forms UWP TabbedPage?

When putting together a TabbedPage in Xamarin.Forms, how do I get UWP to use the page's Icon property?
It looks like UWP could support this just fine, if I configure my Forms attributes/files correctly.
Here's my TabbedPage XAML. The icons are all set up and working for iOS and Android, and even the on-page Image in UWP renders fine (meaning the files are likely in the project correctly).
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:tabbed"
x:Class="tabbed.MainPage">
<TabbedPage.Children>
<local:InitialPage Title="Tab1" Icon="star.png" />
<ContentPage Title="Tab2" Icon="gear.png">
<ContentPage.Content>
<StackLayout>
<Label Text="A nice label." />
<Image Source="star.png" /><!-- works here -->
</StackLayout>
</ContentPage.Content>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
I outlined how this is possible here http://depblog.weblogs.us/2017/07/12/xamarin-forms-tabbed-page-uwp-with-images/
In short, you need to change the default HeaderTemplate that is being used by UWP. But due to the way Xamarin forms is started, this is not straightforward.
So you need to inject a custom template into the resource dictionary.
Example project is up on Github here https://github.com/Depechie/XamarinFormsTabbedPageUWPWithIcons
Longer detail:
You need to supply your own TabbedPageStyle and switch out the one that Xamarin is using for their UWP rendering.
So the new style contains an Image where we data bind the Source to the Xamarin Icon property.
<Style x:Key="TabbedPageStyle2" TargetType="uwp:FormsPivot">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Icon, Converter={StaticResource IconConverter}}" Width="15" Height="15" />
<TextBlock Name="TabbedPageHeaderTextBlock" Text="{Binding Title}"
Style="{ThemeResource BodyTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The actual style switching is done in the App.Xaml.cs like this
((Style)this.Resources["TabbedPageStyle"]).Setters[0] = ((Style)this.Resources["TabbedPageStyle2"]).Setters[0];
You'll also need a converter to be sure the Image control understands the Icon source giving by Xamarin
public class IconConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value != null && value is Xamarin.Forms.FileImageSource)
return ((Xamarin.Forms.FileImageSource)value).File;
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
As it is currently, the UWP TabbedPage renderer does not use the Icon property at all, so getting tab icons will require a custom renderer. Even the official UWP samples don't actually seem to have this baked-in, requiring a custom UserControl.
The Android TabbedPageRenderer and iOS TabbedRenderer, and even the macOS TabbedPageRenderer, use the Icon property to adjust the tab UI, but the UWP renderer would need updating to make this work.

Resources