Android, iOS: CheckBox colors not set correctly using VisualStateManager
- Dominant language
- C#
- Stars
- 23.3k
- Forks
- 2k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 290
Description
### Description
The MAUI CheckBox documentation's [Check visual states](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/checkbox#checkbox-visual-states) section describes how to configure a checkbox to change color depending on its checked state using `VisualStateManager` properties. The doc says the sample code provided should set the checkbox to red when unchecked and green when checked.
This does not work correctly on Android or iOS. The [MauiTestApp6_CheckBox app](https://github.com/awalker-dsg/MauiTestApp6_CheckBox) was created to demonstrate the issue. The app has 3 checkboxes that attempt to set the color to red when unchecked, and green when checked. These 3 checkboxes differ as follows:
Checkbox 1: Sets the colors using direct references to the colors in the page's XAML
Checkbox 2: Sets the colors using DynamicResources in the page's XAML
Checkbox 3: Uses a custom XCheckBox class that simply extends CheckBox and sets the colors using DynamicResources in the XCheckBox XAML.
The results are shown below for when the checkboxes are checked and unchecked. The colors do not change for Checkbox 1 or 2 regardless of their checked state. The colors of Checkbox 3 do change, but they are flipped -- the checkbox is green when unchecked, and red when checked.

Tested on Android 12 and iOS 15.4. The screenshots above are from Android.
The test results were performed using VS 17.3.5 with .NET 6.0.40.
### Test app crashes or hangs when built using VS 17.4.0 Preview 2.1
It's not clear if this should be entered as a separate ticket, but the MauiTestApp6_Checkbox test app would not run at all on Android or iOS when built with VS 17.4.0 Preview 2.1 with .NET 7.0.100-rc.1.22431.12.
When run on an Android 12 device using VS-Preview, the MauiTestApp6_Checkbox app throws the following unhandled exception in MainPage's `InitializeComponent` function:
```
System.Reflection.TargetInvocationException
Message=Exception has been thrown by the target of an invocation.
```
This occurred even after first doing a Clean, then a Rebuild, then deleting the app from the Android device before running another test.
On iOS, after the splash screen the app simply hangs on a black screen. No exception was reported by the VS debugger.
### Steps to Reproduce
VS 17.3.5
1. Build the MauiTestApp6_CheckBox app
2. Run the app. If the issue exists, the checkboxes should be red if unchecked, green if checked.
VS 17.4.0 Preview 2.1
1. Build the MauiTestApp6_CheckBox app
2. Run the app in the VS debugger on Android. If the issue exists, the app will throw an uncaught TargetInvocationException.
3. Run the app in the VS debugger on iOS. If the issue exists, the app will hang after displaying the splash screen.
### Link to public reproduction project repository
https://github.com/awalker-dsg/MauiTestApp6_CheckBox
### Version with bug
Unknown/Other (please specify)
### Last version that worked well
Unknown/Other
### Affected platforms
iOS, Android
### Affected platform versions
iOS 15.4, Android 12
### Did you find any workaround?
When using the non-Preview version of VS, a workaround for this issue is to create a wrapper like the XCheckBox control in the MauiTestApp6_CheckBox app, and then flip the colors used for checked and unchecked.
There is no workaround when the app is built using VS 17.4.0 Preview 2.1. The app crashes or hangs.
### Relevant log output
_No response_
Contributor guide
Research direction
Start by running the MauiTestApp6_CheckBox reproduction and inspect its CheckBox visual-state setup and MainPage.InitializeComponent behavior on Android and iOS. Done means unchecked boxes are red and checked boxes are green, while the VS 17.4.0 Preview build no longer throws TargetInvocationException or hangs after the splash screen.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, csharp, ios
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100