{"id":798,"date":"2023-01-30T16:59:36","date_gmt":"2023-01-30T16:59:36","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=798"},"modified":"2023-01-30T17:23:50","modified_gmt":"2023-01-30T17:23:50","slug":"apply-color-to-images-and-icons-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/30\/apply-color-to-images-and-icons-in-maui\/","title":{"rendered":"How to apply color to Images and Icons in MAUI"},"content":{"rendered":"\n

Sometimes we need the same image in two different colors (eg : enable\/disable image) to show based on some conditions. So taking two images is not the right way. We need to use one image instead of two and based on some condition we need to change the color of the same image. So In this article, I\u2019m going to show you how to apply color to images and icons in MAUI.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Let\u2019s Start<\/strong><\/p>\n\n\n\n

The MAUI community toolkit provides us with IconTintColorBehavior<\/strong> to change the color of an image and icon.<\/p>\n\n\n\n

In this sample demo we will use CommunityToolkit.Maui<\/a><\/strong> nuget package.<\/p>\n\n\n\n

CommunityToolkit.Maui<\/strong><\/p>\n\n\n\n

CommunityToolkit.Maui is a collection of Converters, Behaviours, Animations, Custom Views, Effects, Helpers etc. It simplifies the developers task when building Android, iOS, macOS and WinUI applications using MAUI.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1 \u2013 Install CommunityToolkit.Maui nuget package<\/strong><\/p>\n\n\n\n

\"Expander<\/figure>\n\n\n\n
<\/div>\n\n\n\n

2 \u2013 In order to use the .NET MAUI Community Toolkit we need to call the extension method in MauiProgram.cs file as follows<\/strong><\/p>\n\n\n\n

using CommunityToolkit.Maui;\nusing Microsoft.Extensions.Logging;\n\nnamespace MAUIImageTintingSample;\n\npublic static class MauiProgram\n{\n    public static MauiApp CreateMauiApp()\n    {\n        var builder = MauiApp.CreateBuilder();\n        builder\n            .UseMauiApp<App>()\n            .UseMauiCommunityToolkit()\n            .ConfigureFonts(fonts =>\n            {\n                fonts.AddFont(\"OpenSans-Regular.ttf\", \"OpenSansRegular\");\n                fonts.AddFont(\"OpenSans-Semibold.ttf\", \"OpenSansSemibold\");\n            });\n\n#if DEBUG\n        builder.Logging.AddDebug();\n#endif\n\n        return builder.Build();\n    }\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
3 – Setting up the UI<\/strong><\/p>\n\n\n\n
3.1 – Create a MainPage.xaml<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n             x:Class=\"MAUIImageTintingSample.MainPage\"\n             xmlns:vm=\"clr-namespace:MAUIImageTintingSample\"\n             xmlns:toolkit=\"http:\/\/schemas.microsoft.com\/dotnet\/2022\/maui\/toolkit\"\n             x:Name=\"MainContainer\">\n\n    <ContentPage.BindingContext>\n        <vm:MainPageViewModel \/>\n    <\/ContentPage.BindingContext>\n\n    <ScrollView>\n        <VerticalStackLayout\n            Spacing=\"25\"\n            Padding=\"20,10\">\n\n            <Image\n                Source=\"dotnet_bot.png\"\n                HeightRequest=\"200\"\n                vm:TintColorBehavior.AttachBehavior=\"{Binding IsAttached}\"\n                HorizontalOptions=\"Center\"\/>\n\n            <HorizontalStackLayout Spacing=\"10\" HorizontalOptions=\"CenterAndExpand\">\n\n                <Image Source=\"camera.png\" vm:TintColorBehavior.AttachBehavior=\"{Binding IsAttached}\"\/>\n\n                <Image Source=\"heart.png\" vm:TintColorBehavior.AttachBehavior=\"{Binding IsAttached}\"\/>\n\n                <Image Source=\"home.png\" vm:TintColorBehavior.AttachBehavior=\"{Binding IsAttached}\"\/>\n\n                <Image Source=\"settings.png\" vm:TintColorBehavior.AttachBehavior=\"{Binding IsAttached}\"\/>\n\n                <Image Source=\"user.png\" vm:TintColorBehavior.AttachBehavior=\"{Binding IsAttached}\"\/>\n\n            <\/HorizontalStackLayout>\n\n            <FlexLayout\n                x:Name=\"StackColorList\"\n                AlignItems=\"Center\"\n                BindableLayout.ItemsSource=\"{Binding Colors}\"\n                Direction=\"Row\"\n                FlexLayout.AlignSelf=\"Center\"\n                HorizontalOptions=\"FillAndExpand\"\n                JustifyContent=\"Center\"\n                Wrap=\"Wrap\">\n                <BindableLayout.ItemTemplate>\n                    <DataTemplate>\n                        <Button\n                            BackgroundColor=\"{Binding Color}\"\n                            BorderColor=\"Transparent\"\n                            BorderWidth=\"2\"\n                            Command=\"{Binding BindingContext.ColorItemClickedCommand, Source={x:Reference MainContainer}}\"\n                            CommandParameter=\"{Binding .}\"\n                            CornerRadius=\"0\"\n                            HeightRequest=\"100\"\n                            WidthRequest=\"100\">\n                            <Button.Triggers>\n                                <DataTrigger\n                                    Binding=\"{Binding IsSelected}\"\n                                    TargetType=\"Button\"\n                                    Value=\"True\">\n                                    <Setter Property=\"BorderColor\" Value=\"Red\" \/>\n                                <\/DataTrigger>\n                            <\/Button.Triggers>\n                        <\/Button>\n                    <\/DataTemplate>\n                <\/BindableLayout.ItemTemplate>\n            <\/FlexLayout>\n\n            <Button\n                x:Name=\"CounterBtn\"\n                Text=\"Change Image Color\"\n                Command=\"{Binding ChangeImageTintColorCommand}\"\n                HorizontalOptions=\"Center\" \/>\n\n        <\/VerticalStackLayout>\n    <\/ScrollView>\n\n<\/ContentPage><\/pre>\n\n\n\n
<\/div>\n\n\n\n