"No installed components were detected" error on toggling AppBarButton visibility with Visual States

Question

In my UWP application, I am having a CommandBar with few AppBarButtons whose visibility I am toggling using Visual State. Whenever I apply any Visual State as VisualStateManager.GoToState(this, nameof(State1), false);

I get the following error:

No installed components were detected. The target object with name 'Button8' could not be resolved for a Setter.

The button (button8) is not null.

XAML:

        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <CommandBar x:Name="ActionsCommandBar"
                    MaxWidth="640"
                    HorizontalAlignment="Left"
                    Background="Transparent"
                    ClosedDisplayMode="Compact"
                    DefaultLabelPosition="Right"
                    IsDynamicOverflowEnabled="True"
                    OverflowButtonVisibility="Auto"
                    Style="{StaticResource CommandBarWithoutRevealStyle}">
            <CommandBar.PrimaryCommands>
                <AppBarButton x:Name="Button1" Label="Button 1" />
                <AppBarButton x:Name="Button2" Label="Button 2" />
                <AppBarButton x:Name="Button3" Label="Button 3" />
                <AppBarButton x:Name="Button4" Label="Button 4" />
                <AppBarButton x:Name="Button5" Label="Button 5" />
                <AppBarButton x:Name="Button6" Label="Button 6" />
                <AppBarButton x:Name="Button7" Label="Button 7" />
                <AppBarButton x:Name="Button8" Label="Button 8" />
                <AppBarButton x:Name="Button9" Label="Button 9" />
            </CommandBar.PrimaryCommands>
        </CommandBar>
        <StackPanel Grid.Row="1" Orientation="Vertical" Margin="20">
            <Button Content="Visual State 1" Click="Button_Click"/>
            <Button Content="Visual State 2" Click="Button_Click1"/>
        </StackPanel>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FolderStates">
                <VisualState x:Name="State1" >
                    <VisualState.Setters>
                        <Setter Target="Button1.Visibility" Value="Visible" />
                        <Setter Target="Button2.Visibility" Value="Visible" />
                        <Setter Target="Button7.Visibility" Value="Visible" />
                        <Setter Target="Button8.Visibility" Value="Visible" />
                        <Setter Target="Button9.Visibility" Value="Visible" />
                        <Setter Target="Button4.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="State2">
                    <VisualState.Setters>
                        <Setter Target="Button1.Visibility" Value="Visible" />
                        <Setter Target="Button2.Visibility" Value="Collapsed" />
                        <Setter Target="Button7.Visibility" Value="Collapsed" />
                        <Setter Target="Button8.Visibility" Value="Collapsed" />
                        <Setter Target="Button9.Visibility" Value="Collapsed" />
                        <Setter Target="Button4.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

C# :

 private void Button_Click(object sender, RoutedEventArgs e)
 {
    try
    {
        VisualStateManager.GoToState(this, nameof(State1), false);
    }
    catch (Exception ex)
    {
        //No installed components were detected exception here 
    }
 }

 private void Button_Click1(object sender, RoutedEventArgs e)
 {
    try
    {
        VisualStateManager.GoToState(this, nameof(State2), false);
    }
    catch (Exception ex)
    {
        //No installed components were detected exception here 
    }
 }

Answer 1

I got the answer from another source. It is because when the page is rendered, Button8 is actually in OverflowFlyout. This means that Button8 is not added to the visualization tree. (The real-time visualization tree can be opened in Debug mode to confirm this).

The switching of VisualState is based on the current visual tree. If the element is not rendered, VisualState will encounter an error when switching.

So i decided to handle it in code behind.