UWP Visual State Manager doesn't see content of DataTemplate

Question

My page structure is shown below.

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualStateNarrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>

                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="VisualStateWide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="800"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>


                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>


    <Grid  Background="White">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Pivot x:Name="PivotPlatform" Margin="0" ItemsSource="{Binding PivotItems}" Grid.Row="2">


        <Pivot.HeaderTemplate>
            <DataTemplate>
                <StackPanel Height="0" Width="0">
                    <TextBlock Text="{Binding}" />
                </StackPanel>
            </DataTemplate>
        </Pivot.HeaderTemplate>

        <Pivot.ItemTemplate>
            <DataTemplate>
                <Grid xmlns:uwp="using:AmazingPullToRefresh.Controls">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <uwp:PullToRefreshAdorner.Extender>
                        <uwp:PullToRefreshExtender RefreshRequested="PullToRefreshExtender_RefreshRequested" />
                    </uwp:PullToRefreshAdorner.Extender>

                    <RelativePanel x:Name="contentPanel"  Grid.Row="0" Margin="10 -30 10 10">
                        <TextBlock Name="titleTB" Text="{Binding Title}" FontSize="12" 
                                   RelativePanel.AlignLeftWithPanel="True"
                                   RelativePanel.AlignTopWithPanel="True"/>
                        <TextBlock Name="totalTB" Text="{Binding Total}" FontSize="18"
                               RelativePanel.AlignLeftWithPanel="True"
                               RelativePanel.Below="titleTB" />
                        <ProgressBar Name="progressBar" Value="{Binding ProgressValue}" Width="100" Foreground="{StaticResource currentThemeColor}"
                                     RelativePanel.AlignLeftWithPanel="True" RelativePanel.Below="totalTB" 
                                     Margin="0 5 0 0"/>
                        <TextBlock Name="dateTB" Text="{Binding Date}" FontSize="16" 
                               RelativePanel.AlignRightWithPanel="True"
                               RelativePanel.AlignTopWithPanel="True" />
                    </RelativePanel>

                        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                            <Charting:Chart Grid.Row="1" x:Name="LineChart"
                                    Margin="10" >
                                <Charting:LineSeries Title="" IndependentValuePath="Name"  DependentValuePath="Amount" 
                                             IsSelectionEnabled="False" ItemsSource="{Binding Result}" />

                            </Charting:Chart>
                        </ScrollViewer>

                    </Grid>
            </DataTemplate>
        </Pivot.ItemTemplate>

    </Pivot>

When I add setter for dateTB textblock into VisualState.Setters to move it to left side of Relative Panel, I get an error saying:

An animation is trying to modify an object named 'dateTB', but no such object can be found in the Page.

Code for adding the setter is:

<Setter Target="dateTB.(RelativePanel.AlignLeftWithPanel)" Value="True"/>

Is there a way to control this textblock through Visual State Manager with this page structure?

Answer 1

It's a problem of name scopes, common to all XAML UI frameworks. Your VSM is in the name scope of your UserControl or Page and the TextBlock is in a DataTemplate.

Romasz's solution to your problem to put the VSM inside of the DataTemplate puts everything you need in a single name scope and is the best solution to this problem.