Xamarin forms Button size for mobile and ipad from same XAML file

1
votes

I'm working on a xamarin forms application in which I have a requirement where I have to design a page in XAML, I have 2 entry field and a button inside a stacklayout vertically align.

<Entry Placeholder="Username" HorizontalOption="FillAndExpand" HeightRequest="30" WidthRequest="100" BackgroundColor="#3079a8" TextColor="Black" />
<Entry Placeholder="Password" HorizontalOption="FillAndExpand" HeightRequest="30" WidthRequest="100" BackgroundColor="#3079a8" TextColor="Black" />
<Button Text="Login" HorizontalOption="FillAndExpand" HeightRequest="30" WidthRequest="100" BackgroundColor="#3079a8" TextColor="White" />

I want to use same Xaml file for mobile also but how to give HeightRequest and WidthRequest so that Button can adjust according to screen size for phone ad ipad both.

2
xamarinxamarin.forms

2 Answers

5
votes

You can use the Device.Idiom to alter parameters based on Phone or Tablet:

<Button Text="StackOverflow" BackgroundColor="Blue">
    <Button.WidthRequest>
        <OnIdiom x:TypeArguments="x:Double" Phone="200" Tablet="400" />
    </Button.WidthRequest>
</Button>
0
votes

also you can use OnPlatform:

<stacklayout>
<Button Text="Tap Me">
 <Button.WidthRequest>
    <OnPlatform x:TypeArguments="x:Double">
                      <On Platform="iOS">80</On>
                      <On Platform="Android,Windows">70</On>
            </OnPlatform>
</Button.WidthRequest>
  </Button>
</stacklayout>