Learning and contributing to the front-end building of the internal app. How I learnt and came to understand .NET MAUI XAML & C#.
Overview
Nexus
After designing the Nexus app, I had the opportunity to bring parts of the interface to life using .NET MAUI. This project was my first real exposure to C# and XAML — and a chance to bridge the gap between design and development by translating the visual language I created in Figma into code.
Role
Product Designer & Front-end Developer
Timeframe
1-2 months
Team
Myself, Team Lead
Tools
Constraints
Two main constraints were my inexperience with front-end and .NET MAUI. Whilst I could ask for help at any point and did I was effectively working alone.
Learning MAUI’s layout system was initially challenging. Iterating between XAML markup and preview helped me quickly understand how you manage the UI with stack layouts and grids. Understanding the navigation and file structure, adding typefaces, managing the styles etc all were simple enough. The much more confusing part that I was learning is the logic part, the C# and understanding MVVM among other topics.
Goal
After completing the design for Nexus, I was asked to help translate the UI into .NET MAUI. Once the design was final, I’d start learning how to build out the interface using XAML, focusing purely on the visual layer.
This meant taking my Figma layouts and recreating them directly in MAUI: defining colors, text styles, and layouts, and getting comfortable with how components are structured in code. It wasn’t about writing backend logic or data handling — just bringing the UI to life and learning how design decisions turn into real, coded components.
Now I had to consider how I was going to learn, how would I retain my knowledge, how could it be more useful then just doing to get it done. I wanted to try and understand it rather then just know it.
Learning
Coming from a design background, I documented everything I learned in Notion — from layout structures and bindings to how MAUI handles colors and resource dictionaries. This helped me build a foundation in C# and XAML while keeping track of solutions for future projects.
As seen in the image below I did end up starting to learn and understand the logic part, it was a struggle at times. I also had the exact same setup for the UI. I also added links to useful learning sources for example, the Microsoft docs on XAML. In the pages themselves they are structured to have the code, its output, an explanation to the code, and anything extra.
Floating Action Button
UI Layout
This was probably the most confusing part of creating the UI. Learning that MAUI did not have any native support for a floating action button I had to learn how to get around it.
It was actually pretty simple solution in hindsight but I tried a could different ways to solve this problem. One was trying to use a sticky/absolute positioning which did not really get me anywhere. Another option would be looking at a package/plugin but decided to keep looking before going there. Lucky last was actually basically the sticky solution from above but there wasn't any way to just add a position: sticky.
I ended up having to wrap the entire UI in a <Grid> and had the scrollable content in a <ScrollView> and outside of that we placed our sticky button in a <VerticalStackLayout> which had the <VerticalStackLayout.Background> which let me use a gradient to help separate it from the main content.
Grid & StackLayout/s
UI Layout
Understanding and utilizing Grid & StackLayout. These are the backbone to how you structure the UI from page to page.
The grid was naturally a bit more confusing but the StackLayout is basically just Display: Flex, but I learnt was a bit weird as well. You have the Horizontal, Vertical, and just normal StackLayout. But for whatever reason the StackLayouts had no ability to add a gap between the elements inside it. Whereas I think the grid did have a gap option but is somewhat more rigid and if you chose to use it like a StackLayout meant a few extra lines and words of code to do so which is just annoying.
Color
Styles
This was also a pretty easy part to learn. Mix of just reading docs, asking copilot and looking at the current SCC app and how it uses styles.
Below shows some AI generated example code that you might see in a .NET MAUI app. In my case I had all the palettes in Figma ready to go just needed to understand how MAUI used styling. Then setting up how the different buttons should be styled, another key thing used in this area was BasedOn.
Basically I would create a DefaultButton style which had everything then used the BasedOn to create the rest of the buttons, where you would only need to change the x:key="name" and the colors. Because the app was using two types of buttons, a small and large I created two default buttons for each then the variations were using BasedOn. If you needed to update say the, sizing, text size, weight etc you would do so on the default button styling effectively updating them all. This greatly reduces the time, effort, and keeps it all consistent.
Outcome
I ended up building out majority of the screens, the UI and was just reviewing everything, cleaning up unnecessary code, starting to bind and learn C#.
The last 1-2 months of the internship the project got put on pause until 2026 and well my internship would be long over by whenever it picked back up if it does. Towards the end I started to understand it, building screens, and annotating where binding needed to be in the future. I was starting to pick up the C# logic stuff but was still somewhat struggling.
Whats Next
This was my first experience working within app development, and I gained enough of an interest to continue learning but in React Native.
Most learning is currently done on my own time and is mostly experimental, which currently is an app centered around design systems but I'm not sure I'll ever finish or show it. I might also rebuild my portfolio in React or another framework.