UWP Visual State Manager doesn't see content of DataTemplate - xaml

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.