imagexamlmauiimagebutton

How to force Image Button dimensions

I have an image button that I need to force to a small size (16 x 16 pixels). My images are exactly 16x16 pixels with no whitespace surrounding them. Leaving all heights and widths to auto, I get this:
enter image description here

I tried setting the height request and width request to 16 but it only scaled the image up to the size of the button. Putting even smaller numbers didn't make a difference.

<Grid ColumnSpacing="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    
    <Label x:Name="ListName" Grid.Column="0" Grid.Row="0"/>

    <HorizontalStackLayout Grid.Column="1" Grid.Row="0">
        <ImageButton Clicked="OnMoveUp" Source="uparrow_16.png" 
                     Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center"
                     HeightRequest="16" WidthRequest="16"/>
        <ImageButton Clicked="OnMoveDown" Source="downarrow_16.png" 
                     Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center"
                     HeightRequest="16" WidthRequest="16"/>
        <ImageButton Clicked="OnRemove" Source="trashcan_16.png" 
                     Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center"
                     HeightRequest="16" WidthRequest="16"/>
    </HorizontalStackLayout>
    
    <VerticalStackLayout x:Name="Content" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">

    </VerticalStackLayout>
</Grid>

enter image description here

I also tried messing with the height of the row but that only caused the images to get scaled weird and cut off parts of the images. (I removed the heightrequest and widthrequest attributes and it didn't make a difference)


        <Grid.RowDefinitions>
            <RowDefinition Height="16"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

enter image description here

Solution

  • I tested on my side and this actually the design on the MAUI Windows platform. You can not to change the Imagebutton height by using the grid height. But you can use the AbsoluteLayout to change the item's height and position.

     <AbsoluteLayout Grid.Column="1" Grid.Row="0" >
            <ImageButton  Source="pic.png"
                     Aspect="AspectFit" HorizontalOptions="Center" AbsoluteLayout.LayoutBounds="36,0,16,16"
                     />
            <ImageButton Source="pic2.png"
                     Aspect="AspectFit" HorizontalOptions="Center" AbsoluteLayout.LayoutBounds="52,0,16,16"
                    />
            <ImageButton  Source="pic.png"
                     Aspect="AspectFit" HorizontalOptions="Center" AbsoluteLayout.LayoutBounds="20,0,16,16"
                    />
 </AbsoluteLayout>