uwp Tutorial
Empezando con uwp

Observaciones

Instalación o configuración

Instrucciones detalladas sobre cómo configurar o instalar UWP.

Requerimientos

1. Windows 10
2. Visual Studio 2015

Pasos

• Descargue e instale Visual Studio 2015, mientras se asegura de que se seleccionen las Universal Windows App Development Tools junto con sus subopciones: -
  a) Herramientas y Windows SDK
  b) Emulador para Windows Phone

• Asegúrese de habilitar el modo de desarrollador en el dispositivo de desarrollo e implementación.

• Seleccione la plantilla en función del idioma que desee utilizar:
  C # , Visual Basic , C ++ o JavaScript .

• A continuación, crea una aplicación en blanco (Windows universal).

• Seleccione la versión objetivo y mínima de Windows 10 adecuada para su aplicación.

  Haga clic aquí si no está seguro de qué versiones debe elegir o simplemente deje las opciones en sus valores predeterminados y haga clic en "Aceptar" para comenzar.

Instantáneas

Installation    

Creating a new project

Selecting Target and minimum version for your Application

Creando tu primera aplicación UWP

Este ejemplo muestra cómo desarrollar una aplicación UWP simple.

Al crear un proyecto de "Aplicación en blanco (Windows universal)" hay muchos archivos esenciales que se crean en su solución.

Todos los archivos en su proyecto se pueden ver en el Explorador de soluciones .

Algunos de los archivos cruciales en su proyecto son:

• App.xaml y App.xaml.cs : se utiliza App.xaml para declarar los recursos que están disponibles en la aplicación y App.xaml.cs es el código de backend. App.xaml.cs es el punto de entrada predeterminado de la aplicación
• MainPage.xaml : esta es la página de IU de inicio predeterminada para su aplicación (también puede cambiar la página de inicio de su aplicación en App.xaml.cs)
• Package.appxmanifest : este archivo contiene información importante de su aplicación, como nombre de visualización, punto de entrada, recursos visuales, lista de capacidades, información de empaquetado, etc.

Empezando

• Añadiendo un botón a tu página.

  Para agregar cualquier elemento de UI o herramienta a su página, simplemente arrastre y suelte el elemento desde la ventana de la caja de herramientas a la izquierda. Busque la herramienta "Botón" en la caja de herramientas y suéltela en la página de su aplicación.

• Personalizando la interfaz de usuario

  Todas las propiedades de una herramienta en particular se muestran en la ventana de propiedades en la parte inferior derecha.

  Aquí cambiaremos el texto dentro del botón a "¡Háblalo!". Para hacer esto, primero toque el botón para seleccionarlo y luego desplácese a través de la ventana de propiedades para encontrar Contenido y cambiar el texto a la cadena deseada ("¡Háblalo!").

  También cambiaremos el color de fondo de la página. Cada página tiene un elemento principal (generalmente una cuadrícula) que contiene todos los demás elementos. Así cambiaremos el color de la cuadrícula padre. Para hacer esto, toque la cuadrícula y cambie el Pincel> Fondo de la ventana de propiedades al color deseado.

La interfaz de usuario se verá algo así después de que la hayas personalizado.

• Código detrás

  Ahora vamos a hacer algo al hacer clic en nuestro botón!

  Al hacer clic en un botón se activa un evento y necesitamos manejar el evento para hacer algo útil cuando se hace clic en el botón.

  Agregando controlador de eventos

  Para agregar un controlador de eventos de clic a su botón, seleccione el botón, vaya a la ventana de propiedades y seleccione el icono del rayo . Esta ventana consta de todos los eventos que están disponibles para el elemento que seleccionamos (el botón en nuestro caso). A continuación, haga doble clic en el cuadro de texto al lado del evento "Haga clic" para generar automáticamente el controlador del evento de clic de botón.

Después de esto, será redirigido a la página ac # (MainPage.xaml.cs). Agregue el siguiente código a su método de control de eventos:

 MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

A continuación, agregue una palabra clave asíncrona a su controlador de eventos.

Después de agregar el código arriba de su clase debe verse algo como esto:

public sealed partial class MainPage : Page
{
    string speakIt = "Hello, World!";
    public MainPage()
    {
        this.InitializeComponent();
    }

    private async void button_Click(object sender, RoutedEventArgs e)
    {
        MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync(speakIt);
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

    }
}

• ¡Inicia tu aplicación!

  Su aplicación está lista para ser lanzada. Puede iniciar su aplicación presionando F5 o Seleccione su dispositivo en el que desea implementar y depurar su aplicación y haga clic en el botón de inicio.

Después de construirse, su aplicación se implementará en su dispositivo. Dependiendo de la resolución de su dispositivo y del tamaño de la pantalla, la aplicación configurará automáticamente su diseño. (Puede cambiar el tamaño de la ventana para ver cómo funciona perfectamente)

• Ir más lejos

  Ahora que has hecho tu primera aplicación, ¡vamos un paso más allá!

  Agregue un cuadro de texto a su página y al hacer clic en el botón, la aplicación expresará lo que está escrito en el cuadro de texto.

  Comience arrastrando y soltando un control TextBox desde la Caja de herramientas a su diseño. A continuación, asigne un nombre a su TextBox desde el menú de propiedades. (¿Por qué necesitamos especificar un nombre? De modo que podamos usar este control fácilmente)

  De forma predeterminada, Visual Studio le da un nombre a su control, pero es un buen hábito nombrar los controles de acuerdo con lo que hacen o algo relevante.

  Estoy nombrando mi cuadro de texto - " speakText ".

    private async void button_Click(object sender, RoutedEventArgs e)
    {
        //checking if the text provided in the textbox is null or whitespace
        if (!string.IsNullOrWhiteSpace(speakText.Text))
            speakIt = speakText.Text;
        else
            speakIt = "Please enter a valid string!";

        MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync(speakIt);
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

    }

Ahora despliega tu código !!

¡Su aplicación ahora puede expresar cualquier cadena válida que le proporcione!

Felicidades ! ¡Has construido exitosamente tu propia aplicación UWP!