Home

Awesome

Here are some GIFs where you can see the design and behavior of the app. And I also inform you of the most outstanding details of the application and possible future improvements.

Preview


<img src="./images/memoryGameLightMode.gif" alt="memory game in light mode" width="250"/> <img src="./images/memoryGameWinLightMode.gif" alt="win animation in light mode" width="250"/> <img src="./images/memoryGameLoseLightMode.gif" alt="lose animation in light mode" width="250"/> <img src="./images/memoryGameDarkMode.gif" alt="memory game in dark mode" width="250"/> <img src="./images/memoryGameWinDarkMode.gif" alt="win animation in dark mode" width="250"/> <img src="./images/memoryGameLoseDarkMode.gif" alt="lose animation in dark mode" width="250"/>

Platforms


It works only in portrait mode

Running in my computer


It is necessary a version of visual studio intallation, compatible with dotnet maui. And the tools to deploy on the desired platform (Xcode, Android SDK...) Note that at the time of writing this document some nuget packages were in pre-release, so it may be necessary to activate that check in the nuget package manager.

Nugets


Base classes


I like to have some base classes, from which the rest inherit and offers some common functionality.

Services


In the services I add all that transversal functionality to the application and that would generate coupling if it were included in the base classes.

Controls


I like to create custom controls to simplify my pages and in order to reuse them. There are times when styles and templates are not enough, that is why I have created the following controls.

<img src="./images/CardButton.png" alt="Card button" width="175" /> <img src="./images/CardView.png" alt="Card view" width="250" /> <img src="./images/CircleProgress.png" alt="Circle progress" width="245" /> <img src="./images/CustomButton.png" alt="Card button" width="300" /> <img src="./images/RoundedButton.png" alt="Rounded button" width="120" />

Note that to make these controls more attractive, I have used new features of dotnet MAUI, which simplify the design, such as borders and shadows. Likewise, in the case of the CircleProgressBar I have used skia to draw the control.

Features


Most of the application's functionality is housed here, in ContentPages and ViewModels. I will not go into detail to explain everything I have done here, but I will expose some interesting points or that may cause some confusion.

All pages have a background gradient, which is achieved very easily using LinearGradientBrush.

In all ContentPage methods have been implemented to perform animations when a page is opened and when it disappears.

Navigation


Navigation is done via shell. Parameter are send also with shell functionalities. In addition, it is the navigation service that, before leaving a page, launches the animation of its disappearance, taking into account that all pages implement the IAnimatePage interface.

There is a point that should be highlighted in the navigation. From GamePage the popup is opened as a modal showing the game is over. Closing that popup, instead of navigating back closing the modal and displaying again the previous GamePage, it navigates to a new instance of GamePage and clears the old one from the navigation stack. Why have I done this? Because when it navigates to the modal, OnDisappearing is fired, performing the page and ViewModel deactivation, but when it navigates back from the modal, OnAppearing is not fired and therefore the page activation is not performed, so bindings, observables, subscriptions to events... don't work

More details


It is interesting to talk about certain details that I have used.

Future improvements


There are certain improvements that I have left for later. Here I talk about some of them, although I'm sure there are more. There is always something to improve.