"No installed components were detected" 使用视觉状态切换 AppBarButton 可见性时出错

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

在我的 UWP 应用程序中,我有一个带有几个 AppBarButton 的 CommandBar,我正在使用 Visual State 切换它们的可见性。每当我将任何视觉状态应用为 VisualStateManager.GoToState(this, nameof(State1), false);

我收到以下错误:

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

按钮 (button8) 不为空。

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

我从another source那里得到了答案。这是因为当页面渲染时,Button8实际上是在OverflowFlyout中。这意味着 Button8 未添加到可视化树中。 (可以在调试模式下打开实时可视化树来确认这一点)。

VisualState的切换是根据当前的可视树。如果元素没有被渲染,VisualState在切换时会遇到错误。

所以我决定在代码后面处理它。