enisn / UraniumUI

Uranium is a Free & Open-Source UI Kit for MAUI.
Apache License 2.0
985 stars 110 forks source link

How can I manipulate individual properties of a style Class? #630

Closed andreas-spindler-mw closed 1 month ago

andreas-spindler-mw commented 1 month ago

Hi there! I'm having a hard time adjusting individual properties on, as an example, OutlinedButton style class. I want to change the border width for all "OutlineButtons". But my changes either won't get applied, or I loose the existing outline button properties which I want to retain. I know I can use the StyleResource.Overrides to overwrite entires styles. But that's not what I want. I'd like to extend an existing style class. How would I do that, without creating a second style Class="ThickBorder" which I would have to apply basically everywhere.

In App.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary x:Name="AppColors" Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary x:Name="AppStyles" Source="Resources/Styles/Theme.xaml" />
                <material:StyleResource
                    ColorsOverride="{x:Reference AppColors}"
                    BasedOn="{x:Reference AppStyles}">
                    <!-- <material:StyleResource.Overrides> -->
                    <!--     <ResourceDictionary Source="Resources/Styles/Theme.xaml" /> -->
                    <!-- </material:StyleResource.Overrides> -->
                </material:StyleResource>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

In Theme.xaml

<! -- overwriting the base style works -->
<Style TargetType="Button" BaseResourceKey="BaseButtonStyle">
        <Setter Property="CornerRadius" Value="0" />
        <Setter Property="BackgroundColor"
                Value="{AppThemeBinding
                Light={StaticResource SecondaryContainer},
                Dark={StaticResource SecondaryContainerDark}}" />
</Style>

<! -- Crashes the app, because OutlineButton is not found. How would I extend OutlineButton style class? -->
<Style TargetType="Button" Class="MyOutlinedButton" BasedOn="{StaticResource OutlineButton}">
        <Setter Property="BorderWidth" Value="5" />
</Style>

Any help is highly appreciated. Thank you guys!

enisn commented 1 month ago

Yeah, you can't use static resource from a different file in the current state of the application because the resources haven't been built and compiled yet. Can you try to define BaseResourceKey instead BasedOn property in the style?

<Style TargetType="Button" Class="MyOutlinedButton" BaseResourceKey="BaseButtonStyle">

But OutlineButton style doesn't have key in the library. So it's not possible to use it in this way. I'll add keys into library.

andreas-spindler-mw commented 1 month ago

Hi! Yes, I can do this, but this will of course apply a border to all buttons, and not just use a different border width on the outline buttons. So, I understand that it is currently not possible to extend or change certain aspects of the current outline button style, right?

DevFromDownUnder commented 1 month ago

Yeah, you can't use static resource from a different file in the current state of the application because the resources haven't been built and compiled yet. Can you try to define BaseResourceKey instead BasedOn property in the style?

<Style TargetType="Button" Class="MyOutlinedButton" BaseResourceKey="BaseButtonStyle">

But OutlineButton style doesn't have key in the library. So it's not possible to use it in this way. I'll add keys into library.

Added a pull for this

andreas-spindler-mw commented 1 month ago

Awesome! Thank you so much, for the immediate support!

DevFromDownUnder commented 1 month ago

Can be closed