VisualStateGroups not found on my Grid Control

Question

I have ported a Windows phone 8.1 to UWP. The last piece of the puzzle I need to crack is this problem:

I have HubSection that contains a Datatemplate, this contains a VisualStateManager and a series of Grids.

<HubSection Name="hsBoardPassenger"  DataContext="{Binding Path=DataContext, ElementName=rootPage}">
                <DataTemplate>
                    <Grid x:Name="grdBoardPassenger" hlp:Clip.ToBounds="True">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="BoardingPassScanStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <BackEase EasingMode="EaseOut" Amplitude="0.1"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="AwaitingBoardingPass" />
                                <VisualState x:Name="ProcessingBoardingPass">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="grdAwaitingScan" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdUpdatingDCS" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdScanKO" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdScanOK" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdScanError" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="BoardingPassOK">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="grdAwaitingScan" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdUpdatingDCS" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdScanKO" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdScanOK" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:.5" />
                                        <DoubleAnimation Storyboard.TargetName="grdScanError" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.5" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <i:Interaction.Behaviors>
                            <ic:DataTriggerBehavior Binding="{Binding Path=DataContext.ScanStatus, ElementName=rootPage, Converter={StaticResource ScanStatusToStringConverter}}" Value="AwaitingScan" ComparisonCondition="Equal">
                                <ic:GoToStateAction StateName="AwaitingBoardingPass" />
                            </ic:DataTriggerBehavior>
                            <ic:DataTriggerBehavior Binding="{Binding Path=DataContext.ScanStatus, ElementName=rootPage, Converter={StaticResource ScanStatusToStringConverter}}" Value="UpdatingDCS" ComparisonCondition="Equal">
                                <ic:GoToStateAction StateName="ProcessingBoardingPass" />
                            </ic:DataTriggerBehavior>
                            <ic:DataTriggerBehavior Binding="{Binding Path=DataContext.ScanStatus, ElementName=rootPage, Converter={StaticResource ScanStatusToStringConverter}}" Value="ScanOK" ComparisonCondition="Equal">
                                <ic:GoToStateAction StateName="BoardingPassOK" />
                            </ic:DataTriggerBehavior>
                        </i:Interaction.Behaviors>

                        <Grid Name="grdAwaitingScan" Grid.Row="1" Margin="5,5,5,15" Opacity="1">

                        </Grid>

                        <Grid Name="grdUpdatingDCS" Grid.Row="1" Margin="5,5,5,15" Opacity="0">

                        </Grid>

                       <Grid Name="grdScanOK" Grid.Row="1" Margin="5,5,5,15" Opacity="0">


                        </Grid>
                    </Grid>
                </DataTemplate>
            </HubSection>

The issue I am having, that when my status changes and calls for a Visual state, I get the error The target grdBoardPassenger does not define any VisualStateGroups

Could anybody point me in the right direction? I have been looking into this, the closest thing I have found to an answer have been windows phone 8 related.

Answer 1

The solution was to simply wrap the contents of the Data Template in a UserControl. Apparently this is due to the way how the VisualStateManager needs to be tied to a control rather than a Framework Element.