Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DotNet Maui - Button - control the Imagesource size

Tags:

maui

How can I resize the image when I use the ContentLayout the put the text below the ImageSource.

<HorizontalStackLayout>
    
    <Button MaximumHeightRequest="50"
            Text="Open"
            VerticalOptions="Start"
            ImageSource="file_open.png"
            ContentLayout="left,50" />
    <Button Text="Open file test"
            ContentLayout="Top,0"
            VerticalOptions="Start"
            ImageSource="file_open.png"
            Command="{Binding DivideBy2Command}" />
    <ImageButton x:Name="Toto"
            MaximumHeightRequest="50"
            VerticalOptions="Start"
            Source="file_open.png"
            Command="{Binding DivideBy2Command}" />
</HorizontalStackLayout>

enter image description here

Per Feedback from ToolmakerSteve and Alexandar May - MSFT Stackoverflow users and also playing with Padding I was able get what I need. Here the updated code.

<HorizontalStackLayout>
    <Button Text="Open"
            HeightRequest="50"
            VerticalOptions="Start"
            ImageSource="file_open.png"
            ContentLayout="left, 0"
            />
    <Button 
        VerticalOptions="Start"
        Text="Open File"
        FontSize="10"
        ImageSource="file_open.png"
        ContentLayout="Top,-10"
        Padding="2,-10,2,2"
        HeightRequest="50"
        WidthRequest="50"
        />
    <ImageButton 
        VerticalOptions="Start"
        Source="file_open.png"
        MaximumHeightRequest="50"  
        />
</HorizontalStackLayout>

Here the Output

enter image description here

like image 964
Jean-Marc Flamand Avatar asked Sep 05 '25 01:09

Jean-Marc Flamand


1 Answers

This can be achieved by setting the HeightRequest and WidthRequest of the Button like below:

    <HorizontalStackLayout >

        <Button 
            VerticalOptions="Start"
            MaximumHeightRequest="50"
            Text="Open"
            ImageSource="file_open.png"
            ContentLayout="left, 50"
            />

        <Button 
            VerticalOptions="Start"
            Text="Open file test"
            FontSize="10"
            ImageSource="file_open.png"
            Command="{Binding DivideBy2Command}"
            ContentLayout="Top,0"
            
            HeightRequest="100"
            WidthRequest="100"
            />

        <ImageButton 
            VerticalOptions="Start"
            x:Name="Toto"
            Source="file_open.png"
            MaximumHeightRequest="50"
            Command="{Binding DivideBy2Command}"    
            />

    </HorizontalStackLayout>

like image 150
Alexandar May Avatar answered Sep 07 '25 14:09

Alexandar May