Laboratorio Tiles

Modulo Plataforma Windows 10
LABORATORIO TILES VISUAL STUDIO

-
Esneyder Espitia Peña.
Carmelo Argel Mestra.
Arsesio Rivera Hernández.
Oscar Carreño González.
Jorge Galván Navarro.

DESARROLLO
1. REQUISITOS
La Universidad de Córdoba como política ha definido la implementación de un sistema de

creación de Actividades asociadas a los procesos misionales (Docencia, Investigación,
Extensión). A continuación, se detallan los requerimientos funcionales del sistema
Requerimiento de Actividad:
Permitir crear actividades conjunto de actividades (colecciones de datos) con la siguiente información:
 Nombre de la actividad
 Nombre del Docente
 Tipo (Docencia, Investigación, Extensión)
 Descripción
Requerimiento Vista:
La aplicación debe contemplar 3 vistas:

 Visualización de datos: comprende la vista para listad el conjunto de actividades.
 Agregar Actividad: Comprende la vista para anexar una nueva actividad.
 Tiles: Comprende la vista para la realización del Requerimiento Tiles
Requerimiento Tiles:
La aplicación debe permitir elegir el tipo de actividad de la cual visualizar la información detallada a
continuación:
 Docencia: Utilizar tile Badget para visualizar el número de actividades tipo docencia
 Extensión: Utilizar tile Badget para visualizar el número de actividades tipo Extensión, de igual
forma utilizar tile Notifications tamaño Wide para visualizar una imagen asociada y la descripción
de una actividad seleccionada.
 Investigación: Utilizar tile Notifications tamaño Medium para visualizar imagen asociada a la
investigación y cantidad actividades tipo investigación
Nota: Utilizar el patrón MVVM tendrá bonificación en la calificación final.

INTRODUCCIÓN.
Microsoft Visual Studio es un entorno de desarrollo integrado creado para sistemas operativos Windows
10. Por lo general para cada aplicación que realicemos tendremos un diseño de interfaz de usuario; una
de las cosas más significativas en el rediseño de Windows 8 es la inclusión de tiles, que son esos
pequeños recuadros o ventanas que conforman una pantalla de inicio de Windows bastante dinámica
exponiendo en llamativos colores la información necesaria para manifestar lo que sucede en nuestras
aplicaciones instaladas, también están presentes en Windows 10. Existen dos tipos de tiles que el
sistema puede mostrar: UWP o aplicaciones para Plataforma Universal de Windows, que suelen ser tiles
personalizadas y por ende lucen bien, y las de los programas de escritorio de las que Microsoft extrae el
icono usado por dichos programas y lo enseña a un tamaño reducido que deslustra mucho el menú de
inicio al desplegarse.
En este laboratorio, vamos aprender cómo se configuran los Tiles para las aplicaciones UWP.
TILES PARA APLICACIONES UWP.
Un Tile es la representación de una aplicación en el menú Inicio. Cada aplicación tiene un tile. Cuando
crea un nuevo proyecto de aplicación de plataforma universal de Windows (UWP) en Microsoft Visual
Studio, incluye un mosaico predeterminado que muestra el nombre y el logotipo de su
aplicación. Windows muestra este mosaico cuando su aplicación se instala por primera vez.
Configurar Tile Predeterminado:
Cuando crea un nuevo proyecto en Visual Studio, crea un mosaico predeterminado simple que muestra el
nombre y el logotipo de su aplicación. Para editar su mosaico, haga doble clic en el archivo
Package.appxmanifest en su proyecto principal de UWP para abrir el diseñador (o haga clic con el botón
derecho en el archivo y seleccione Ver código).
XML
<Applications>
<Application Id="App"
Executable="$targetnametoken$.exe"
EntryPoint="ExampleApp.App">
<uap:VisualElements
DisplayName="ExampleApp"
Square150x150Logo="Assets\Square150x150Logo.png"
Square44x44Logo="Assets\Square44x44Logo.png"
Description="ExampleApp"
BackgroundColor="#464646">
<uap:SplashScreen Image="Assets\SplashScreen.png" />
</uap:VisualElements>
</Application>
</Applications>
Hay algunos elementos que debe actualizar:
 DisplayName: reemplace este valor con el nombre que desea mostrar en su mosaico.
 ShortName: Debido a que hay un espacio limitado para que su nombre para mostrar encaje en los
mosaicos, le recomendamos que especifique un ShortName también, para asegurarse de que el
nombre de su aplicación no se trunque.
 Imágenes de logotipo: Deberías reemplazar estas imágenes por las tuyas. Tiene la opción de
suministrar imágenes para diferentes escalas visuales, pero no es necesario que las proporcione
todas.
Para garantizar que su aplicación se vea bien en una variedad de dispositivos, le recomendamos que
proporcione versiones a escala del 100%, 200% y 400% de cada imagen. Las imágenes escaladas
siguen esta convención de nombres:
<nombre de la imagen>. escala- <factor de escala>. <extensión de archivo de imagen>

Por ejemplo: SplashScreen.scale-100.png
Una vez que haya instalado su aplicación, puede usar las notificaciones para personalizar su mosaico.
Puede hacerlo la primera vez que se inicia su aplicación o en respuesta a un evento, como una
notificación de inserción.
1. Creamos organización del proyecto.

Carpeta Model: Modelo. Agregamos lista de actividades (listactivity), que genera la colección de
datos lista de tipo actividad.
Services: Servicios que tiene la aplicación, agregamos la clase database
View: Vista de la aplicación. Vista inicial, vista de agregar, vista de
ViewModel: Interaccion de datos vistamodelo. Creamos una clase llamada listdata (creamos una
lista actividad)
En el archivo app.xaml se encuentran los estilos a nivel de aplicación.

App.xaml
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace ActividadesUnicor
{
/// <summary>
/// Proporciona un comportamiento específico de la aplicación para complementar la clase
Application predeterminada.
/// </summary>
sealed partial class App : Application
{
/// <summary>
/// Inicializa el objeto de aplicación Singleton. Esta es la primera línea de código creado
/// ejecutado y, como tal, es el equivalente lógico de main() o WinMain().
/// </summary>
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
/// <summary>
/// Se invoca cuando el usuario final inicia la aplicación normalmente. Se usarán otros puntos
/// de entrada cuando la aplicación se inicie para abrir un archivo específico, por ejemplo.
/// </summary>
/// <param name="e">Información detallada acerca de la solicitud y el proceso de
inicio.</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;
// No repetir la inicialización de la aplicación si la ventana tiene contenido todavía,

// solo asegurarse de que la ventana está activa.
if (rootFrame == null)
{
// Crear un marco para que actúe como contexto de navegación y navegar a la primera
página.
rootFrame = new Frame();
rootFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Cargar el estado de la aplicación suspendida previamente
}
// Poner el marco en la ventana actual.

Window.Current.Content = rootFrame;
}
if (e.PrelaunchActivated == false)
{
if (rootFrame.Content == null)
{
// Cuando no se restaura la pila de navegación, navegar a la primera página,
// configurando la nueva página pasándole la información requerida como
//parámetro de navegación
rootFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Asegurarse de que la ventana actual está activa.
Window.Current.Activate();
}
}
/// <summary>
/// Se invoca cuando la aplicación la inicia normalmente el usuario final. Se usarán otros
puntos
/// </summary>
/// <param name="sender">Marco que produjo el error de navegación</param>
/// <param name="e">Detalles sobre el error de navegación</param>
void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}
/// <summary>
/// Se invoca al suspender la ejecución de la aplicación. El estado de la aplicación se guarda
/// sin saber si la aplicación se terminará o se reanudará con el contenido
/// de la memoria aún intacto.
/// </summary>
/// <param name="sender">Origen de la solicitud de suspensión.</param>
/// <param name="e">Detalles sobre la solicitud de suspensión.</param>
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
//TODO: Guardar el estado de la aplicación y detener toda actividad en segundo plano
deferral.Complete();
}
}
}
Listdata.cs
using ActividadesUnicor.Model;
using ActividadesUnicor.Services;
using System;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ActividadesUnicor.ViewModel
{
class ListData: BindableBase
{
private ListActivity datos_Actividades = new ListActivity();
public ListActivity Datos_Actividades

{
get { return datos_Actividades; }
set {SetProperty(ref datos_Actividades , value); }
}
public ListData()
{
datos_Actividades.Add(new Activity()
{
Nombre="Calificar",
Nombre_docente="Samir castaño",
Tipo_activity= "Docencia",
Descripcion_activity= "Poner las notas a los estudiantes"
});
}
}
}
Agregar.xaml
using System;
using System.IO;
using System.Linq;
using ActividadesUnicor.ViewModel;
using Windows.UI.Core;
// La plantilla de elemento Página en blanco está documentada en

http://go.microsoft.com/fwlink/?LinkId=234238
namespace ActividadesUnicor.View
{
/// <summary>
/// Una página vacía que se puede usar de forma independiente o a la que se puede navegar
dentro de un objeto Frame.
/// </summary>
public sealed partial class Agregar : Page
{
ListData Datos = (ListData)Application.Current.Resources["Datos"];
public Agregar()
{
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested +=
MainPage_BackRequested;
private void MainPage_BackRequested(object sender, BackRequestedEventArgs e)

{
if (rootFrame.CanGoBack)
{
rootFrame.GoBack();
e.Handled = true;
}
}
private void crear(object sender, RoutedEventArgs e)

{
if (Combo_tipo.SelectedItem != null)
{
if (TexT_Nombre.Text != "" && TexT_Docente.Text != "" && TexT_Descripcion.Text != ""

&& TexT_Descripcion.Text != "")
{
String ValorItem = "";

if (Combo_tipo.SelectedItem == item1){
ValorItem = "Docencia";
}
else
if (Combo_tipo.SelectedItem == item2){
ValorItem = "Investigacion";
}
else
if (Combo_tipo.SelectedItem == item3)
{
ValorItem = "Extension";
}
if (ValorItem!="")
{
Datos.Datos_Actividades.Add(new Activity
{
Nombre = TexT_Nombre.Text,
Nombre_docente = TexT_Docente.Text,
Tipo_activity = ValorItem,
Descripcion_activity = TexT_Descripcion.Text
});
rootFrame.GoBack();
}
}
}
}
}
}
Mainpage.xaml
using ActividadesUnicor.View;
using ActividadesUnicor.ViewModel;
using Microsoft.Toolkit.Uwp.Notifications;
using System;
using System.IO;
using System.Linq;
using Windows.UI.Core;
using Windows.UI.Notifications;
using Windows.UI.Popups;

http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace ActividadesUnicor
{
/// <summary>
/// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro
de un objeto Frame.
/// </summary>
public sealed partial class MainPage : Page
{
ListData Datos = (ListData)Application.Current.Resources["Datos"];
public MainPage()
{
private void Agregar(object sender, RoutedEventArgs e)

{
Frame.Navigate(typeof(Agregar));
}
private void Tiles(object sender, RoutedEventArgs e)

{
Frame.Navigate(typeof(Tiles), listdata);
}
}
Tiles.xaml
using System;
using System.IO;
using System.Linq;
using Microsoft.Toolkit.Uwp.Notifications;
using Windows.UI.Notifications;
http://go.microsoft.com/fwlink/?LinkId=234238
namespace ActividadesUnicor.View
{
/// <summary>
/// Una página vacía que se puede usar de forma independiente o a la que se puede navegar
dentro de un objeto Frame.
/// </summary>
public sealed partial class Tiles : Page
{
int Tipo_1 = 0;
int Tipo_2 = 0;
int Tipo_3 = 0;
String Descripcion = "";
public Tiles()
{
}
protected override void OnNavigatedTo(NavigationEventArgs arg)

{
if (arg != null)
{
ListView listdata = (ListView)arg.Parameter;
foreach (Activity item in listdata.Items)
{
if (item.Tipo_activity == "Docencia")
{
Tipo_1++;
}
if (item.Tipo_activity == "Investigacion")
{
Tipo_2++;
}
if (item.Tipo_activity == "Extension")
{
Descripcion = item.Descripcion_activity;
Tipo_3++;
}
}
}
private void Docencia(object sender, RoutedEventArgs e)

{
Text.Text = "docencia" + Tipo_1;
var tileContent = new TileContent()
{
Visual = new TileVisual()
{
TileSmall = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children ={
new AdaptiveText()
{
Text = "Docencia",
HintStyle = AdaptiveTextStyle.CaptionSubtle,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = Convert.ToString(Tipo_1),
HintStyle = AdaptiveTextStyle.Base,
}
}
}
}
}
};
// Create the tile notification

var tileNotif = new TileNotification(tileContent.GetXml());
// And send the notification to the primary tile

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotif);
}
private void Extension(object sender, RoutedEventArgs e)

{
Text.Text = "Extension" + Tipo_3;
{
{
TileWide = new TileBinding()

{
{
Children ={
new AdaptiveGroup(){
Children ={
new AdaptiveSubgroup()
{
HintWeight = 1,
Children =
{
new AdaptiveText()
{
Text = "Numero",
},
new AdaptiveText()
{
Text = Convert.ToString(Tipo_3),
}
}
},
{
HintWeight = 1,
Children =
{
new AdaptiveText()
{
Text = "Extension",
},
new AdaptiveImage()
{
Source = "Assets/Iconos/Red1.jpg",
HintRemoveMargin = true
}
}
},
{
HintWeight = 1,
Children =
{
new AdaptiveText()
{
Text = "Drescripcion",
},
new AdaptiveText()
{
Text = Descripcion,
}
}
}
}
}
}
}
}
}
};


}
private void Investigacion(object sender, RoutedEventArgs e)
{
Text.Text = "Investigacion" + Tipo_2;
{
{
TileMedium = new TileBinding()

{
{
Children ={
new AdaptiveText()
{
Text = "Investigacion",
},
new AdaptiveText()
{
Text = ""+Tipo_2,
HintStyle = AdaptiveTextStyle.CaptionSubtle,
}
},
PeekImage = new TilePeekImage()
{
Source = "/Assets/Iconos/Universidad-de-Cordoba-1.jpg"
}
}
}
}
};


}
}
}
BindableBase.cs
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace ActividadesUnicor.Services
{
/// <summary>
/// Implementation of <see cref="INotifyPropertyChanged"/> to simplify models.
/// </summary>
[Windows.Foundation.Metadata.WebHostHidden]
public abstract class BindableBase : INotifyPropertyChanged
{
/// <summary>
/// Multicast event for property change notifications.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Checks if a property already matches a desired value. Sets the property and
/// notifies listeners only when necessary.
/// </summary>
/// <typeparam name="T">Type of the property.</typeparam>
/// <param name="storage">Reference to a property with both getter and setter.</param>
/// <param name="value">Desired value for the property.</param>
/// <param name="propertyName">Name of the property used to notify listeners. This
/// value is optional and can be provided automatically when invoked from compilers that
/// support CallerMemberName.</param>
/// <returns>True if the value was changed, false if the existing value matched the
/// desired value.</returns>
protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String
propertyName = null)
{
if (object.Equals(storage, value)) return false;
storage = value;
this.OnPropertyChanged(propertyName);
return true;
}
/// <summary>
/// Notifies listeners that a property value has changed.
/// </summary>
/// <param name="propertyName">Name of the property used to notify listeners. This
/// value is optional and can be provided automatically when invoked from compilers
/// that support <see cref="CallerMemberNameAttribute"/>.</param>
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var eventHandler = this.PropertyChanged;
if (eventHandler != null)
{
eventHandler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
Activity.cs
using ActividadesUnicor.Services;
using System;
using System.Linq;
using System.Text;
namespace ActividadesUnicor.Model
{
class Activity: BindableBase
{
private string NombreActividad;
private string NombreDocente;
private string Tipo;
private string Descripcion;
public string Nombre

{
get { return NombreActividad; }
set {SetProperty(ref NombreActividad, value); }
}
public string Nombre_docente

{
get { return NombreDocente; }
set { SetProperty(ref NombreDocente, value); }
}
public string Tipo_activity

{
get { return Tipo; }
set { SetProperty(ref Tipo, value); }
}
public string Descripcion_activity

{
get { return Descripcion; }
set { SetProperty(ref Descripcion, value); }
}
}
}
ListActivity.cs
using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
namespace ActividadesUnicor.Model
{
class ListActivity: ObservableCollection<Activity>
{
}
}
App.recurso.
APP Inicio.
AGREGAR
APP FINAL
TILES
TILES FINAL.
REFERENCIAS
[1] Microsoft. (2017). Tiles for UWP apps. Recuperado de https://docs.microsoft.com/en-

us/windows/uwp/design/shell/tiles-and-notifications/creating-tiles
[2] Otero, C. (2016). Personaliza las Tiles del menú Inicio en Windows 10. Recuperado de
https://as.com/betech/2016/09/29/portada/1475152209_109402.html
[3] Microsoft. (2017)- Create Adaptative Tiles. Recuperado de https://docs.microsoft.com/en-

us/windows/uwp/design/shell/tiles-and-notifications/create-adaptive-tiles

Laboratorio Tiles

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Laboratorio Tiles

Încărcat de

Drepturi de autor:

Formate disponibile

Modulo Plataforma Windows 10

LABORATORIO TILES VISUAL STUDIO

Esneyder Espitia Peña.

Carmelo Argel Mestra.

Arsesio Rivera Hernández.

Oscar Carreño González.

Jorge Galván Navarro.

La Universidad de Córdoba como política ha definido la implementación de un sistema de

La aplicación debe contemplar 3 vistas:

Nota: Utilizar el patrón MVVM tendrá bonificación en la calificación final.

TILES PARA APLICACIONES UWP.

Configurar Tile Predeterminado:

<nombre de la imagen>. escala- <factor de escala>. <extensión de archivo de imagen>

1. Creamos organización del proyecto.

En el archivo app.xaml se encuentran los estilos a nivel de aplicación.

// No repetir la inicialización de la aplicación si la ventana tiene contenido todavía,

// Poner el marco en la ventana actual.

public ListActivity Datos_Actividades

// La plantilla de elemento Página en blanco está documentada en

private void MainPage_BackRequested(object sender, BackRequestedEventArgs e)

private void crear(object sender, RoutedEventArgs e)

if (TexT_Nombre.Text != "" && TexT_Docente.Text != "" && TexT_Descripcion.Text != ""

String ValorItem = "";

// La plantilla de elemento Página en blanco está documentada en

private void Agregar(object sender, RoutedEventArgs e)

private void Tiles(object sender, RoutedEventArgs e)

protected override void OnNavigatedTo(NavigationEventArgs arg)

private void Docencia(object sender, RoutedEventArgs e)

// Create the tile notification

// And send the notification to the primary tile

private void Extension(object sender, RoutedEventArgs e)

TileWide = new TileBinding()

// Create the tile notification

// And send the notification to the primary tile

TileMedium = new TileBinding()

// Create the tile notification

// And send the notification to the primary tile

public string Nombre

public string Nombre_docente

public string Tipo_activity

public string Descripcion_activity

[1] Microsoft. (2017). Tiles for UWP apps. Recuperado de https://docs.microsoft.com/en-

[3] Microsoft. (2017)- Create Adaptative Tiles. Recuperado de https://docs.microsoft.com/en-

S-ar putea să vă placă și