dotnet / dotnet/maui

Android, iOS: CheckBox colors not set correctly using VisualStateManager

Open
#10,469 7 comments 0 reactions 0 assignees View on GitHub
area-controls-checkbox has-workaround partner/syncfusion platform/android platform/ios s/triaged s/verified t/bug
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.

![Android Screenshots 2022-10-03](https://user-images.githubusercontent.com/55994031/193657691-e82a131c-50a5-4b15-9c7b-4fca6930fcd3.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.