 Hello, this is Henrik from Drop My Graphics, and I'm going to show you how you can use containers and custom containers in your TouchGFX Designer projects. First up is the container. A container is able to contain widgets as children, which means you can add multiple widgets to the container, grouping the widgets together. In this example, we're creating a simple top bar by adding three widgets to a container. This is done by selecting the widgets in the tree view, then dragging them into the container. This is fast and easy to integrate into your development flow. To create a custom container, enter the Custom Containers tab on your left hand side, add a custom container, and start building. A custom container is also able to contain multiple widgets as children, but is intended for use in multiple places. For example, we can create our top bar as a custom container, making us able to use it on multiple screens. This is done by first creating a custom container definition, as we're doing now, and afterwards adding instances of the definition to your screens. This makes it possible to edit the custom container definition in one place, as changes made to the definition will affect all instances of the definition. When you have finished editing your custom container definition, you can add instances of it straight from the widget menu. To further demonstrate the difference between containers and custom containers, I have created three screens. Screen number one, screen number two, and screen number three. On the three screens, I also added a top bar container, which are completely identical for each screen. If we go and change the background color for our container on screen number one, we can see that the changes made on screen number one will not take place on screen number two or screen number three. Therefore, containers are useful when you only need to use the container on a single screen, and do not want to deal with definitions and instances. Custom containers are a bit different. For this example, I have again created screen number one, screen number two, and screen number three. On each screen, I have added an instance of the top bar custom container, and if we go ahead and change the definition, we can see that changes made to the definition will take place in all instances. This makes custom containers useful when you want to reuse a container on multiple screens, but want to be able to edit all the containers at once, fast and easily. This is especially useful when creating larger applications. A container can also be used as a viewport on the screen. In this example, we will simply demonstrate how this works. By adding a container, we are creating a viewport in the center of the screen. We'll add a box to it, making us able to see the outline of the viewport. We are adding an image as well, and now we will drag both the box and the image into the container. By doing this, the left-hand side of the image is now transparent, while the right side is fully visible inside the viewport. To show exactly what this means, let's run the simulator. Now we can see that only the part of the image inside the viewport is actually visible. The rest is not drawn on the screen. This has multiple uses for your application. Cool effects, animations and optimization are just a few of them. As we can see, containers and custom containers are powerful in different situations. If you have any questions or feedback, don't hesitate to jump into supporttouchgfx.com.