> For the complete documentation index, see [llms.txt](https://docs.dbnetsoft.com/dbnetsoft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dbnetsoft.com/dbnetsoft/screenspro/controls/itemselement.md).

# ItemsElement

This element pages through a list of items and animates every item in and out on its own. Unlike [ListElement](/dbnetsoft/screenspro/controls/listelement.md), each item is drawn with a `DataTemplate` of your own, so an item can be anything from a single line of text to a complete grid.

## Properties

| Name                          | Type               | Description                                                                                                                    |
| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| `Items`                       | IList              | The items to display, usually coming from a [source](/dbnetsoft/screenspro/sources.md).                                        |
| `ItemsVisible`                | int                | Number of items shown at the same time, which is one page. Default `5`.                                                        |
| `ChangeInterval`              | TimeSpan           | How long a page is shown before the next one follows. Default 10 seconds.                                                      |
| `PerItemDelay`                | TimeSpan           | Delay added per item, so the items of a page animate one after another instead of all at once. Default 0.5 seconds.            |
| `Orientation`                 | Enum               | `Vertical` or `Horizontal`. Default `Vertical`. It is ignored once `ItemsPanel` is set.                                        |
| `ItemDataTemplate`            | DataTemplate       | The template every item is drawn with.                                                                                         |
| `ItemsPanel`                  | ItemsPanelTemplate | The panel the items are arranged in. By default a `StackPanel` using `Orientation`.                                            |
| `ItemBackground`              | Brush              | Background behind the items. Not set by default, which leaves them transparent.                                                |
| `AlternateItemBackground`     | Brush              | Background behind every second item, for a striped list. Falls back to `ItemBackground` while it is not set.                   |
| `StoryboardIn`                | Storyboard         | Animation of an appearing item. By default it fades in.                                                                        |
| `StoryboardOut`               | Storyboard         | Animation of a disappearing item. By default it fades out.                                                                     |
| `DataChangedMode`             | Enum               | `KeepPosition` or `StartFromBeginning`, used when new data is set whose content is the same as before. Default `KeepPosition`. |
| `DataContentChangedMode`      | Enum               | `KeepPosition` or `StartFromBeginning`, used when new data is set whose content is different. Default `StartFromBeginning`.    |
| `DataChangedDelayMode`        | Enum               | When data of the same content is applied: `Now`, `AfterCurrentPage` or `AfterLastPage`. Default `AfterCurrentPage`.            |
| `DataContentChangedDelayMode` | Enum               | When data of different content is applied: `Now`, `AfterCurrentPage` or `AfterLastPage`. Default `Now`.                        |
| `SuppressFinished`            | Boolean            | Keeps the element from raising its finished event after the last page. Default `false`.                                        |
| `ScrollEnabled`               | Boolean            | Starts and stops the paging. It is a plain property, not a dependency property, so it cannot be bound.                         |

## Item backgrounds

`ItemBackground` and `AlternateItemBackground` paint the area an item is drawn in, behind the `ItemDataTemplate`. They alternate by the position on screen, not by the item, so the stripes stay where they are while the items page through them.

As long as neither is set, the items keep no background at all, which is what an overlay on top of a video usually wants. Setting only `ItemBackground` gives every item the same background.

```xml
<controls:ItemsElement Items="{Binding Results}"
                       ItemsVisible="5"
                       ItemBackground="#CC000000"
                       AlternateItemBackground="#CC202020" />
```

## New data

Whenever `Items` is set, the element first compares the new data with what is on screen, and then applies one of two pairs of properties:

| Situation                | When it is applied            | Where it continues       |
| ------------------------ | ----------------------------- | ------------------------ |
| The content is different | `DataContentChangedDelayMode` | `DataContentChangedMode` |
| The content is the same  | `DataChangedDelayMode`        | `DataChangedMode`        |

This way new results can appear immediately while an unchanged list simply keeps running.

## Example

```xml
<controls:ItemsElement Items="{Binding Results}"
                       ItemsVisible="5"
                       ChangeInterval="0:00:10"
                       PerItemDelay="0:00:00.2">
    <controls:ItemsElement.ItemDataTemplate>
        <DataTemplate>
            <Grid Height="60">
                <controls:TextElement Text="{Binding Name}" FontSize="30" />
            </Grid>
        </DataTemplate>
    </controls:ItemsElement.ItemDataTemplate>
</controls:ItemsElement>
```