Fluent Design in Xamarin.Forms Issue

Question

I'm trying to get the Fluent Design working on my Xamarin.Forms UWP App. I've tried different methods using a Renderer, Overwriting Styles but none of them work.

The Acrylic brush always falls back to the FallbackColor.

Setup:

Target version: Windows 10 (1803)
Min version: Windows 10 Fall Creators Update(16299).

and I'm also checking

Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush") which are available.

Using any of the predefined Acrylic brushes results in "Cannot find a Resource with the Name/Key SystemControlChromeLowAcrylicWindowBrush".

AcrylicBrush & Splitview Style:

<media:AcrylicBrush x:Key="HostBackdropBrush"
                    BackgroundSource="HostBackdrop"
                    TintColor="White"
                    TintOpacity="0.4" 
                    FallbackColor="WhiteSmoke" />


  <Style TargetType="SplitView">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="OpenPaneLength" Value="{ThemeResource SplitViewOpenPaneThemeLength}"/>
        <Setter Property="CompactPaneLength" Value="{ThemeResource SplitViewCompactPaneThemeLength}"/>
        <Setter Property="PaneBackground" Value="{StaticResource HostBackdropBrush}"/>
    </Style>

Custom Renderer:

[assembly: ExportRenderer(typeof(MasterPage), typeof(MasterPageRenderer))]
namespace MasterDetailPageNavigation.UWP
{
    class MasterPageRenderer : PageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null || Element == null)
            {
                return;
            }

            try
            {
                if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase"))
                {
                    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
                    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
                    myBrush.TintColor = Windows.UI.Color.FromArgb(255, 200, 200, 200);
                    myBrush.TintOpacity = 0.2;

                    Background = myBrush;
                }
                else
                {
                    SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 240, 240, 240));

                    Background = myBrush;
                }
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(ex);
            }
        }

        protected override Windows.Foundation.Size ArrangeOverride(Windows.Foundation.Size finalSize)
        {
            return base.ArrangeOverride(finalSize);
        }

    }
}

Please have a look at this item : https://stackoverflow.com/a/13563083/4373895 — VikrantMore, Feb 15 '19 at 12:21
Thanks! this fixed my problem! Can you make an answer so I can reward you? — iNCEPTiON_, Feb 15 '19 at 13:30

VikrantMore · Accepted Answer · 2019-04-30T11:28:44.677

1

Please have a look at the Link

This should solve your problem. You can resolve the issue by adding ThemeResources.xaml to the project resources.

edited Apr 30 '19 at 11:28

answered Feb 15 '19 at 13:45

VikrantMore

903
7
25

score 0 · Answer 2 · answered Jan 28 '19 at 02:41

0

Your AcrylicBrush and style worked well on my side. Please check 'Winbdows Settings -> Personalization -> Colors -> More Options -> Transparency effects'. You need to turn on the the Transparency effects.

answered Jan 28 '19 at 02:41

Xie Steven

8,544
1
9
23

The transparency effects are turned on my dev machine, other system apps are all transparent – iNCEPTiON_ Jan 28 '19 at 06:09
Please run the [XamlControlsGallery sample](https://github.com/Microsoft/Xaml-Controls-Gallery) and check the **Styles -> Acrylic** page to see if you can see the Acrylic effects. – Xie Steven Jan 28 '19 at 06:24
I've build and run the sample and the acrylic effects are working just fine. – iNCEPTiON_ Jan 28 '19 at 06:42
So, you could create a new blank UWP project and copy the code sample code to this project to do troubleshooting. – Xie Steven Jan 28 '19 at 06:44
the issue seems to be my particular project because I couldn't reproduce the issue with a new XF Project. The thing that frustrates me the most is that the predefined brushes like SystemControlAcrylicWindowBrush are not found and the app crashes. – iNCEPTiON_ Jan 28 '19 at 07:12
Yes. This verifies my guess. That's why I tell you to do the above troubleshootings. You need to compare your particular project with the new project to see if the project misses something. – Xie Steven Jan 28 '19 at 07:22
I will try that Thanks – iNCEPTiON_ Jan 28 '19 at 07:37
I did compare and I couldn't find any difference , i compared the csproj, nugets, code – iNCEPTiON_ Feb 08 '19 at 16:15

Fluent Design in Xamarin.Forms Issue

Setup:

AcrylicBrush & Splitview Style:

Custom Renderer:

2 Answers2