CODEWITHSUNDEEP
xamluwpuwp-xamlxaml-binding
Anna Melashkina
Anna Melashkina

Reputation: 472

UWP: ElementName binding doesn't work in EntranceThemeTransition

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:

enter image description here

Upvotes: 0

Views: 321

Answers (2)

Anran Zhang
Anran Zhang

Reputation: 7737

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.

Upvotes: 0

ardget
ardget

Reputation: 2651

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"/>

Upvotes: 0

Related Questions