Adding a Repeater to Your Screen
Working with UI elements
Repeaters allow you to create lists of items. You just have to design one template item and then simply repeat it as many times as you want. The repeater also gives you the flexibility to change each individual item as you like.
At the end of this topic you will have a screen with a repeater like the one in the following picture.
These are the main steps of the procedure.
- Adding a repeater.
- Adding elements to the item template.
- Duplicating the items.
- Editing the item template.
- Editing single items.
Step by step
(a-1) 1. Add a repeater.
Use Alt+drag and then type repeater to add a repeater to your screen.
You can also Alt+click to create a repeater with a default size, or drag the Repeater from the
Toolboxunder Lists & Pickers.
Edit the properties of the repeater.
The repeater is a control, so it has its own properties. Remove the visible borders by setting the thickness to 0.
(a-2) 2. Add elements to the item template.
New Item Templateto create the item template, as prompted.
This template is the basis of your final design.
You are now prompted to add elements to the template.
Add an image, some text, and a line to the template.
You can use the quick-add feature or the
Toolboxto create your elements.
(a-3) 3. Duplicate the items.
Exit the edit template mode.
Press Escape or double click outside of the item. You can also use the breadcrumb in the top left corner of the designer. The
Xindicates the top level.
(Optional) Set the layout for the repeater.
The default layout is vertical, but you can also choose to repeat the items horizontally.
Duplicate the items.
You can do this in several ways.
- Click the
+icons to add a new item before or after the selected one. The items created this way are copies of the item template.
- Use Ctrl+Arrow keys. This also adds copies of the item template.
- Drag the drop-down arrow. This creates a copy of the selected item, which may be different from the item template.
- Click the
Now you have a repeater with some items.
(a-4) 4. Edit the item template.
If you need to make changes that apply to all the elements in the repeater, you must edit the item template.
Edit Item Templateaction from the
- the repeater
- any item
- the repeater
Make the changes to the item.
For example, change the font color of the title.
Go back to the repeater.
Press Esc to exit the edit template mode.
All the items have the new color in their titles.
(a-5) 5. Edit single items.
Now that you have a unified look for all the items, you can edit them individually to show different images or texts.
Double click any item of the repeater to edit it.
(Optional) Reset item template.
If you are not happy with the changes, select the
Reset Item to Templateaction from the
Properties Panel. This will make the item you edited look like the template again.
Here are some suggested topics: