Cambiar el tamaño de la ventana de Windows (UWP) en app de Xamarin.Forms

Pues eso… ¡A la pila tiempo! A ver si me acuerdo de cómo se escriben los posts en el blog… que ya hace tiempo que no publico nada. Y en esta ocasión es para contarte cómo cambiar el tamaño de una aplicación de Windows (UWP) creada con Xamarin.Forms.

No me voy a enrollar demasiado porque quiero ponerte otro ejemplo para .NET MAUI, ya que, según he visto por la red (y lo que yo he probado) es que se hace de forma diferente.

Básicamente hay dos formas de hacerlo, una es dejando que sea el propio Windows el que se encargue del tamaño (y de recordar el último tamaño que el usuario ha puesto o, mejor dicho, el último tamaño asignado por el usuario (cambiando el tamaño de la ventana).

Para hacer esto en Xamarin.Forms, tenemos que hacerlo en el proyecto para UWP. Normalmente te dicen que en el método OnLaunched de la clase App (la del proyecto para UWP, no la del proyecto principal con la funcionalidad).

Pero en las pruebas que últimamente he hecho, también se puede hacer en el constructor de MainPage (la página principal del proyecto para UWP).

¿Por qué hacerlo en un sitio o en otro?

Si no vas a hacer nada especial, puedes ponerlo en el método OnLaunched (ahora te explico en qué parte de ese método).

Si quieres hacer algo, por ejemplo, usar valores que has asignado en la clase App del proyecto Xamarin, lo mejor es hacerlo en el constructor de MainPage, porque en ese constructor se instancia el objeto App del proyecto principal (en el que se define la funcionalidad de la aplicación y que está referenciado en el proyecto UWP o en los de Android, iOS, etc.). Y al hacerlo después de la llamada a LoadApplication(new EspacioDeNombres.App()); nos aseguramos que ese objeto esté instanciado y así poder acceder a los valores que tengas asignados, que pueden ser leídos de un fichero de configuración, una base de datos, asignados directamente, etc.

Un ejemplito, por favor

Vamos a suponer que quieres que tu aplicación (cuando se use en Windows) tenga, por ejemplo, un tamaño de 450×650 (ancho x alto). Creo que el ancho mínimo es 400, pero solo es una conjetura.

Este sería el código a utilizar en OnLaunched.

Aclararte que deberías poner una importación del espacio de nombres Windows.UI.ViewManagement para poder acceder a la clase ApplicationView y a la enumeración ApplicationViewWindowingMode. Por otro lado, el tamaño se asigna con un objeto Size que está definido en Windows.Foundation, por tanto, asegúrate que tengas esas dos importaciones.

using Windows.Foundation;
using Windows.UI.ViewManagement;

Repetimos: El siguiente código que te muestro es el método OnLaunched de la clase App del proyecto para UWP, solo he quitado la parte de #if DEBUG ya que, no nos interesa y así seguro que sabes exactamente dónde poner el código para cambiar o asignar el tamaño de la ventana de Windows (UWP).

/// Invoked when the application is launched normally by the end user.  Other entry points
/// will be used such as when the application is launched to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;
        Xamarin.Forms.Forms.Init(e);

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Asignar manualmente el tamaño. (04/sep/22 17.50)
        int winWidth = 450; // el mínimo creo que es 400 de ancho
        int winHeight = 650;

        //Xamarin.Forms.Forms.Init(e, assembliesToInclude); 
        ApplicationView.PreferredLaunchViewSize = new Size(winWidth, winHeight);
        ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (rootFrame.Content == null)
    {
        // When the navigation stack isn't restored navigate to the first page,
        // configuring the new page by passing required information as a navigation
        // parameter
        rootFrame.Navigate(typeof(MainPage), e.Arguments);
    }

    // Ensure the current window is active
    Window.Current.Activate();
}

Y esto es todo… al menos para que la aplicación se cargue con ese tamaño… aunque debes tener en cuenta una cosita que explican esta gente de Microsoft en la documentación de la propiedad ApplicationView.PreferredLaunchViewSize y es lo que te pongo en el siguiente «quote» (en inglés y la traducción):

This property only has an effect when the app is launched on a desktop device that is not in Tablet mode (Windows 10 only).

For the very first launch of an app the PreferredLaunchWindowingMode will always be Auto and the ApplicationView.PreferredLaunchViewSize will be determined by system policies. The API applies to the next launch of the app.

— … —

Esta propiedad solo tiene efecto cuando la aplicación se inicia en un dispositivo de escritorio que no está en modo tableta (solo Windows 10).

Para el primer lanzamiento de una aplicación, PreferredLaunchWindowingMode siempre será Auto y ApplicationView.PreferredLaunchViewSize estará determinado por las políticas del sistema. La API se aplica al próximo lanzamiento de la aplicación.

Es decir, que solo vale para UWP en escritorio (Desktop) y que la primera vez que se ejecute la aplicación usará el tamaño predeterminado, pero en las siguientes usará el tamaño que se asigne.

¿Queda claro?

Pues si no te ha quedado claro, prueba y lo comprenderás mejor 😉

Seguimos.

Si lo quieres hacer en el constructor de MainPage, este sería el código. En este ejemplo, se supone que la App (la de Xamarin, el proyecto con la funcionalidad) define un par de valores para el ancho y el alto y esos serán los valores que se asignarán a la aplicación (pero recuerda lo que se indica en la nota anterior, que la primera vez no tendrá efecto, si no, en las siguientes).

Veamos el código de ejemplo, con la definición de esas dos «propiedades» accedidas desde el proyecto de UWP.

Este sería el código de la clase App del proyecto principal de Xamarin.

using System;
using CambiarTamañoWindows.Services;
using CambiarTamañoWindows.Views;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace CambiarTamañoWindows;

public partial class App : Application
{

    public App()
    {
        InitializeComponent();

        DependencyService.Register<MockDataStore>();
        MainPage = new AppShell();
    }

    public static double WindowsWidth { get; } = 1200;
    public static double WindowsHeight { get; } = 900;

    protected override void OnStart()
    {
    }

    protected override void OnSleep()
    {
    }

    protected override void OnResume()
    {
    }
}

Si te fijas en el código, he usado la definición del espacio de nombres al estilo de C# 10.0 (File-scoped namespace declaration) para poder hacer eso sin que te de error, debes indicar que usas la última versión de C#, esto lo haces en el proyecto poniendo lo de: <LangVersion>latest</LangVersion>.

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <ProduceReferenceAssembly>true</ProduceReferenceAssembly>
       <LangVersion>latest</LangVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Xamarin.Forms" Version="5.0.0.2196" />  
    <PackageReference Include="Xamarin.Essentials" Version="1.7.0" />
  </ItemGroup>
</Project>

Y ahora el código de la parte del constructor:

namespace CambiarTamañoWindows.UWP
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();

            LoadApplication(new CambiarTamañoWindows.App());

            // Asignar manualmente el tamaño según esté definido en la App del proyecto con la funcionalidad.
            double winWidth = CambiarTamañoWindows.App.WindowsWidth;
            double winHeight = CambiarTamañoWindows.App.WindowsHeight;

            ApplicationView.PreferredLaunchViewSize = new Size(winWidth, winHeight);
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

        }
    }
}

En este caso no he usado lo del «namespace file-scoped» en el proyecto de UWP porque es algo más lioso indicar la versión del C#. Pero… vale, te lo explico, pero antes te explico ese código.

El poner el cambio de la ventana después de LoadApplication es porque el parámetro que se le pasa es una llamada al constructor de la clase (es decir, se instancia esa clase) y si al instanciarla lees los valores de una base de datos, un fichero de configuración o lo que sea, debes usarlos solo después de haberlos asignados.

En este ejemplo los dos valores usados son «static», es decir, que no pertenecen a una instancia en particular, sino a toda la clase y a todas las instancias.

Si no te gusta trabajar con valores compartidos, puedes asignar esa instancia a una variable, usar esa variable en el método LoadApplication y después usar los valores desde ese objeto.

Para que no imagines nada, supón que la definición de esas dos propiedades está hecha de esta forma:

public partial class App : Application
{

    public App()
    {
        InitializeComponent();

        DependencyService.Register<MockDataStore>();
        MainPage = new AppShell();
    }

    public double WindowsWidth { get; } = 1200;
    public double WindowsHeight { get; } = 900;
}

El código del constructor de MainPage sería este otreo:

namespace CambiarTamañoWindows.UWP
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Instanciamos la clase para que pueda asignar los valores.
            var laApp = new CambiarTamañoWindows.App();
            LoadApplication(laApp);

            // Asignar manualmente el tamaño según esté definido en la App del proyecto con la funcionalidad.
            double winWidth = laApp.WindowsWidth;
            double winHeight = laApp.WindowsHeight;

            ApplicationView.PreferredLaunchViewSize = new Size(winWidth, winHeight);
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

        }
    }
}

Después publicaré en github el proyecto para que te resulte más fácil probarlo y verlo al completo.

Cambiar la versión de C# en un proyecto Xamarin para Android, UWP (e incluso iOS, etc.)

Antes se podía hacer desde las propiedades del proyecto, en Build y seleccionando Avanzada, pero ya no, ya que dice que se selecciona automáticamente según la versión del «frameword», tal como puedes ver en esta captura:

Figura 1. Desde aquí ya no se puede indicar la versión de C#

La forma de hacerlo (estoy hablando de los proyectos de Android o de UWP, etc.) es la siguiente:

1- Elige el proyecto en el explorador de soluciones y pulsa en descargar (figura 2)
2- Una vez descargado, en ese mismo proyecto, selecciona Editar el archivo del proyecto (figura 3)
3- Añade <LangVersion>latest</LangVersion> después de la definición de PropertyGroup y lo guardas (figura 4).
4- Vuelve a cargar el proyecto (como en la figura 2, pero en vez de Unload será Reload).
5- Esto mismo lo puedes hacer en el de Android, etc.

Figura 2. Descargar el proyecto.
Figura 3. Editar el proyecto.
Figura 4. La versión a usar.

Y con esto y un bizcocho… ya casi son las 8…

En la figura 5 tienes la app funcionando con un tamaño de ventana de 650 x 700.

Figura 5. La app funcionando con un tamaño de 650×700

Ahora sí, esto es todo amigos… recuerda «invitarme» a un refresco virtual haciendo un donativo con Paypal 😉

Gracias por adelantado.

Nos vemos.
Guillermo

P.S.
El código en gitHub: CambiarTamañoWindows-xamarin.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.