search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.64k stars 1.88k forks source link

Please support Fluent Design for UWP in Xamarin Form? #3449

Closed nguyenthanhliemfc closed 2 years ago

nguyenthanhliemfc commented 5 years ago

As the title, Please support Fluent Design for UWP in Xamarin Form? Thank you!

adhamali450 commented 5 years ago

Strongly agree I had to do a lot of custom renderers to achieve so The thing is that they render XamarinForms pages to custom control. Not UWP pages like Navigation view and Pivot

davidortinau commented 5 years ago

@nguyenthanhliemfc and @AdhamAliAhmed it would help me greatly to understand what you've been doing up to now to implement fluent in your apps, and what platforms beyond UWP you're targeting with that design. Would you please share here, or shoot me an email, with your experiences, specific examples, and screenshots? We can talk more about this topic. david.ortinau@microsoft.com

adhamali450 commented 5 years ago

Well... for me i implemented an Windows.UI.Xaml.Media.AcrylicBrush in a XF TappedPage for an app i was working on. I tried using an effect and then attaching it to the TappedPage but it didn't work. It doesn't get attached although i follow all the rules. I created an issue for this couple of days ago BTW.

So i ended up creating a custom control that derives from TappedPage and then i created a custom renderer for UWP only. The custom renderer derives from TappedPageRenderer so the final native image is a FormsPivot. FormsPivot inherits from Windows.UI.Xaml.Control.Pivot so it has all the Pivot properties. Following the Fluent Design guidelines, first of all: you would extend the view to the toolbar. CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = false; then, you would apply the AcrylicBrush on the Control.ToolbarBackground. Here is the building blocks for all this. The shared custom control, The custom renderer and the XAML code. This is 100% XAML friendly.

The custom control: AcrylicTappedPage.cs

The custom renderer: AcrylicTappedPageRenderer.cs

The XAML code: MainPage.xaml

To be clear i have some issues with the CommandBarsand basically all the stuff at the right of the header of the FormsPivot. I also have some hard-coded values for the margins.

But i'm pretty sure you can figure this out .

adhamali450 commented 5 years ago

There is three main iconic figures about FluentDesign 1- Acrylic Material Brush 2- RevealHighlight 3- RevealFocus (Not widely used)

All other stuff are just principles.

adhamali450 commented 5 years ago

I tried to make a RevealHighlight effect but i have no experience on consuming ThemeResources in code. Because essentially RevealHighlight is a ThemeResource.

adhamali450 commented 5 years ago

You can write a Xaml markup in a form of string and then read it using a StreamReader but the bindings and stuff is gonna be a huge pain in the butt

nguyenthanhliemfc commented 5 years ago

I want UWP app in Xamarin Form have Fluent Design as when I create a single UWP project by Windows Template Studio tool. Please support in xamarin form will auto apply fluent design for uwp or support a simple way to do that! Thank you

adhamali450 commented 5 years ago

@davidortinau Any progress so far ?

adhamali450 commented 5 years ago

I've been trying for like two days to create a sample for you that demonstrates my point. But unfortunately I have a problem with my Visual Studio that causes a build failure when deploying to UWP from a XamarinForms project and waiting for the support respond

nguyenthanhliemfc commented 5 years ago

For who want to app Fluent Design for UWP https://github.com/nguyenthanhliemfc/MasterDetailPageFluentDesignForUWP

deakjahn commented 5 years ago

This seems to be a no-brainer really. All we need is a platform specific with both a true/false value and a tint opacity. It isn't supported accross the platforms, of course, so it should be solved the same way other platform specific features are.

BurkusCat commented 3 years ago

Does Visual="Material" work on UWP? Obviously, it would be great if it did but I don't think it would be a huge priority (fluent design makes much more sense on Windows). If it doesn't, I think it would be cool if there was a Visual="Fluent", that for starters, only works on UWP.

You could then set a page to be <Setter Property="Visual" Value="{OnPlatform iOS=Material, Android=Material, UWP=Fluent}" />.

I'd personally expect this to effect things like a picker. Try using a Xamarin Forms UWP dark mode picker with a mouse vs using a dark mode picker in the Windows 10 settings app.

Windows 10 settings image

Xamarin Forms UWP image

iTKerry commented 3 years ago

Is there any progress with it after 2 years?

mhrastegari commented 3 years ago

@iTKerry well i can't even use my renderers anymore in XF 5 :( it was working in XF 4.7 btw

jfversluis commented 2 years ago

This won't be happening for Xamarin.Forms, but for .NET MAUI we'll adopt the latest and greatest WinUI styling! Thanks everyone!