Maui ImageButton with FontImageSource - how to adjust image size? .net 8

Question

I just updated my maui android/ios project to .net 8 and my ImageButtons are now rendering differently.

In .net 7 I was not setting the height/width of the ImageButton, the size of the button would adjust based on the padding. I found a balance I liked that has the image showing with some padding so it would not get cut off by the cornerRadius.

In .net 8 I need to set the height/width to have the ImageButton show at all. However with the ImageButton height/width sizes set, the padding value makes no difference (this is the same behaviour as in .net 7).

For some reason the FontImageSource is now rendering larger than before, and with padding making no difference, I cannot get the image to fit nicely in the button without getting cut off by the corner radius. The FontImageSource icon has not changed.

I have tried various different heights/widths, padding and corner radii, as well as setting the size of the fontImageSource, but I cannot replicate the look I had for this button in .net 7!

I want to have it look like the top middle icon in the image above. Does anyone know what needs to change to so the icon will fit correctly?

<Grid Margin="0" BackgroundColor="Black" >
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <ImageButton Grid.Row="1" Margin="15,0,15,10" 
        HorizontalOptions="End" 
        VerticalOptions="End" 
        HeightRequest="40" 
        WidthRequest="40"
        Padding="5"
        CornerRadius="20"
        BackgroundColor="#32578f">
        <ImageButton.Source>
            <FontImageSource  
                Glyph="{x:Static m:MaterialOutlined.Grid_view}" 
                FontFamily="MaterialOutlined" 
                Color="White" 
                Size="10"/>
        </ImageButton.Source>
    </ImageButton>
</Gird>

Answer 1

Try using Scale, and remove padding.

<Grid Margin="0" BackgroundColor="Black" >
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <ImageButton Grid.Row="1" Margin="15,0,15,10" 
        HorizontalOptions="End" 
        VerticalOptions="End" 
        HeightRequest="40" 
        WidthRequest="40"
        Scale="0.5"
        CornerRadius="20"
        BackgroundColor="#32578f">
        <ImageButton.Source>
            <FontImageSource  
                Glyph="{x:Static m:MaterialOutlined.Grid_view}" 
                FontFamily="MaterialOutlined" 
                Color="White" 
                Size="10"/>
        </ImageButton.Source>
    </ImageButton>
</Gird>

Answer 2

This is a known issue as of right now, I don't think there are any work around though at first I thought I was the only one facing it so I raised and I guess I am not the only one, anyway

More information can be found here https://github.com/dotnet/maui/issues/18857

I will let you know in case of any updates...