Fluent Design 在 Xamarin.Forms 期

Question

我正在尝试让 Fluent Design 在我的 Xamarin.Forms UWP 应用程序上运行。我尝试过使用渲染器、覆盖样式的不同方法，但其中 none 有效。

Acrylic 笔刷总是退回到 FallbackColor。

设置：

目标版本：Windows10 (1803) 最低版本：Windows 10 Fall Creators Update(16299)。

我也在检查

Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush") 可用。

使用任何预定义的 Acrylic 画笔会导致 "Cannot find a Resource with the Name/Key SystemControlChromeLowAcrylicWindowBrush"。

AcrylicBrush 和 Splitview 样式：

<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>

自定义渲染器：

[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);
        }

    }
}
    ```

Answer 1

你的 AcrylicBrush 和样式对我来说效果很好。请检查“Winbdows 设置 -> 个性化 -> 颜色 -> 更多选项 -> 透明效果 ”。您需要打开 透明效果。

Answer 2

请看Link

这应该可以解决您的问题。您可以通过将 ThemeResources.xaml 添加到项目资源来解决此问题。

Fluent Design 在 Xamarin.Forms 期

Fluent Design in Xamarin.Forms Issue

c#

xamarin.forms

uwp

xamarin.uwp

设置：

AcrylicBrush 和 Splitview 样式：

自定义渲染器：