Xamarin VisualState.StateTriggers not found in type VisualState

Question

I'm trying to use an OrientationStateTrigger in Xamarin, so I can style elements based on the device's orientation.

I have copied an example from this question

And this is my Xaml:

<ContentView.Content>
        <Grid x:Name="grid_master">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState
                    x:Name="Landscape">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Landscape" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState
                    x:Name="Portrait">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Portrait" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Red" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

Only the compiler doesn't recognise the VisualState.StateTriggers line and when hovering over it, the tooltip says

'The attachable property 'StateTriggers' was not found in type 'VisualState'.'

I am using XamarinForms version 3.1.0.697729 so it should be available in this version, right?

Could anyone tell me where I'm going wrong here? Thanks

Answer 1

The version of the Xamarin.Forms.3.1.0.697729 is a little bit outdated, the newest one is Xamarin.Forms.5.0.0.2578.

I've tested the sample code below on the Xamarin.Forms.5.0.0.2578 and the background can change as expected when switching the orientation from Landscape to Portrait. You may upgrade it to see if it works.

<!-- OrientationStateTrigger demo --> 
<Style x:Key="OrientationStateTriggerPageStyle"
               TargetType="ContentPage">
       <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Portrait">
                            <VisualState.StateTriggers>
                                <OrientationStateTrigger Orientation="Portrait" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="Blue" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Landscape">
                            <VisualState.StateTriggers>
                                <OrientationStateTrigger Orientation="Landscape" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="Red" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
         </Setter>
</Style>


<ContentPage
          -- omitted for brevity

             Style="{StaticResource OrientationStateTriggerPageStyle}">

    <Grid Margin="20">
        <Label Text="The page background color depends upon the device orientation."
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>

</ContentPage>