Introducción
El soporte de WPF en Xamarin.Forms ahora está disponible en la Nightly (paquetes previos) de Xamarin.Forms. En este artículo, vamos a ver cómo agregar este nuevo proyecto a una solución existente de Xamarin.Forms, los obstáculos que puedes encontrar así como el estado actual y el futuro de las características de esta nueva plataforma.
Backend WPF
WPF es la abreviación de Windows Presentation Foundation. Hablamos de un conjunto de APIs destinadas a crear interfaces de usuario enriquecidas para Windows.
Cabe destacar que se soporta Windows Vista hasta Windows 10.
Crear nuevo proyecto
Tras crear un nuevo proyecto Xamarin.Forms con una librería NET Standard.
A continuación, vamos a añadir un proyecto WPF. Dentro de la categoría escritorio clássico de Windows, elegimos la opción Aplicación de WPF:
A continuación, vamos a actualizar el paquete de Xamarin.Forms para utilizar la última Nightly (donde ya se incluye la Preview de WPF).
Debemos añadir https://www.myget.org/F/xamarinforms-ci/api/v2 como origen de paquetes NuGet (Herramientas > Opciones > Administrador de paquetes NuGet).
Y actualizamos Xamarin.Forms además de instalar el paquete en todos los proyectos:
A continuación, vamos a instalar el paquete Xamarin.Forms.Platform.WPF en el proyecto WPF. Este paquete es el que cuenta con las implementaciones necesarias de Xamarin.Forms en WPF.
Todo listo a nivel de dependencias. Es hora de cambiar levemente el código para inicializar Forms.
En el archivo App.xaml vamos a añadir algunos recursos utilizados por el backend WPF:
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/WPFLightToolkit;component/Assets/Default.xaml" /> </ResourceDictionary.MergedDictionaries> <!-- Default Global Color --> <SolidColorBrush x:Key="WindowBackgroundColor" Color="White" /> <SolidColorBrush x:Key="AccentColor" Color="#3498db" /> <!-- Default Command Bar Color --> <SolidColorBrush x:Key="CommandBarBackgroundColor" Color="#3498db" /> <SolidColorBrush x:Key="CommandBarTextColor" Color="White" /> <!-- Default Title Bar Color --> <SolidColorBrush x:Key="DefaultTitleBarBackgroundColor" Color="#3498db" /> <SolidColorBrush x:Key="DefaultTitleBarTextColor" Color="White" /> <!-- Default Tabbed Bar Color --> <SolidColorBrush x:Key="DefaultTabbedBarBackgroundColor" Color="#3498db" /> <SolidColorBrush x:Key="DefaultTabbedBarTextColor" Color="White" /> </ResourceDictionary> </Application.Resources>
Actualizamos la ventana principal, MainWindow.xaml para utilizar FormsApplicationPage:
<wpf:FormsApplicationPage x:Class="WPFSample.WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:wpf="clr-namespace:Xamarin.Forms.Platform.WPF;assembly=Xamarin.Forms.Platform.WPF" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </wpf:FormsApplicationPage>
También actualizaremos el tipo del code behind en MainWindow.xaml.cs:
using Xamarin.Forms.Platform.WPF; namespace WPFSample.WPF { public partial class MainWindow : FormsApplicationPage { public MainWindow() { InitializeComponent(); } } }
Todo listo, ejecutamos!
Más ejemplos!
Un nuevo backend ofrece la posibilidad de llegar a nuevas plataformas, es normal querer probar todas las posibilidades. ¡No te preocupes, vamos a ver más ejemplos!
WeatherApp es otro ejemplo de aplicación Xamarin.Forms con soporte a WPF. Es una aplicación para ver la información meteorológica de forma muy visual.
Disponible en GitHub:
Native Embedding
La posibilidad de tomar cualquier ContentPage y usarlo en aplicaciones nativas, ¡también está disponible en el backend de WPF!
var settingsView = new SettingsView().CreateContainer(); vbox.PackEnd(settingsView, true, true, 0);
El resultado:
Tienes un ejemplo disponible en GitHub:
¿Algo más?
Ahora que tienes una aplicación, es hora de ponerse la gorra de diseñador de UX y comenzar a explorar los cambios necesarios para adaptar la aplicación a esta nueva plataforma.
Estilos
Échale un vistazo al estilo de la interfaz de usuario para Linux. Es posible que el mismo estilo utilizado en los dispositivos móviles no se vea bien. ¡Esto lo cambios fácilmente!
Con los cambios recientes realizados en OnPlatform, ahora puede seleccionar cada plataforma. Eso incluye a WPF.
Desde XAML:
<Button.TextColor> <OnPlatform x:TypeArguments="Color"> <On Platform="iOS" Value="White"/> <On Platform="WPF" Value="White"/> <On Platform="Android" Value="Black"/> </OnPlatform> </Button.TextColor>
O desde C#:
if (Device.RuntimePlatform == Device.WPF) return "Images/image.jpg"; else if (Device.RuntimePlatform == Device.UWP) return "Assets/image.jpg"; else return "image.jpg";
Recuerda, es una Preview…
Esta Preview tiene un soporte muy alto de las características y opciones de Xamarin.Forms. Sin embargo, hay algunas características aun no disponibles:
- Accessibility
- List (mucho trabajo pendiente aún)
- NativeViewWrapper
- NavigationMenu
- TimePicker
Más información
- Blog de Mohamed CHOUCHANE: Xamarin Forms WPF – Quick Start