Border Background is not updating using VisualStateManager in iOS

[sattasundar]

Description

I have used VisualStateManager for RadioButton Control Template, but Border Background Color is not updating inside that ControlTemplate on iOS.

Steps to Reproduce

<ScrollView Orientation="Horizontal"
                                    VerticalOptions="Start"
                                    VerticalScrollBarVisibility="Never"
                                    HorizontalScrollBarVisibility="Never"
                                    BackgroundColor="Transparent">
                            <HorizontalStackLayout Spacing="10"
                                       RadioButtonGroup.GroupName="CoffeCategories"
                                       RadioButtonGroup.SelectedValue="All"
                                       BindableLayout.ItemsSource="{StaticResource CategoriesArray}">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                        <RadioButton Content="{Binding .}" Value="{Binding .}">
                                            <RadioButton.ControlTemplate>
                                                <ControlTemplate>
                                                    <Grid HorizontalOptions="FillAndExpand">
                                                        <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroupList>
                                                                <VisualStateGroup x:Name="CheckedStates">
                                                                    <VisualState x:Name="Checked">
                                                                        <VisualState.Setters>
                                                                            <Setter
                                                                    TargetName="CategoryLabel"
                                                                    Property="Label.TextColor"
                                                                    Value="{StaticResource White}"/>
                                                                            <Setter
                                                                    TargetName="ChipBorderView"
                                                                    Property="Border.Background"
                                                                    Value="{StaticResource PrimaryBrush}"/>
                                                                        </VisualState.Setters>
                                                                    </VisualState>
                                                                    <VisualState x:Name="Unchecked">
                                                                        <VisualState.Setters>
                                                                            <Setter
                                                                    TargetName="CategoryLabel"
                                                                    Property="Label.TextColor"
                                                                    Value="{StaticResource Gray400}"/>
                                                                            <Setter
                                                                    TargetName="ChipBorderView"
                                                                    Property="Border.Background"
                                                                    Value="{StaticResource Gray100Brush}"/>
                                                                        </VisualState.Setters>
                                                                    </VisualState>
                                                                </VisualStateGroup>
                                                            </VisualStateGroupList>
                                                        </VisualStateManager.VisualStateGroups>
                                                        <Border StrokeThickness="0"
                                                        x:Name="ChipBorderView"
                                                        HeightRequest="35"
                                                        WidthRequest="90">
                                                            <Border.StrokeShape>
                                                                <RoundRectangle CornerRadius="25"/>
                                                            </Border.StrokeShape>
                                                            <Label Text="{TemplateBinding Content}" 
                                                           x:Name="CategoryLabel"
                                                           HorizontalTextAlignment="Center"
                                                           VerticalTextAlignment="Center"
                                                           FontFamily="RalewayRegular"
                                                           FontSize="16"/>
                                                        </Border>
                                                    </Grid>
                                                </ControlTemplate>
                                            </RadioButton.ControlTemplate>
                                        </RadioButton>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </HorizontalStackLayout>
                        </ScrollView>

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 15, macOS 12.4

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

Hi @sattasundar. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[sattasundar]

MauiStarbucks.zip

@PureWeen I have investigated a lot and found the root cause. While I am deleting/commenting default Border style from Style.xml, the issue is coming like above attached screenshot in iOS ad macOS

<Style TargetType="Border">
        <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray500}}" />
        <Setter Property="StrokeShape" Value="Rectangle"/>
        <Setter Property="StrokeThickness" Value="1"/>
</Style>

Attached sample zip, you can test that by commenting and uncommenting default border style from Styles.xml

So, need some clarification; Can't we delete/comment default styles from Styles.xml file?

[jsuarezruiz]

The Stroke property from the Border expect a Brush, not a Color. Can you try again using a SolidColorBrush?

[ghost]

Hi @sattasundar. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[sattasundar]

The Stroke property from the Border expect a Brush, not a Color. Can you try again using a SolidColorBrush?

This is the default style code when we create a MAUI project using template. I didn't change anything. While commenting this default style the issue is coming like above. With this style, its working as expected.