CODEWITHSUNDEEP
xamarinuwpxamarin.formswin-universal-app
Sowmyan Soman
Sowmyan Soman

Reputation: 923

Can we get fluid design with Xamarin.Forms for UWP?

Can we get the fluid design in Windows 10 UWP app with Xamarin.Forms? https://learn.microsoft.com/en-us/windows/uwp/style/acrylic

Upvotes: 3

Views: 811

Answers (1)

Timo Salomäki
Timo Salomäki

Reputation: 7189

Jason is technically right since the feature isn't publically released yet. However, you should be able to try it already if you're in the Windows Insider Preview program. This is what you need:

  1. Latest version of Visual Studio (2017, 15.3)
  2. Latest Windows 10 Insider Preview SDK (probably 16267)
  3. Latest version of the .NET UWP NuGet Package

You can check that you have the correct version if Windows.UI.Xaml.Media.AcrylicBrush is accessible.

Using with Xamarin.Forms: I haven't tried this myself but technically it should be possible. You'll need to roll out a custom renderer for the UWP platform where you define the Acrylic brush and add it to a control (Grid in this example). You also need to make sure to check that the XamlCompositionBrushBase is present and have a fallback for the case where it's not.

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 = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{ 
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

This code is taken straight from the article you linked to but it should work as is in the custom renderer.

Please notice, that even if you get it to work, there might be major changes to the API and you'll have to rework your solution again and again.

Upvotes: 1

Related Questions