color connverter

Question

color connverter

Eduardo Gomez 3,711

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 123K 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 3,711

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 123K 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?
Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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

Hi, just checking in - any updates on this?
Eduardo Gomez 3,711 Reputation points

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

No I could not find out

Michael Le (WICLOUD CORPORATION) 770 Microsoft External Staff

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;
}

Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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

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

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

Finally fix it, I using syncfusion listview
Starry Night 5 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?
Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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

Let me know if you have any questions.

Your answer

Viorel 123K 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 123K 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?
Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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

Hi, just checking in - any updates on this?
Eduardo Gomez 3,711 Reputation points

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

No I could not find out
Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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; }
Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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

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

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

Finally fix it, I using syncfusion listview
Starry Night 5 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?
Michael Le (WICLOUD CORPORATION) 770 Reputation points Microsoft External Staff

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

Let me know if you have any questions.

Share via

color connverter

Your answer