[C# Markup] How to create a binding to state that selects themed resource?

[kucint]

Let suppose I defined my Themes as follows:

internal static class MyThemes
{
    public static readonly Resource<Brush> BrushA = ThemeResource.Create<Brush>(nameof(BrushA), Colors.Red, Colors.Orange);
    public static readonly Resource<Brush> BrushB = ThemeResource.Create<Brush>(nameof(BrushB), Colors.Blue, Colors.LightBlue);
}

I can easily bind themes to some controls:

  new TextBlock()
  .Text("Using themed BrushA")
  .Foreground(ThemeResource.Get<Brush>(nameof(MyThemes.BrushA))),

  new TextBlock()
  .Text("Using themed BrushB")
  .Foreground(ThemeResource.Get<Brush>(nameof(MyThemes.BrushB))),

So far so good.
Now I want to create a binding to the themes that depends on some state:

new TextBlock()
.Text("Toggle Themed BrushA or BrushB")
// code below does not compile :(
.Foreground(x => x.Binding(() => vm.BrushAorB).Convert(
    BrushAorB => ThemeResource.Get<Brush>(BrushAorB ? nameof(MyThemes.BrushA) : nameof(MyThemes.BrushB)))

I know that code above is wrong (well, it does not compile....)
But I don't know what is the correct approach?

Here you have full snippet:

public sealed partial class MainPage : Page
{
    public MainPage() => this
        .DataContext(new BindableMainPageModel(), (page, vm) => page
        .Resources(r => r.Add(MyThemes.BrushA))
        .Resources(r => r.Add(MyThemes.BrushB))
        .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
        .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new TextBlock()
                .Text("Hello Uno Platform!"),
                new ToggleSwitch()
                .OnContent("Dark mode")
                .OffContent("Light mode")
                .Name(out ToggleSwitch c, c => c.Toggled += (s, e) =>
                {
                    FrameworkElement? content = XamlRoot?.Content as FrameworkElement;
                    if (content is not null)
                        content.RequestedTheme = content.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;
                })
                .IsOn(x => x.Binding(() => vm.IsAppInDarkMode).TwoWay()),
                new TextBlock()
                .Text("Using themed BrushA")
                .Foreground(ThemeResource.Get<Brush>(nameof(MyThemes.BrushA))),
                new TextBlock()
                .Text("Using themed BrushB")
                .Foreground(ThemeResource.Get<Brush>(nameof(MyThemes.BrushB))),
                new ToggleSwitch()
                .OnContent("BrushA")
                .OffContent("BrushB")
                .IsOn(x => x.Binding(() => vm.BrushAorB).TwoWay()),
                new TextBlock()
                .Text("Toggle Themed BrushA or BrushB")
                // code below does not compile :(
                .Foreground(x => x.Binding(() => vm.BrushAorB).Convert(
                    BrushAorB => ThemeResource.Get<Brush>(BrushAorB ? nameof(MyThemes.BrushA) : nameof(MyThemes.BrushB)))
            )))
        );
}

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

Here is the full project: UnoResourceConditionalBindingApp.zip

[agneszitte]

cc @dansiegel, @kazo0, @eriklimakc

[MartinZikmund]

I think this is a limitation imposed by WinUI, but a better way to implement this would be using VisualStates - @eriklimakc @dansiegel could you help provide the proper syntax to use for this in C# markup please?

[dansiegel]

@kucint a couple of things on this...

1. Your resources are not declared properly. While we do have a number of conversion helpers that would let you for instance provide a Color for a Brush. When it comes to creating Resource you need to actually provide a Brush when you're creating a Brush resource type.

   internal static class MyThemes
   {
       public static readonly Resource<Brush> BrushA = ThemeResource.Create<Brush>(nameof(BrushA), new SolidColorBrush(Colors.Red), new SolidColorBrush(Colors.Orange));
       public static readonly Resource<Brush> BrushB = ThemeResource.Create<Brush>(nameof(BrushB), new SolidColorBrush(Colors.Blue), new SolidColorBrush(Colors.LightBlue));
   }

2. You cannot mix a Binding Converter with the Resource helpers. The Resource<T> does not actually return a value for T but is used internally to configure the Dependency Property to get the Static or Theme Resource.
3. Remember that C# Markup has a fluent API so you do not need to duplicate the Resources property like:

   page
       .Resources(r => r.Add(MyThemes.BrushA))
       .Resources(r => r.Add(MyThemes.BrushB))

   You can instead simplify this like:

   page
       .Resources(r => r.Add(MyThemes.BrushA)
                        .Add(MyThemes.BrushB))

Can you provide some more insight into what you're trying to do? Why the need to mix and match between 2 different Theme Resources?

[kucint]

@dansiegel thanks for tips above. Indeed, not the best code of mine.
Answering your question:
I try to achieve the following:

• I am constructing a Custom Control that informs the user about its state with help of colors.
  A bit like: Ellipse.Fill that is bound to a state that is converted to a Green circle if "good" or Red if "bad"
• The problem is that Green and Red are colors that are supposed to be used only in Light mode, In dark mode, they should be replaced with e.g. DarkGreen and DarkRed
• now i am thinking that maybe the best way to achieve this, is to define a "GoodStateStyle" (that uses Green/DarkGreen) and "BadStateStyle" (that uses Red/DarkRed) and switch between them dynamically dependent of the state value..... what do you think?.....

[rajamatt]

@kucint thanks for the details, creating two styles is definitely an option. This could be considered the best way of doing it because we avoid using converters with ThemeResources directly.

First approach

I went ahead and modified the sample you sent, firstly by adding the two Styles to your MyThemes class:

internal static class MyThemes
{
    public static readonly Resource<Brush> BrushA = ThemeResource.Create<Brush>(nameof(BrushA), new SolidColorBrush(Colors.Red), new SolidColorBrush(Colors.Orange));
    public static readonly Resource<Brush> BrushB = ThemeResource.Create<Brush>(nameof(BrushB), new SolidColorBrush(Colors.Blue), new SolidColorBrush(Colors.LightBlue));
 
    public static readonly Style<TextBlock> StyleA = new Style<TextBlock>().Setters(s => s.Foreground(BrushA));
    public static readonly Style<TextBlock> StyleB = new Style<TextBlock>().Setters(s => s.Foreground(BrushB));
}

As for the TextBlock itself, it just needs the Style property with a converter (here I'm using the shorthand syntax for converting):

new TextBlock()
    .Text("Toggle Themed BrushA or BrushB")
    .Style(() => vm.BrushAorB, isBrushA => isBrushA ? MyThemes.StyleA : MyThemes.StyleB)

Since the Styles themselves are using a ThemeResource, the colors are updated when the app's theme changes.

Second approach (VisualStateManager - VSM)

This approach essentially does the same thing as the first but with a VSM. It is closer to what you would find in a traditional app using Xaml to bind to a state in the model instead of C# Markup.

We can keep the Styles we defined in the MyThemes class for the first approach. As for the TextBlock, here's how it would look:

    new ToggleSwitch()
    .OnContent("BrushA")
    .OffContent("BrushB")
    .IsOn(x => x.Binding(() => vm.BrushAorB).TwoWay())
    .Name(out var toggleSwitch, t => t.Toggled += (s, e) =>
    {
        VisualStateManager.GoToState(this, t.IsOn ? "StateA" : "StateB", true);
    }),
    new TextBlock()
    .Text("Toggle Themed BrushA or BrushB")
    .Name(out var textBlock)
)
.VisualStateManager(builder => builder
    .Group("TextBlockStates", group => group
        .State("StateA", stateBuilder => stateBuilder
            .Setters(textBlock, tb => tb.Style(MyThemes.StyleA))
        )
        .State("StateB", stateBuilder => stateBuilder
            .Setters(textBlock, tb => tb.Style(MyThemes.StyleB))
        )
    )
)

Small note that I switched the OnContent and OffContent values of the ToggleSwitch in your sample so that it would display the correct text depending on the state.

Since the vm is never actually set in the VSM, we can't use vm.BrushAorB. However, since we have a ToggleSwitch where on = StateA and off = StateB, we can utilize ToggleSwitch.IsOn instead. We call the VisualStateManager.GoToState() in the ToggleButton's callback method using this t.IsOn and the Style is set dynamically by the VSM.

[kucint]

Hi @rajamatt, thanks for your exhausting answer. Both approaches look good to me!