color connverter

Question

color connverter

Eduardo Gomez 4,316

I have a converter

public class SelectedAvatarMultiValueConverter : IMultiValueConverter {

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
        if(values.Length == 2 &&
            values[0] is AvatarCharacter current &&
            values[1] is AvatarCharacter selected) {

            return Equals(current, selected) ? Colors.Red : Colors.Transparent;
        }

        return Colors.Transparent;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) {
        throw new NotImplementedException();
    }
}

This converter, will change the color of the stroke of the avatar to red. This will make it easier for you to know who is selected

 <CollectionView
     ItemsSource="{Binding AvatarCharacters}"
     SelectedItem="{Binding SelectedAvatar}"
     SelectionChangedCommand="{Binding AvatarSelectedCommand}"
     SelectionMode="Single">
     <CollectionView.ItemsLayout>
         <GridItemsLayout
             Orientation="Vertical"
             Span="3" />
     </CollectionView.ItemsLayout>

     <CollectionView.ItemTemplate>
         <DataTemplate x:DataType="sfavatar:AvatarCharacter">
             <Grid Padding="10">
                 <Border
                     HeightRequest="60"
                     StrokeThickness="3"
                     WidthRequest="60">

                     <Border.StrokeShape>
                         <RoundRectangle CornerRadius="30" />
                     </Border.StrokeShape>


                     <Border.Stroke>
                         <MultiBinding Converter="{StaticResource AvatarEqualityConverter}">
                             <Binding Path="." />
                             <Binding
                                 Path="BindingContext.SelectedAvatar"
                                 Source="{x:Reference AppShellFireChatPage}" />
                         </MultiBinding>
                     </Border.Stroke>

This is my entire shell

<Shell
    x:Class="FireChat.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:FireChat.Controls"
    xmlns:icons="clr-namespace:FireChat.Icons"
    xmlns:local="clr-namespace:FireChat"
    xmlns:model="clr-namespace:FireChat.Model"
    xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
    xmlns:sfavatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
    xmlns:shimmer="clr-namespace:Syncfusion.Maui.Shimmer;assembly=Syncfusion.Maui.Core"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:views="clr-namespace:FireChat.Views"
    xmlns:vm="clr-namespace:FireChat.ViewModels"
    x:Name="AppShellFireChatPage"
    x:DataType="vm:AppShellViewModel"
    FlyoutBehavior="{OnIdiom Desktop=Locked,
                             Phone=Disabled}"
    Shell.FlyoutWidth="60">

    <Shell.Resources>
        <ResourceDictionary>
            <local:SelectedAvatarMultiValueConverter x:Key="AvatarEqualityConverter" />
        </ResourceDictionary>
    </Shell.Resources>

    <ShellContent
        ContentTemplate="{DataTemplate views:WelcomePage}"
        FlyoutItemIsVisible="False"
        Route="WelcomePage"
        Shell.FlyoutBehavior="Disabled"
        Shell.NavBarIsVisible="False" />

    <ShellContent
        ContentTemplate="{DataTemplate views:LoginPage}"
        FlyoutItemIsVisible="False"
        Route="LoginPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.NavBarIsVisible="False" />

    <ShellContent
        ContentTemplate="{DataTemplate views:ChatPage}"
        Route="ChatPage"
        Shell.NavBarIsVisible="{OnIdiom Desktop=False,
                                        Phone=True}">
        <ShellContent.Icon>
            <FontImageSource
                FontFamily="MaterialSymbol"
                Glyph="{Static icons:MateriallFontGlyphs.Chat}"
                Color="{AppThemeBinding Dark={DynamicResource White},
                                        Light={DynamicResource PrimaryDarkText}}" />
        </ShellContent.Icon>
    </ShellContent>

    <Shell.FlyoutFooter>
        <Grid
            Padding="10"
            BackgroundColor="Transparent"
            HeightRequest="48">
            <Image x:Name="UserProfileImage">
                <Image.Source>
                    <FontImageSource
                        FontFamily="MaterialSymbol"
                        Glyph="{Static icons:MateriallFontGlyphs.Account_circle}"
                        Color="{AppThemeBinding Dark={DynamicResource White},
                                                Light={DynamicResource PrimaryDarkText}}" />
                </Image.Source>
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                        x:DataType="vm:AppShellViewModel"
                        Command="{Binding OpenProfileCommand}" />
                </Image.GestureRecognizers>
            </Image>

            <sfPopup:SfPopup
                x:Name="AvatarOptionsPopUp"
                AbsoluteY="-18"
                Style="{DynamicResource AvatarOptionsPopupStyle}">
                <sfPopup:SfPopup.ContentTemplate>
                    <DataTemplate x:DataType="vm:AppShellViewModel">
                        <CollectionView
                            x:Name="OptionCollectionView"
                            Margin="10"
                            ItemsSource="{Binding OptionsColletion}"
                            SelectedItem="{Binding SelectedItem}"
                            SelectionMode="Single">
                            <CollectionView.ItemTemplate>
                                <DataTemplate x:DataType="model:UserAvatarOptions">
                                    <VerticalStackLayout>
                                        <Label
                                            Padding="10"
                                            Text="{Binding Name}"
                                            VerticalTextAlignment="Center" />
                                        <BoxView
                                            BackgroundColor="{AppThemeBinding Dark={DynamicResource White},
                                                                              Light={DynamicResource PrimaryDarkText}}"
                                            HeightRequest="1"
                                            IsVisible="{Binding IsFirst}" />
                                        <VerticalStackLayout.GestureRecognizers>
                                            <TapGestureRecognizer
                                                x:DataType="vm:AppShellViewModel"
                                                Command="{Binding SelectedOptionCommand, Source={RelativeSource AncestorType={x:Type vm:AppShellViewModel}}}" />
                                        </VerticalStackLayout.GestureRecognizers>
                                    </VerticalStackLayout>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </DataTemplate>
                </sfPopup:SfPopup.ContentTemplate>
            </sfPopup:SfPopup>

            <!--  User profile popup  -->

            <sfPopup:SfPopup
                x:Name="UserProfilePopup"
                AbsoluteY="30"
                AcceptCommand="{Binding SavePopUpContentCommand}"
                HeaderHeight="90"
                RelativeView="{x:Reference UserProfileImage}"
                Style="{DynamicResource UserProfilePopupStyle}">

                <sfPopup:SfPopup.Behaviors>
                    <toolkit:EventToCommandBehavior
                        BindingContext="{Binding BindingContext, Source={x:Reference UserProfilePopup}, x:DataType=sfPopup:SfPopup}"
                        Command="{Binding SavePopUpContentCommand}"
                        EventName="Closed" />
                </sfPopup:SfPopup.Behaviors>


                <sfPopup:SfPopup.ContentTemplate>
                    <DataTemplate x:DataType="vm:AppShellViewModel">

                        <Grid
                            Margin="20"
                            RowDefinitions="80,80,80,*">

                            <sfavatar:SfAvatarView
                                x:Name="AvatarImage"
                                Margin="0,0,0,24"
                                AvatarCharacter="{Binding User.AvatarCharacter}"
                                Style="{DynamicResource AvatarStyle}">
                                <sfavatar:SfAvatarView.GestureRecognizers>
                                    <PointerGestureRecognizer
                                        PointerEntered="AvatarPointerGeture_PointerEntered"
                                        PointerExited="AvatarPointerGeture_PointerExited" />
                                    <TapGestureRecognizer Tapped="AvatarTapGesture_Tapped" />
                                </sfavatar:SfAvatarView.GestureRecognizers>
                            </sfavatar:SfAvatarView>

                            <controls:MaterialEntry
                                Grid.Row="1"
                                x:DataType="vm:AppShellViewModel"
                                Hint="Username"
                                ShowIcon="False"
                                Text="{Binding User.Username}" />

                            <controls:MaterialEntry
                                Grid.Row="2"
                                x:DataType="vm:AppShellViewModel"
                                Hint="Status"
                                ShowIcon="False"
                                Text="{Binding User.StatusMessage}" />

                            <Border
                                Grid.Row="3"
                                Margin="0,0,0,20"
                                HorizontalOptions="End"
                                StrokeShape="RoundRectangle 10"
                                StrokeThickness="2"
                                VerticalOptions="End"
                                WidthRequest="100">

                                <Button
                                    Command="{Binding SignOutCommand}"
                                    Style="{StaticResource LogoutButtonStyle}" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </sfPopup:SfPopup.ContentTemplate>
            </sfPopup:SfPopup>

            <!--  Avatar Selection Popup  -->
            <sfPopup:SfPopup
                x:Name="AvatarSeletionPopUp"
                AbsoluteX="90"
                AbsoluteY="-350"
                HeightRequest="400"
                RelativePosition="AlignTopRight"
                RelativeView="{Reference AvatarOptionsPopUp}"
                ShowHeader="False"
                ShowOverlayAlways="False"
                WidthRequest="300">

                <sfPopup:SfPopup.PopupStyle>
                    <sfPopup:PopupStyle
                        CornerRadius="8"
                        HasShadow="True"
                        PopupBackground="{AppThemeBinding Dark={DynamicResource PrimaryDarkText},
                                                          Light={DynamicResource White}}" />
                </sfPopup:SfPopup.PopupStyle>

                <sfPopup:SfPopup.ContentTemplate>
                    <DataTemplate x:DataType="vm:AppShellViewModel">
                        <CollectionView
                            ItemsSource="{Binding AvatarCharacters}"
                            SelectedItem="{Binding SelectedAvatar}"
                            SelectionChangedCommand="{Binding AvatarSelectedCommand}"
                            SelectionMode="Single">
                            <CollectionView.ItemsLayout>
                                <GridItemsLayout
                                    Orientation="Vertical"
                                    Span="3" />
                            </CollectionView.ItemsLayout>

                            <CollectionView.ItemTemplate>
                                <DataTemplate x:DataType="sfavatar:AvatarCharacter">
                                    <Grid Padding="10">
                                        <Border
                                            HeightRequest="60"
                                            StrokeThickness="3"
                                            WidthRequest="60">

                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="30" />
                                            </Border.StrokeShape>


                                            <Border.Stroke>
                                                <MultiBinding Converter="{StaticResource AvatarEqualityConverter}">
                                                    <Binding Path="." />
                                                    <Binding
                                                        Path="BindingContext.SelectedAvatar"
                                                        Source="{x:Reference AppShellFireChatPage}" />
                                                </MultiBinding>
                                            </Border.Stroke>

                                            <sfavatar:SfAvatarView
                                                AvatarCharacter="{Binding .}"
                                                BackgroundColor="White"
                                                ContentType="AvatarCharacter"
                                                CornerRadius="25"
                                                HeightRequest="50"
                                                WidthRequest="50" />
                                        </Border>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>

                        </CollectionView>
                    </DataTemplate>
                </sfPopup:SfPopup.ContentTemplate>
            </sfPopup:SfPopup>

        </Grid>
    </Shell.FlyoutFooter>
</Shell>

but for some reason is not working

Untitledvideo-MadewithClipchamp-ezgif.com-video-to-gif-converter

Viorel 127.3K Reputation points

2025-07-02T18:00:22.5066667+00:00

Do you mean that Convert is never called, or values does not contain two AvatarCharacter objects, or Equals is never true during debugging?

Eduardo Gomez 4,316

So, I was debugging the app, and I saw that the converter is working, but for some reason the

one of the values is always null, that why is not working.

Untitledvideo-MadewithClipchamp-ezgif.com-video-to-gif-converter

This is what I want

User's image

ViewMoel for shell

 readonly FirebaseAuthClient _authClient;
 readonly WeakReferenceMessenger _messenger;
 readonly FirestoreService _firestoreService;

 [ObservableProperty]
 public partial FireUser? User { get; set; } // Add nullable annotation to fix CS8601

 [ObservableProperty]
 public partial UserAvatarOptions? SelectedItem { get; set; }

 [ObservableProperty]
 public partial AvatarCharacter? SelectedAvatar { get; set; }

 public ObservableCollection<UserAvatarOptions>? OptionsColletion { get; set; } = [];

 [ObservableProperty]
 public partial bool IsLoading { get; set; }

 public ObservableCollection<AvatarCharacter> AvatarCharacters { get; set; }

 public AppShellViewModel(FirebaseAuthClient authClient,
     WeakReferenceMessenger messenger,
     FirestoreService firestoreService) {

     _firestoreService = firestoreService;
     _authClient = authClient;
     _messenger = messenger;

     AvatarCharacters = new ObservableCollection<AvatarCharacter>(Enum.GetValues<AvatarCharacter>());

     GetCurrentUserAsync();

     GetOptions();
 }

 [RelayCommand]
 async Task SignOut() {

     _authClient.SignOut();

     await Shell.Current.GoToAsync($"//{nameof(LoginPage)}");
 }

 [RelayCommand]
 void OpenProfile() {

     _messenger.Send("OpenProfilePopUp");

 }

 private async void GetCurrentUserAsync() {

     if(_authClient.User is null) {
         Debug.WriteLine("User is null, returning.");
         return;
     }
     User = await _firestoreService.ReadAsync<FireUser>("Users",
         _authClient.User.Uid);

     SelectedAvatar = User?.AvatarCharacter;
 }


 [RelayCommand]
 async Task SavePopUpContent() {

     if(User is not null && _authClient.User is not null) {

         await _firestoreService.UpdateAsync("Users", _authClient.User.Uid!, User);
     }

     _messenger.Send("SavePopUpContent");

 }

 [RelayCommand]
 void AvatarSelectionPopup() {

     _messenger.Send("OpenAvatarSeletionPopUp");
 }

Viorel 127.3K Reputation points

2025-07-03T19:04:08.9466667+00:00

Did you determine which of the two is null and if this can lead to the problematic <Binding> element?
Anonymous

2025-07-10T07:17:01.1233333+00:00

Hi, just checking in - any updates on this?
Eduardo Gomez 4,316 Reputation points

2025-07-10T10:49:37.69+00:00

No I could not find out

Anonymous

This line assumes that AppShellFireChatPage.BindingContext is set to your AppShellViewModel, and that SelectedAvatar is populated before the converter runs. However, if SelectedAvatar is being set asynchronously (as in GetCurrentUserAsync()), it might still be null when the converter first runs.

<Binding Path="BindingContext.SelectedAvatar" Source="{x:Reference AppShellFireChatPage}" />

You could temporarily modify your converter to check which value is null.

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
    Debug.WriteLine($"Converter values: current={values[0]}, selected={values[1]}");

    if (values.Length == 2 &&
        values[0] is AvatarCharacter current &&
        values[1] is AvatarCharacter selected) {

        return Equals(current, selected) ? Colors.Red : Colors.Transparent;
    }

    return Colors.Transparent;
}

Anonymous

2025-07-16T07:18:44.41+00:00

Have you found out anything yet? Let me know if you have any questions.
Eduardo Gomez 4,316 Reputation points

2025-07-16T07:20:31.9566667+00:00

Finally fix it, I using syncfusion listview
Starry Night 625 Reputation points

2025-07-16T08:25:20.75+00:00

What's the code of AvatarCharacter and the relevant viewmodel of current page? And how can we reproduce this problem? Could you please post a basic demo so that we can try to reproduce this problem on our side?
Anonymous

2025-07-23T03:46:46.6733333+00:00

Let me know if you have any questions.

Answer accepted by question author

0 additional answers

Your answer

Viorel 127.3K Reputation points

2025-07-02T18:00:22.5066667+00:00

Do you mean that Convert is never called, or values does not contain two AvatarCharacter objects, or Equals is never true during debugging?
Viorel 127.3K Reputation points

2025-07-03T19:04:08.9466667+00:00

Did you determine which of the two is null and if this can lead to the problematic <Binding> element?
Anonymous

2025-07-10T07:17:01.1233333+00:00

Hi, just checking in - any updates on this?
Eduardo Gomez 4,316 Reputation points

2025-07-10T10:49:37.69+00:00

No I could not find out
Anonymous

2025-07-11T07:41:24.7466667+00:00

This line assumes that AppShellFireChatPage.BindingContext is set to your AppShellViewModel, and that SelectedAvatar is populated before the converter runs. However, if SelectedAvatar is being set asynchronously (as in GetCurrentUserAsync()), it might still be null when the converter first runs.

<Binding Path="BindingContext.SelectedAvatar" Source="{x:Reference AppShellFireChatPage}" />

You could temporarily modify your converter to check which value is null.

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { Debug.WriteLine($"Converter values: current={values[0]}, selected={values[1]}"); if (values.Length == 2 && values[0] is AvatarCharacter current && values[1] is AvatarCharacter selected) { return Equals(current, selected) ? Colors.Red : Colors.Transparent; } return Colors.Transparent; }
Anonymous

2025-07-16T07:18:44.41+00:00

Have you found out anything yet? Let me know if you have any questions.
Eduardo Gomez 4,316 Reputation points

2025-07-16T07:20:31.9566667+00:00

Finally fix it, I using syncfusion listview
Starry Night 625 Reputation points

2025-07-16T08:25:20.75+00:00

What's the code of AvatarCharacter and the relevant viewmodel of current page? And how can we reproduce this problem? Could you please post a basic demo so that we can try to reproduce this problem on our side?
Anonymous

2025-07-23T03:46:46.6733333+00:00

Let me know if you have any questions.

Answer 1

Hello,

After troubleshooting in the comment section, it was confirmed that the SelectedAvatarMultiValueConverter was functioning correctly. However, it consistently received null values during execution. This behavior may be attributed to a binding lifecycle timing mismatch, where UI controls attempt to establish bindings before asynchronous data becomes available.

Migrating from .NET MAUI's CollectionView to Syncfusion's ListView appears to have resolved the issue.

It is likely that .NET MAUI's CollectionView instantiated item templates and evaluated bindings before the asynchronous data (e.g., SelectedAvatar) was loaded and assigned to the view model or individual AvatarCharacter objects.

In contrast, Syncfusion's ListView likely ensures that, by the time the SelectedAvatarMultiValueConverter is invoked for an item, all necessary bound properties—including those previously null—have already been populated from the view model.

I hope this helps clarify the issue.

References