Jorge Serrano
  • Home

Operaciones básicas de programación con Metro y Windows 8 (VI)

  • By jorge
  • Jun-29-2012
  • Sin categoría
  • 1 Comment.

Navegación entre páginas de una aplicación – Avanzado

Parte I

Parte II

Parte IV

 

Navegación entre páginas de una aplicación – Avanzado (III)

Agregando imágenes a nuestro proyecto

Las imágenes de nuestra aplicación las podemos situar donde consideremos oportuno, pero lo más obvio y rápido es situarla en la carpeta Images.

En el Explorador de Soluciones, encontrará un botón que indica Show All Files.

Esta opción nos permite ver los archivos visibles en el proyecto y los que no son visibles (porque no se han cargado) en el mismo.

En mi carpeta Images he colocado una imagen por cada planeta, por lo que haciendo clic sobre Show All Files, me he situado sobre la carpeta Images y he pulsado el botón derecho del ratón sobre cada imagen y he elegido la opción Include in Project para incluirlas en el proyecto.

Preparando la página principal

Nos hemos centrado bastante en la página secundaria y en las clases que utilizaremos para cargar datos, pero aún no nos hemos detenido en la página principal.

Para nuestra página principal, he querido agregar una imagen lateral en el lado izquierdo con los diferentes planetas del sistema solar, a modo de imagen genérica para darle un aspecto menos tosco a nuestra aplicación.

Además, he agregado un control HyperlinkButton para que al pulsar sobre él, podamos ir a la página secundaria BasicPage.xaml.

También he agregado un control Button para que al hacer clic sobre él, cerremos la aplicación.

Y para finalizar, he agregado un control Image que mostrará la imagen del planeta seleccionado en la página secundaria, y dos controles TextBlock para mostrar los datos del planeta seleccionado.

Nuestra ventana quedará de la siguiente manera.

Y el código XAML asociado a MainPage.xaml corresponderá con el siguiente código.

   1: <Page

   2:     x:Class="Sample2.MainPage"

   3:     IsTabStop="false"

   4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   6:     xmlns:local="using:Sample2"

   7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   9:     mc:Ignorable="d">

  10:  

  11:     <Grid Background="Black">

  12:         <Image HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" 

  13:                Source="ms-appx:///Images/Planetas_Sistema_Solar.png" Height="598" Width="202" />

  14:         <Canvas>

  15:             <HyperlinkButton Margin="300,100,0,0" Content="Seleccione un planeta del Sistema Solar" 

  16:                              Foreground="DarkGoldenrod" FontSize="20" Click="HyperlinkButton_Click_1" />

  17:             <Button x:Name="btnSalir" Content="Volver a casa" Canvas.Left="40" Canvas.Top="620" 

  18:                     FontSize="16" BorderThickness="1" Background="Black" BorderBrush="BlueViolet" 

  19:                     Foreground="DarkSlateBlue" Click="btnSalir_Click_1" />

  20:             <Image x:Name="imgPlaneta" Height="200" Canvas.Left="400" Canvas.Top="220" Width="200" />

  21:             <TextBlock x:Name="tbNombrePlaneta" Canvas.Top="440" Canvas.Left="400" 

  22:                        Foreground="DarkOrange" FontSize="24" />

  23:             <TextBlock x:Name="tbDiametroPlaneta" Canvas.Top="480" Canvas.Left="400" 

  24:                        Foreground="Orange" FontSize="20" />

  25:         </Canvas>

  26:     </Grid>

  27: </Page>

Programando la página principal

Una vez que hemos preparado la interfaz de usuario en ambas páginas y que hemos preparado las clases en las que vamos a cargar los datos, vamos a escribir el código de la página principal.

En primer lugar nos centraremos en el constructor de la clase MainPage.xaml.

Con el fin de que accedamos a los datos de la página que teníamos cargados al regresar a nuestra página, debemos cachear la instancia de nuestra página.

Para ello, utilizaremos la siguiente instrucción:

   1: this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

Nuestro constructor quedará por lo tanto de la siguiente forma:

   1: /// <summary>

   2: /// Constructor de la clase.

   3: /// </summary>

   4: public MainPage()

   5: {

   6:     this.InitializeComponent();

   7:     // Habilitamos la caché.

   8:     this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

   9: } // MainPage Constructor

A continuación, vamos a preparar los eventos de los dos controles de la página principal, el del control Button y el del control HyperlinkButton.

El código de estos dos eventos quedarán de la siguiente manera:

   1: private void btnSalir_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     // Cerramos la aplicación.

   4:     Application.Current.Exit();

   5: } // btnSalir_Click_1

   6:  

   7: private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)

   8: {

   9:     // Navegamos a la página BasicPage1.

  10:     this.Frame.Navigate(typeof(BasicPage1));

  11: } // HyperlinkButton_Click_1

Nota: Aunque aquí me he sacado de la chistera el botón de cerrar la aplicación, esto en Metro no está permitido, y nuestra aplicación no pasaría la validación del Store de Windows 8. Ojo con esto.

El último evento a tener en cuenta es el evento OnNavigatedTo de la página.

(…Continúa…)

Comments

One Responseso far

  1. anonymous dice:
    29 junio, 2012 a las 8:04 pm

    Navegación entre páginas de una aplicación – Avanzado Parte I Parte III Parte IV   Navegación entre

    Responder

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

← Previous Post Next Post →

Jorge Serrano

MVP Reconnect


¡Subscríbete a mi canal!
YouTube

Donaciones
Donation

Entradas recientes

  • Go – Arrays
  • Go – Operators
  • Go – Constants
  • Go – Tipos de Datos
  • Go – Variables
  • Hello Go-rld!
  • Introducción a Go o Golang
  • JSON Patch en ASP.NET Core 5 Web API
  • Null Checking en C#
  • ¿Porqué mi página web por defecto de ASP.NET Core no se vé en mi Azure Web App y me da un 404?

Categorías

  • .NET 5
  • .NET Core
  • .NET Core 3.0
  • .NET Core 3.1
  • .NET Framework 2.0
  • .NET Framework 3.0
  • .NET Framework 3.5
  • .NET Framework 4.0
  • .NET Framework 4.5
  • .NET Framework 4.6
  • .NET Framework 4.7
  • .NET Framework 4.8
  • .NET Standard 2.0
  • .NET Standard 2.1
  • AMQP
  • Android
  • Angular
  • API REST
  • Apple
  • Apple iOS
  • Apple macOs
  • Arquitectura
  • ASP.NET
  • ASP.NET Core
  • ASP.NET Core 3
  • ASP.NET Core 5
  • AWS
  • Azure App Service
  • Azure Application Insights
  • Azure Cosmos DB
  • Azure Database Migration Service
  • Azure Databricks
  • Azure DevOps
  • Azure Event Grid
  • Azure Functions
  • Azure IoT
  • Azure Portal
  • Azure PowerShell
  • Azure Queue Storage
  • Azure SQL
  • Azure Storage
  • Azure Virtual Datacenter
  • Azure WebApps
  • Big Data
  • Bing
  • Blazor
  • Blog
  • Bots
  • C#
  • C# 7.0
  • C# 7.1
  • C# 7.2
  • C# 7.3
  • C# 8.0
  • C# 9.0
  • Channel 9
  • Codeplex
  • Codespaces
  • Containers
  • Debugging
  • DevOps
  • Docker
  • Electron
  • Entity Framework
  • Entity Framework Core
  • Entity Framework Core 3.0
  • Entity Framework Core 5
  • Eventos
  • F#
  • FaaS
  • FeatureFlags
  • FeatureToggles
  • Feeds
  • Fluent Assertions
  • General
  • GIMP
  • Git
  • GitHub
  • Go
  • Google
  • Google Analytics
  • Gradle
  • gRPC
  • GSA
  • Historia de la Informática
  • HoloLens
  • HtmlAgilityPack
  • IdentityServer4
  • Inkscape
  • Ionic
  • iOS
  • IoT
  • Java
  • JavaScript
  • JDBC
  • JSON
  • Kubernetes
  • Lenguajes de Programación
  • Libros y Cursos
  • LINQ
  • Linux
  • LiteDB
  • Machine Learning
  • macOS
  • Microservices
  • Microsoft
  • Microsoft .NET Framework 4.5
  • Microsoft 365
  • Microsoft Azure
  • Microsoft Build
  • Microsoft Ignite
  • Microsoft Learn
  • Microsoft Orleans
  • Microsoft Surface Go
  • Microsoft Teams
  • ML.NET
  • MQTT
  • MRO
  • MS-DOS
  • MsCoders Madrid
  • MVP
  • NancyFx
  • Node.js
  • NoSQL
  • NuGet
  • NUnit
  • OData
  • ODP.NET Core
  • Office 2007
  • Office 2010
  • Office 2013
  • Office 2016
  • Office 2019
  • Office 365
  • Open Source
  • Open XML SDK
  • Opinión
  • Orchard CMS
  • OT
  • PaaS
  • Patterns
  • PdfSharpCore
  • Performance
  • PHP
  • Postman
  • Power BI
  • PowerShell
  • PowerShell Core
  • Productividad
  • Project Server 2019
  • R
  • Rendimiento
  • Scala
  • Scraper
  • Security
  • Serverless
  • Service Fabric
  • SharePoint Server 2019
  • SignalR
  • Sin categoría
  • Sistemas Distribuidos
  • Skype
  • Skype for Business Server 2019
  • Small Basic Online
  • SQL Server 2005
  • SQL Server 2008
  • SQL Server 2012
  • SQL Server 2014
  • SQL Server 2016
  • SQL Server 2017
  • SQL Server 2019
  • STOMP
  • Swagger
  • Testing
  • TFS 2017
  • TFS 2018
  • Tools
  • TypeScript
  • Unity
  • UWP
  • UX
  • Visio
  • Visual Basic
  • Visual Studio 2010
  • Visual Studio 2012
  • Visual Studio 2013
  • Visual Studio 2015
  • Visual Studio 2017
  • Visual Studio 2017 for Mac
  • Visual Studio 2019
  • Visual Studio 2019 for Mac
  • Visual Studio App Center
  • Visual Studio Code
  • Visual Studio IntelliCode
  • Visual Studio Live Share
  • Visual Studio Live Share Audio
  • Visual Studio Online
  • VS Anywhere
  • Vue.js
  • Web API
  • WebAssembly
  • WinDbg
  • Windows
  • Windows 10
  • Windows Compatibility Pack
  • Windows Phone 10
  • Windows Phone 7
  • Windows Phone 8
  • Windows Server 2008
  • Windows Server 2012
  • Windows Server 2016
  • Windows Server 2019
  • Windows Service
  • WinForms
  • WinUI
  • WPF
  • Xamarin
  • Xbox
  • Xcode
  • Xiaomi Mi Band 2
  • xUnit
  • YAML

Archivos

  • enero 2021
  • diciembre 2020
  • noviembre 2020
  • octubre 2020
  • septiembre 2020
  • agosto 2020
  • julio 2020
  • junio 2020
  • mayo 2020
  • abril 2020
  • marzo 2020
  • febrero 2020
  • enero 2020
  • diciembre 2019
  • noviembre 2019
  • octubre 2019
  • septiembre 2019
  • agosto 2019
  • julio 2019
  • junio 2019
  • mayo 2019
  • abril 2019
  • marzo 2019
  • febrero 2019
  • enero 2019
  • diciembre 2018
  • noviembre 2018
  • octubre 2018
  • septiembre 2018
  • agosto 2018
  • julio 2018
  • junio 2018
  • mayo 2018
  • abril 2018
  • marzo 2018
  • febrero 2018
  • enero 2018
  • diciembre 2017
  • noviembre 2017
  • octubre 2017
  • septiembre 2017
  • agosto 2017
  • julio 2017
  • junio 2017
  • febrero 2015
  • octubre 2014
  • junio 2014
  • marzo 2014
  • febrero 2014
  • enero 2014
  • diciembre 2013
  • septiembre 2013
  • agosto 2013
  • julio 2013
  • junio 2013
  • abril 2013
  • febrero 2013
  • enero 2013
  • diciembre 2012
  • noviembre 2012
  • septiembre 2012
  • agosto 2012
  • junio 2012
  • mayo 2012
  • abril 2012
  • marzo 2012
  • febrero 2012
  • enero 2012
  • diciembre 2011
  • noviembre 2011
  • octubre 2011
  • septiembre 2011
  • agosto 2011
  • julio 2011
  • junio 2011
  • mayo 2011
  • abril 2011
  • marzo 2011
  • enero 2011
  • diciembre 2010
  • noviembre 2010
  • octubre 2010
  • septiembre 2010
  • agosto 2010
  • julio 2010
  • junio 2010
  • mayo 2010
  • abril 2010
  • marzo 2010
  • febrero 2010
  • enero 2010
  • diciembre 2009
  • noviembre 2009
  • octubre 2009
  • septiembre 2009
  • agosto 2009
  • julio 2009
  • junio 2009
  • mayo 2009
  • abril 2009
  • marzo 2009
  • febrero 2009
  • enero 2009
  • diciembre 2008
  • noviembre 2008
  • octubre 2008
  • septiembre 2008
  • agosto 2008
  • julio 2008
  • junio 2008
  • mayo 2008
  • abril 2008
  • marzo 2008
  • febrero 2008
  • enero 2008
  • diciembre 2007
  • noviembre 2007
  • octubre 2007
  • septiembre 2007
  • agosto 2007
  • julio 2007
  • junio 2007
  • mayo 2007
  • abril 2007
  • marzo 2007
  • febrero 2007
  • enero 2007
  • diciembre 2006
  • noviembre 2006
  • octubre 2006
  • septiembre 2006
  • agosto 2006
  • julio 2006
  • junio 2006
  • mayo 2006
About This Site

A cras tincidunt, ut tellus et. Gravida scel ipsum sed iaculis, nunc non nam. Placerat sed phase llus, purus purus elit.

Archives Widget
  • January 2010
  • December 2009
  • November 2009
  • October 2009
Categories
  • Entertainment
  • Technology
  • Sports & Recreation
  • Jobs & Lifestyle
Search
  • twitter

Powered by WordPress  |  Business Directory by InkThemes.

This site uses cookies: Find out more.