I'm trying to assign different CornerRadius on iOS and Android like following:
<Frame
HasShadow="false"
Padding="10"
BackgroundColor="Red">
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Double">
<On
Platform="iOS">20</On>
<On
Platform="Android">30</On>
</OnPlatform>
</Frame.CornerRadius>
<Label
Text="Hello World" />
</Frame>
But getting a
Cannot assign property "CornerRadius": Property does not exists, or is not assignable, or mismatching type between value and property
I've tried x:TypeArguments="Thickness" and x:TypeArguments="x:Int32". Decompiling the Assembly it appears CornerRadius is of type float. However, there is no Float property in x namespace, I mean x:TypeArguments="x:Float" doesn't exists.
Any ideas what I'm doing wrong or this is a bug?
The CornerRadius type is a Single:
<Frame HasShadow="true" OutlineColor="Red">
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS" Value="20"/>
<On Platform="Android" Value="30"/>
</OnPlatform>
</Frame.CornerRadius>
<Frame.Content>
<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</Frame.Content>
</Frame>
Well I fell there is a syntax error here do something like this :
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<OnPlatform.Platforms>
<On Platform="iOS" Value="20" />
<On Platform="Android" Value="30" />
<On Platform="UWP" Value="30" />
</OnPlatform.Platforms>
</OnPlatform>
</Frame.CornerRadius>
Try this and in case it doesn't work kindly revert.
Related
After I updated to Xamarin.Forms 5.0 this line of code has been broken:
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle">
<On Platform="Android">0.5,0.49,0.4,0.5</On>
<On Platform="iOS">0.5,0.52,0.4,0.5</On>
</OnPlatform>
</AbsoluteLayout.LayoutBounds>
What can I do to fix it?
About setting AbsoluteLayout.LayoutBounds by platform, you can try to following code:
<AbsoluteLayout Margin="20">
<BoxView AbsoluteLayout.LayoutBounds="{OnPlatform Android='0,10,200,5', iOS='0,0,.5,.5'}" Color="Silver">
</BoxView>
</AbsoluteLayout>
When using <Style TargetType="Label"> I cant get FontSize to work with NamedSize.
Using Xamarin.Forms version : 3.4.0.1008975
Working :
<Style TargetType="Label">
<Setter Property="FontSize" Value="Small" />
</Style>
NOT working :
<Style TargetType="Label">
<Setter Property="FontSize">
<Setter.Value>
<OnPlatform x:TypeArguments="x:String"
Android="Small"
iOS="Medium"/>
</Setter.Value>
</Setter>
</Style>
I have tried to change the TypeArguments to <OnPlatform x:TypeArguments="NamedSize" .../> with no success.
I am using other propertysetters with <OnPlatform .../> and they work as they should. Its just FontSize.
<?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:App67"
x:Class="App67.MainPage">
<ContentPage.Resources>
<OnPlatform x:Key="textColor"
x:TypeArguments="Color">
<On Platform="WinPhone" Value="Red" />
<On Platform="Android" Value="Aqua" />
<On Platform="iOS" Value="#80FF80" />
</OnPlatform>
<OnPlatform x:Key="fontSize"
x:TypeArguments="Font">
<On Platform="WinPhone" Value="Bold,Large" />
<On Platform="Android" Value="Bold,Large" />
<On Platform="iOS" Value="Bold,Large" />
</OnPlatform>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<Label Text="Check out my style." TextColor="{StaticResource textColor}" Font="{StaticResource fontSize}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Previously I was able to do something like this
<OnPlatform x:TypeArguments="Color" Android="{StaticResource Primary}"/>
Now that, that syntax is deprecated, I'm trying to do this:
<OnPlatform x:TypeArguments="Color">
<On Platform="Android">{StaticResource Primary}</On>
</OnPlatform>
but I'm getting the following error:
Cannot convert "{StaticResource Primary}" into Xamarin.Forms.Color
How should my syntax be?
Because StaticResource is a markup extension, you can use it either through attribute usage, or element usage
For example, try this:
<OnPlatform x:TypeArguments="Color">
<On Platform="Android" Value="{StaticResource Primary}" />
</OnPlatform>
or,
<OnPlatform x:TypeArguments="Color">
<On Platform="Android">
<StaticResource Key="Primary" />
</On>
</OnPlatform>
Currently, I am developing a Xamarin.Forms PCL application for Android and iOS. In one of my pages I define a ListView. The template for the ListView.ItemTemplate displays an icon using <Image Source="some_Icon.png" />. The icon displays as expected (black) but I have not found a way to set the color.
I would like to colorize this icon based on logic in my ViewModel.
I have searched for answers both through the Documentation and StackOverlflow to no avail.
Is there a better way to display and style icons from a Xamarin.Forms PCL project?
Does Xamarin.Forms require a set of resource/image files for every possible color I might use?
I solved my problem with Iconize for Xamarin.Forms. I implemented my solution based off the Iconize sample code below.
<?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:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
x:Class="Iconize.FormsSample.Page1"
Title="{Binding FontFamily}">
<ContentPage.ToolbarItems>
<iconize:IconToolbarItem Command="{Binding ModalTestCommand}" Icon="fa-500px" />
<iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IconColor="Red" />
<iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IsVisible="{Binding VisibleTest}" />
</ContentPage.ToolbarItems>
<ListView CachingStrategy="RecycleElement" ItemsSource="{Binding Characters}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<iconize:IconImage HeightRequest="20" Icon="{Binding Key}" IconColor="Blue" WidthRequest="20" />
<iconize:IconImage HeightRequest="20" Icon="{Binding Key}" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
<iconize:IconButton FontSize="20" Text="{Binding Key}" TextColor="Red" WidthRequest="48" />
<iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
<Label Text="{Binding Key}" VerticalTextAlignment="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
In my case, I simply had to replace my original <Image .../> element and replace it with
<iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.
In my ViewModel, I added the CircleColor property to set the icon color as needed based on my logic.
I have the following C# code:
var footer = new StackLayout()
{ BackgroundColor = Device.OnPlatform(Color.FromRgb(225, 240, 251), Color.FromRgb(225, 240, 251), Color.Black),
};
How can I translate that into Xamarin Xaml, more importantly the Device Platform specifics for the FromRgb?
I have the following XAML so far... again, it's the FromRgb that's stumping me.
<StackLayout.BackgroundColor>
<Color>
<OnPlatform x:TypeArguments="Color"></OnPlatform>
</Color>
</StackLayout.BackgroundColor>
UPDATE 14/02/2015
I've just tried the answer below and I have the following but it's not updating the background colour for either iOS or Windows Phone. If I add the Background Color to the root StackLayout element it works...:
<StackLayout HorizontalOptions="FillAndExpand">
<StackLayout.BackgroundColor>
<Color>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.WinPhone>#51C0D4</OnPlatform.WinPhone>
<OnPlatform.iOS>#51C0D4</OnPlatform.iOS>
</OnPlatform>
</Color>
</StackLayout.BackgroundColor>
<Label Text=""></Label>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Button Text="Login"></Button>
<Button Text="Sign Up"></Button>
</StackLayout>
</StackLayout>
</StackLayout>
You're almost there. The default converter takes care of converting the color from either a named color (e.g. White, Red, etc.) or a hex color (e.g.: #FF0000).
<StackLayout.BackgroundColor>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.iOS>#FF0000</OnPlatform.iOS>
<OnPlatform.Android>#00FF00</OnPlatform.Android>
</OnPlatform>
</StackLayout.BackgroundColor>
Newer version syntax of OnPlatform is slightly different
In Xaml:
<ResourceDictionary>
<OnPlatform x:Key="SwitchOnColor" x:TypeArguments="Color" >
<On Platform="iOS|Android" >#0000FF</On>
<On Platform="UWP">#FF0000</On>
</OnPlatform>
</ResourceDictionary>
In code:
switch (Device.RuntimePlatform)
{
case "iOS":
break;
case "Android":
break;
case "UWP":
break;
default:
break;
}
You can do this also:
<ContentView>
<OnPlatform x:TypeArguments="View">
<On Platform="iOS">
<Label Text="iOS" />
</On>
<On Platform="Android">
<Label Text="Android" />
</On>
</OnPlatform>
</ContentView>