Parte 1: Crear una aplicación "Hello, world" (aplicaciones de la Tienda Windows con C#/VB y XAML)

Este tutorial te enseña a crear una aplicación de la Tienda Windows "Hello World" sencilla mediante lenguaje de marcado de aplicaciones extensible (XAML) con Microsoft Visual Basic o C#. Es el primer tutorial de una serie que te enseñará todo lo que necesitas saber para compilar aplicaciones de la Tienda Windows.

Importante  Este tutorial está diseñado para usarse con Microsoft Visual Studio 2013 y Windows 8.1. Algunas partes del tutorial no funcionarán correctamente con Microsoft Visual Studio 2012 y Windows 8.

En este tutorial aprenderás a:

  • Crear un nuevo proyecto
  • Agregar contenido XAML a tu página de inicio
  • Controlar la entrada táctil, de pluma y mouse
  • Cambiar entre los temas claros y oscuros
  • Crear tus propios estilos personalizados

Te mostramos cómo crear una aplicación de la Tienda Windows mediante XAML con Visual Basic o C#.

Antes de comenzar...

  • Para realizar este tutorial, debes tener Windows 8.1 y Visual Studio 2013. Para descargarlos, consulta el tema para obtener las herramientas
  • También necesitas una licencia de desarrollador. Si necesitas instrucciones, consulta el tema para obtener una licencia de desarrollador.
  • Damos por hecho que tienes conocimientos básicos de XAML y los conceptos de Introducción a XAML.
  • Se supone que estás usando el diseño de ventana predeterminado en Microsoft Visual Studio. Si cambias el diseño predeterminado, puedes restablecerlo en el menú Ventana si seleccionas el comando Restablecer diseño de la ventana.
  • Puedes ver el código completo para este tutorial en Código completo de la parte 1.

Paso 1: Crear un nuevo proyecto en Visual Studio

  1. Inicia Visual Studio 2013.

    Aparecerá la pantalla de inicio de Visual Studio 2013.

    (A partir de ahora, nos referiremos a Visual Studio 2013 simplemente como "Visual Studio").

  2. Selecciona Archivo > Nuevo proyecto.

    Se abre el cuadro de diálogo Nuevo proyecto. El panel izquierdo del cuadro de diálogo te permite seleccionar el tipo de plantillas que quieres mostrar.

  3. En el panel izquierdo, expande Instalado > Plantillas, después expande Visual Basic o Visual C# y elige el tipo de plantilla Tienda Windows. El panel central del cuadro de diálogo mostrará una lista de plantillas de proyecto para aplicaciones de la Tienda Windows.

    Ventana de nuevo proyecto de Visual Studio

  4. En el panel central, selecciona la plantilla Aplicación vacía.

    La plantilla Aplicación vacía crea una aplicación de la Tienda Windows mínima que se compila y ejecuta, pero que no contiene datos ni controles de interfaz de usuario. Después, a lo largo de estos tutoriales, agregarás controles y datos a la aplicación.

  5. En el cuadro de texto Nombre, escribe "HelloWorld".
  6. Haz clic en Aceptar para crear el proyecto.

    Visual Studio crea tu proyecto y lo muestra en el Explorador de soluciones.

    Explorador de soluciones de Visual Studio

Aunque la Aplicación vacía es una plantilla mínima, contiene un montón de archivos:

  • Un archivo de manifiesto (package.appxmanifest) que describe la aplicación (nombre, descripción, título, página de inicio, etc.) y enumera los archivos que contiene.
  • Un conjunto de imágenes de logotipos grandes y pequeños (Logo.scale-100.png y SmallLogo.scale-100.png) que mostrar en la pantalla Inicio.
  • Una imagen (StoreLogo.scale-100.png) para representar tu aplicación en la Tienda Windows.
  • Una pantalla de presentación (SplashScreen.scale-100.png) para mostrar cuando comience tu aplicación.
  • Archivos de código y XAML para la aplicación (App.xaml y App.xaml.cs/.vb).
  • Una página de inicio (MainPage.xaml) y un archivo de código complementario (MainPage.xaml.cs/.vb) que se ejecuta al iniciar la aplicación.

Estos archivos son esenciales para todas las aplicaciones de la Tienda Windows con Visual Basic o C#. Cualquier proyecto que crees en Visual Studio contendrá estos archivos.

Reemplazar la MainPage

La MainPage en la plantilla de proyecto Aplicación vacía se basa en la plantilla Página en blanco. Contiene la mínima cantidad de XAML y código para crear una instancia de una Page. No obstante, cuando creas una aplicación para la Tienda Windows, debes hacer más. Por ejemplo, incluso una aplicación sencilla de una única página debe adaptar los diferentes diseños y vistas, guardar su estado al suspenderse y restaurarlo cuando se reanude. El resto de plantillas de Page y proyecto en Visual Studio incluyen código adicional y clases auxiliares que te ayudarán con la administración de vistas y estados. Cuando uses la plantilla de proyecto Aplicación vacía, normalmente sustituirás la parte de MainPage en blanco por una de las otras plantillas de Page. Así podrás aprovecharte del diseño y las clases auxiliares que te ofrecen.

En este ejemplo, sustituirás la MainPage predeterminada con una página que usa la plantilla Página básica. Tutoriales posteriores en esta serie dependen de las clases auxiliares usadas por esta plantilla para la administración de vistas y estados. Si quieres más información sobre las plantillas de Page que puedes elegir en Visual Studio, consulta Plantilas de elemento de C#, VB y C++.

Hh986965.wedge(es-es,WIN.10).gifPara reemplazar MainPage en la aplicación vacía

  1. En el Explorador de soluciones, haz clic con el botón secundario en MainPage.xaml y selecciona Eliminar.
  2. Haz clic en Aceptar para confirmar la eliminación.
  3. Selecciona Proyecto > Agregar nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento. Se parece al cuadro de diálogo Nuevo proyecto.
  4. En Visual C# o Visual Basic, en el panel izquierdo, elige el tipo de plantilla Tienda Windows.
  5. En el panel central, elige Página básica como el tipo de página para agregar al proyecto.
  6. Escribe "MainPage.xaml" como nombre de la página.

    Importante  Si dejas el nombre predeterminado, "BasicPage1", el proyecto no se compilará correctamente.

  7. Haz clic en Agregar.

    La primera vez que agregas una página nueva a la plantilla Aplicación vacía (otra que no sea una Página en blanco), Visual Studio muestra un cuadro de diálogo con un mensaje que dice que la adición depende de los archivos que faltan en el proyecto. Haz clic en para agregar estos archivos. Se agregan archivos de varias clases de utilidades a tu proyecto en la carpeta Common.

    El código XAML y los archivos de código subyacente de la página se agregan al proyecto.

  8. Haz clic en Compilar > Compilar solución para compilar la aplicación.

    Importante  La nueva página mostrará un error en el diseñador hasta que compiles las clases auxiliares de las que depende.

Paso 2: Iniciar la aplicación

En este punto, has creado una aplicación sencilla. Si quieres ver su apariencia, presiona F5 para compilar, implementar e iniciar la aplicación en modo de depuración. Primero aparece una pantalla de presentación predeterminada. La pantalla de presentación se define mediante una imagen (SplashScreen.scale-100.png) y un color de fondo (especificado en el archivo de manifiesto de nuestra aplicación). Aquí no lo tratamos, pero es realmente fácil personalizar la pantalla de presentación. (Para saber cómo hacerlo, consulta el tema sobre cómo agregar una pantalla de presentación).

La pantalla de presentación desaparece y, a continuación, aparece tu aplicación. Contiene una pantalla negra y el título "Mi aplicación".

Pantalla inicial de la aplicación

No hay ningún botón ni comando para cerrar la aplicación. Puedes usar el gesto de cierre o Alt+F4 para cerrarla, pero normalmente no cierras aplicaciones de la Tienda Windows, tal como verás en la Parte 2: Administrar el ciclo de vida y el estado de la aplicación. Presiona la tecla de Windows para ir a la pantalla de inicio y luego muestra todas las aplicaciones. Ten en cuenta que la implementación de la aplicación añade su icono a la pantalla de aplicaciones. Para volver a ejecutar la aplicación, pulsa o haz clic en su icono en la pantalla de aplicaciones, o presiona F5 en Visual Studio para ejecutarla en modo de depuración.

No hace demasiadas cosas —aún— pero, ¡enhorabuena! Has compilado tu primera aplicación de la Tienda Windows.

Para dejar de depurar la aplicación, presiona Alt+Tab para volver a Visual Studio. En Visual Studio, haz clic en Depurar > Detener depuración para cerrar la aplicación. No puedes editar en Visual Studio mientras estés en modo de depuración.

Si quieres más información, consulta el tema sobre cómo ejecutar aplicaciones de la Tienda Windows en Visual Studio.

Paso 3: Modificar tu página de inicio

¿Que hay en los archivos?

Cuando creas un proyecto nuevo que usa la plantilla Aplicación vacía, Visual Studio crea una aplicación que contiene un montón de archivos. Para ver y editar los archivos, haz doble clic en el archivo que quieras en el Explorador de soluciones. Puedes expandir un archivo XAML como una carpeta para ver su archivo de código asociado. De manera predeterminada, los archivos XAML se abren en una vista dividida que muestra la superficie de diseño y el editor de XAML.

En este tutorial, trabajas con solo algunos de los archivos enumerados anteriormente: App.xaml, App.xaml.cs/.vb, MainPage.xaml y MainPage.xaml.cs/.vb.

App.xaml

App.xaml es donde declaras recursos que usas en la aplicación.


<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld">

</Application>


App.xaml.cs/vb

App.xaml.cs/.vb es el archivo de código subyacente para App.xaml. El código subyacente es el código que se une a la clase parcial de la página XAML. Juntos, el XAML y el código subyacente forman una clase completa. App.xaml.cs/.vb es el punto de entrada de tu aplicación. Como todas las páginas de código subyacente, contiene un constructor que llama al método InitializeComponent. Tú no escribes el método InitializeComponent. Lo genera Visual Studio, y su principal propósito es inicializar los elementos declarados en el archivo XAML. App.xaml.cs/.vb también contiene métodos para controlar la activación y la suspensión de la aplicación. Agregarás código a estos métodos en la Parte 2: Administrar el ciclo de vida y el estado de la aplicación.


using System;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// The Blank Application template is documented at http://go.microsoft.com/fwlink/?LinkId=234227

namespace HelloWorld
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        /// <summary>
        /// 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)
        {

#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            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();

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

                // 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
                if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender">The source of the suspend request.</param>
        /// <param name="e">Details about the suspend request.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}


MainPage.xaml

En el archivo MainPage.xaml defines la interfaz de usuario de la aplicación. Puedes agregar elementos directamente con el marcado XAML o puedes usar las herramientas de diseño suministradas por Visual Studio. La plantilla Página básica crea una nueva clase llamada MainPage (o cualquier nombre que escribas) que se hereda de Page. También incluye cierto contexto sencillo, como un botón Atrás y un título de página, y proporciona métodos para la navegación y la administración de estado.


<Page
    x:Name="pageRoot"
    x:Class="HelloWorld.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:common="using:HelloWorld.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <AppBarButton x:Name="backButton" Icon="Back" Height="95" Margin="10,46,10,0"
                          Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" 
                          Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource Mode=Self}}"
                          AutomationProperties.Name="Back"
                          AutomationProperties.AutomationId="BackButton"
                          AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

MainPage.xaml.cs/vb

MainPage.xaml.cs/.vb es la página de código subyacente para MainPage.xaml. Aquí agregas los controladores de eventos y la lógica de tu aplicación. La plantilla Página básica incluye 2 métodos en los que puedes guardar y cargar el estado de la página


using HelloWorld.Common;
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

// The Basic Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234237

namespace HelloWorld
{
    /// <summary>
    /// A basic page that provides characteristics common to most applications.
    /// </summary>
    public sealed partial class MainPage : Page
    {

        private NavigationHelper navigationHelper;
        private ObservableDictionary defaultViewModel = new ObservableDictionary();

        /// <summary>
        /// This can be changed to a strongly typed view model.
        /// </summary>
        public ObservableDictionary DefaultViewModel
        {
            get { return this.defaultViewModel; }
        }

        /// <summary>
        /// NavigationHelper is used on each page to aid in navigation and 
        /// process lifetime management
        /// </summary>
        public NavigationHelper NavigationHelper
        {
            get { return this.navigationHelper; }
        }


        public MainPage()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
            this.navigationHelper.SaveState += navigationHelper_SaveState;
        }

        /// <summary>
        /// Populates the page with content passed during navigation.  Any saved state is also
        /// provided when recreating a page from a prior session.
        /// </summary>
        /// <param name="navigationParameter">The parameter value passed to
        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
        /// </param>
        /// <param name="pageState">A dictionary of state preserved by this page during an earlier
        /// session.  This will be null the first time a page is visited.</param>
        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
        }

        /// <summary>
        /// Preserves state associated with this page in case the application is suspended or the
        /// page is discarded from the navigation cache.  Values must conform to the serialization
        /// requirements of <see cref="SuspensionManager.SessionState"/>.
        /// </summary>
        /// <param name="pageState">An empty dictionary to be populated with serializable state.</param>
        private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)
        {
        }

        #region NavigationHelper registration

        /// The methods provided in this section are simply used to allow
        /// NavigationHelper to respond to the page's navigation methods.
        /// 
        /// Page specific logic should be placed in event handlers for the  
        /// <see cref="GridCS.Common.NavigationHelper.LoadState"/>
        /// and <see cref="GridCS.Common.NavigationHelper.SaveState"/>.
        /// The navigation parameter is available in the LoadState method 
        /// in addition to page state preserved during an earlier session.

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedFrom(e);
        }

        #endregion
    }
}



Modificar la página de inicio

Ahora vamos a agregar algo de contenido a la aplicación.

Hh986965.wedge(es-es,WIN.10).gifPara modificar la página de inicio

  1. Haz doble clic en MainPage.xaml en el Explorador de soluciones para abrirlo.
  2. Para cambiar el título de la página, selecciona el texto "Mi aplicación" hacia la parte superior de la página en el diseñador XAML.

    Asegúrate de que el TextBlock llamado pageTitle aparezca en el panel Propiedades. De manera predeterminada, el panel Propiedades está por debajo del panel Explorador de soluciones.

  3. El panel Propiedades contiene una lista de propiedades y valores para el objeto seleccionado. Después, cada valor de propiedad es un marcador de propiedad, un símbolo de cuadro pequeño en el que puedes hacer clic para abrir un menú de propiedad. El marcador de propiedad Text de color verde indica que se ha establecido en un recurso.

    En Común en el panel Propiedades, haz clic en el marcador de propiedad de la propiedad Text. Se abre el menú de propiedad.

  4. En el menú de propiedad, selecciona Editar recurso. Se abre el cuadro de diálogo Editar recurso.
  5. En el cuadro de diálogo Editar recurso, cambia el valor "My Application" a "Hello World".
  6. Haz clic en Aceptar.

    En lugar de escribir el nombre de la aplicación directamente en el bloque de texto, actualizaste un recurso de cadena a la que propiedad Text del bloque de texto está vinculada. Mediante el uso de un recurso como este, hace que sea más sencillo mantener el texto reutilizable y más fácil de localizar. En MainPage.xaml, el XAML para la definición del recurso AppName se actualiza de esta manera.

    
    <x:String x:Key="AppName">Hello, world!</x:String>
    
    
  7. En el editor de XAML, agrega los controles para la interfaz de usuario.

    En la Grid raíz, inmediatamente después de la Grid que contiene el botón Atrás y el título de la página, agrega este XAML. Contiene un StackPanel con un TextBlock que pregunta el nombre del usuario, un elemento TextBox para aceptar el nombre del usuario, un Button y otro elemento TextBlock.

    
    
            <StackPanel Grid.Row="1" Margin="120,30,0,0">
                <TextBlock Text="What's your name?"/>
                <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
                    <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
                    <Button Content="Say &quot;Hello&quot;"/>
                </StackPanel>
                <TextBlock x:Name="greetingOutput"/>
            </StackPanel>
    
    
    

    Proporcionamos más información acerca del diseño XAML en Parte 3: Navegación, diseño y vistas.

  8. Presiona F5 para ejecutar la aplicación. Tiene esta apariencia.

    Pantalla de la aplicación con controles

    Puedes escribir en el elemento TextBox, pero, ahora mismo, si haces clic en el Button, no se realiza ninguna acción. En los pasos siguientes, crearás un controlador de eventos para el evento Click del botón que muestra un saludo personalizado. Agregas un código de controlador de eventos a tu archivo MainPage.xaml.cs/.vb.

Paso 4: Crear un controlador de eventos

Los elementos XAML pueden enviar mensajes cuando se producen ciertos eventos. Estos mensajes de eventos te dan la oportunidad de realizar alguna acción como respuesta al evento. El código para responder al evento lo pones en un método de controlador de eventos. Uno de los eventos más comunes en muchas aplicaciones es que un usuario haga clic en un Button.

Crearemos un controlador de eventos para el evento Click del botón. El controlador de eventos obtendrá el nombre del usuario del control TextBox nameInput y lo usará para enviar un saludo al TextBlock greetingOutput.

Uso de eventos que funcionan para entradas táctiles, de mouse y de pluma

¿Qué evento tienes que controlar? Como se pueden ejecutar en varios dispositivos, diseña tu aplicación de la Tienda Windows teniendo en cuenta la entrada táctil. Tu aplicación también debe poder controlar la entrada desde un mouse o un lápiz. Afortunadamente, los eventos como Click y DoubleTapped no dependen del dispositivo. Si estás familiarizado con la programación de Microsoft .NET, es posible que hayas visto eventos separados para entradas táctiles, de mouse o de lápiz, como MouseMove, TouchMove y StylusMove. En las aplicaciones de la Tienda Windows, estos eventos separados se sustituyen por un único evento PointerMoved que funciona igual de bien para entradas táctiles, de mouse o de lápiz.

Hh986965.wedge(es-es,WIN.10).gifPara agregar un controlador de eventos

  1. En la vista de diseño o XAML, selecciona el Button "Say Hello" que agregaste a MainPage.xaml.
  2. En la Ventana de propiedades, haz clic en el botón de eventos (Botón de eventos).
  3. Busca el evento Click en la parte superior de la lista de eventos. En el cuadro de texto del evento, escribe el nombre de la función que controla el evento Click. Para este ejemplo, escribe "Button_Click".

    Lista de eventos en la ventana de propiedades

  4. Presiona Entrar. El método de controlador de eventos se crea y se abre en un editor de código, de forma que puedes agregar código que se ejecutará cuando se produzca el evento.

    En el editor de XAML, el XAML para Button se actualiza para declarar el controlador de eventos de Click, de esta manera.

    
    <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    
    
  5. Agrega código al controlador de eventos que creaste en la página de código subyacente. En el controlador de eventos, recupera el nombre del usuario del control TextBox nameInput y úsalo para crear un saludo. Usa el TextBlock greetingOutput para mostrar el resultado.
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                greetingOutput.Text = "Hello, " + nameInput.Text + "!";
            }
    
    
  6. Presiona F5 para compilar y ejecutar la aplicación. Cuando un usuario escribe su nombre en el cuadro de texto y hace clic en el botón, la aplicación muestra un saludo personalizado.

    Pantalla de la aplicación mostrando un mensaje

Parte 5: Otorgar estilo a la página de inicio

Elección de un tema

Es fácil personalizar la apariencia de tu aplicación. De forma predeterminad, tu aplicación usa recursos con un estilo oscuro. Los recursos del sistema también incluyen un tema claro. Vamos a probarlo y ver cómo es.

Hh986965.wedge(es-es,WIN.10).gifPara cambiar al tema claro

  1. En el Explorador de soluciones, haz doble clic en App.xaml para abrirlo.
  2. En la etiqueta Application de apertura, agrega la propiedad RequestedTheme con su valor establecido en Light.
    
    RequestedTheme="Light"
    
    

    Esta es la etiqueta Application completa con el tema claro agregado.

    
    <Application
        x:Class="HelloWorld.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelloWorld" 
        RequestedTheme="Light">
    
    
  3. Presiona F5 para compilar y ejecutar la aplicación. Ahora usar el tema claro.

    Pantalla de la aplicación con tema claro

¿Qué tema deberías usar? El que quieras. Te recomendamos que uses el tema oscuro para las aplicaciones que muestren principalmente imágenes o vídeo, y el tema claro para las aplicaciones que contengan mucho texto. Si vas a usar un esquema de colores personalizado, usa el tema que mejor se ajuste al aspecto de la aplicación.

Nota  El tema se aplica cuando se inicia la aplicación. No puedes cambiar los temas mientras se está ejecutando la aplicación.

Usar estilos del sistema

Ahora mismo, todo el texto es muy pequeño y difícil de leer. Puedes aplicar fácilmente los estilos del sistema a los elementos de tu aplicación para que luzcan una apariencia excelente.

Hh986965.wedge(es-es,WIN.10).gifPara aplicar estilo a un elemento

  1. Haz doble clic en MainPage.xaml en el Explorador de soluciones para abrirlo.
  2. En la vista de diseño o XAML, selecciona el "What's your name?" TextBlock que agregaste anteriormente.
  3. En la Ventana de propiedades, haz clic en el botón de propiedades (Botón de eventos).
  4. Expande el grupo Varios y busca la propiedad Style.
  5. Haz clic en el marcador de propiedades que hay al lado de la propiedad Style para abrir el menú.
  6. En el menú, selecciona Recurso del sistema > BaseTextBlockStyle.

    Ventana de propiedades de Visual Studio

    En la superficie de diseño XAML, la apariencia del texto cambia. En el editor XAML, el XAML para el TextBlock se actualiza.

    
    <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
    
    
  7. Repite el proceso para asignar el BaseTextBlockStyle al elemento TextBlock greetingOutput.

    Sugerencia  No hay texto en este TextBlock, pero cuando desplazas el puntero del mouse sobre la superficie de diseño XAML, un contorno azul muestra dónde está el TextBlock para que puedas seleccionarlo.

    Tu XAML ahora tiene esta apariencia.

    
    <StackPanel Grid.Row="1" Margin="120,30,0,0">
        <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput" Style="{ThemeResource BaseTextBlockStyle}"/>
    </StackPanel>
    
    
  8. Presiona F5 para compilar y ejecutar la aplicación. Ahora tiene esta apariencia.

Pantalla de la aplicación con texto con estilo aplicado

Creación de tus propios estilos

Para personalizar la apariencia de tu aplicación, puedes crear tus propios estilos. Para obtener más información, consulta Inicio rápido: controles de estilo.

Aquí creas un nuevo estilo y lo aplicas al TextBlock greetingOutput Incluyes el estilo en la sección de recursos de MainPage.xaml.

Hh986965.wedge(es-es,WIN.10).gifPara usar tu propio estilo

  1. En la vista de diseño o XAML, selecciona el TextBlock greetingOutput que agregaste a MainPage.xaml.
  2. Expande el grupo Varios y busca la propiedad Style.
  3. Haz clic en el marcador de propiedades que hay al lado de la propiedad Style para abrir el menú.
  4. En el menú, selecciona Convertir en nuevo recurso.... Se abrirá el cuadro de diálogo Crear recurso de estilo.

    Nota  El estilo que quieres modificar debe de estar ya aplicado al control. En este ejemplo, BaseTextBlockStyle todavía está aplicado desde el paso anterior, por ello es el estilo cuya copia modificarás.

  5. En el cuadro de diálogo Crear recurso de estilo, escribe "BigGreenTextStyle" como clave del recurso y selecciona la opción de definir el recurso en este documento.

    Cuadro de diálogo Crear recurso de estilo

  6. Haz clic en Aceptar. El nuevo estilo se crea en la sección de recursos deMainPage.xaml y el TextBlock se actualiza para usar el nuevo recurso de estilo.
    
    <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
    
    

    El TextBlock está usando el nuevo estilo, pero sigue teniendo la misma apariencia. Debes editar el estilo que creaste para darle un nuevo aspecto.

  7. Haz clic en el marcador de propiedades que hay al lado de la propiedad Style para volver a abrir el menú.
  8. En el menú, selecciona Editar recurso.
  9. En el recurso "BigGreenTextStyle", agrega un Setter para la propiedad Foreground con el valor de "Green".
    
    
        <Setter Property="Foreground" Value="Green"/>
    
    
    

    Nota  A medida que cambies el estilo en el editor XAML, puedes ver el efecto de tus cambios en la vista de diseño.

  10. En el FontSize Setter, cambia el valor a "36".
  11. Elimina el Setter para la propiedad LineHeight .
    
    
    <!-- Delete this Setter. -->
    <Setter Property="LineHeight" Value="20"/>
    
    
    

    He aquí el XAML final para el estilo.

    
    <Style x:Key="BigGreenTextStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="Green"/> 
        <Setter Property="FontSize" Value="36"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Typography.StylisticSet20" Value="True"/>
        <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
        <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
        <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        <Setter Property="TextLineBounds" Value="TrimToBaseline"/>
        <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
    </Style>
    
    
  12. Presiona F5 para compilar y ejecutar la aplicación. El saludo se muestra ahora en letras grandes y verdes.

    Pantalla de la aplicación con texto verde

Resumen

Enhorabuena, ¡ya has acabado con el primer tutorial! Has aprendido a agregar contenido a una aplicación de la Tienda Windows. También has aprendido a agregar interactividad y a aplicar estilo a la aplicación.

Consultar el código

¿Te has quedado atascado o quieres revisar tu trabajo? De ser así, consulta Código completo de la parte 1.

Pasos siguientes

En la parte siguiente de esta serie de tutoriales, aprenderás el funcionamiento del ciclo de vida de la aplicación y cómo guardar el estado de la misma. Ve a la Parte 2: Administrar el ciclo de vida y el estado de la aplicación.

 

 

Mostrar:
© 2014 Microsoft. Reservados todos los derechos.