How to change image color/position of a Button?

[Zoltan Herczeg]

Hi,

I would have a pretty simple question, how can I change the position and color of the image of the Button? 

Top is the reality, bottom expectation.

<buttons:SfButton

    Background="{DynamicResource PrimaryColor}"

    CornerRadius="10"

    ImageSource="icon_plus.png"

    ShowIcon="True"

    Text="ADD"

    TextColor="{DynamicResource OnSurfaceColor}" />

Thank you in advance!

Best Regards,

Zoltán

[Sri Radhesh Nag Subash Sankar]

Hi Zoltan,

Thank you for contacting us.

We have reviewed your query regarding customizing the position and color of the image inside an SfButton. You can achieve this by using the SfButton.Content property to control the layout and positioning, and by applying the IconTintColorBehavior from the .NET MAUI Community Toolkit to set the image color.

Example code snippet:

XAML:

 

<button:SfButton x:Name="SfButton" Clicked="SfButton_Clicked" WidthRequest="300" HeightRequest="100">

    <button:SfButton.Content>

        <DataTemplate>

            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">

                <Image Source="dotnet_bot.png" WidthRequest="50" HeightRequest="50">

                    <Image.Behaviors>

                        <toolkit:IconTintColorBehavior TintColor="White" />

                    </Image.Behaviors>

                </Image>

                <Label FontSize="20"

           HorizontalOptions="Center"

           Text="Button"

           TextColor="White"

           VerticalOptions="Center" />

            </StackLayout>

        </DataTemplate>

    </button:SfButton.Content>

</button:SfButton>

 

We have prepared a simple sample demonstrating this. Please check the attached sample for your reference. 

If you have any further questions, please don’t hesitate to reach out!

Regards,

Sri Radhesh Nag S

Attachment: MauiButton_(2)_e609592.zip