DEV Community: Victor Hugo Garcia

Xperience Community: Content Repositories

Victor Hugo Garcia — Thu, 26 Mar 2026 13:47:51 +0000

If you have been building with Xperience by Kentico, you are probably familiar with the repetitive ceremony around fetching web page content: URL resolution, language detection, caching, null guards. It is the kind of code you write once per project and then paste — slightly modified — into the next one.

The Xperience Community: Content Repository package was built to centralize exactly that kind of logic. And with version 1.0.2, it gets a meaningful new addition: the WebPageRepository.

What's New in v1.0.2

This release ships two things:

IWebPageRepository and WebPageRepository — a new repository for resolving web page URLs by GUID, with built-in language awareness and caching.
Kentico package upgrades — all Kentico dependencies bumped to 31.2.0.

The web page repository is small in surface area but fills a real gap. It gives you a single, safe place to resolve a WebPageUrl from a GUID, handles language fallbacks automatically, and caches results intelligently so you're not hitting the database on every request.

Installation

Add the package via the .NET CLI:

dotnet add package XperienceCommunity.ContentRepository

Then register all repositories in your Program.cs:

services.AddXperienceContentRepositories();

That's it. IWebPageRepository is now registered in DI and ready to use.

The WebPageRepository

The new repository exposes a single, focused method:

public interface IWebPageRepository
{
    Task<WebPageUrl?> GetUrlByGuid(Guid webPageGuid, string? languageName = null);
}

Under the hood, WebPageRepository wires together three Kentico services — IWebPageUrlRetriever, IPreferredLanguageRetriever, and IProgressiveCache — so you do not have to.

Here is what the implementation does for you:

GUID guard — returns null immediately if the GUID is empty, avoiding pointless lookups.
Language resolution — if no language is passed, it falls back to the current preferred language via IPreferredLanguageRetriever.
Progressive caching — caches the resolved URL for 60 minutes, scoped to the GUID and language. Cache is invalidated via the webpageitem|byguid|{guid} dependency, so stale URLs are never served after a content update.
Graceful error handling — if URL retrieval fails for any reason (page doesn't exist, routing misconfiguration), it returns null and skips caching the failed result.

For the full implementation, check the repository on GitHub.

Usage

You can access it directly through DI or via the centralized ContentRepositories accessor:

// Via direct injection
public class MyService(IWebPageRepository webPageRepository)
{
    public async Task<string?> GetPageUrl(Guid pageGuid)
    {
        var url = await webPageRepository.GetUrlByGuid(pageGuid);
        return url?.RelativePath;
    }
}

// Via ContentRepositories accessor
public class MyOtherService(ContentRepositories repos)
{
    public async Task<string?> GetPageUrl(Guid pageGuid)
    {
        var repo = repos.GetWebPageRepository();
        var url = await repo.GetUrlByGuid(pageGuid);
        return url?.RelativePath;
    }
}

You can also pass a language explicitly when you need to resolve a URL for a specific locale rather than the current preferred language:

var url = await webPageRepository.GetUrlByGuid(pageGuid, languageName: "es");

Why This Matters

URL resolution from a GUID might sound trivial, but it is a frequent request in real Xperience projects — especially when building navigation menus, breadcrumbs, related content links, or any component that stores references to other pages by GUID rather than by full path.

Without something like this, you typically end up either writing the caching boilerplate yourself for each use case, or skipping caching altogether and accepting the performance cost. The WebPageRepository solves that cleanly in one place.

What's Already in the Package

The WebPageRepository joins an already capable set of repositories. A quick summary of what the package covers:

IPageTypeRepository<T> — query web page content types by ID, GUID, path, taxonomy tag, or custom where conditions.
IContentTypeRepository<T> — retrieve reusable content items with pagination, smart folder support, and multi-type queries.
IMediaFileRepository — fetch media files by GUID or from asset related items, with caching included.
ICacheDependencyBuilder — a utility for assembling cache dependencies consistently across your project.
ContentRepositories — a centralized accessor that provides all repositories through a single injected service.

Conclusion

Version 1.0.2 of Xperience Community: Content Repository is a focused update — a new repository that handles one common task well, paired with a dependency upgrade to Kentico 31.2.0. If you are already using the package, updating is straightforward. If you have not tried it yet, this is a good moment to add it to your toolbox.

The NuGet package is available at nuget.org/packages/XperienceCommunity.ContentRepository, and the full source is on GitHub.

Follow me on social:

LinkedIn: *victorhugogarcia***
GitHub: *@vhugogarcia***
X: *@ivictorhugo***

Xperience Community: Essentials

Victor Hugo Garcia — Wed, 08 Oct 2025 18:07:51 +0000

If you work with Xperience by Kentico, you know how much repetitive code can pile up across projects. From text manipulation and encryption to URL handling and localization, the small things add up fast. That’s why the Xperience Community: Essentials package was created — a lightweight, yet powerful collection of helpers, utilities, and extensions designed to make your life easier and your codebase cleaner.

With this NuGet package, you can spend less time rewriting boilerplate and more time focusing on the actual business logic of your application.

Implementation

Getting started is incredibly easy. You can add the package directly to your Xperience project via the .NET CLI:

dotnet add package XperienceCommunity.Essentials

Once installed, initialize the configuration helper in your Program.cs file:

ConfigurationHelper.Initialize(builder.Configuration);

This step activates configuration-dependent features such as AES encryption and other utilities that rely on your app's configuration settings.

If you plan to use encryption helpers, you’ll also need to define a section in your appsettings.json:

{
  "XperienceCommunityEssentials": {
    "AesSecureKey": "your-base64-key"
  }
}

That’s it! You’re now ready to start using the wide range of extensions the package provides.

Key Features

AES Encryption Helper

Protect sensitive information with simple encryption and decryption methods. Just configure your AES key once, and you can easily encrypt or decrypt strings throughout your project.

Text Helper Extensions

Tackle common text operations effortlessly. From truncating and Base64 encoding to cleaning HTML and generating random IDs, these helpers eliminate repetitive code and make string handling a breeze.

Collection Extensions

One of the most powerful parts of this library is the Collection Extensions, especially when working with Xperience asset collections, related items, or structured content.

When you’re dealing with lists of assets, pages, or objects, you often need to check if data exists, access nested properties safely, or retrieve default values — all without endless null-checks or verbose LINQ.

These extensions make your code much cleaner and more expressive. For example:

// Safely get the first matching asset name
string name = assetCollection.GetFirstOrEmpty(a => a.AssetFile.Metadata.Name);

// Get the first asset URL or an empty string if not available
string url = assetCollection.GetFirstOrEmpty(a => a.AssetFile.Url);

// Retrieve a default value safely from complex collections
int count = assetCollection.GetFirstOrDefault(a => a.SomeIntProperty, 0);

// Check if two collections have any matching elements
bool hasMatch = sourceList.ContainsAny(targetList);

These helpers are especially handy for handling content hub assets, and custom structured data. Instead of defensive coding everywhere, you can write elegant one-liners that are both safe and maintainable.

Localization Extensions

Improve your localization workflow with built-in fallbacks. Never worry about missing translations again — just define a default value that will be displayed when a key isn’t found.

URL Helpers

Easily manipulate URLs within Xperience. Convert relative URLs to absolute ones, trim paths, or safely handle URL conversions in your page components.

Enum Dropdown Provider

Populate dropdowns dynamically using enums — perfect for admin UI components and form fields. With a few lines of code, your enums become user-friendly selection options.

Example Usage

Here are a few quick examples that show how convenient these helpers can be:

// Encrypt and decrypt text
string encrypted = EncryptionHelper.EncryptAes("sensitive info");
string decrypted = EncryptionHelper.DecryptAes(encrypted);

// Clean HTML
string clean = htmlContent.CleanHtml();

// Generate random ID
string id = TextHelper.GenerateId(12);

// Safe property access
string name = assetCollection.GetFirstOrEmpty(a => a.AssetFile.Metadata.Name);

// Localized text with fallback
string text = localizer.GetStringOrDefault("Welcome", "Welcome to our site!");

These examples show how XperienceCommunity.Essentials simplifies daily development and improves code consistency across your projects.

Conclusion

The Xperience Community: Essentials package was built to save developers time and help maintain cleaner, more maintainable codebases. It consolidates common functionality that nearly every Xperience project needs into a single, well-documented library.

Follow me on Social:

LinkedIn victorhugogarcia
GitHub @vhugogarcia
X @ivictorhugo

Deprecation of ListView in .NET MAUI

Victor Hugo Garcia — Sat, 29 Mar 2025 19:20:52 +0000

Just a few hours ago, the .NET MAUI team announced a significant change coming in .NET 10: the ListView control and all its related cell types (TextCell, ImageCell, ViewCell, etc.) will be marked as obsolete. This decision is part of Microsoft's strategy to streamline the developer experience by focusing on a single, optimized control for displaying collections of data. Which I'm personally happy with, the less duplicated controls to maintain the better.

If you've been using MAUI (or Xamarin.Forms before it), you're likely familiar with ListView - it's been a staple for displaying lists of data since the early days. However, CollectionView in the past had several performance and rendering issues, but these days thanks to Microsoft and the community, the Collection View offers numerous advantages, including better performance, more flexible layouts, and improved customization options. With .NET 10 on the horizon, now is the perfect time to migrate your existing ListView implementations to CollectionView.

In this article, I'll walk you through a straightforward migration process, highlighting the key differences between these controls and providing practical examples to ensure a smooth transition for your MAUI applications.

Understanding the Key Differences

Before diving into the migration process, it's helpful to understand some fundamental differences between ListView and CollectionView:

Feature	ListView	CollectionView
Cell Types	Uses predefined cells (`TextCell`, `ImageCell`, etc.)	Uses DataTemplates directly
Selection	Single or multiple selection with built-in visual feedback	Single or multiple but even more flexible selection with customizable visual feedback
Item Appearance	Uses `Cell` hierarchy	Uses direct `DataTemplate`
Layouts	Vertical list only	Vertical, horizontal, and grid layouts
Performance	Less optimized	Better virtualization and performance
Grouping	Through `GroupDisplayBinding`	More flexible grouping options
Headers/Footers	Basic header/footer templates	Enhanced header/footer templates

Step 1: Replace the Control Declaration

The first step is to replace the ListView declaration with CollectionView in your XAML:

Before (ListView):

<ListView x:Name="MyListView" 
          ItemsSource="{Binding Items}">
    <!-- Cell templates here -->
</ListView>

After (CollectionView):

<CollectionView x:Name="MyCollectionView"
                ItemsSource="{Binding Items}">
    <!-- Item templates here -->
</CollectionView>

Step 2: Convert Cell Templates to DataTemplates

One of the biggest differences is how items are templated. ListView uses various cell types, while CollectionView uses DataTemplate directly.

Example: Converting TextCell

Before (ListView with TextCell):

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Title}" 
                      Detail="{Binding Description}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

After (CollectionView):

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Row="0" Text="{Binding Title}" FontAttributes="Bold" />
                <Label Grid.Row="1" Text="{Binding Description}" FontSize="Small" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Example: Converting ImageCell

Before (ListView with ImageCell):

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ImageCell Text="{Binding Title}" 
                       Detail="{Binding Description}"
                       ImageSource="{Binding ImageUrl}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

After (CollectionView):

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10" ColumnSpacing="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="50" WidthRequest="50" />

                <Label Grid.Row="0" Grid.Column="1" 
                       Text="{Binding Title}" 
                       FontAttributes="Bold" />

                <Label Grid.Row="1" Grid.Column="1" 
                       Text="{Binding Description}" 
                       FontSize="Small" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Step 3: Update Selection Handling

The selection mechanism differs between the two controls:

Before (ListView):

void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (e.SelectedItem == null)
        return;

    // Handle the selected item
    var selectedItem = e.SelectedItem as MyItemType;

    // Important: Deselect the item
    ((ListView)sender).SelectedItem = null;
}

After (CollectionView):

<CollectionView
      x:Name="collectionView"
      SelectionMode="Single"
      SelectionChanged="OnSelectionChanged">
</CollectionView>

async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var previous = e.PreviousSelection.FirstOrDefault();
    var current = e.CurrentSelection.FirstOrDefault();
}

Step 4: Convert Grouping

If you're using grouping in your ListView, you'll need to adapt it for CollectionView:

Before (ListView with grouping):

<ListView ItemsSource="{Binding GroupedItems}" 
          IsGroupingEnabled="True"
          GroupDisplayBinding="{Binding Key}">
    <ListView.ItemTemplate>
        <!-- Item template -->
    </ListView.ItemTemplate>
</ListView>

After (CollectionView with grouping):

<CollectionView ItemsSource="{Binding GroupedItems}" 
                IsGrouped="True">
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding Key}" 
                   FontAttributes="Bold"
                   BackgroundColor="LightGray"
                   Padding="10" />
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>
    <CollectionView.ItemTemplate>
        <!-- Item template -->
    </CollectionView.ItemTemplate>
</CollectionView>

Step 5: Headers and Footers

Converting headers and footers is straightforward:

Before (ListView):

<ListView ItemsSource="{Binding Items}">
    <ListView.Header>
        <Label Text="Items List" FontSize="Large" />
    </ListView.Header>
    <ListView.Footer>
        <Label Text="End of list" />
    </ListView.Footer>
    <!-- Item template -->
</ListView>

After (CollectionView):

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.Header>
        <Label Text="Items List" FontSize="Large" />
    </CollectionView.Header>
    <CollectionView.Footer>
        <Label Text="End of list" />
    </CollectionView.Footer>
    <!-- Item template -->
</CollectionView>

Step 6: Take Advantage of New Layout Options

One significant advantage of CollectionView is its flexible layout options:

Vertical List (default):

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="5" />
    </CollectionView.ItemsLayout>
    <!-- Item template -->
</CollectionView>

Horizontal List:

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="5" />
    </CollectionView.ItemsLayout>
    <!-- Item template -->
</CollectionView>

Grid Layout:

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" 
                         Span="2"
                         HorizontalItemSpacing="5"
                         VerticalItemSpacing="5" />
    </CollectionView.ItemsLayout>
    <!-- Item template -->
</CollectionView>

Step 7: Handle Empty State

CollectionView has better support for empty state handling:

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.EmptyView>
        <StackLayout Padding="20">
            <Label Text="No items available" 
                   HorizontalOptions="Center"
                   VerticalOptions="Center" />
            <Button Text="Refresh" Command="{Binding RefreshCommand}" />
        </StackLayout>
    </CollectionView.EmptyView>
    <!-- Item template -->
</CollectionView>

Common Challenges and Solutions

Challenge 1: Context Actions

ListView's ContextActions don't have a direct equivalent in CollectionView. Instead, you can use SwipeView:

Before (ListView with ContextActions):

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Edit" Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=EditCommand}" CommandParameter="{Binding .}" />
                    <MenuItem Text="Delete" Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=DeleteCommand}" CommandParameter="{Binding .}" />
                </ViewCell.ContextActions>
                <Label Text="{Binding Title}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

After (CollectionView with SwipeView):

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <SwipeView>
                <SwipeView.RightItems>
                    <SwipeItems>
                        <SwipeItem Text="Edit" 
                                   Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=EditCommand}" 
                                   CommandParameter="{Binding .}"
                                   BackgroundColor="Blue" />
                        <SwipeItem Text="Delete" 
                                   Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=DeleteCommand}" 
                                   CommandParameter="{Binding .}"
                                   BackgroundColor="Red" />
                    </SwipeItems>
                </SwipeView.RightItems>
                <Grid Padding="10">
                    <Label Text="{Binding Title}" />
                </Grid>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Challenge 2: HasUnevenRows

ListView had HasUnevenRows for variable height rows. With CollectionView, rows are automatically sized based on content:

Before (ListView):

<ListView ItemsSource="{Binding Items}" HasUnevenRows="True">
    <!-- Item template -->
</ListView>

After (CollectionView):

<CollectionView ItemsSource="{Binding Items}">
    <!-- No equivalent property needed - it's the default behavior -->
    <!-- Item template -->
</CollectionView>

Conclusion

With .NET 10 marking ListView as obsolete, now is the ideal time to migrate your MAUI applications to use CollectionView. The transition may require some initial effort, especially if you have complex templates or custom behaviors, but the benefits are substantial. CollectionView offers better performance, more flexible layouts, and an overall improved developer experience.

The migration process outlined in this article provides a straightforward path to update your applications, covering the most common scenarios you'll encounter. By embracing CollectionView now, you'll future-proof your applications and take advantage of the enhancements that Microsoft continues to make to this control.

Remember that while the obsolescence marking begins with .NET 10 Preview 3, ListView will continue to function in .NET 10, giving you some time to complete your migration. However, bug fixes for ListView will generally not be prioritized, so it's best to start the transition sooner rather than later.

Have you encountered any specific challenges in migrating from ListView to CollectionView? Let me know in the comments below, and let's work through them together!

Delete bin and obj Folders in .NET MAUI

Victor Hugo Garcia — Mon, 27 Jan 2025 03:53:10 +0000

Every .NET and .NET MAUI developer has encountered that moment when mysterious build issues appear, and the age-old advice rings true: "Have you tried deleting your bin and obj folders?" These folders, while essential for storing compiled builds and cache files, can sometimes cause headaches during development.

Today, I'm excited to introduce a simple yet powerful Visual Studio Code extension that streamlines this common cleanup task for .NET developers.

Real-life Scenarios

When starting a new project in .NET MAUI, setting up the app icon or splash screen is an important step. This often involves ensuring the design meets the right specifications, such as proper padding, sizing, and background color. If you find that changes aren’t reflecting as expected after deleting the app from the emulator or device, it’s a good idea to clear the associated folders as well. This ensures the updates are applied correctly and avoids potential design inconsistencies.

How to Use the "Delete Bin and Obj Folders" Extension

1. Install the extension

Open the Extensions panel in Visual Studio Code.
Search for Delete Bin.
Find "Delete Bin and Obj Folders" by vhugogarcia and click Install.

2. On the Explorer window

Right-click the folder where you would like to delete the /bin and /obj folders
Click the option: "Delete /bin and /obj Folders"

3.Rebuild and Keep Coding

Rebuild your project to generate fresh build files You’ll be starting from a clean slate, ready to tackle the next coding challenge.

Conclusion

The Delete Bin and Obj Folders extension is all about keeping things simple and saving you time. It’s a small but powerful extension that helps .NET developers like you and me to run our .NET app with a fresh build and generated cache files. While it may seem like a small change, saving a couple of clicks and the time spent searching for those folders can add up. Over time, this extension will save you precious seconds and minutes, making your workflow smoother and more efficient.

Download the extension now and see how much easier it makes your day-to-day development. And if you enjoy using it, don’t forget to leave a review, contribute, share your feedback—it means the world and helps me create even better tools for our community!

Follow me on Social:

LinkedIn victorhugogarcia
Bluesky vhugogarcia.bsky.social
GitHub @vhugogarcia
X @ivictorhugo

Align the Button Text in .NET MAUI

Victor Hugo Garcia — Thu, 09 Jan 2025 19:22:13 +0000

Mobile app developers often encounter seemingly simple UI challenges that require platform-specific solutions. One such challenge is the proper alignment of button text across iOS and Android platforms in .NET MAUI applications. In this article, we'll explore how to achieve precise control over button text alignment in .NET MAUI by leveraging custom handlers.

Create a static class FormHandler

using Microsoft.Maui;
using System.Drawing;

#if IOS
using UIKit;
using Foundation;
#endif

#if ANDROID
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
#endif

namespace DemoApp.Handlers;

public static class FormHandler
{
    public static void AlignButtonTextToLeftBottom()
    {
        Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("ButtonTextAlignmentToLeftBottom", (handler, view) =>
       {
         if (view is Button b && b.ClassId=="ButtonTextAlignmentToLeftBottom")
         {
#if IOS
        handler.PlatformView.VerticalAlignment = UIControlContentVerticalAlignment.Bottom;
        handler.PlatformView.HorizontalAlignment = UIControlContentHorizontalAlignment.Left;
#elif ANDROID
        handler.PlatformView.Gravity = Android.Views.GravityFlags.Left | Android.Views.GravityFlags.Bottom;
#endif
        }
      });
    }
}

In certain scenarios you may need to apply the alignment only to a single button on your UI, if that is the case you can use the ClassId property. This way the style will be applied for only those elements with the defined ClassId, otherwise, just remove the conditional from the code above. Thanks to our friend MarcAlx for sharing this idea.

<Button ClassId="ButtonTextAlignmentToLeftBottom"/>

Register the handler

On the MauiProgram.cs file register the handler
FormHandler.AlignButtonTextToLeftBottom();

Conclusion

Custom handlers in .NET MAUI provide the flexibility needed to fine-tune platform-specific behaviors while maintaining a clean, cross-platform codebase. By implementing these solutions for button text alignment, we've not only solved an immediate visual challenge but also demonstrated the power and versatility of MAUI's handler architecture. Whether you're aiming for center-aligned text, left-justified content, or any specific style, I hope this guide will help you implement it seamlessly.

Follow me on Social:

LinkedIn victorhugogarcia
Bluesky vhugogarcia.bsky.social
GitHub @vhugogarcia
Threads @ihugo
X @ivictorhugo

Stay Ahead of the Curve: Embrace .NET MAUI for .NET 9

Victor Hugo Garcia — Tue, 12 Nov 2024 14:51:33 +0000

As the landscape of mobile app development continues to evolve, staying up-to-date with the latest tools and frameworks is crucial for maintaining a competitive edge. One of the latest advancements in this realm is .NET MAUI for .NET 9, a significant upgrade that offers a plethora of new features and improvements. This blog post will delve into why upgrading to .NET MAUI for .NET 9 is a smart move for your development team and explain why the transition to .NET 9, even if it’s a Standard Term Support (STS) release, aligns well with the fast-paced nature of mobile app updates.

Benefits

Enhanced Performance and Stability

One of the most compelling reasons to upgrade to .NET MAUI for .NET 9 is the enhanced performance and stability it offers. The new version includes optimizations that make your applications run smoother and faster. This can lead to a better user experience, which is essential for retaining and engaging users.

Improved Developer Experience

Introduces several new controls and features that streamline the development process. This includes a Hybrid WebView, Title Bar for Windows, etc.

Control Enhancements

The latest release includes a variety of new control enhancements such as:

BackButtonBehavior OneWay binding mode
On iOS and Mac Catalyst 18, .NET MAUI for .NET 9 changes the default behavior for hosting content in a BlazorWebView to localhost.
Button controls on iOS now respect spacing, padding, border width, and margins more accurately than in previous releases
Performance and stability improvements to CollectionView and CarouselView

Please refer to the official documentation to find out the full list of control enhancements.

Why Standard Term Support (STS) .NET 9 is Suitable for Mobile Development

In the world of mobile app development, updates and new features are rolled out frequently to keep up with user expectations and market trends. Because of this, upgrading to a Standard Term Support (STS) release like .NET 9 is less of a burden than it might be in other types of software development. Mobile apps are typically updated often, which means that staying on top of the latest tools and frameworks is already a part of the development cycle. Adopting .NET 9 ensures you have access to the latest improvements and security updates, which can be critical for maintaining the quality and security of your applications.

Packages Compatibility
When it comes to package compatibility, you'll be glad to know that packages supporting .NET 6 are generally compatible with .NET 9, unless there are specific dependencies that might hinder this compatibility. In such cases, it’s worth checking if you can upgrade the package to the latest version that supports .NET 8. You might also consider reaching out to the package developer for an update or, even better, contributing to the package yourself if it’s open-source, to ensure .NET compatibility.

Conclusion

Upgrading to .NET MAUI for .NET 9 offers numerous benefits, from enhanced performance and developer experience to advanced UI components and better cross-platform capabilities. In the rapidly evolving field of mobile development, taking advantage of the latest tools and frameworks is essential for staying competitive. Given the frequent updates in the mobile app world, transitioning to an Standard Term Support (STS) release like .NET 9 aligns perfectly with the fast-paced development cycle, ensuring your applications remain cutting-edge and secure.

Embrace the future of mobile app development with .NET MAUI for .NET 9 and keep your applications at the forefront of technology.

Happy upgrade and may your apps load faster!

Follow me on Social:

LinkedIn victorhugogarcia
Bluesky vhugogarcia.bsky.social
GitHub @vhugogarcia
Threads @ihugo
X @ivictorhugo

Loading State for Images in .NET MAUI

Victor Hugo Garcia — Thu, 31 Oct 2024 17:41:09 +0000

Handling the loading state for images can significantly enhance the user experience in any application. In this post, we will explore how to implement a loading indicator when images are being fetched and displayed in .NET MAUI for iOS, Windows, macOS and Android platforms. Leveraging Control Reference Bindings, we'll ensure that your app feels smooth and responsive even when dealing with heavy image loading tasks.

Special Thanks

A huge shoutout to my friend Gerald Versluis for his insightful video on using Control Reference Bindings. His guidance has been invaluable in making this implementation a reality.

Implementation

You can implement the loading state either on a Single Image, CarouselView, or CollectionView. In the example below, we are going to use a CarouselView:

<CarouselView
    VerticalOptions="Start"
    Loop="False"
    HeightRequest="256"
    IsBounceEnabled="True"
    PeekAreaInsets="30"
    BackgroundColor="Transparent"
    ItemsSource="{Binding Images}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout
            Orientation="Horizontal"
            ItemSpacing="10"
            SnapPointsType="Mandatory"
            SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="models:Demo">
            <Grid>
                <Image
                    x:Name="MainImage"
                    Aspect="AspectFill"
                    Source="{Binding ImageUrl}"
                    HeightRequest="180"/>
                <ActivityIndicator
                    HeightRequest="32"
                    WidthRequest="32"
                    VerticalOptions="Center"
                    Margin="0,0,0,0"
                    HorizontalOptions="Center"
                    IsRunning="{Binding IsLoading, Source={x:Reference MainImage}}"
                    IsVisible="{Binding IsLoading, Source={x:Reference MainImage}}"
                    Color="#000000" />
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Conclusion

Implementing a loading indicator for images in your .NET MAUI application can greatly enhance the user experience by providing visual feedback during image loading. This tutorial demonstrated how to achieve this using Control Reference Bindings for both all supported platforms. By leveraging the IsLoading property of the Image control, you can ensure that your app remains responsive and user-friendly.

For more detailed information on the IsLoading property, please refer to the official Microsoft documentation.

Happy coding and may your apps load smoothly!

Follow me on Social:

LinkedIn victorhugogarcia
GitHub @vhugogarcia
Threads @ihugo
X @ivictorhugo

Solving .NET MAUI Issues on macOS Sequoia with Visual Studio Code and XCode 16

Victor Hugo Garcia — Thu, 19 Sep 2024 14:22:28 +0000

Developing cross-platform mobile applications with .NET MAUI can be a rewarding experience, but it comes with its own set of challenges, especially when Apple releases a new version of macOS and XCode. In this blog post, I will share my personal journey of overcoming a specific issue that I encountered while trying to develop my .NET MAUI mobile app projects. Whether you’re a seasoned developer or just starting out, I hope my insights and solutions will help you navigate similar challenges and streamline your development process. Let’s dive in and explore how to get your .NET MAUI projects up and running smoothly on macOS Sequoia!

Tips Before Start

Based on my experience developing mobile apps in .NET MAUI, here are a few key tips to keep in mind:

Disable macOS automatic updates
Disable App Store automatic updates
Enable notifications from the macios official repository and regularly check for updates, especially when a new major macOS or Xcode release is approaching.

Updates

#1

On September 26, 2024 - The macios team released the official support for macOS Sequoia, and XCode 16 in .NET 8 here

#2

If you face the following issue with the provisioning profiles:
The specified iOS provisioning profile '**********' could not be found, the solution that worked for me was to move them from ~/Library/Developer/Xcode/UserData/Provisioning Profiles To ~/Library/MobileDevice/Provisioning Profiles, thanks to @vedatozkanTr for the help.

#3

The following error may re-appear when building using XCode 16: strip exited with code 139, the solution I applied was found on this post, what I did was just update the .csproj file and added the following property group:

<PropertyGroup >
        <MtouchNoSymbolStrip Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">True</MtouchNoSymbolStrip>
</PropertyGroup>

The Issue

While working on the latest version of macOS, I discovered that XCode 15.4 was incompatible, necessitating an upgrade to XCode 16. However, after updating, .NET MAUI stopped working due to compatibility issues.

How To Solve It

There is an issue created a few months ago on the macios repository. This issue outlines the official recommendations, and helps to ask questions so other friends can provide some workarounds that may work for you.

Visual Studio Code

If you are using Visual Studio Code to develop .NET MAUI projects, you might encounter a couple of issues after updating to macOS Sequoia. Below are the issues I found and their respective solutions:

Could not find the task 'maui: Build'

This particular error is due to a known issue on the .NET MAUI extension with the HotReload feature. Solution: Our friend BretJohnson recommended disabling XAML Hot Reload and see if the problem goes away. Uncheck the user preferences checkbox shown here.

XCode Versions

Our friend BrandanN21 recommended to downgrade my xcode version by installing it via the Apple Developer Portal and finding xcode 15.4, you can have multiple xcode installs at the same time. To have multiple xcode installs at the same time, follow these steps:

Once you download the .xip file from the portal, uncompress it, and the XCode.app file rename it to XCode_15.4.app
Move the renamed XCode app to the Applications folder
Make sure you have both XCode versions as shown here:
Open the terminal and execute the following command: /Applications/Xcode_15.4.app/Contents/MacOS/Xcode this command will open XCode 15.4 correctly
Go to XCode menu and click the Settings option, then go to the Locations tab and make sure to select the correct command line tools version 15.4 as shown here:
Close XCode and the terminal
Open the terminal again and run the following command:xcode-select --print-path it should display /Applications/Xcode_15.4.app/Contents/Developer this confirms you have the correct xcode version selected as default.
Now run your app by selecting the correct simulator and that's all.

Note: I did not install the iOS 18 simulators, since I will wait for the official support in .NET MAUI macios.

Additional Workarounds and Resources

I recommend you to follow this issue thread to find out other workarounds that may work for you if you are using Visual Studio for Mac or Rider. A lot of friends are posting their solutions and changes they applied to solve this compatibility issue.

Conclusion

By staying proactive and informed, you can overcome compatibility issues and ensure a smooth development process. Remember to disable automatic updates, stay connected with the macios community, and leverage the collective knowledge available to you.

Microsoft is expected to release the official XCode 16 support on November this year.

I would like also to thank everybody on the GitHub issues who posted the workarounds and feedback, they truly helped me to workaround the issue.

Follow me on social:

LinkedIn victorhugogarcia
GitHub vhugogarcia

Mastering Error Insights in .NET MAUI: Sentry vs. Firebase Crashlytics

Victor Hugo Garcia — Mon, 22 Jul 2024 19:46:20 +0000

As the .NET MAUI ecosystem gains momentum, developers are keen to adopt robust error monitoring solutions for their mobile apps. Two popular contenders in this space are Sentry and Firebase Crashlytics. In this article, we’ll explore why Sentry stands out as a powerful choice for capturing both managed and unmanaged errors in .NET MAUI applications.

Features Comparison

Feature	Sentry	Firebase Crashlytics
Target Audience	Growing teams requiring deeper context, insights, and customizable workflow tools.	Hobbyists, solopreneurs, and small teams.
Insights & Context	Provides detailed insights into solving crashes and errors.	Offers basic crash reporting and error tracking.
Custom Workflow Tools	Customizable workflow tools for efficient issue management.	Limited customization options.
Product Investments	Enables innovation and scalability through product investments.	Basic functionality without extensive investment.
Real-time Monitoring	Real-time monitoring of app health and performance.	Real-time crash reporting.

These service features are pointing out for .NET MAUI applications.

Personal Experience

While developing mobile apps in .NET MAUI, I found out Sentry to be better than Firebase Crashlytics in a few areas outlined below:

Contexts, It is a powerful way to see and track custom data from the device itself, also user information by allowing to set custom context of a given event. As developers, as much context we get of the error such as environment, culture, etc. the better. So, context are really useful.
Breadcrumbs, We all know what breadcrumbs are for websites, in Sentry, we get these to understand from start to end, when the app started and the crash occurred, you see a graphical UI with the series of events that are helpful.
.NET Full Stack Trace, This is probably the most wanted feature for error handling, for us as .NET developers, if we know on which code line the exception occurred then that will help us a lot.
Free for one user, this means only one user per Sentry account, which is fine for most of the cases.

For Firebase Crashlytics, I found out a lot of issues trying to set the proper Bindings for iOS particularly, however, our friends Tobias and Adam helped a lot with this, but at the end it is limited on features, and most important the .NET Stack Trace.

Implementation

This is pretty easy, basically add the following NuGet package into your .csproj file:

<PackageReference Include="Sentry.Maui" Version="4.9.0" />

Then configure it on the startup:

// Add this section anywhere on the builder:
        .UseSentry(options =>
        {
            // The DSN is the only required setting.
            options.Dsn = "https://XXXXXXXXXXXX.ingest.us.sentry.io/XXXXXXX";

            // Use debug mode if you want to see what the SDK is doing.
            // Debug messages are written to stdout with Console.Writeline,
            // and are viewable in your IDE's debug console or with 'adb logcat', etc.
            // This option is not recommended when deploying your application.
            options.Debug = true;

            // Set TracesSampleRate to 1.0 to capture 100% of transactions for tracing.
            // We recommend adjusting this value in production.
            options.TracesSampleRate = 1.0;

            // Other Sentry options can be set here.
        })

The official documentation can be found here.

One More Thing

It may happen that when using Sentry on debug mode you get an exception when running on emulators, to solve this issue, what I did was just to set the directive #IF RELEASE so it loads Sentry on release mode only.

Conclusion

In the ever-evolving world of .NET MAUI development, choosing the right error monitoring tool can make a significant difference. While Firebase Crashlytics offers a straightforward solution for basic crash reporting, Sentry stands out with its comprehensive insights and customizable workflow tools. By opting for Sentry, you equip your team with the power to swiftly identify and resolve issues, ensuring a smoother and more reliable user experience.

ObservableRangeCollection in .NET MAUI

Victor Hugo Garcia — Tue, 16 Apr 2024 13:27:54 +0000

ObservableRangeCollection is a versatile data structure in C# that offers seamless handling of dynamic collections. Whether you’re building a mobile app, or working on any other software project, understanding how ObservableRangeCollection works can significantly enhance your development experience.

At its core, ObservableRangeCollection provides a noteworthy feature: it automatically notifies subscribers when items are added, removed, or when the entire list undergoes a refresh. This real-time feedback ensures that your UI stays up-to-date, making it ideal for scenarios where data changes frequently.

In this article, I will share an extension that is going to be very helpful for mobile development in .NET MAUI.

Create an extension

On your MAUI project, create a class: ObservableRangeCollection.cs, I personally create a folder at root level called: Extensions and then I add the clase under that folder.
Copy and paste into your class the code below:

Now you should be able to use this new data type into your code. For example:

ObservableRangeCollection<Item> items;
items = new ObservableRangeCollection<Item>();

Conclusion

One of the benefits of using an ObservableRangeCollection is the performance. So, I personally recommend it for all your mobile apps wherever you need a list of data with real-time UI updates, otherwise, it is most performant to use a simple List.

Thank you for reading!

Follow me on Social:

GitHub @vhugogarcia
LinkedIn victorhugogarcia
Threads @ihugo
X @ivictorhugo

.NET MAUI: Update NuGet Packages using Visual Studio Code

Victor Hugo Garcia — Mon, 29 Jan 2024 19:48:08 +0000

In this post, I will show you how to use Visual Studio Code in macOS, a popular and lightweight code editor, to search for your outdated NuGet packages of your project with ease and update those faster using the terminal and updating a couple of bits on your .csproj file.

Requirements

It is required for you to install the official .NET MAUI extension in Visual Studio Code and the dotnet-outdated tool.

How to get a list of updated packages

Open your .NET MAUI app folder on Visual Studio Code. The .NET MAUI extension will automatically load your solution with the referenced projects.
Once Visual Studio Code loaded your project's solution successfully on the Solution Explorer.
Open the Visual Studio Code integrated terminal and run the following command: dotnet outdated
The previous command will parse and show you a list of NuGet packages where an updated version exists based on your current project installed packages (see image below for further details).

On the image above, it lists not only a specific project but any other project in the solution, and broken down into platforms, so it is easy to identify which NuGet packages being used on your project offer a new updated version.

Version color legend:
<red>   : Major version update or pre-release version. Possible breaking changes.
<yellow>: Minor version update. Backwards-compatible features added.
<green> : Patch version update. Backwards-compatible bug fixes.

How to update your project's NuGet packages

It is super easy, just open your .csproj file and find the Package References, for example:

<ItemGroup>
      <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.6" />
      <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.6" />
</ItemGroup>

Then update the key-value from Version and set the new version retrieved previously by using the command on the terminal.

Finally, once all your NuGet package references are updated as your requirements, I recommend you to close Visual Studio Code and re-open it, so the extension reloads again the solution and projects. As a verification method to make sure your packages are up to date, run the command dotnet outdated again, so you get an updated list.

That's it!

Conclusion

In Visual Studio Code, I have tried some NuGet Managament extensions without luck, due to the nature of .NET MAUI being cross-platform, the current existing extensions do not support it, that is the main reason of me writing this article.
I heard somewhere that the Microsoft team is working on extension/feature that will make the NuGet Management easily on projects using Visual Studio Code, so hopefully we can see a preview in the coming months.

Updating NuGet packages is important to keep our projects up to date with the latest features and bug/security fixes.

Thank you for reading!

Follow me on Social:

GitHub @vhugogarcia
LinkedIn victorhugogarcia
Threads @ihugo
X @ivictorhugo

.NET MAUI: Archive and Publish using Visual Studio Code

Victor Hugo Garcia — Fri, 19 Jan 2024 14:40:10 +0000

.NET MAUI (Multi-platform App UI) is a modern framework for building native cross-platform apps with C# and XAML. With .NET MAUI, you can target Android, iOS, macOS, and Windows platforms with a single codebase and a consistent user interface. In this post, I will show you how to use Visual Studio Code in macOS, a popular and lightweight code editor, to archive and publish your .NET MAUI apps with ease and efficiency.

Recommendations

It is important to highlight that the official documentation from Microsoft is very helpful, and I encourage you to read it. Additionally, it is required for you to install the official .NET MAUI extension in Visual Studio Code.

How to archive and publish for iOS

Open your .NET MAUI app folder on Visual Studio Code. The .NET MAUI extension will automatically load your solution with the referenced projects.
Once Visual Studio Code loaded your project successfully, On the Solution Explorer, select the name of the project.
Open the Visual Studio Code integrated terminal and run the following command: dotnet publish -f net8.0-ios -p:ArchiveOnBuild=true
The previous command will read your project properties you have set on your .csproj file, for example:

<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Release|net8.0-ios|AnyCPU'">
      <CreatePackage>false</CreatePackage>
      <RuntimeIdentifier>ios-arm64</RuntimeIdentifier>
      <CodesignProvision>Test App Distribution</CodesignProvision>
      <CodesignKey>iPhone Distribution: Known (YYYYY123456)</CodesignKey>
      <CodesignEntitlements>Platforms\iOS\Entitlements.plist</CodesignEntitlements>
      <MtouchLink>SdkOnly</MtouchLink>
      <MtouchUseLlvm>true</MtouchUseLlvm>
    </PropertyGroup>

If your Apple Distribution Certificate and Apple Distribution Profile are valid, the output will be successfully.

Once it finishes archiving and publishes the application, Launch XCode on macOS and then open the Organizer by going to the Window menu.
On the Organizer window, select the app and version you want to validate and click the Validate button.
If the application passes the validation, then click the Upload button and select your preferences, either for TestFlight only or TestFlight & Store.
Done.

Once the publishing process finishes on the terminal, what I love about the process above, is that I don't have to worry about the IPA location to upload it manually, and instead I use XCode to manage the upload for me. If you cannot use XCode, you can find the IPA file on the following folder path: bin/Release/net8.0-ios/ios-arm64/publish/ and upload it manually.

How to archive and publish for Android

Open your .NET MAUI app folder on Visual Studio Code. The .NET MAUI extension will automatically load your solution with the referenced projects.
Once Visual Studio Code loaded your project successfully, On the Solution Explorer, select the name of the project.
Open the Visual Studio Code integrated terminal and run the following command: dotnet publish -f net8.0-android -p:ArchiveOnBuild=true
The previous command will read your project properties you have set on your .csproj file, for example:

<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Release|net8.0-android|AnyCPU'">
      <AndroidKeyStore>True</AndroidKeyStore>
      <AndroidSigningKeyStore>/Users/temp/projects/Certificates/testapp-keystore.jks</AndroidSigningKeyStore>
      <AndroidSigningStorePass>123abc</AndroidSigningStorePass>
      <AndroidSigningKeyAlias>testapp</AndroidSigningKeyAlias>
      <AndroidSigningKeyPass>123def</AndroidSigningKeyPass>
      <AndroidApkSignerAdditionalArguments>123abc</AndroidApkSignerAdditionalArguments>
    </PropertyGroup>

If your keystore information is valid, the output will be successfully. So, the signed aab or apk can be uploaded to Google Play Console manually.

You can find the signed aab or apk file on the following folder path: bin/Release/net8.0-android/ and upload it manually.

Conclusion

With these skills, you can streamline your development workflow and deliver high-quality apps to your users. Honestly, I was scared at the beginning when Visual Studio for Mac was deprecated, but then when I saw the .NET MAUI extension in VS Code, I quickly shifted and started enjoying how fast it is to develop there.

I hope you enjoyed this article and found it useful. If you have any questions or feedback, feel free to leave a comment below.

Thank you for reading!

Follow me on Social:

GitHub @vhugogarcia
LinkedIn victorhugogarcia
Threads @ihugo
X @ivictorhugo