How can I not stretch out my image button in XAML - xaml

Question

I have these search bars and image buttons using Xamarin Forms, but the image button is getting stretched out, and I don't know how I can fix it with the XAML set up that I have.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0" Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center"/>
<ImageButton Grid.Row="0" Grid.Column="1"
Margin="4,5,4,4"
Command="{Binding Filter}" Source="filter.png" BackgroundColor="Transparent"></ImageButton>
</Grid>
The problem is, that if I set the image button to a specific width, to make it universal among devices, I don't know how to tell XAML to just stretch the search bar up to the image. What can I do?

Answer 1

I have tried with shared code , however it works in my local site . I think difference should be the PNG image . To clearly show the size of the ImageButton, I added a background color to illustrate it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effect as follow :
Here is the PNG image info :
However , I can reproduce your problem with my PNG image . If I set Aspect="Fill" and Width of Column is * as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
Aspect="Fill"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effects ：
About Solution , I have found three here :
First , if you can get a standard PNG file as minie , there will no problem .
Second , you can add Aspect="AspectFit" into ImageButton as Jason's suggestion .But that's not enough for your PNG image .You also need to set Width for its Column as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
Aspect="AspectFit"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effect :
Third , based on my reproduced code , adding HorizontalOptions="Center" for ImageButton also can solve it .
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Row="0"
Grid.Column="0"
Placeholder="Search"
Text="{Binding SearchText}"
FontSize="Medium"
VerticalOptions="Center"
Margin="0,4,0,0"
VerticalTextAlignment="Center" />
<ImageButton Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
Aspect="Fill"
Margin="4,5,4,4"
Source="search.png"
BackgroundColor="Red"></ImageButton>
</Grid>
The effect :
Although the image of three solutions shows the same , however the Bounds of their backgroud Frame is different .

Answer 2

use the Aspect property
<ImageButton Aspect="AspectFit" ...