Button Appearance Colors

[ovendylan]

I've noticed that my ui:Buttons that have style/data triggers attached do not update the "appearance" background colors correctly. Below is a button snippet in my XAML. When "MyScale" is null the button should appear disabled (this currently happens as expected). When "MyScale" is no longer null, I want the button to appear with the "Info" appearance value. I have tried inline and using another style trigger but no success.

<ui:Button Appearance="Info" Grid.Column="1" Grid.Row="3" Content="Settings" HorizontalAlignment="Center" VerticalAlignment="Center" Height="80" Width="130" Command="{Binding ShowSettingsCommand}" TabIndex="7"> <Button.Style> <Style TargetType="ui:Button"> <Style.Triggers> <DataTrigger Binding="{Binding MyScale}" Value="{x:Null}"> <Setter Property="IsEnabled" Value="False"/> </DataTrigger> <Trigger Property="IsEnabled" Value="True"> <Setter Property="Appearance" Value="Info"/> </Trigger> </Style.Triggers> </Style> </Button.Style> </ui:Button>

[Mithicor]

When you are dynamically changing a property, don't put it in the control itself. Set it on the style level otherwise it overrides the triggers.

Put whatever default value you would like where I put the line: <Setter Property="Appearance" Value="Dark"/> below. Optionally you can just remove that line to leave the button as the default value, when not changed by a datatrigger.

<ui:Button Grid.Column="1" Grid.Row="3" Content="Settings" HorizontalAlignment="Center" VerticalAlignment="Center" Height="80" Width="130" Command="{Binding ShowSettingsCommand}" TabIndex="7">
    <Button.Style>
        <Style TargetType="ui:Button">

            <Setter Property="Appearance" Value="Dark"/>

            <Style.Triggers>
                <DataTrigger Binding="{Binding MyScale}" Value="{x:Null}">
                    <Setter Property="IsEnabled" Value="False"/>
                </DataTrigger>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Appearance" Value="Info"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</ui:Button>

[ovendylan]

Thanks for the reply. This is an interesting phenomenon because I have followed your code suggestion exactly and nothing has changed. The IsEnabled property correctly fires and enables/disables my buttons. However, the appearance property does not change despite the style triggers being in place. I have tried this locally at each button and from a higher level style property within the Window.Resources tag. My buttons remain the standard grey color.

[Mithicor]

Ya know. Now that I think about it I've also had styling issues with data triggers. I've noticed that if I set styles on the top level navigation view control it works but if I have any sub levels the styling no longer works. Perhaps it is just a bug within the control?

[ovendylan]

I suppose it could be a bug with the control. At the moment I am just experimenting with UI and this is a full stop for me. Going to take my project over to MAUI and try my luck there.

[JohnTasler]

Also consider looking into Uno Platform. It supports WinRT, Linux, OSX, and even HTML using WASM.

https://github.com/unoplatform/uno