Question

I have ItemsControl which I bind to ObservableCollection

On my view model I just insert object and it pops onto UI

I want to show transition. For example, I want this item to fade in so user registers this change visually, let’s say it happens in 1 second.

What should I look for? How it’s done in WPF?

EDIT:

I think I need some kind of animation but what I’m looking for is something simple without coding. Plain XAML implementation, is anything built-in? I tried TranslateTransform and other choices but it doesn’t do anything.

<ItemsControl ItemsSource="{Binding Source={StaticResource TrucksSource}}">
                <ItemsControl.RenderTransform>
                    <TranslateTransform />
                </ItemsControl.RenderTransform>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding TruckId}" Background="Aqua"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Answer 1

For fade-in, you can use an EventTrigger on the Loaded event for the ContentPresenters

<ItemsControl ItemsSource="{Binding Source={StaticResource TrucksSource}}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Opacity">
                                <DoubleAnimation From="0.0"
                                                 To="1.0"
                                                 Duration="00:00:01"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TruckId}" Background="Aqua"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>