UWP XAML VisualState does not have an accessible setter - xaml

Question

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:
The property "VisualStateGroups" does not have an accessible setter.
Cannot assign 'VisualStateGroup' into property 'VisualStateGroups', type must be assignable to 'IList'
The property "VisualStateGroups" is not a DependencyProperty. To be used in markup, non-attached properties must be exposed on the target type with an accessible instance property "VisualStateGroups". For attached properties, the declaring type must provide static "GetVisualStateGroups" and "SetVisualStateGroups" methods.
How can I set multiple VisualState for a group of elements?

Answer 1

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.

Answer 2

You should set visual states in the control template, and than reuse the control multiple times. Here you can find examples