CODEWITHSUNDEEP
xamlmobilexamarinxamarin.forms
Bengi Besceli
Bengi Besceli

Reputation: 3748

How to resize a button in Xamarin

I'm using Xamarin.Forms. I tried this code but it has not worked; how can I resize the buttons?

<ContentView.Content>
  <StackLayout>
    <Button Text="1" WidthRequest="50"></Button>
    <Button Text="2" WidthRequest="50"></Button>
  </StackLayout>
</ContentView.Content>

Thank you.

Upvotes: 10

Views: 44962

Answers (5)

Ali Besharati
Ali Besharati

Reputation: 1046

You can use HorizontalOptions attribute to make the width or height be as large as needed to contain the elements within it.

<Button  HorizontalOptions="Center"  Text="Retry" />

Upvotes: 5

enisn
enisn

Reputation: 745

Just Size parent View, for example if it's in a StackLayout, it'll be same size with parent. 

   <Grid HeightRequest="120" WidthRequest="120" HorizontalOptions="Center">
            <Button Text="Hello!" BackgroundColor="Red"/>
        </Grid>

It'll be shown 120 x 120,

Because, Button's Default HorizontalOptions is Fill, VerticalOptions is Start. But some Controls like buttons, ignores Height or Width request and prefer to fill parent. Other elements in the same Layout effects button. Just resize parent of button and leave it.

Upvotes: 1

Dushyant Singh Chouhan
Dushyant Singh Chouhan

Reputation: 39

Can you try the below mentioned method:

<StackPanel> 
   <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" FontSize = "12" Margin = "10"/>
   <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" FontSize = "12" Margin = "10"/>
   <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" FontSize = "12" Margin = "10"/> 
</StackPanel>

Upvotes: 0

Link Ng
Link Ng

Reputation: 208

  <StackLayout>
    <!--I am wider but shorter-->
    <Button Text="1" WidthRequest="100" HeightRequest="50"></Button>
    <!--I am narrower but longer-->
    <Button Text="2" WidthRequest="50" HeightRequest="100"></Button>
    <!--I fill the whole width. See also VerticalOptions-->
    <Button Text="3" HorizontalOptions="FillAndExpand"></Button>
  </StackLayout>

Upvotes: 3

Vulcan Lee
Vulcan Lee

Reputation: 493

<StackLayout >
    <Button Text="1" WidthRequest="50" 
            HorizontalOptions="Center"></Button>
    <Button Text="2" WidthRequest="50" 
            HorizontalOptions="Center"></Button>
</StackLayout>

enter image description here

Upvotes: 31

Related Questions