MVVM
Implementando patrones de diseño

Data Binding (enlace de datos)
<StackLayout Padding="10, 0">
<Label Text="TEXT" FontSize="80" HorizontalOptions="Center"
VerticalOptions="Center" BindingContext="{x:Reference
Name=mySlider}"
Rotation="{Binding Path=Value}" />
<Slider x:Name=”mySlider" Maximum="360" VerticalOptions="Center" />
</StackLayout>

MVVM: Model-View-ViewModel
Model
View ViewModel
Cómo mostrar
información
Flujo de interacción Lógica de
negocios
Datos
Eventos
Datos
Datos

Model
View ViewModel
.NET MAUI
Data Binding
Eventos
Datos

Implementación de Model

Implementación de MVVM

Demo

Comandos
• Microsoft define la interfaz ICommand para proporcionar una abstracción de
comandos para sus frameworks XAML
public interface ICommand
{
event EventHandler CanExecuteChanged;
bool CanExecute(object parameter);
void Execute(object parameter);
}
Edit
Command
CanExecute?
Execute(…)
Puede proporcionar un parámetro opcional (por lo
general con valor null) para que el comando trabaje
en un contexto específico

Los controles en .NET MAUI exponen una propiedad Command para la acción
principal de un control
Comandos en .NET MAUI
Menu Button ToolbarItem

<Button Text="Give Bonus"
Command="{Binding GiveBonus}" />
Puede enlazarse una propiedad de tipo ICommand a la propiedad Command
public ICommand GiveBonus { get; }

Demo

Simplificando MVVM

CommunityToolkit.MVVM

BaseViewModel y propiedades

Código autogenerado

Propiedades en ViewModel

Comandos

Código autogenerado

Consumo
(Data Binding)

Demo

Dependency Injection

• La inyección de dependencias (DI) es una técnica para desacoplar
los objetos y sus dependencias (o colaboradores).
• Sigue el Principio de Inversión de Dependencia: "los módulos de
alto nivel no deben depender de módulos de bajo nivel; ambos
deberían depender de abstracciones".
• Definición: es una forma en que un objeto (cliente) recibe otros
objetos (servicios) de los que depende. Lo que se “inyecta” es el
método o código que pasa el objeto de servicio al objeto de cliente
en tiempo de ejecución.
Dependency Injection

• Extraer las dependencias en interfaces y proporcionar
implementaciones de estas interfaces como parámetros también
es un ejemplo del patrón de diseño de la estrategia.
Dependency Injection
public interface IPlatformDiTestService
{
string SayYourPlatformName();
} public class PlatformDiTestService :
IPlatformDiTestService
{
public string SayYourPlatformName()
{
return "I am MacOS!";
}
}

• Nuestro código será más reutilizable, comprobable y mantenible, pues no
necesitamos saber y mantener cómo se implementan las dependencias.
• Se hace más flexible acceder a los objetos de servicio y de cliente.
Ventajas

La inyección de dependencias se puede hacer en la clase MauiProgram con el objeto builder
en el método CreateMauiApp:
Dependency Injection en .NET MAUI
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
builder.Services.AddSingleton<IPlatformDiTestService, PlatformDiTestService>();
builder.Services.AddTransient<MainPageViewModel>();
builder.Services.AddTransient<MainPage>();
return builder.Build();
}
.NET MAUI utiliza un contenedor de DI integrado.
Se pueden registrar:
• Interfaces (con su implementación)
• ViewModels
• Views

Ahora, en cualquier clase es posible acceder a alguno de los miembros registrados por
medio del constructor:
Consumo
public class MainPageViewModel : INotifyPropertyChanged
{
private readonly IPlatformDiTestService _platformDiTestService;
public MainPageViewModel(IPlatformDiTestService
platformDiTestService)
{
_platformDiTestService = platformDiTestService;
}
…
}
public partial class MainPage : ContentPage
{
public MainPage(MainPageViewModel
mainPageViewModel)
{
InitializeComponent();
this.BindingContext = mainPageViewModel;
}
…

• Transient: se crea una instancia de un objeto cada vez que se requiere una
referencia.
• Singleton: existe una única instancia global de un objeto en todo el ciclo de
vida de la app.
Tiempos de Vida de los servicios y opciones
de registro

Demo

Q&A - ¡Gracias!
About Me:
https://about.me/luis-beltran