Page crash when insert VisualState.Setters Property for "Label.Text"

Question

I have one .NET MAUI xaml-page with a Label and Switch. When i try to use VisualState-setters for change label text value on switch on/off, it work with emulator and in phone-debugger mode, but when i download it into my android phone the page crash when try to open!! This is the part of code for reproduce the problem:

    <HorizontalStackLayout Grid.Row="2" Grid.Column="0" Margin="5" Spacing="7" BackgroundColor="White" HeightRequest="50">
                                
                <!-- Automatic-Manual -->
                <VerticalStackLayout Margin="2" >
                    <Label x:Name="LblAutoMan" Text="Automatic" VerticalOptions="Start" HorizontalOptions="Center" HeightRequest="20" WidthRequest="65"/>
                    <Switch IsToggled="True" HorizontalOptions="Start" VerticalOptions="Center" HeightRequest="10">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="On">
                                    <VisualState.Setters>
                                        <Setter Property="ThumbColor" Value="Green" />
                                        <Setter TargetName="LblAutoMan" Property="Label.Text" Value="Automatic" /> 
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState Name="Off">
                                    <VisualState.Setters>
                                        <Setter Property="ThumbColor" Value="Red" />
                                        <Setter TargetName="LblAutoMan" Property="Label.Text" Value="Manual" /> 
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Switch>
                </VerticalStackLayout>
               
            </HorizontalStackLayout>

If i comment both two rows: <Setter TargetName="LblAutoMan"

Can someone resolve this bug?

Please include the exception in your title or edit post `InvalidOperationException: VisualStateGroup Names must be unique` it will be helpful for futur readers. — Cfun, Sep 12 '22 at 16:00
I also recommend adding XAMLCompilation to avoid such naughty errors : `[assembly: XamlCompilation(XamlCompilationOptions.Compile)]` in your MAUIProgram class. https://learn.microsoft.com/en-us/dotnet/maui/xaml/xamlc — FreakyAli, Sep 12 '22 at 16:19
@Cfun Yeah seems that its an issue of dispute if this should be enabled on not.. Weird because XF did it by default after a while so why not? By default its not according to MS docs at least — FreakyAli, Sep 12 '22 at 16:22
from the docs "XAML compilation is enabled by default in .NET MAUI apps" but searching my entier solution for `XamlCompilationOptions` i don't find — Cfun, Sep 12 '22 at 16:24
@Cfun Not sure if you are interested but I have started a discussion about this, Lets see if someone responds :D https://github.com/dotnet/maui/discussions/10070 — FreakyAli, Sep 12 '22 at 16:29

Cfun · Answer 1 · 2023-05-07T22:47:00.123

According to this issue you need to enclose your <VisualStateGroup> inside a <VisualStateGroupList> tag:

<HorizontalStackLayout Grid.Row="2" Grid.Column="0" Margin="5" Spacing="7" BackgroundColor="White" HeightRequest="50">
                            
    <!-- Automatic-Manual -->
    <VerticalStackLayout Margin="2" >
        <Label x:Name="LblAutoMan" Text="Automatic" VerticalOptions="Start" HorizontalOptions="Center" HeightRequest="20" WidthRequest="65"/>
        <Switch IsToggled="True" HorizontalOptions="Start" VerticalOptions="Center" HeightRequest="10">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroupList>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="On">
                            <VisualState.Setters>
                                <Setter Property="ThumbColor" Value="Green" />
                                <Setter TargetName="LblAutoMan" Property="Label.Text" Value="Automatic" /> 
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState Name="Off">
                            <VisualState.Setters>
                                <Setter Property="ThumbColor" Value="Red" />
                                <Setter TargetName="LblAutoMan" Property="Label.Text" Value="Manual" /> 
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                  </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
        </Switch>
    </VerticalStackLayout>
</HorizontalStackLayout>

I have tested your exact same code and then apply the solution the issue disappraed. possibly try clean solution and rebuild — Cfun, Sep 13 '22 at 15:45
this problem appears only when i download the app into my android phone and then run it on the device. In all the other cases (running from v.s. in my windows machine, running from v.s. in android emulator, running from v.s. in my android local phone) it works without this problems! — jay mack, Sep 14 '22 at 07:42

Page crash when insert VisualState.Setters Property for "Label.Text"

1 Answers1