OnPlatform XAML

Hi!
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?

Thanks!

Tagged:

Answers

  • TorbenKruseTorbenKruse DEMember ✭✭✭
    edited August 2015

    @DavidKaplan
    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.

    <Button
        VerticalOptions="CenterAndExpand" Text="{Binding ItsVal}" Clicked="OnAquaDeviceCellClick">
        <Button.FontSize>
          <OnPlatform x:TypeArguments="x:double" iOS="15" Android="13" WinPhone="14" />
        </Button.FontSize>
      </Button>
    
  • 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 http://schemas.microsoft.com/winfx/2009/xaml

  • batmacibatmaci DEMember ✭✭✭✭✭

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

    how do you use it on xaml?

  • batmacibatmaci DEMember ✭✭✭✭✭

    @NMackay said:
    @batmaci

                        <StackLayout Grid.Row="1" Orientation="Vertical" HorizontalOptions="FillAndExpand"
                                             VerticalOptions="FillAndExpand">
                                    <StackLayout.Padding>
                                        <OnIdiom x:TypeArguments="Thickness">
                                            <OnIdiom.Phone>
                                                <OnPlatform x:TypeArguments="Thickness"
                                                            iOS="10,0,0,0"
                                                            Android="10,0,0,0"
                                                            WinPhone="8,0,0,0" />
                                            </OnIdiom.Phone>
                                            <OnIdiom.Tablet>
                                                <OnPlatform x:TypeArguments="Thickness"
                                                            iOS="20,0,0,0"
                                                            Android="20,0,0,0"
                                                            WinPhone="18,0,0,0" />
                                            </OnIdiom.Tablet>
                                        </OnIdiom>
                                    </StackLayout.Padding>
    

    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}"
        HorizontalOptions="FillAndExpand"
        Style="{StaticResource secondaryButtonStyle}"
        BackgroundColor="#00AFDB"
        Command="{Binding LogInUserCommand}">
        <Button.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android" Value="25, 15, 25, 10"/>
                <On Platform="iOS" Value="10, 15, 10, 10"/>
            </OnPlatform>
        </Button.Margin>
    </Button>
    

    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">
                        <StackLayout.VerticalOptions>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="CenterAndExpand" />
                                <On Platform="iOS" Value="EndAndExpand" />
                            </OnPlatform>
                        </StackLayout.VerticalOptions>
    </StackLayout>
    

    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:

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

    Detailed information and complete example see here:
    https://forums.xamarin.com/discussion/32814/style-fontsize-onplatform-in-XAML
    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 :
    https://stackoverflow.com/questions/51823784/changed-background-colors-of-action-bar-and-pages-after-update-to-forms-3-1/51840564#51840564

  • ClayBrinleeClayBrinlee USMember ✭✭
    edited December 2018

    in XF 3.2.0 + you can now use shorthand:

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

    so...

    Something like this becomes possible:

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