Xamarin forms effects doesnt get attached to Pages or layouts

[adhamali450]

Description

A lot of XF Pages and Layouts doesn't accept effects. You add the effects to the Effects collection and all but they doesn't get attached. Meaning that if you either attach the effect from XAML or code it doesn't get attached.
In Xaml you attach it using:

<Page.Effects>
    <effects:UwpAcrylicBrush/>
</Page.Effects>

In code you attach it either using:
Page.Effects.Add(new Effects.UwpAcrylicPage);
or using:
Page.Effects.Add(Effects.Resolve("ResolutionGroupName.EffectName"));

In the first attempt (Adding the effect to the Effects collection) it doesn't do anything. However, in the second attempt(Resolving the effect), it jumps to the constructor of the Effect in the platform specific project but then it jumps out. Even if you tried to call OnAttached() method in the constructor. The element initializes to null.

Steps to Reproduce

I tried to inspect this error but i found that the Effects collection is declared in Element class. Which every XF control inherits it whether a visual control or not. And the effect applies on every VisualElement except Pages and Layouts. So i hope the XF team or the contributors finds the bug if exists

Expected Behavior

The effect attaches and runs the OnAttached() method.

Actual Behavior

Doesn't get attached and doesn't call the OnAttached() method.

Basic Information

• XamarinForms 3.1.0.637273
• Visual Studio 2017 Enterprise edition version 15.7.5

[rmarinho]

Hi, i have tried and i m able to attach effects to Pages and Effects, what's the platform and layouts you are trying that aren't working?

Can you attach a smal reproduction sample with what's not working.

Thanks

[adhamali450]

I'm doing a little refine for the XamarinCommunityToolkit and applying an acrylic brush for the MainPage which I made a TabbedPage. Here is the markup

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:views="clr-namespace:Xamarin.Samples.Views"
            xmlns:effects="clr-namespace:Xamarin.Toolkit.Effects;assembly=Xamarin.Toolkit.Effects"
            x:Class="Xamarin.Samples.Views.MainPage" 
            Title="Home" 
            effects:UwpAcrylicPivot.BackgroundSource="Backdrop"
            effects:UwpAcrylicPivot.TintColor="WhiteSmoke"
            effects:UwpAcrylicPivot.FallbackColor="WhiteSmoke"
            effects:UwpAcrylicPivot.TintOpacity="0.8">
    
    <TabbedPage.Effects>
        <effects:UwpAcrylicPivotEffect/>
    </TabbedPage.Effects>
    
    <ContentPage Title="Controls" />
    <views:AnimationsPage/>
    <views:EffectsPage />
    <ContentPage Title="Converters" />
    <ContentPage Title="Behaviors" />
</TabbedPage>

And the effect doesn't apply

[adhamali450]

The routing effect:

public static class UwpAcrylicPivot
    {
        public static readonly BindableProperty TintColorProperty = BindableProperty.CreateAttached("TintColor", typeof(Color), typeof(UwpAcrylicPivot), default(Color));
        public static readonly BindableProperty FallbackColorProperty = BindableProperty.CreateAttached("FallbackColor", typeof(Color), typeof(UwpAcrylicPivot), default(Color));
        public static readonly BindableProperty TintOpacityProperty = BindableProperty.CreateAttached("TintOpacity", typeof(double), typeof(UwpAcrylicPivot), default(double));
        public static readonly BindableProperty BackgroundSourceProperty = BindableProperty.CreateAttached("BackgroundSource", typeof(BackgroundSource), typeof(UwpAcrylicPivot), default(BackgroundSource));

        public static Color GetTintColor(BindableObject view) =>
            (Color)view.GetValue(TintColorProperty);

        public static void SetTintColor(BindableObject view, Color value) =>
            view.SetValue(TintColorProperty, value);

        public static double GetTintOpacity(BindableObject view) =>
            (double)view.GetValue(TintOpacityProperty);

        public static void SetTintOpacity(BindableObject view, double value) =>
            view.SetValue(TintOpacityProperty, value);

        public static Color GetFallbackColor(BindableObject view) =>
            (Color)view.GetValue(FallbackColorProperty);

        public static void SetFallbackColor(BindableObject view, Color value) =>
            view.SetValue(FallbackColorProperty, value);

        public static BackgroundSource GetBackgroundSource(BindableObject view) =>
            (BackgroundSource)view.GetValue(BackgroundSourceProperty);

        public static void SetBackgroundSource(BindableObject view, BackgroundSource value) =>
            view.SetValue(BackgroundSourceProperty, value);
    }

    public class UwpAcrylicPivotEffect : RoutingEffect
    {
        public UwpAcrylicPivotEffect()
            : base(EffectIds.UwpAcrylicTabbedPageEffect)
        {
        }
    }

[adhamali450]

The platform effect:

public class UwpAcrylicPivotEffect : PlatformEffect
    {
        AcrylicBrush brush;
        AcrylicBackgroundSource backgroundSource;
        Windows.UI.Color tintColor;
        Windows.UI.Color fallbackColor;
        double tintOpacity;

        public UwpAcrylicPivotEffect()
        {
        }

        protected override void OnAttached()
        {
            UpdateTintColor();
            UpdateFallbackColor();
            UpdateTintOpacity();
            UpdateBackgroundSource();

            UpdateControl();
        }

        protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(args);

            if (args.PropertyName == UwpAcrylicPivot.TintColorProperty.PropertyName)
            {
                UpdateTintColor();
                UpdateControl();
            }
            else if (args.PropertyName == UwpAcrylicPivot.FallbackColorProperty.PropertyName)
            {
                UpdateFallbackColor();
                UpdateControl();
            }
            else if (args.PropertyName == UwpAcrylicPivot.TintOpacityProperty.PropertyName)
            {
                UpdateTintOpacity();
                UpdateControl();
            }
            else if (args.PropertyName == UwpAcrylicPivot.BackgroundSourceProperty.PropertyName)
            {
                UpdateBackgroundSource();
                UpdateControl();
            }
        }

        void UpdateTintColor()
        {
            tintColor = UwpAcrylicPivot.GetTintColor(Element).ToUwpColor();
        }

        void UpdateTintOpacity()
        {
            tintOpacity = UwpAcrylicPivot.GetTintOpacity(Element);
        }

        void UpdateBackgroundSource()
        {
            backgroundSource = (AcrylicBackgroundSource)Enum.Parse(typeof(AcrylicBackgroundSource), UwpAcrylicPivot.GetBackgroundSource(Element).ToString());
        }

        void UpdateFallbackColor()
        {
            fallbackColor = UwpAcrylicPivot.GetFallbackColor(Element).ToUwpColor();
        }

        async void UpdateControl()
        {
            brush = new AcrylicBrush()
            {
                TintColor = tintColor,
                TintOpacity = tintOpacity,
                BackgroundSource = backgroundSource,
                FallbackColor = fallbackColor
            };

            var control = Control as FormsPivot;
            if (control is null)
                return;

            await RenderHeaderTaps(control);

            control.ToolbarBackground = brush;
        }

        async Task RenderHeaderTaps(FormsPivot pivotResult)
        {
            var headerTemplateXaml = new StringReader(
               @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
                   <TextBlock FontSize=""22"" Text=""{Binding Title}"" Margin=""5,35,0,5""/>
                   </DataTemplate>"); // 5 and 35 are harcoded values to make ti appearince bettwe
            var headerTemplate = XamlReader.Load(await headerTemplateXaml.ReadToEndAsync());
            pivotResult.HeaderTemplate = headerTemplate as Windows.UI.Xaml.DataTemplate;
        }

        protected override void OnDetached()
        {
        }
    }

[pauldipietro]

This maybe needed a bit more info. Are you using ExportEffect? Does this occur when simply adding in new effects a Forms app? A more complete reproduction might be helpful.

[samhouts]

@AdhamAliAhmed Since we haven't heard from you in more than 30 days, we hope that this issue is no longer affecting you. If it is, please feel free to reopen this issue and provide the requested information. Thank you for your report!

[JenithaV]

Hi I have checked the effect with page in xamarin forms. Its not working. Please Reopen this issue.

[JenithaV]

@rmarinho can you explain how to your page does working with effects?

[JenithaV]

@adhamali450 It is working now for you.? This issue created over 5 years..