🕓 5 MIN From simplified UI design …
Menu
Today we’re diving into the application of the Neumorphism design style for our Uno Platform project using XAML and C#. Leo Cazes‘ put together a comprehensive tutorial as he guides you through each step to accomplish the Neumorphism look and feel for a door lock application.
Additionally, we will be implementing a simple animation that slides the “lock” up and down. Our aim is to create a single XAML codebase in Uno Platform that can be used on both web and mobile devices, ensuring a consistent visual experience and a similar design across all platforms.
You can follow along with the sample code here.
This style is characterized by displaying a rich visual aspect, which tries to show objects on the screen the way we see certain objects in our reality. Just looking at the keys on a keyboard is enough to notice that this style tries to represent the same thing and, through lights and shadows “trick” our brain into perceiving depth on a screen that only has 2 dimensions. The style then tries to make the objects look like they are coming out of the screen or sinking into it.
To achieve the proposed design and sensation in XAML, it is important to use homogeneous colors. The effect is completely lost if the selection of these colors is wrong. The example below could serve to represent a lighting effect, but definitely not for neumorphism.
For our example, we will use the range of grays and blacks and the combination between them. In addition, and to give a greater impact of lights and shadows, we will use degraded backgrounds, which will help, even more, to make the final effect better.
Some may assume that utilizing images and animations would be the easiest and quickest approach, but our objective is to achieve the desired outcome solely through XAML. Therefore, we’ll be leveraging a control from Uno Platform’s toolkit – ElevatedView.
Admittedly, the ElevatedView control wasn’t originally intended for our specific use case, but with a bit of ingenuity and effort, we can adapt it to suit our needs.
This idea can be a bit of work at first, but the concept to achieve the style is really simple: use two ElevatedView controls, one for the bottom effect and one for the top effect.
However, this seemingly straightforward concept requires us to be mindful of certain intricacies if we aim to achieve a consistent look and feel across all the platforms and devices we’re targeting. In our particular scenario, it’s crucial to heed the Uno Platform documentation regarding the ElevatedView. It explicitly outlines that the object may be displayed or handled differently on specific platforms
We will see that in this example we are going to treat Android differently in several parts of the code. This is because Android interprets certain properties differently compared to other platforms. For instance:
The margin required for rendering the ElevatedView
Centering an object for rotation
The ElevatedView’s content can’t be transparent.
Now, we’ll walk you through each step. It’s Important note: For this tutorial we used Visual Studio 2022 with .NET 6.0. Without further ado, let’s dive right in and get started!
Note: If your new to Uno Platform, ensure your development environment meets all of the prerequisites. To set up your environment, check that you’ve installed the ASP .NET and Web Development, .NET Multi-platform App UI Development, and .NET Desktop Development workloads. Â
You can follow our guide for setting up your environment here.
Open Visual Studio and create a project using the Uno Platform App Termplate. Select “Next” and specify the app’s name and location, then click on the “CREATE” button. This will prompt the Template wizard to pop up.
To begin, choose the Blank template and click on the “Customize” button. This action will prompt a Wizard with nine options to appear. However, we’ll only modify our Framework by selecting .NET 6.0. For the remaining options, we’ll retain the pre-selected values.
Finally, click Create to build your solution.
Visual Studio already created our project and before making any changes we must make sure if everything is fine and our default template works. To do this, you can use the “rebuild solution” option in the “Build” menu.
In the event of an error, please refer to Uno Platform’s troubleshooting documentation.
So far, we haven’t encountered any issues with compiling. Now, it’s time to test if the default Uno Platform template is functioning properly. To do this, we can select the Windows platform as our target and click the execute button.
If everything goes well we should see the following:
We can finally get started on our app, so first thing is we’ll start by adding the colors and styles we’ll be using. For this we will edit the file shown below and add the following:
This is going to be the color palette that we’ll use throughout our entire example. Just a heads up, we’ll be using two different styles of gradients for the background effects that we talked about earlier.
When finished, save and close the file.
Create the main work area. Edit the MainPage.xaml file and modify it to look like the below image:
If we run, we should get the following output:
Note: that one of the gradient styles defined in the previous step is being used as the background
From this point on, everything else will be done only on this screen.
Add the texts “Main Door” and “Tap to unlock” inside the grid we created in the previous step:
Define the sector where the Neumorphism style object will be and add the following grid after the TextBlock from the previous step:
Note: It is at this point where the particularities of Android begin to be important and that is why here we see that this grid has a certain size for Android and a certain size for the rest of the platforms.
But so that this does not generate an error, in the header of this file we must add the following:
In this step, we will create the main effect of the searched style. For this we will use the double ElevatedView trick. One generates the lower shading in black and the other generates the upper shading in gray, but this one has a great peculiarity: it is inverted 180°!!!! These two combined will create the background effect, and we’ll draw everything else on top of them.
Note: Android also has its peculiarities here, otherwise the object will not be placed and it would look totally different.
In order to use the ElevatedView we must place the reference in the header of the file:
The rest of the objects will be placed inside a grid after the second ElevatedView and this is specifically required by Android in order to generate margin space.
Then create the following Grid. With it, it will have a Border to place the background effect:
To create the object’s background, we’ll need two images like the ones shown below, and they must be included in the project:
Here we will create the “lid. For this step we will need two images like the following:
Note: Some objects have the property “x:Name” and this is because they will be necessary to be able to invoke those objects from the C# code.
The image was already fully assembled, only the last step is missing to be able to generate the animation.
To animate the movement of the “lid,” we need to add instructions in both the XAML and C# code.
Make sure to replace “Uno PlatformApp1” with the name that you have given your App.
Notice that the first event triggers the animation when the lock icon is clicked. The second event fires when the animation ends.
To see the final result, you’ll want to make sure everything compiles and runs.
As we have in this simple example, the process of creating this style can be long due to the number of visual steps involved, but the result is worth it. To speed up this development process I invite you to create a custom control, perhaps inherited from ElevatedView, that creates the Neumorphism style and thus reduces the work. With a little creativity you can achieve it.
On the other hand, it must be taken into account that this style may not be correct to apply in every case because if we place many of these objects on the same screen, the visualization may become complicated.
It is very important that you evaluate where to apply it before starting the development since each element uses two shadows, the total space that is used by each element in Neumorphism is significantly larger than normal. This makes it difficult to design complex interfaces with many elements.
Big shoutout to Leo Cazes for sharing his expertise and knowledge through such a comprehensive tutorial. Thanks for being an awesome contributor!
To upgrade to the latest release of Uno Platform, please update your packages to 4.8 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)
Tags:
🕓 5 MIN From simplified UI design …
🕓 5 MIN Hug App by Some …
🕓 11 MIN Overriding Material components for …
