Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

20 Jun 2023, 17:14

I have a list of items in an ItemsControl.
When I remove an item from the list I trigger an event to play a removal storyboard - this works as expected.
However, if I try to trigger the storyboard on any other item that was in the list the storyboard doesn't play
If I remove all items from the list and add new items the storyboard will play on only one of the items as before
If I add a new item the storyboard will on the new item but not on the existing ones.
What am I doing wrong?

Data Template, with containing Storyboard and Data Event Trigger

<DataTemplate x:Key="Objective">
				<Grid x:Name="Item" Height="30" Width="800" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="0.5">
					<Grid.RenderTransform>
						<TranslateTransform x:Name="Item_TranslateTransform" X="0" Y="0"/>
					</Grid.RenderTransform>
					<Grid.Resources>
						<Storyboard x:Key="Item_timeline_OUT">
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="Item_TranslateTransform">
								<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="108.667"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Item">
								<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</Grid.Resources>
					<b:Interaction.Triggers>
						<noesis:DataEventTrigger Source="{Binding}" EventName="OutAnim">
							<b:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Item_timeline_OUT}"/>
						</noesis:DataEventTrigger>
					</b:Interaction.Triggers>
				</Grid>
			</DataTemplate>

The DataTemplates are displayed in the page using an ItemsControl

<ItemsControl ItemsSource="{Binding Objectives}" ItemTemplate="{StaticResource Objective}">
				<ItemsControl.ItemsPanel>
					<ItemsPanelTemplate>
						<StackPanel/>
					</ItemsPanelTemplate>
				</ItemsControl.ItemsPanel>
</ItemsControl>

In the C++ I am storing my objects in a TArray and selecting the object in the list by index. The events are then called by the object

Viewmodel.h

UPROPERTY()
TArray<UObjectiveData*> Objectives;

ViewModel.cpp

Objectives[index]->PlayOutAnim();

ObjectiveData.cpp

void UObjectiveData::PlayOutAnim() const
{
	OutAnim.Broadcast();
}

21 Jun 2023, 12:17

Hi, I guess you are on NoesisGUI 3.2.1, right?

I've being doing some tests and I'm not able to reproduce your problems. I used the code and xaml included below and I can trigger the AnimOut event on any item, and it is firing the corresponding animation on that item. And if I add new items, the animation also plays fine there.

C++

DECLARE_DYNAMIC_MULTICAST_DELEGATE(FOutAnim);

UCLASS(BlueprintType)
class USERCONTROLMODULE_API UObjectiveData: public UObject
{
	GENERATED_BODY()

	UPROPERTY(BlueprintAssignable, BlueprintCallable)
	FOutAnim OutAnim;

public:
	void PlayOutAnim() const
	{
		OutAnim.Broadcast();
	}
};

UCLASS(BlueprintType)
class USERCONTROLMODULE_API UCustomEventViewModel: public UObject
{
	GENERATED_BODY()

public:
	UPROPERTY(BlueprintReadOnly)
	TArray<UObjectiveData*> Objectives;

	UFUNCTION(BlueprintCallable)
	int32 GetIndex() const
	{
		return index;
	}

	UFUNCTION(BlueprintCallable)
	void SetIndex(int32 value)
	{
		index = value;
		if (index >= 0 && index < Objectives.Num())
		{
			Objectives[index]->PlayOutAnim();
		}
		else if (index >= Objectives.Num())
		{
			FString Name = FString::Printf(TEXT("ObjectiveData %02d"), Objectives.Num());
			UObjectiveData* Objective = NewObject<UObjectiveData>(this, *Name);
			Objectives.Add(Objective);
			NoesisNotifyArrayPropertyPostAdd(&Objectives);
		}
	}

	UCustomEventViewModel()
	{
		index = -1;

		for (int i = 0; i < 10; ++i)
		{
			FString Name = FString::Printf(TEXT("ObjectiveData %02d"), i);
			UObjectiveData* Objective = NewObject<UObjectiveData>(this, *Name);
			Objectives.Add(Objective);
		}
	}

private:
	int32 index;
};

XAML

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">
  <Grid.Resources>
    <DataTemplate x:Key="Objective">
      <Grid x:Name="Item" Height="30" Width="800" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="1" Margin="0,2" Background="Red">
        <Grid.RenderTransform>
          <TranslateTransform x:Name="Item_TranslateTransform" X="0" Y="0"/>
        </Grid.RenderTransform>
        <Grid.Resources>
          <Storyboard x:Key="Item_timeline_OUT">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="Item_TranslateTransform">
              <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
              <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="108.667"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Item">
              <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
              <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
              <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </Grid.Resources>
        <b:Interaction.Triggers>
          <noesis:DataEventTrigger Source="{Binding}" EventName="OutAnim">
            <b:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Item_timeline_OUT}"/>
          </noesis:DataEventTrigger>
        </b:Interaction.Triggers>
      </Grid>
    </DataTemplate>
  </Grid.Resources>
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBox Text="{Binding Index}"/> <!-- on lost focus it will animate the specified item -->
    <ItemsControl ItemsSource="{Binding Objectives}" ItemTemplate="{StaticResource Objective}"/>
  </StackPanel>
</Grid>

Could you try that? Is there any difference with your code? When are you removing the item from the array, before triggering the event?

22 Jun 2023, 11:59

Yes this is using 3.2.1. Thank you for the code you posted, that works for me. I have now realised that the error I'm seeing is coming from a StoryboardCompletedTrigger. Something I left out of my original post. Sorry

The issue is that the StoryboardCompletedTrigger is invoked for every item in the array, not just the item that completed the storyboard animation.

XAML, DataTemplate with Storyboard and StoryboardCompletedTrigger

<DataTemplate x:Key="Objective">
				<Grid x:Name="Item" Height="30" Width="800" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="0.5">
					<Grid.RenderTransform>
						<TranslateTransform x:Name="Item_TranslateTransform" X="0" Y="0"/>
					</Grid.RenderTransform>
					<Grid.Resources>
						<Storyboard x:Key="Item_timeline_OUT">
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="Item_TranslateTransform">
								<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="108.667"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Item">
								<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</Grid.Resources>
					<b:Interaction.Triggers>
						<noesis:DataEventTrigger Source="{Binding}" EventName="OutAnim">
							<b:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Item_timeline_OUT}"/>
						</noesis:DataEventTrigger>
						
						<b:StoryboardCompletedTrigger Storyboard="{StaticResource Item_timeline_OUT}">
							<b:InvokeCommandAction Command="{Binding AfterOutAnimCompleted}"/>
						</b:StoryboardCompletedTrigger>	
					</b:Interaction.Triggers>
				</Grid>
			</DataTemplate>

C++ for after storyboard trigger

Declaration

	UFUNCTION()
	void AfterOutAnimCompleted();

implementation

void USubObjectiveData::AfterOutAnimCompleted()
	{
		DeleteMe = true;
	}

27 Jun 2023, 17:32

Ok, I was able to reproduce your problem with the StoryboardCompletedTrigger, it is incorrectly invoking the actions for all items in the list.
Could you please report it in our bugtracker? I will provide a patch for you to test.

28 Jun 2023, 12:45

I have submitted a bug report (https://www.noesisengine.com/bugs/view.php?id=2634). Please let me know it needs anymore information

29 Jun 2023, 12:37

Thanks for the report, I attached a patch in the ticket for you to try.
Let me know if you find any trouble with that.

11 Sep 2023, 17:36

I apologise for the delay, I have just tested the patch.

I created a StoryboardComplete in a DataTemplate and then made an Itemcontrol with multiple instances of the template, and it still triggered for all instances just as before

13 Sep 2023, 20:30

It is strange, I was able to reproduce the problem and the patch fixed it.
Could you please attach some example in the ticket that reproduces it for you? I might have something different in my test project.

Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Re: Storyboard not playing on DataTemplate in ItemsControl with DataTriggers in Unreal Engine

Who is online