Jorge Serrano
  • Home

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

  • By jorge
  • Jun-30-2012
  • Sin categoría
  • 0 Comments.

Barras de botones o barras de aplicación

Parte I

 

Barras de botones o barras de aplicación (II)

Estilos a usar en los controles de la barra de aplicación

Los estilos utilizados en este ejemplo corresponden con los estilos que Microsoft nos ofrece y que nos simplifica el trabajo.

Situándonos en el Explorador de Soluciones y en nuestro proyecto Sample4, encontraremos dentro de la carpeta Common un fichero de nombre StandardStyles.xaml.

Este fichero contiene los estilos con los que podemos trabajar.

Si observamos el código XAML, veremos que por ejemplo para el control Button denominado Editar, utilizamos un estilo EditAppBarButtonStyle.

Como digo, este estilo no lo hemos creado, y hemos utilizado uno que Microsoft nos ha dado y que encontramos en el fichero de estilos mencionado anteriormente, StandardStyles.xaml.

   1: <Style x:Key="EditAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">

   2:         <Setter Property="AutomationProperties.AutomationId" Value="EditAppBarButton"/>

   3:         <Setter Property="AutomationProperties.Name" Value="Edit"/>

   4:         <Setter Property="Content" Value="&#xE104;"/>

   5: </Style>

Si nos fijamos bien en este código XAML, éste estilo utiliza a su vez el estilo AppBarButtonStyle que es un estilo genérico de comportamiento de un botón en la barra de botones de la aplicación.

Aquí también, encontramos algo que nos puede interesar.

Es la propiedad AutomationProperties.Name y que por defecto, tiene un valor Value a Edit.

También tenemos otra propiedad no menos interesante, de nombre Content y que tiene valor Value a &#xE104;.

Si quisiéramos cambiar el valor concreto para un idioma y otro distinto para otro idioma, deberíamos empezar a jugar con la localización de nuestra aplicación en Content.

Nota: Ver las entradas sobre localización que tratan la internacionalización de nuestras aplicaciones.

Es interesante ver que la propiedad Content corresponde con un código de escritura, ya que se utiliza una fuente de letra que encontraremos en el estilo AppBarButtonStyle.

Es el Setter siguiente:

   1: <Setter Property="FontFamily" Value="Segoe UI Symbol"/>

Y es que en Metro, podemos hacer uso de la fuente de letra Segoe UI Symbol.

Una fuente de letra Metro con códigos que corresponden con iconos ya prediseñados para ser utilizados en nuestras aplicaciones.

Un ejemplo de uso de esta fuente de letra y un código de la misma sería:

   1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

   2:         <Canvas>

   3:             <TextBlock Margin="200,200,0,0" FontFamily="Segoe UI Symbol" 

   4:                        FontSize="20" Text="Fotos &#xE114;" />

   5:         </Canvas>

   6: </Grid>

He incluso si quisiéramos aprovechar lo que Microsoft nos ofrece, podríamos crear un botón fuera de la propia barra de botones rizando el rizo de la siguiente manera:

   1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

   2:         <Canvas>

   3:             <Button Style="{StaticResource AppBarButtonStyle}"  

   4:                     Margin="200,200,0,0" FontFamily="Segoe UI Symbol" 

   5:                     FontSize="20" Content="&#xE114;" />            

   6:         </Canvas>

   7: </Grid>

No voy a descubrir ahora la bondad de los estilos, pero como podemos observar, podemos sacar mucho provecho de todo esto y en concreto de los estilos que encontraremos por defecto en el fichero StandardStyles.xaml.

Agregando eventos a un botón de la barra de aplicación

Como viene siendo habitual, la forma de agregar un evento a un botón de la barra de aplicación no difiere en nada con la forma estándar o habitual de hacerlo dentro del código XAML.

Imaginemos uno de los botones de la barra de aplicación. Bastará con indicarle el evento Click por ejemplo y asignarle el código del evento propiamente dicho.

   1: <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" 

   2:         Tag="Editar" Click="Edit_Click_1" />

Dentro del código del evento en C# para el caso de MainPage.xaml.cs, escribiremos las acciones correspondientes.

Agregando otros controles a la barra de aplicación

Ya comenté anteriormente, que en la barra de aplicación podíamos agregar los controles que consideráramos oportunos.

Imaginemos que de acuerdo a la barra de aplicación con la que hemos estado jugando, quisiéramos agregar un control TextBlock en el que mostrásemos la fecha y hora actual.

Podríamos insertar nuestro control en uno de los dos StackPanel que existen, pero vamos a crear un tercer StackPanel para que veamos como quedaría todo.

Nuestro control en código XAML quedaría de la siguiente manera:

   1: <TextBlock x:Name="FechaHora" Text="30/06/2012 11:56:12" FontSize="20" VerticalAlignment="Center" />

Y en nuestra barra de aplicación, los tres bloques o paneles StackPanel quedarían de la siguiente manera:

   1: <Page.BottomAppBar>

   2:         <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75" IsSticky="False" 

   3:                 Background="#055565" VerticalAlignment="Bottom">

   4:             <Grid>

   5:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

   6:                     <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />

   7:                     <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />

   8:                     <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />

   9:                 </StackPanel>

  10:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

  11:                     <TextBlock x:Name="FechaHora" Text="30/06/2012 11:56:12" FontSize="20" VerticalAlignment="Center" />

  12:                 </StackPanel>

  13:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

  14:                     <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />

  15:                     <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />

  16:                 </StackPanel>

  17:             </Grid>

  18:         </AppBar>

  19: </Page.BottomAppBar>

Nuestra aplicación en ejecución quedaría de la siguiente manera:

Comments

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.