AppThemeBinding for SfButton text color only works once within SfPopup

[Anthony]

I have a button within an SfPopup which has a transparent background color, and I've set the text color differently for dark and light mode using AppThemeBinding using the following XAML:

<sfPopup:SfPopupLayout x:Name="Popup" IsVisible="False">
             <sfPopup:SfPopupLayout.PopupView>
                <sfPopup:PopupView>
                    <sfPopup:PopupView.ContentTemplate>
                        <DataTemplate>
                            <buttons:SfButton BackgroundColor="Transparent"
                               Text="Button"
                               TextColor="{AppThemeBinding Dark=Yellow, Light=DarkBlue}"
                               VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
                        </DataTemplate>
                    </sfPopup:PopupView.ContentTemplate>
                </sfPopup:PopupView>
             </sfPopup:SfPopupLayout.PopupView>
        </sfPopup:SfPopupLayout>

The Popup is initially not shown on the page, when I show it by running 

Popup.Show();

in the code behind, the first time it is displayed, the text is the expected colour:

After closing the popup, every subsequent time the popup opens, the button text reverts to the default colour:

This scenario was created using Syncfusion.Xamarin.Buttons 20.1.0.58, Syncfusion.Xamarin.SfPopupLayout 20.1.0.58, Xamarin.Forms 5.0.0.2291, and iOS simulator simulating an iPhone 8 Plus running iOS 15.4.

I guess it might be related to an issue I previously created regarding theme changes in the SfPopup control, but I'm not sure, so I've created this separately.

[Ruba Shanmugam]

Hi Anthony,

We have validated your query "AppThemeBinding for SfButton text color only works once within SfPopup" on our side. The reported issue was not reproduced on our side. We have prepared a sample for your reference and please get it from the attachments. We have shared the video also in the attachments.

Please check the sample and if you are still facing the issue, you can return us with more information about the replication steps with the sample. This will help us to further investigate and provide you with a better solution at the earliest possible time.

Regards,
Ruba Shanmugam

Attachment: SfButton_Video_Sample_40bdbaec.zip

[Anthony]

Hello Ruba.  Thank you very much for looking into this issue and creating the sample.  I ran your sample and also found that it did not reproduce the issue.

In the sample I had originally created, I have code to set the SyncFusion theme based on the device theme, which I didn't think was related to the problem, however that seems to be what causes the issue.  I believe you should be able to recreate the problem if you change the App.xaml file in your sample so that it includes the SyncFusion dark theme:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:syncTheme="clr-namespace:Syncfusion.XForms.Themes;assembly=Syncfusion.Core.XForms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SfButtonTextColor.App">
    
    <Application.Resources>
        <syncTheme:SyncfusionThemeDictionary> 
            <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 
                <syncTheme:DarkTheme /> 
            </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 
        </syncTheme:SyncfusionThemeDictionary>
    </Application.Resources>
</Application>

After changing the App.xaml in your sample as above, the button text colour was correct the first time the popup was displayed, but reverted to the default on all subsequent times that the popup was displayed.

For reference, I also have the following code in App.xaml.cs to react to device theme changes, but this didn't need to be added for me to see the problem with the button text colour, only the code in App.xaml as above.

public App()
    {
        InitializeComponent();
        //Application.Current.UserAppTheme = OSAppTheme.Dark;
        
        SetupTheme();

        Current.RequestedThemeChanged += (s, a) =>
        {
            SetupTheme();
        };
        
        MainPage = new MainPage();
    }

    protected override void OnStart()
    {
    }

    protected override void OnSleep()
    {
    }

    protected override void OnResume()
    {
    }
    
    private void SetupTheme()
    {
        ICollection<ResourceDictionary> mergedDictionaries = Resources.MergedDictionaries;
        DarkTheme darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault();
        LightTheme lightTheme = mergedDictionaries.OfType<LightTheme>().FirstOrDefault();
        OSAppTheme currentTheme = RequestedTheme;
        if (currentTheme == OSAppTheme.Light)
        {
            _ = mergedDictionaries.Remove(darkTheme);
            mergedDictionaries.Add(new LightTheme());
        }
        else
        {
            _ = mergedDictionaries.Remove(lightTheme);
            mergedDictionaries.Add(new DarkTheme());
        }
    }
}

[Ruba Shanmugam]

Hi Anthony,

We have validated the provided code snippet and we could able to replicate the issue “AppThemeBinding for SfButton text color only works once within SfPopup” when using Syncfusion theme dictionaries. We suggest you to resolve the reported issue by clearing a merged dictionaries before it add into the dictionary collection. We have prepared a sample and get it from the attachment.

Code Snippet:

private void SetupTheme()

{

        ICollection<ResourceDictionary> mergedDictionaries = Resources.MergedDictionaries;

        DarkTheme darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault();

        LightTheme lightTheme = mergedDictionaries.OfType<LightTheme>().FirstOrDefault();

        OSAppTheme currentTheme = RequestedTheme;

        mergedDictionaries.Clear();

        if (currentTheme == OSAppTheme.Light)

        {

               _ = mergedDictionaries.Remove(darkTheme);

              mergedDictionaries.Add(new LightTheme());

        }

        else

        {

             _ = mergedDictionaries.Remove(lightTheme);

           mergedDictionaries.Add(new DarkTheme());

        }

}

Please check the sample and if you are still facing the issue, you can return us with more information about the replication steps with the sample. This will help us to further investigate and provide you with a better solution at the earliest possible time.

Regards,

Ruba Shanmugam

Attachment: SfButton_AppTheme_d8385e4e.zip

[Anthony]

Hello Ruba.  Thank you for your suggestion to resolve the issue with the button text colour in the SfPopup control.

I added the call to mergedDictionaries.Clear(); as shown in your comment above.  It didn't appear to resolve the issue, after the first time the popup was displayed, the button text colour reverted to the default.

I did notice in MainPage.xaml in the sample solution you sent previously, that there was a commented out Xamarin Forms Button:

<!--<Button BackgroundColor="Transparent"
        Text="Button"
        TextColor="{AppThemeBinding Dark=Yellow, Light=DarkBlue}"
        VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>-->

 I note that if I uncommented that button, and commented out the SfButton control, the button text colour renders as expected when the SfPopup is opened and closed multiple times.  So I wondered if there was any chance that the fix you suggested was tested with a Button control rather than an SfButton control?

[Ruba Shanmugam]

Hi Anthony,

We have verified the already provided sample using mergedDictionaries.Clear(); method. The SfButton and normal Button TextColor updated properly every time SfPopup opened. We have attached a video for your reference.

Can you please check the provided sample and if you still facing the same issue, please send the sample with the replication steps. It would be helpful for providing a solution at earliest.

Regards,

Ruba Shanmugam

Attachment: SfButtonVideo_3cbe9c84.zip

[Anthony]

Hello Ruba, thank you for your reply, and the video.  I checked the provided sample again, and was able to apply your suggested fix, adding mergedDictionaries.Clear(); in the app in which I first encountered the problem.  The button text colour now remains the same when opening the popup after the first time.

Thank you for your assistance in resolving this issue.

[Ruba Shanmugam]

Hi Anthony,

We are glad to know that the issue has been resolved. Please let us know if you have any other details.

Regards,

Ruba Shanmugam