 Hello, my name is Gustavo Sosa. I'm going to another video from ST Microelectronics. In this video, we'll create a project to show how to use the swipe container. The project will have two screens. The first screen will have three pages. The second screen will have two swipe containers, each one with two pages. The swipe container is useful to have fluid transitions and to have multiple spaces at the screen. Each page is like a screen inside the swipe container that we can change by swiping the screen. We will use the TouchFX Designer. The hardware will be the STM32H735 Discovery board with a 4.3 inches, 480 by 272 TFT and as a microcontroller, a STM32H735 with one mega flash and 564 KF. Select the STM32H735 Discovery Kit application template and blank UI. To create the UI, we'll add a white box and logo's images. Add the swipe container on the rest of the screen. Add a box. We'll change the box color to a light blue. And with the swipe container widget selected, drag the box inside the swipe container 1 page 1. Extend the box to the whole swipe container area. We'll be the background. To identify the page, we'll add a number with size large. Drag the text inside the swipe container. We'll add images to indicate the swipe. To assign the image, go to Skin, Dark and Icon. Select back arrow 48. Add another image. Now we'll be next arrow 48. Both images drag them to swipe container 1 page 1. Add a second page to the swipe container. Select the box, images and text at page 1. Copy and paste them and the copy drag it to page 2. Change the box color and change the text to 2. Add the third page to the swipe container. Select the box, images and text at page 1. Copy and paste them. The copy drag it to page 3. Change the box color and change the text to 3. Delete the right arrow. Select the swipe container. Change to page 1. Delete the left arrow. Finally, select page 2. The page selected is a page seen at the touch effect but also will be the page displayed at the screen. Add a button. Note that the button is outside the swipe container. This button will be used to change the screen. Add the second screen. From screen 1, select a box at the top and logo's images. Copy and paste them at the screen 2. Add a box to be used as background and change the color. Add the first swipe container. Place the swipe container on the half-left of the background. Add a box. Select swipe container page 1 and drag the box to it. Adjust the box to be in all the subcontainer area. Change box color. Add the second page to the swipe container. Add a box. Select swipe container page 2 and drag the box to it. Adjust the box to be in all the swipe container area. Change box color. Finally, enable page indicator and change style to dot slash. The page indicator will let us know the page being seen. Add the second swipe container. Now, we'll be at the right side of the screen. Again, add a box and drag it to the swipe container page. Change box color. Adjust the box to the swipe container area. Add the second page to the swipe container 2. Again, add a box and drag it to the swipe container page. Adjust the box to the swipe container area. Change box color. Let a button to change the screen. This button will be in swipe container 2 page 2. So, we need to drag it to swipe container page 2. Place the button in the visible area. Enable page indicator. We need to add interactions to change between screens. With the screen to selected, go to interactions. Add an interaction. At trigger, select button is clicked. At source, button 1. At action, change screen. Finally, screen 1. Select screen 1. Add an interaction. But now we'll change to screen 2. At the two swipe containers, select page 1 to be seen. To finish, we'll add backgrounds. So, at the end of the swipe container, do not see black, but see the same color of the swipe. At the box, put it at the left of the screen. Place it along the swipe container. We leave it with a 50 pixels width. Change the color to the color of screen 1, swipe container page 1. At the second box, place it at the right of the screen. Leave it to with a 50 pixel width. Place it along the swipe container. Now, change the color to the color of screen 1, swipe container page 3. Select the two boxes and drag them to the bottom of the screen 1 widget. So, we'll be at the bottom to be displayed. Generate code and after, run target to see the UI at the board. At screen 1, we can change between pages. We can see how at the end of page 1 and page 3, we see the same color of the page. At screen 2, we can observe how at the end of page 3, we see that background of the screen and not the box color. With the button at the swipe container 2 page 2, we can go back to screen 1. Thank you for watching.