UWP XAML VisualState没有可访问的设置器

Question

我的MainPage有一些Button ，如下所示：

<Grid Grid.Row="1">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10"  >
            <Image Stretch="None" Source="Images/GameMainMenuIcon.png" Margin="0 0 0 50" />
            <Button Style="{StaticResource ButtonGameLarge}">Button1</Button>
            <Button Style="{StaticResource ButtonGameLarge}">Button2</Button>
            <Button Style="{StaticResource ButtonGameLarge}">Button3</Button>
        </StackPanel>
</Grid>

在我的Style.xaml文件中，我为Buttons编写了以下样式：

<Style TargetType="Button" x:Key="ButtonGameLarge">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <Setter.Value>
            <VisualStateGroup>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Height" Value="80" />
                        <Setter Property="Width" Value="400" />
                        <Setter Property="Margin" Value="0 0 0 20" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="400" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Height" Value="40" />
                        <Setter Property="Width" Value="200" />
                        <Setter Property="Margin" Value="0 0 0 10" />
                    </VisualState.Setters>
                </VisualState>

            </VisualStateGroup>
        </Setter.Value>
    </Setter>

</Style>

但这给了我这些错误：

• 属性“ VisualStateGroups”没有可访问的设置器。
• 无法将“ VisualStateGroup”分配给属性“ VisualStateGroups”，类型必须可分配给“ IList”
• 属性“ VisualStateGroups”不是DependencyProperty。 要在标记中使用，非附加属性必须使用可访问的实例属性“ VisualStateGroups”在目标类型上公开。 对于附加属性，声明类型必须提供静态的“ GetVisualStateGroups”和“ SetVisualStateGroups”方法。

如何为一组元素设置多个VisualState ？

Answer 1

您应该在控件模板中设置视觉状态，然后多次重用控件。 在这里您可以找到示例

Answer 2

附加属性VisualStateManager.VisualStateGroups仅可应用于从FrameworkElement派生的类型。

对于您的问题，您可以像这样修改样式：

<Style x:Key="ButtonGameLarge" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup>
                            <VisualState>
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="720" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Height" Value="80" />
                                    <Setter Target="RootGrid.Width" Value="400" />
                                    <Setter Target="RootGrid.Margin" Value="0,0,0,20" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState>
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="400" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Height" Value="40" />
                                    <Setter Target="RootGrid.Width" Value="200" />
                                    <Setter Target="RootGrid.Margin" Value="0,0,0,10" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

就像在我的代码中一样，我们可以将VisualStateManager.VisualStateGroups附加到RootGrid内的RootGrid上，该Button是从FrameworkElement派生的。