AvaloniaCommunity / Material.Avalonia

Material design in AvaloniaUI
MIT License
666 stars 60 forks source link

Implement styles for all Avalonia's controls #234

Open SKProCH opened 11 months ago

SKProCH commented 11 months ago

Since we positioning Material.Avalonia as standalone styles library we should add styles to all existing Avalonia controls.
Of course anyone can just reference FluentTheme before our theme and with ControlThemes it will work fine, but we should provide a basic support for all controls.

List of currently missing controls:

New files should be created in Resources/Themes folder and imported in MaterialToolKit.xaml. All PRs and support are highly appreciated.

NoizeDaemon commented 10 months ago

Could you elaborate on how to use FluentTheme as a fallback for missing or broken controls?

Right now I'm trying to get a CalenderDatePicker to work:

When I place fluent first, like so:

<Application ...
             xmlns:themes="clr-namespace:Material.Styles.Themes;assembly=Material.Styles"
             xmlns:icons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia" 
             xmlns:styles="clr-namespace:Material.Styles;assembly=Material.Styles"
                         ...

    <Application.Styles>
        <FluentTheme />
        <themes:MaterialThemeBase />
        <icons:MaterialIconStyles />
        <styles:MaterialToolKit />
    </Application.Styles>
</Application>

I get:

System.InvalidOperationException: "ControlTemplate styles cannot contain multiple template selectors."

When I place it last or in its own Selector (just for the CalenderDatePicker), everything becomes fluent...

How can I set it only for that specific control (or as a fall back if there's no material style for a control?)

(Btw, looking at fluent again after only working with this material for a while now, makes me really appreciate your work all over again! Beautiful design!)

SKProCH commented 10 months ago

Hello, @NoizeDaemon. Thanks for the kind words)

As about your problem, i can just do this at my example project:

<Application.Styles>
  <FluentTheme />
  <themes:MaterialTheme />
  ...

And everything works fine. Can you provide a minimum representable example with your error, please?

NoizeDaemon commented 10 months ago

Here is the sample: https://github.com/NoizeDaemon/MS

It runs without <FluentTheme />, but does not show the CalenderDatePicker.

When putting <FluentTheme /> first, we get ControlTemplate styles cannot contain multiple template selectors.

When putting <FluentTheme /> last, it displays the CalenderDatePicker (& everything else in Fluent) - which is expected.

Edit: I also tried variations of MaterialTheme and MaterialThemeBase, setting the theme in code/not setting, etc.

SKProCH commented 10 months ago

@NoizeDaemon, I've commented a Calendar styles (they need a bit more polishing) and it works fine with latest nightly. Give it a try.

NoizeDaemon commented 10 months ago

Works now! :) Thank you!