Dance Studio

This is the template repository for the Dance Studio project developed in PROG10065 - Interactive App Development

Exercises

Exercise 1. Design the Dance Studio UI

Design the user interface for the dance studio app which uses buttons and an image control enclosed into a scrollable vertical stack layout.

1. Experiment with adding multiple controls without a layout to understand the single-control nature of a content page
2. Add the scrollable view with a vertical stack layout
3. Add the two buttons inside the stack layout: _btnWelcome and _btnAction. The text of the welcome button is Welcome to MAUI Dance Studio. The text of the _btnActionbutton isStart Dancing`
4. Experiment with changing a vertical stack layout into a horizontal stack layout and back
5. Add the image control

Exercise 2. Event Handlers

Add event handlers that are triggered when the user clicks on the two buttons. Display test alerts when the buttons get clicked or taped.

1. Add a Clicked event handler to the welcome button named OnWelcomeToDanceStudio. Display an alert welcoming the user.
2. Add a Clicked event handler to the action button named OnToggleDancing and display an alert letting the user know that dancing is about to begin.
3. Troubleshoot errors resulting from a disconnect between the XAML markup and the event handler

Exercise 3. Image Controls

Add an image control to the user interface in between the two buttons named _imgAvatar. Use the homer_simpson.gif GIF resource file. Explore resource files as assets of a MAUI app.

1. Explore resource assets in a MAUI app project and locate the GIF file to display
2. Add the image control to the user interface and configure its layout properties

Exercise 4. Control Visibility

Manage the control visibility using the IsVisible property.

1. Ensure only the welcome button is visible when the application starts
2. Implement the OnWelcomeToDanceStudio event handler to show the image control and the action button

Exercise 5. Animation with GIFs

Use the image control to manage the animation state of the GIF file displayed.

1. Start Dancing. Implement the OnToggleDancing event handler to start the GIF animation when the user clicks on the action button
2. Stop Dancing. Elaborate on the implementation of OnToggleDancing to stop the GIF animation when the user clicks a second time on the action button

User Interface

Below is the user interface of the completed application.