xamlxamarin.formsuwpfluent-designacrylic-material

UWP fluent design in XamarinForms


I'm creating a XamarinFroms solution and i want to implement Fluent Design or pats of it in my UWP app. As you may know, Most of Fluent Design building blocks are ThemeResources. so i tried to do:

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
            {
                var brush = Windows.UI.Xaml.Application.Current.Resources["SystemControlAltHighAcrylicWindowBrush"] as AcrylicBrush;
                var tint = brush.TintColor;
                var opacity = brush.TintOpacity;
                var fallbackColor = brush.FallbackColor;
                var source = brush.BackgroundSource;
            }

but unfortionalty i get a

System.Exception: 'Catastrophic failure (Exception from HRESULT: 0x8000FFFF (E_UNEXPECTED))' on the brush creating line of code. 

I won't be able to access any predefined Brushes or i can never implement reveal styles if i'm not able to retrieve those theme resources in code in my UWP project


Solution

  • For UWP fluent design, it is only available in UWP, you could not implement it within xamarin Forms directly. Currently Xamarin Forms has not provided such interface. =Because it is specific design for UWP. And it is hardly to abstract a unified interface that available for each platform. So the better way is implement this with Custom Renderer separately. For example, as in your case, to make SystemControlAltHighAcrylicWindowBrush work in Xamarin.UWP, you could custom LayoutRenderer. And the following segment code realize AcrylicWindowBrush for StackLayout.

    [assembly: ExportRenderer(typeof(StackLayout), typeof(ICustomStackLayoutRenderer))]
    
    namespace CustomStackLayoutRenderer.UWP
    {
        public class ICustomStackLayoutRenderer : LayoutRenderer
        {
    
            protected override void OnElementChanged(ElementChangedEventArgs<Layout> e)
            {
                base.OnElementChanged(e);
    
            }
            protected override void UpdateBackgroundColor()
            {
                base.UpdateBackgroundColor();
                if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
                {
                    var brush = Windows.UI.Xaml.Application.Current.Resources["SystemControlAltHighAcrylicWindowBrush"] as AcrylicBrush;
                    var tint = brush.TintColor;
                    var opacity = brush.TintOpacity;
                    var fallbackColor = brush.FallbackColor;
                    var source = brush.BackgroundSource;
                    this.Background = brush;
                }
    
            }
        }
    }
    

    enter image description here