Forum Xamarin.Forms

How to let image resolution be 48x48 in horizontal stacklayout

chunggchungg Member ✭✭
edited February 12 in Xamarin.Forms

I have a search bar, and then an image button right beside it in a StackLayout with Horizontal Orientation, like this:
<StackLayout Orientation="Horizontal"> <SearchBar Placeholder="Search" FontSize="Medium" HeightRequest="50"/> <ImageButton Source="image.png"></ImageButton> </StackLayout>

Now the image.png is a 48x48 image, and if my stacklayout isn't perfect, the image gets either stretched or squished sideways, depending on what the width of the searchbar is, and if I don't set the width to anything, the search bar just pushes the image off the screen. What can I do to make it so that the image takes up the amount of space it needs to, and then the search bar can come in?


edit: I forgot to mention an issue! The iOS image is 22x22, but the android image is 48x48 ******* So I don't know what I should do in this case.


  • ColeXColeX Member, Xamarin Team Xamurai
    1. Set StackLayout's HorizontalOptions as FillAndExpand , it makes StackLayout fills the screen width .

    2. Set ImageButton's HorizontalOptions as End , it makes ImageButton at right side of the screen .

    3. Set ImageButton's WidthRequest and HeightRequest as 48 , it defines the size of the ImageButton .

    Then SearchBar will take up the rest width of the screen .

  • chunggchungg Member ✭✭

    @ColeX Thanks! What is that weird space on the right of your imagebutton though? And your way worked on the android phone, but not on iOS... the search bar still takes up the whole row

  • ColeXColeX Member, Xamarin Team Xamurai
    edited February 27
Sign In or Register to comment.