xamlwin-universal-appvisualstatemanagervisualstategroup

UWP XAML VisualState does not have an accessible setter


I have some Button in my MainPage as shown below:

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

And in my Style.xaml file I wrote these styles for the 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>

But it gives me these errors:

How can I set multiple VisualState for a group of elements?


Solution

  • The attached property VisualStateManager.VisualStateGroups can be only applied to types that are derived from FrameworkElement.

    For your problem, you can modify the style like this:

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

    As it in my code, we can attach your VisualStateManager.VisualStateGroups to the RootGrid inside of Button which derived from FrameworkElement.