Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance documentation on how to use native control styles #3649

Open
SetTrend opened this issue Jul 28, 2020 · 7 comments
Open

Enhance documentation on how to use native control styles #3649

SetTrend opened this issue Jul 28, 2020 · 7 comments

Comments

@SetTrend
Copy link
Contributor

@SetTrend SetTrend commented Jul 28, 2020

What would you like clarification on:

I read that Uno renders all controls in Windows style and there is an option somewhere deep in Uno to have some of the controls render in native OS style.

I believe it's crucial to be able to switch an application's (or page's) property to render controls using native styles wherever applicable (and to be able to switch back to Windows style again whenever felt necessary).

Can you please prominently describe how to switch between native rendering and Windows style rendering in the FAQ and the documentation?

Concern?

  • Usage in industry
  • Clarification of capabilities
  • Getting started with Uno
  • Developing with Uno
  • Contributing to the Uno project
  • Publishing your application
  • Support
  • Other (please specify):

For which Platform:

  • iOS
  • Android
  • WebAssembly
  • macOS
  • Windows
@SetTrend SetTrend changed the title Prominent documentation of how to have Uno render platform native controls Prominent documentation of how to have Uno render platform native controls? Jul 28, 2020
@davidjohnoliver
Copy link
Contributor

@davidjohnoliver davidjohnoliver commented Jul 29, 2020

Agreed this an important Uno feature. There's a starting point here https://github.com/unoplatform/uno/blob/master/doc/articles/using-uno-ui.md#using-styles addressing Uno 3.0+ support for native styles.

GitHub
Build Mobile, Desktop and WebAssembly apps with C# and XAML. Today. Open source and professionally supported. - unoplatform/uno
@SetTrend
Copy link
Contributor Author

@SetTrend SetTrend commented Aug 2, 2020

Excellent!

From the referenced documentation I'm not quite sure whether I will be able to render UWP style for particular pages only, or even for particular elements only.

This is my use case:

In general, I would prefer to render native controls throughout my app. For one, I presume they will be rendered faster; and for two, the user is acquainted to this controls style and will prefer this style.

Then, there may be a "sophisticated" page in my app where I want all controls to adhere to my fancy custom UWP style. Or there may be only a single grid in a page where I want my fancy styles to apply.

Can this be done, too? Is there something like a style attribute or style element I can add to XAML elements to switch mode?

Something like this:

<NativePresenterArea>
  <ToggleSwitch />
</NativePresenterArea>

<!-- or -->

<UwpPresenterArea>
  <ToggleSwitch />
</UwpPresenterArea>

<!-- or -->

<NativePresenterArea Mode="Native">
  <ToggleSwitch />
</NativePresenterArea>
<NativePresenterArea Mode="UWP">
  <ToggleSwitch />
</NativePresenterArea>

Is this the xamarin:IsNativeStyle attribute mentioned in the documentation?

Perhaps my question is stupid. I'm new to UWP, please forgive my ignorance if it is.

@davidjohnoliver
Copy link
Contributor

@davidjohnoliver davidjohnoliver commented Aug 5, 2020

This is actually straightforward to do for single elements. You can assign a StaticResource (a resource, such as a style, a brush, or control template, defined elsewhere in Xaml) to the Style property, and Uno's native and UWP styles all have associated StaticResources following the naming convention in the link. So in your example it would be:

<NativePresenterArea>
  <ToggleSwitch not_win:Style="{StaticResource NativeDefaultToggleSwitch}"/>
</NativePresenterArea>

<!-- or -->

<UwpPresenterArea>
  <ToggleSwitch not_win:Style="{StaticResource XamlDefaultToggleSwitch}"/>
</UwpPresenterArea>

See here for an explanation of the not_win prefix.

There's no out-of-the-box way to say 'all controls within this page should have UWP/native styling' at the moment.

@SetTrend
Copy link
Contributor Author

@SetTrend SetTrend commented Aug 6, 2020

Fascinating! Thanks a lot for this very helpful information!

Would you suggest to keep this issue open as a reminder for adding your valuable information to the FAQ? Or should this issue rather be closed?

@davidjohnoliver
Copy link
Contributor

@davidjohnoliver davidjohnoliver commented Aug 7, 2020

Let's keep it open, it's a valid documentation request and the info does belong in the docs, not just in an issue comment ;)

@agneszitte-nventive
Copy link
Contributor

@agneszitte-nventive agneszitte-nventive commented Oct 19, 2020

@davidjohnoliver For now the info could be added under articles into a new howto file right ?

@davidjohnoliver davidjohnoliver changed the title Prominent documentation of how to have Uno render platform native controls? Enhance documentation on how to use native control styles Oct 19, 2020
@davidjohnoliver
Copy link
Contributor

@davidjohnoliver davidjohnoliver commented Oct 19, 2020

@agneszitte-nventive Indeed :) Something like using-native-styles.md in that folder.

Note for contributors: As mentioned in an earlier comment, expanding the material here would be a good basis.

There are also a couple more configuration methods added recently which can be documented.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.