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

Hi , you are passing entire class "this" as a param to GoToState function , instead pass your control as param .That solves the issue. — Noorul
public static bool GoToState(Control control, string stateName, bool useTransitions); — Noorul
Thanks @Noorul. Passing ActionsCommandBar instead of this prevents the exception but it doesn't work since the visibility of the buttons is unaffected by Visual State in that case. — Preethi

Preethi Preethi · Accepted Answer · 2020-06-25T05:33:18

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.

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

1 Answers