[Xamarin.Forms] Aplicaciones WPF

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.

New Cross Platform App

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:

Nueva App 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:

Xamarin.Forms Nightly

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.

Xamarin.Forms.Platform.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!

Hola WPF!

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.

WeatherApp

Disponible en GitHub:

Ver 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:

Native Embedding

Tienes un ejemplo disponible en GitHub:

Ver 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

Anuncios

6 pensamientos en “[Xamarin.Forms] Aplicaciones WPF

  1. ¿Existe soporte para controles de terceros?. Por ejemplo, el control Ribbon de algún fabricante como Syncfusion, Telerik, etc.

  2. Hi, thanks so much for this. I’ve tried myself, I have a fully up to date VS2017 and I have a Xamarin.Forms project, but I can’t access Xamarin.Forms.Platform.WPF, it doesn’t show in the NuGet package list (I have checked “show prerelease”)

  3. Pingback: [Xamarin.Forms] Ejemplos de Backend WPF | Javier Suárez | Blog

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s