CODEWITHSUNDEEP
maui
Jean-Marc Flamand
Jean-Marc Flamand

Reputation: 989

DotNet Maui - Button - control the Imagesource size

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

Upvotes: 4

Views: 13926

Answers (2)

Alex
Alex

Reputation: 1

Try to replace all "\" with "/" in the image path, this solved the problem at least for me.

Upvotes: 0

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10156

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>

Upvotes: 3

Related Questions