UWP: ElementName binding doesn't work in EntranceThemeTransition - xaml

Question

Here is my code (it's uwp app). I'm wondering why the second binding {Binding ElementName=Items, Path=DataContext.IsStaggeringEnabled} is not working and how to fix it?
MainPage.xaml:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
<local:MainViewModel />
</Page.DataContext>
<StackPanel Orientation="Vertical">
<ItemsControl x:Name="Items"
ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="{Binding ElementName=Items, Path=DataContext.IsStaggeringEnabled}" <!-- THIS IS NOT WORKING -->
FromVerticalOffset="-20"
FromHorizontalOffset="-20" />
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button Click="{x:Bind Redraw}">Redraw</Button>
</StackPanel>
</Page>
MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
public void Redraw()
{
DataContext = new MainViewModel();
}
}
}
MainViewModel.cs:
using GalaSoft.MvvmLight;
using System.Collections.ObjectModel;
namespace App1
{
public class MainViewModel : ViewModelBase
{
public ObservableCollection<ItemViewModel> Items { get; set; } = new ObservableCollection<ItemViewModel>();
public bool IsStaggeringEnabled { get; set; } = true;
public MainViewModel()
{
for (var i = 0; i < 10; i++)
{
Items.Add(new ItemViewModel());
}
}
}
}
ItemViewModel.cs:
using GalaSoft.MvvmLight;
namespace App1
{
public class ItemViewModel : ViewModelBase
{
public static int Index = 0;
public string Name { get; set; }
public ItemViewModel()
{
Index++;
Name = $"{Index}";
}
}
}
Binding is not valid:

Answer 1

Maybe, Transitions are not laid in XAML tree so straightforwardly, therefore it would be impossible to access the control by ElementName. For workaround, try using {x:Bind} anyway.
<EntranceThemeTransition
IsStaggeringEnabled="{x:Bind ((local:MainViewModel)Items.DataContext).IsStaggeringEnabled, Mode=OneWay}"
FromVerticalOffset="-20"
FromHorizontalOffset="-20"/>

Answer 2

Maybe you need to change the way you create ViewModel:
xaml.cs
public MainViewModel vm = new MainViewModel();
public MainPage()
{
this.InitializeComponent();
DataContext = vm;
}
public void Redraw()
{
vm = new MainViewModel();
}
xaml
...
<EntranceThemeTransition IsStaggeringEnabled="{x:Bind vm.IsStaggeringEnabled,Mode=OneWay}"
FromVerticalOffset="-20"
FromHorizontalOffset="-20" />
...
So you can bind successfully.