Changing Style in Custom Control not working

[kucint]

Create a simple custom Control with a Dependency Property of type bool and bind this property to Controls TextBlock which shows "on" when IsOn is true and "off" when IsOn is false:

public sealed class MyControl : Control
{
    public MyControl()
    {
        DefaultStyleKey = typeof(MyControl);
        Style = new MyStyle();
    }

    #region IsOn
    public bool IsOn
    {
        get => (bool)GetValue(IsOnProperty);
        set => SetValue(IsOnProperty, value);
    }

    public static readonly DependencyProperty IsOnProperty =
        DependencyProperty.Register(
            nameof(IsOn),
            typeof(bool),
            typeof(MyControl),
            new PropertyMetadata(false));
    #endregion
}

internal class MyStyle : Style<MyControl>
{
    public MyStyle() => Setters(s => s
        .Template(ctrl =>
            new Frame()
            .Background(Colors.LightCoral)
            .Content(new TextBlock()
                    .Text(x => x.TemplateBind(() => ctrl.IsOn).Convert<bool>(isOn => isOn ? "on" : "off"))
                    .Foreground(Colors.White)
                    .Margin(10)
                )
        ));
}

Use control in MainFrame:

public sealed partial class MainPage : Page
{
    public MainPage() => this
        .DataContext(new BindableMainPageModel(), (page, vm) => page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new TextBlock()
                .Text("Hello Uno Platform!"),
                new ToggleSwitch()
                .IsOn(x => x.Binding(() => vm.IsOn).TwoWay()),
                new MyControl()
                .Width(200)
                .Height(40)
                //.IsOn(() => vm.IsOn)                                          // works fine
                .Style(x => x.Binding(() => vm.IsOn).Convert(isOn =>            // does not work, control does not show up at all
                    isOn
                    ? new Style<MyControl>().Setters(s => s.IsOn(true))
                    : new Style<MyControl>().Setters(s => s.IsOn(false))
                    ))
            )));
}

internal partial record MainPageModel
{
    public IState<bool> IsOn => State<bool>.Value(this, () => false);
}

Scenario 1
change the value of control's IsOn property directly:

    new MyControl()
    .IsOn(() => vm.IsOn)                                          // works fine

Run the app on net8.0-desktop;: it works fine

Scenario 2
change the value of control's IsOn property indirectly using Style:

    new MyControl()
    .Style(x => x.Binding(() => vm.IsOn).Convert(isOn =>            // does not work, control does not show up at all
        isOn
        ? new Style<MyControl>().Setters(s => s.IsOn(true))
        : new Style<MyControl>().Setters(s => s.IsOn(false))
        ))

Run the app on net8.0-desktop;: it does not work, the control does not show up at all.

Scenario 3
Run the app as in Scenario 1 but this time on net8.0-windows10.0.19041;:

• the control does not show up at all
• during execution I see Exception thrown: 'System.InvalidOperationException' in WinRT.Runtime.dll that is somehow handled so the app does not crash

Scenario 4
Run the app as in Scenario 2 but this time on net8.0-windows10.0.19041;:

• the control does not show up at all
• during execution I see Exception thrown: 'System.InvalidOperationException' in WinRT.Runtime.dll that is somehow handled so the app does not crash

Note: I am using the newest dev uno branch "Uno.Sdk": "5.4.0-dev.145"

repro: UnoDynamicStyleUpdateApp.zip

[MartinZikmund]

@morning4coffe-dev is doing initial investigation of this, we will then assign as needed

[kucint]

@MartinZikmund
FYI: I forgot to remove following line from Directory.Build.props in my demo project. Sorry.

  <PropertyGroup>
    <UnoExtensionsVersion>4.1.24</UnoExtensionsVersion>
    <UnoToolkitVersion>6.0.24</UnoToolkitVersion>
    <UnoThemesVersion>5.0.13</UnoThemesVersion>
    <UnoCSharpMarkupVersion>5.2.14</UnoCSharpMarkupVersion>
  </PropertyGroup> 

After removing these lines, the app behaves in the same way as before, so please investigate the topic. Thanks!

[morning4coffe-dev]

Thanks for providing the repro file. After testing, it seems the issue might be that you're applying a blank Style to the control instead of using MyStyle. When I update the code to use MyStyle as follows:

.Style(x => x.Binding(() => vm.IsOn).Convert(isOn =>
isOn
? new MyStyle().Setters(s => s.IsOn(true))
: new MyStyle().Setters(s => s.IsOn(false))
))

I think I am seeing the desired behavior with the styles:

Please let me know if this helps with your case.

[kucint]

Oh, I see!
what you are telling me, is that setting style is not set on the top of already applied style (what I was wrongly thinking) but it replaces it!
I get it now.
@morning4coffe-dev , tell me, how should I do it if I dont known which style is currently applied?
And I want to change the value of one property?

would this do the job?

.Style(x => x.Binding(() => vm.IsOn).Convert(isOn =>
isOn
? Style().Setters(s => s.IsOn(true))
: Style().Setters(s => s.IsOn(false))
))

or there is better way?

[MartinZikmund]

I think it is worth looping in @dansiegel here as well. I think the ideal solution would be to use VisualStates - I think that was also shown in unoplatform/uno.extensions#2319

[kucint]

right, this could be a solution in some scenarios.

[kucint]

Hi @morning4coffe-dev
I use now BasedOn, but it does not work...

  .Style(x => x.Binding(() => vm.IsOn).Convert(isOn =>
      isOn
      ? new Style<MyControl>().BasedOn(Style).Setters(s => s.IsOn(true))
      : new Style<MyControl>().BasedOn(Style).Setters(s => s.IsOn(false))
      ))

[francoistanguay]

I would recommend for more "complex" scenarios like this that we may jump on a call and better understand what you're truly trying to accomplish.

I see that you're defining a Style (MyStyle) for MyControl that TemplateBinds the Text of TextBlock to the IsOn of MyControl and that should be valid and working, either by explicitly setting this style on the instance of MyControl or making the style implicit (used by default).

Everything else after that that you're trying to do, I dont understand and from my point of view might not be needed. So I would recommend to discuss on next sync call as it might just be some misunderstanding.

cc @MartinZikmund

[kucint]

right, let's talk about it on the next sync.