Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

OnPlatform XAML

I am trying to add the OnPlatform tag in my XAML ContentPage definition file.
I have a working Android App and now wnat to to make tweaks for the IOS version.
I would like to use the OnPlatform tag to detect whether Android or IOS are being used.
I would also like to detect whether a tablet or phone is in use, but I did not see a tag for this.

1) I tried to add the OnPlatform to my buttons to set the font, but then the text on the buttons just disappeared
OnPlatform version:
<Button> VerticalOptions="CenterAndExpand" Text="{Binding ItsVal}" Clicked="OnAquaDeviceCellClick" <OnPlatform x:TypeArguments="Font" iOS ="15" Android ="13" WinPhone="14" /> </Button>

Generic version that works:
<Button Font="13" VerticalOptions="CenterAndExpand" Text="{Binding ItsVal}" Clicked="OnAquaDeviceCellClick" />

2) I tried to add the OnPlatform in my ListView to set the RowHeight but got a Java exception on Android
OnPlatform version:
<ListView> <OnPlatform x:TypeArguments="RowHeight" iOS ="50" Android ="40" WinPhone="30" /> ItemsSource="{Binding}" ItemTapped="OnGetRidOfSelection" ItemTemplate="{local:DataTemplateSelector Page={x:Reference thePage}" </ListView>

Generic version that works:
<ListView RowHeight="40" ItemsSource="{Binding}" ItemTapped="OnGetRidOfSelection" ItemTemplate="{local:DataTemplateSelector Page={x:Reference thePage}" />

What am I doing wrong?
Do I have to use the code "Device.OS" to do this?




  • TorbenKruseTorbenKruse DEMember ✭✭✭
    edited August 2015

    OnPlatform in xaml is expecting a Type in x:TypeArguments neither than the name of the property. The property to set will be specified by <Object.Property>. So for your Button it should look like the example below. For your ListView it should be <ListView.RowHeight> and so on. Note that I just blindly wrote that down, so no guarantee that copy pasta will work.

        VerticalOptions="CenterAndExpand" Text="{Binding ItsVal}" Clicked="OnAquaDeviceCellClick">
          <OnPlatform x:TypeArguments="x:double" iOS="15" Android="13" WinPhone="14" />
  • DavidDancyDavidDancy AUMember ✭✭✭✭

    Use the OnIdiom tag to detect phone vs tablet.

  • OnurHazarOnurHazar USUniversity ✭✭✭
    edited October 2016

    Can we put a condition for setting image of a button? I tried like below but no luck. Any suggestion?

    <Button x:Name="MyButton" WidthRequest="32" HeightRequest="32"> <Button.Image> <OnPlatform x:TypeArguments="x:FileImageSource" // x:String didnt work out iOS = "Button.png" Android = "" //lets say no image for android /> </Button.Image> </Button>

    It says Type x:FileImageSource not found in xmlns

  • batmacibatmaci DEMember ✭✭✭✭✭

    @DavidDancy said:
    Use the OnIdiom tag to detect phone vs tablet.

    how do you use it on xaml?

  • batmacibatmaci DEMember ✭✭✭✭✭

    @NMackay said:

                        <StackLayout Grid.Row="1" Orientation="Vertical" HorizontalOptions="FillAndExpand"
                                        <OnIdiom x:TypeArguments="Thickness">
                                                <OnPlatform x:TypeArguments="Thickness"
                                                            WinPhone="8,0,0,0" />
                                                <OnPlatform x:TypeArguments="Thickness"
                                                            WinPhone="18,0,0,0" />

    in C# code I have also 3rd option as Desktop. I cant find this in Xaml. any idea?

  • dpedrinhadpedrinha DEMember ✭✭✭

    A simpler solution:

    <StackLayout Orientation="Vertical"> <StackLayout.Padding> <OnPlatform x:TypeArguments="Thickness" Android="0,0,0,15" WinPhone="0,0,0,0" iOS="10,10,10,10"/> </StackLayout.Padding>

  • AhmedElashkerAhmedElashker USMember ✭✭

    @15mgm15 said:
    New OnPlatform way:

    <Button Text="{i18n:Translate LoginPageLoginButtonText}"
        Style="{StaticResource secondaryButtonStyle}"
        Command="{Binding LogInUserCommand}">
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android" Value="25, 15, 25, 10"/>
                <On Platform="iOS" Value="10, 15, 10, 10"/>

    Only true solution I found for setting different margins on different platforms. Cheers.

  • AhmedElashkerAhmedElashker USMember ✭✭

    What I'm trying to do now may seem simple but I have been looking for around an hour with no luck so far.

    I have the following XAML

    <StackLayout Grid.Row="2" Margin="20,20,20,20">
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="CenterAndExpand" />
                                <On Platform="iOS" Value="EndAndExpand" />

    But it's giving an error saying. "Cannot assign property VerticalOptions, property does not exists, or is not assignable, or mismatching type between value and property"

    I have done the same successfully but for other properties of type x:Boolean, x:Double and Thickness... Out of curiosity I've been also trying to find some documentation that outlines all the available x:TypeArguments as a reference but still with no luck as well.

  • 15mgm1515mgm15 USMember ✭✭✭✭

    @AhmedElashker I think it is because VerticalOptions is a LayoutOptions object, so:

        <OnPlatform x:TypeArguments="LayoutOptions">
            <On Platform="iOS" Value="FillAndExpand"/>
  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    Detailed information and complete example see here:
    And (my) full story (at least, if you don't already have separated your app.cs to app.xaml and app.xaml.cs) see here :

  • ClayBrinleeClayBrinlee USMember ✭✭
    edited December 2018

    in XF 3.2.0 + you can now use shorthand:

    <Button HeightRequest="{OnPlatform iOS=60,Android=80, Default=40}"/>


    Something like this becomes possible:

                <x:String x:Key="ScanClassroomImageUWP">Assets/scan_classroom.targetsize-256.png</x:String>
                <x:String x:Key="ScanClassroomImageDefault">scan_classroom.png</x:String>
    <ImageButton Source="{OnPlatform UWP={StaticResource ScanClassroomImageUWP}, Default={StaticResource ScanClassroomImageDefault}}"/>
Sign In or Register to comment.