Chequéanos en Facebook Síguenos en Twitter Agrega a tus Circulos Subscríbete a mi RSS feeds

miércoles, 23 de julio de 2014

Como Ejecutar una WinForm App de C# como Web App en Navegador usando WPF -xbap



Una aplicación de formularios de Windows (WinForm App) es una aplicación de escritorio. Quiere decir que para ejecutar una aplicación de este tipo debo tenerla localmente. No se puede ejecutar de una manera remota. Una aplicación web, por el contrario, puede ser usada remotamente desde un servidor usando un navegador.

Muchas veces, en lo posible, se trata de no reinventar la rueda, y en programación no es la excepción. Que tal si ya tenías una aplicación de escritorio que habías querido emigrar a web app pero querias evitarte el proceso de re-escribir?

Es posible integrar una aplicación de formularios de Windows en un navegador y ejecutarla como si fuera una aplicación web. Aqui veremos como.
Este paso-a-paso fue realizado utilizando Visual Studio 2010 Ultimate. 


Primero, necesitamos una aplicación de formularios de Windows:


Vamos a crear una WinForm App de Windows. Si ya tienes una creada puedes saltar a la próxima sección directamente o puedes descargar este DLL del WinForm que muestra la imágen arriba. Sino:
  1. Inicia Visual Studio
  2. Crea un nuevo proyecto de formularios de windows. 

Necesitamos convertir ésta WinForm App en Libreria de Clases: Una vez creado tu proyecto, ve a las propiedades de tu aplicación de formularios de Windows. Click-derecho sobre el nombre de tu proyecto > Propiedades. Donde dice 'Output Type', cámbialo a 'Class Library'.


Ahora, necesitamos una aplicación WPF de Navegador para usarla como aplicación huesped:

  1. Agrega un nuevo proyecto a tu solucción, tipo 'WPF Browser Application': En el Solution Explorer, click-derecho sobre el nombre de tu solution (no del proyecto de WinForm!), luego Add > New Project, y selecciona el tipo de aplicación 'WPF Browser Application'.
  2. Necesitamos agregar referencia a varios componentes: a WindowsFormsIntegration, a System.Windows.Forms, y a la aplicación WinForm que creaste o al DLL provisto si lo descargaste.

  • Click derecho sobre 'References' de la aplicación WPF. Como la aplicación de formularios está en la misma solucción, la pestaña 'Proyects' la mostrará. Si hubiera estado en otra solucción o si descargaste el DLL, tendrias que ir a la pestaña 'Browse' para localizarla. Seleccionala y click Ok.
  • De la pestaña .NET, busca y selecciona los componentes 'WindowsFormsIntegration', y 'System.Windows.Forms'.

Ahora, necesitamos un control StackPanel en Page1.XAML. El código completo, una vez agregado el stackpanel debe verse asi, o al menos aproximado:


Vayamos ahora a Page1.Xaml.cs. Arriba, en el tope, junto a los "using" de los demás namespaces, agrega:
using MathOps; //(la app de winform),
using System.Windows.Forms.Integration;
Luego, necesitamos que el elemento WindowsFormsHost, que es el elemento usado para alojar apps de formularios en una app de browser WPF, contenga como elemento hijo nuestra app de formularios, y luego que sea agregado al control stackpanel que agregamos en Page1.xaml. Debemos ajustar el tamaño (ancho y alto) del WindowsFormsHost y del Stackpanel al tamaño de nuestra app de formularios. Page1.xaml.cs debe verse asi o aproximadamente.


Esta parte es muy importante. 

  1. Dale click-derecho a la aplicación WPF, selecciona Properties (Propiedades), y luego ve a la pestaña 'Security' (Seguridad). 
  2. Cambia de 'This is a partial trust application' a 'This is a full trust application'.
  3. Por último, cambia la aplicación WPF a ser el proyecto de inicio: click-derecho sobre el nombre de esta > Set as Startup Project.


Al ejecutar, se abrirá tu navegador por defecto, mostrando la aplicación de formulario embedded onto it.

Si se quiere integrar a una página web HTML, puedes usar un tag < iframe > con el resultante archivo .xbap. asi:  
<íframe src="ElNombreQueSea.xbap" width="329" height="443" />
Eso es todo. Aunque no es una solucción nueva, sigue siendo útil para diversos escenariosm y por que no? interesante. Puedes tambien ver el siguiente video que muestra como hacerlo.


Comentarios? Sugerencias? Deja tu feedback en la sección de comentarios.



1 Comments
1 Comments
Comments

1 comentario:

Share English German French Arabic Chinese Simplified