“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.

Please note that the button (button8) is not null.

XAML:

   <Grid>
       <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

Hello,

Welcome to Microsoft Q&A.

I tested your code. When the page is rendered, Button8 is actually in OverflowFlyout. This means that Button8 is not added to the visualization tree. (You can open the live visual tree in Debug mode to confirm this).

You can choose to set CommandBar.IsDynamicOverflowEnabled to false, or set CommandBar.MaxWidth to a larger value so that Button8 can render.

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

Thanks.