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

Question

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.

Answer 1

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>

Answer 2

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>