Summary
Highlights
This section introduces the 'Ma Berter' application, a unit converter built with .NET MAUI. The application allows users to convert between different units of measurement, such as bits to bytes or meters to centimeters. The video demonstrates the application's functionality, including selecting a unit type (e.g., 'information', 'length'), inputting a value, and viewing the converted result with various unit options.
The tutorial begins by creating a new .NET MAUI project named 'Ma Berter' in Visual Studio and setting up an 'MVVM' folder structure with 'Views' and 'ViewModels' subfolders. A 'MenuView.xaml' page is created as the initial page, and its corresponding 'MenuViewModel' class is defined and bound. The navigation bar is hidden for this page to allow for a custom title.
A set of purple-toned colors and a text color are defined as static resources for consistent styling. The default StackLayout is replaced with a Grid layout, configuring three equally sized columns and multiple rows to display the application's title and various measurement sections.
A Label control is used for the application title, spanning all three columns and styled with a background color from the defined resources, bold text, large font size, and centered alignment. Regions are then created for each measurement type (information, volume, length, mass, temperature, energy, area, velocity, duration) to organize the XAML code efficiently.
Inside each measurement region, a nested Grid layout is used. It contains a FontAwesome icon (imported as a custom font) and a Label displaying the measurement name (e.g., 'Information', 'Volume'). Each tile is positioned within the main menu grid and styled with varying background colors to create a visually appealing menu. The text of the labels is crucial as it will be used for conversion logic later.
To avoid creating a separate page for each unit conversion, a single 'ConverterView.xaml' and 'ConverterViewModel.cs' are created. This approach promotes code reusability and simplifies maintenance. The colors defined for the menu page are copied to the converter page. The page uses a Grid layout with two rows for the input and output conversion sections.
The conversion page consists of two main sections: an input section at the top and an output section at the bottom, each within its own grid and designated background color. Inside each section, a VerticalStackLayout is used. The input section contains an Entry control for the value to be converted and a Picker control to select the 'from' unit. The output section contains a Label to display the converted value and a Picker to select the 'to' unit. Both Pickers initially appear empty.
The UnitsNet NuGet package is installed to handle unit conversions. In the 'ConverterViewModel', properties like 'QuantityName' (to identify the measurement type) and `ObservableCollection<string>` for 'FromMeasures' and 'ToMeasures' are created to store available units.
A 'LoadMeasure' method is implemented in the 'ConverterViewModel' to retrieve unit information for a given `QuantityName` using UnitsNet. This method filters `Quantity.Infos` and extracts unit names, populating the 'FromMeasures' and 'ToMeasures' collections. These collections are then bound to the Picker controls in 'ConverterView.xaml'. Additionally, 'CurrentFromMeasure' and 'CurrentToMeasure' properties are introduced to hold the currently selected units in the Pickers, with initial default values like 'meter' and 'cm'.
The `INotifyPropertyChanged` interface (simplified with the Fody.PropertyChanged NuGet package) is implemented in the 'ConverterViewModel' to ensure UI updates when properties like 'ToValue' change. The 'Convert' method is also triggered when the 'ReturnCommand' (associated with the Entry control's 'return' key) is executed. For Picker selection changes, the `SelectedIndexChanged` event in the code-behind of 'ConverterView.xaml.cs' is used to call the `Convert` method on the ViewModel.
To enable navigation from the 'MenuView' to the 'ConverterView', `GestureRecognizers` are added to each measurement `Grid` in 'MenuView.xaml'. Specifically, the 'Tapped' event is handled in the code-behind ('MenuView.xaml.cs'). This event handler determines which measurement tile was tapped, extracts its text (e.g., 'Information', 'Length'), creates a new 'ConverterView' instance, and passes this measurement name to the 'ConverterViewModel' through its constructor. The `MainPage` in `App.xaml.cs` is updated to use `NavigationPage` for enabling navigation.
The 'ConverterViewModel' constructor is modified to accept the selected measurement name, dynamically loading the corresponding units and setting initial `CurrentFromMeasure` and `CurrentToMeasure` values. The title of the 'ConverterView' is also bound to the 'QuantityName' property. This allows the application to load the correct units and display the appropriate title on the conversion page based on the user's selection from the menu, demonstrating the reusability of the single conversion page and ViewModel.
Properties 'FromValue' and 'ToValue' are added to the 'ConverterViewModel' to hold the input and converted values, respectively. A 'Convert' method is created, utilizing `UnitConverter.ConvertByName` from UnitsNet, which takes the 'QuantityName', 'CurrentFromMeasure', 'CurrentToMeasure', and 'FromValue' to perform the conversion. This method is invoked in the constructor for initial conversion.