1. Home
  2. Forum
  3. Xamarin.Forms
  4. PopupView button background cannot be changed

PopupView button background cannot be changed

I use SfPopupLayout and PopupView on both iOS and Android. My app supports both light and dark mode. I have a global resource dictionary that declares styles for many view, including the PopupView. One of the global styles is as follows:

<sfpl:PopupStyle x:Key="PopupStyle"
    AcceptButtonBackgroundColor="{AppThemeBinding Light={x:StaticResource BackgroundColorLight},
                                                Dark={StaticResource BackgroundColorDark}}"
    AcceptButtonTextColor="{AppThemeBinding Light={StaticResource TextColorLight},
                                            Dark={StaticResource TextColorDark}}"
    BorderColor="{AppThemeBinding Light={StaticResource BorderColorLight},
                                Dark={StaticResource BorderColorDark}}"
    DeclineButtonBackgroundColor="{AppThemeBinding Light={x:StaticResource BackgroundColorLight},
                                                Dark={StaticResource BackgroundColorDark}}"
    DeclineButtonTextColor="{AppThemeBinding Light={StaticResource TextColorLight},
                                            Dark={StaticResource TextColorDark}}"
    FooterBackgroundColor="{AppThemeBinding Light={x:StaticResource BackgroundColorLight},
                                            Dark={StaticResource BackgroundColorDark}}"
    HeaderBackgroundColor="{AppThemeBinding Light={x:StaticResource BackgroundColorLight},
                                            Dark={StaticResource BackgroundColorDark}}"
    HeaderFontFamily="{x:Static font:OpenSans.Semibold}" />

<Style TargetType="sfpl:PopupView">
    <Setter Property="PopupStyle" Value="{StaticResource PopupStyle}" />
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={x:StaticResource BackgroundColorLight}, Dark={StaticResource BackgroundColorDark}}" />
</Style>

Now in light mode everything appears as it should be; however, changing the app to dark mode results in a dark dialog with the correct white text, but the accept button background remains white. I have tried explicitly setting the background colors on the view but this did not change anything.

Here is a sample of how I create this PopupView:

<popup:SfPopupLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
    AbsoluteLayout.LayoutFlags="All"
    IsOpen="{Binding IsPopupShowing}"
    IsVisible="{Binding IsPopupShowing}">
    <popup:SfPopupLayout.PopupView>
        <popup:PopupView AcceptButtonText="Ok"
            BackgroundColor="{AppThemeBinding Light={x:StaticResource BackgroundColorLight},
                Dark={StaticResource BackgroundColorDark}}"
            ContentTemplate="{StaticResource PopupContentDataTemplate}"
            ShowHeader="False" />
    </popup:SfPopupLayout.PopupView>
</popup:SfPopupLayout>

1ciIpZEjjJ.png

zOu5pdKyVl.png


9 Replies
SV Suja Venkatesan Syncfusion Team March 16, 2022 02:20 PM UTC

Hi Andrew, 

We are unable to provide app theme binding support for SfPopupLayout. Since the SfPopupLayout is mapping control and what you are seeing when opening the PopupView in view is native view and what you are accessing with SfPopupLayout is class, we mapped SfPopupLayout, PopupView and PopupStyle properties to native view. So, app theme binding will apply theme color to the view while it is rendering. So, we cannot map that property to native view. 

Regards, 
Suja 


AH Andrew Hoke replied to Suja Venkatesan March 16, 2022 06:59 PM UTC

If your view is truly "native", then it should at least be respecting the OS theme. I have selected the system (OS) theme as Dark in this screenshot and your "native" view is disregarding the system theme to display white. I might as well write my own view and ditch this one since its functionality is not consistent with other SyncFusion views. Is there any plan to support AppThemeBinding like your other views, or should I get started writing my own view that can support a basic feature of Xamarin?


SV Suja Venkatesan Syncfusion Team March 17, 2022 06:26 PM UTC

Hi Andrew, 

Currently, we are checking this with development team. We will update you with further details on or before March 21, 2022. We appreciate your patience until then.  

Regards, 
Suja 


SV Suja Venkatesan Syncfusion Team March 22, 2022 04:27 AM UTC

Hi Andrew, 

We need time to check this with development team. We will update you with further details on or before March 23, 2022. We appreciate your patience until then.   

Regards,  
Suja  


SV Suja Venkatesan Syncfusion Team March 23, 2022 02:30 PM UTC

Hi Andrew, 

As we already mentioned in our earlier update,  SfPopupLayout is mapping control and what you are seeing when opening the PopupView in view is native view and what you are accessing with SfPopupLayout is class, we mapped SfPopupLayout, PopupView and PopupStyle properties to native view. So, app theme binding will apply theme color to the view while it is rendering. So, we cannot map that property to native view. We will consider this as a feature in SfPopupLayout in .Net Maui platform. Please refer the below code snippets of Xamarin SfPopupLayout architecture  

// Forms class   

public class PopupView : View, IDisposable
    {
public static readonly BindableProperty HeaderTitleProperty =
            BindableProperty.Create("HeaderTitle", typeof(string), typeof(PopupView), "Title", BindingMode.TwoWay, null, propertyChanged: OnHeaderTitlePropertyChanged);

 private static void OnHeaderTitlePropertyChanged(BindableObject bindable, object oldValue, object newValue) 
        { 
            SfPopupLayout popuplayout = (bindable as PopupView).SfPopupLayout; 
            if (popuplayout != null && popuplayout.Content == null && popuplayout.NativeObject != null) 
            { 
                DependencyService.Get<IPopupLayoutDependencyService>().MapPopupViewProperties("HeaderTitle", popuplayout); 
            } 

            popuplayout = null; 
        }

    }

// DependencyClass 
internal static void MapPopupViewProperties(string propertyName, formsNamespace.PopupView formsPopupView, PopupView nativePopupView) 
 { 
            if (formsPopupView.SfPopupLayout.NativeObject == null || nativePopupView == null) 
            { 
                return; 
            } 

            if (propertyName == "AppearanceMode") 
            { 
                nativePopupView.AppearanceMode = formsPopupView.AppearanceMode.GetNativeAppearanceMode(); 
            } 
            else if (propertyName == "ShowHeader") 
            { 
                nativePopupView.ShowHeader = formsPopupView.ShowHeader; 
            } 
            else if (propertyName == "ShowFooter") 
            { 
                nativePopupView.ShowFooter = formsPopupView.ShowFooter; 
            } 
            else if (propertyName == "HeaderTitle") 
            { 
                nativePopupView.HeaderTitle = formsPopupView.HeaderTitle; 
            }
}


// Native Class

internal class PopupView : LinearLayout, IDisposable
{

} 

Regards, 
Suja 
 


AH Andrew Hoke replied to Suja Venkatesan March 23, 2022 07:30 PM UTC

I'm really not sure what relevancy the header title has to my issue. I've not mentioned issues with the popup view header anywhere. Please refer to my original message images, where you can see the footer is incorrectly colored.

A binding is a binding. Since you're using bindable properties, conformance to the AppThemeBindingExtension should be completely free since the binding engine does all the heavy lifting for you and all you need to do is set the background color of the view on the property change event or during a draw call to your renderer.


It's unfortunate as paying customers to have to deal with this kind of inconsistent behavior where parts of your library support app theme bindings and parts of it don't for completely arbitrary reasons. We're trying to release dark mode support for our app and this is a blocking issue.


SV Suja Venkatesan Syncfusion Team March 25, 2022 01:25 PM UTC

Hi Andrew, 

We regret for the inconvenience caused. We have attached the code snippets for reference of SfPopupLayout architecture. As we mentioned in our previous update, PopupView in view is native view, what you are accessing with SfPopupLayout is class, we mapped SfPopupLayout, PopupView and PopupStyle properties to native view. So, app theme binding will apply theme color to the view while it is rendering. So, we cannot map that property to native view.  We will consider this as a feature in SfPopupLayout in .Net Maui platform. We have attached a code snippets of Xamarin SfPopupLayout architecture regarding mapping PopupStyle to nativeView.  

Code Snippet: 
//SfPopupLayout Architecture 
 
// Forms class  
public class PopupView : View, IDisposable
    { 
public static readonly BindableProperty PopupStyleProperty = 
            BindableProperty.Create("PopupStyle", typeof(PopupStyle), typeof(PopupView), null, BindingMode.TwoWay, null, propertyChanged: OnPopupStylePropertyChanged); 
 
private static void OnPopupStylePropertyChanged(BindableObject bindable, object oldValue, object newValue) 
        { 
            SfPopupLayout popuplayout = (bindable as PopupView).SfPopupLayout;  
  if (popuplayout != null && popuplayout.Content == null && popuplayout.NativeObject != null) 
            { 
      DependencyService.Get<IPopupLayoutDependencyService>().MapPopupViewProperties("PopupStyle", popuplayout); 
            } 
 
            popuplayout = null; 
        }

    }

// DependencyClass 
internal static void MapPopupViewProperties(string propertyName, formsNamespace.PopupView formsPopupView, PopupView nativePopupView)  
 {  
            if (formsPopupView.SfPopupLayout.NativeObject == null || nativePopupView == null)  
            {  
                return;  
            }  

            if (propertyName == "AppearanceMode")  
            {  
                nativePopupView.AppearanceMode = formsPopupView.AppearanceMode.GetNativeAppearanceMode();  
            }  
            else if (propertyName == "ShowHeader")  
            {  
                nativePopupView.ShowHeader = formsPopupView.ShowHeader;  
            }  
            else if (propertyName == "ShowFooter")  
            {  
                nativePopupView.ShowFooter = formsPopupView.ShowFooter;  
            }  
else if (propertyName == "PopupStyle") 
            { 
                nativePopupView.PopupStyle = formsPopupView.PopupStyle; 
            }  
… 
}


// Native Class

internal class PopupView : LinearLayout, IDisposable
{

}  


Please let us know if you need any further assistance. 

Regards, 
Suja 


AH Andrew Hoke replied to Suja Venkatesan March 25, 2022 07:12 PM UTC

Please correct me if I'm wrong but it sounds like what you're saying is it's impossible to change the background color even though you provide bindable properties to set the background colors. This is very frustrating and confusing behavior.


SV Suja Venkatesan Syncfusion Team March 28, 2022 02:33 PM UTC

Hi Andrew, 

We deeply regret for the inconvenience caused. We would like to let know that the rootcause for the reported issue is Implict style is not supported for SfPopupLayout., As of now we don’t support for Implict styles for properties AcceptButtonBackgroundColor, BackgroundColor, HeaderBackgroundColor, etc of SfPopupLayout, we will consider this as feature request. We have already logged feature request for your requirement “Support to apply styles to PopupView using implicit styles ” in Xamarin.Forms and considered to implement. We will implement this feature in any of our upcoming release.      
     
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then.  

You can also communicate with us regarding the open features any time using our Feature Report page.     

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.   

As of now, you can achieve Apptheme binding for the SfPopupLayout with styling as like below code snippets. 

Code Snippet:  
<ContentPage.Resources> 
        <Color x:Key="BackgroundColorLight">Yellow</Color> 
        <Color x:Key="BackgroundColorDark">Pink</Color> 
    </ContentPage.Resources> 
<sfPopup:SfPopupLayout x:Name="popupLayout"> 
<sfPopup:SfPopupLayout.PopupView> 
            <sfPopup:PopupView  > 
                <sfPopup:PopupView.PopupStyle> 
                    <sfPopup:PopupStyle  
                                    HeaderFontAttribute="Bold" 
                                   AcceptButtonBackgroundColor="{AppThemeBinding Light={x:StaticResource BackgroundColorLight},Dark={x:StaticResource BackgroundColorDark},Default=Green}" 
                                    HeaderFontSize="25" 
                                    HeaderTextAlignment="Center" 
                                     
/> 
                </sfPopup:PopupView.PopupStyle> 
            </sfPopup:PopupView> 
        </sfPopup:SfPopupLayout.PopupView> 


Please refer the simple sample attached in the below sample link for your reference. 

Please let us know if you need any further assistance. 

Regards, 
Suja 


Loader.
Up arrow icon