Docs(theme service): add mvux state using sample #2749
Conversation
| > [!NOTE] | ||
| > In case, you try to bind a `CommandExtension.Command` to a ToggleSwitch, you will need to use the `IsOn` property to bind it, because `Toggled` Behaviour is not triggering the `CommandExtensions.Command`. |
There was a problem hiding this comment.
For this part, I think we should add this functionality to the CommandExtensions. Issue created here: unoplatform/uno.toolkit.ui#1391
We don't need to call this out here so I think we can remove this NOTE
There was a problem hiding this comment.
@kazo0 does removing this note mean, to also remove the IsOn Property Binding? I could consider a way that might be a usecase for BindBack but I honestly do not know how to use that correctly same as the FallbackValue or TargetNullValue (e.g. considered this for workaround the roslyn issue.
There was a problem hiding this comment.
removed note in b55486c Replaced as comment to be applyed after fixing this issues
| } | ||
| ``` | ||
|
|
||
| ### [MVUX](#tab/mvux) |
There was a problem hiding this comment.
My suggestion here is that we don't include this as part of the ThemeService docs but we should create a Recipe Book docs entry for this usage in Chefs: https://github.com/unoplatform/uno.chefs/blob/198923fcd69d416fd3901be2fe4d58fecd74421b/Chefs/Presentation/SettingsModel.cs#L26-L38
https://platform.uno/docs/articles/external/uno.chefs/doc/RecipeBooksOverview.html
There was a problem hiding this comment.
that ThemeChangedMessage in there is quite cool and the ISettingsService... Can we not get a SettingsService generally available in extensions? that would really be cool! to have just to call this to automatically switch theme or localization! is this think-able?
There was a problem hiding this comment.
Pull Request Overview
This PR adds MVUX state binding examples to the ThemeService documentation, expanding beyond the existing MVVM examples. The documentation now provides developers with guidance on how to implement theme switching in MVUX applications using state binding patterns.
- Adds MVUX tab section with Model and View examples showing state-based theme binding
- Includes practical code samples for implementing theme switching with IState and ToggleSwitch
- Updates source code link format to use markdown code syntax
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| In case you want to use it together with a State, e.g. to bind a control to the current theme trigger a Task with each Time, the Value changes, here is a simple example: | ||
|
|
||
| ```cssharp |
There was a problem hiding this comment.
The code block language identifier should be 'csharp' not 'cssharp'.
| ```cssharp | |
| ```csharp |
| public IState<bool> IsDarkMode => State<bool>.Value(this, () => _themeService.Theme == AppTheme.Dark) | ||
| .ForEach(SwitchThemeAsync); | ||
|
|
||
| public async ValueTask SwitchThemeAsync(bool item,CancellationToken ctk = default) |
There was a problem hiding this comment.
Missing space after comma in parameter list. Should be 'bool item, CancellationToken ctk = default'.
| public async ValueTask SwitchThemeAsync(bool item,CancellationToken ctk = default) | |
| public async ValueTask SwitchThemeAsync(bool item, CancellationToken ctk = default) |
| true => await _themeService.SetThemeAsync(AppTheme.Light), | ||
| false => await _themeService.SetThemeAsync(AppTheme.Dark) |
There was a problem hiding this comment.
The boolean logic is inverted. When item is true (toggle is on), it should set Dark theme, not Light theme. The switch cases should be reversed.
| true => await _themeService.SetThemeAsync(AppTheme.Light), | |
| false => await _themeService.SetThemeAsync(AppTheme.Dark) | |
| true => await _themeService.SetThemeAsync(AppTheme.Dark), | |
| false => await _themeService.SetThemeAsync(AppTheme.Light) |
2 participants
GitHub Issue (If applicable): closes #
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Only Mvvm sample but none for State binding commonly used in MVUX Applications
What is the new behavior?
Added sample to documentation to show how it can be done in a mvux app
PR Checklist
Please check if your PR fulfills the following requirements:
Screenshots Compare Test Runresults.Other information
Internal Issue (If applicable):