Monthly Archives: octubre 2015

#VSGALLERY – Template to quickly create a #Windows10 Universal App with navigation panels in #VS2015

Hola!

Visual Studio extension’s Friday again! Today extension is a timer saver Nav Pane App Template. This extension adds a new project type in the Universal applications category, which already has implemented a navigation model based on panels. This is something that is quite popular right now, the good news is that this extension saves you one morning to put everything together.

Once we have created a new app, we can find several interesting stuff in the new project

  • The [NavMenuItem] class, which is where the elements of the SplitView
    The [AppShell.xaml.cs] class, which is where are defined the elements of the menu, for example

Finally, the app running in the next video, which like all WUAs, is responsive and very pretty..

Saludos @ Madrid

/El Bruno

References


Filed under: EnglishPost, Visual Studio 2015, Visual Studio Gallery, Windows 10 Tagged: English Post, Visual Studio 2015, Visual Studio Gallery, Windows 10

#VSGALLERY – Plantilla para una #Windows10 Universal App con navegacion con paneles #VS2015

Hola!

Otra vez viernes de extensiones. Y esta de hoy es de las que te ahorran de tiempo: Nav Pane App Template La extensión agrega un nuevo tipo de proyecto para aplicaciones universales, que trae implementado un modelo de navegación basado en paneles. Esto es algo que está bastante claro como hacerlo desde hace un tiempo, lo bueno es que esta extensión te ahorra una mañana de poner todas las partes en orden.

Una vez creada la app, podemos ver en la misma varias cosas interesantes

  • La clase [NavMenuItem], que es la que se encarga de los elementos del SplitView
  • La clase [AppShell.xaml.cs], que es donde se definen los elementos del menú, por ejemplo

Finalmente, la app en ejecución, que como toda WUA, es responsive y muy bonita.

Saludos @ Madrid

/El Bruno

References


Filed under: Visual Studio 2015, Visual Studio Gallery, Windows 10 Tagged: Visual Studio 2015, Visual Studio Gallery, Windows 10

#MSBAND – Update Tiles live data with #VS2015 and #Windows10

Hola!

Today it is time to show how we can update the information displayed in a Tile in real time. To update the information we need to know

  • The Id of the Tile
  • The Id of the Page
  • The Ids of the controls within the Page

The following code example shows a class that these identifiers are stored as properties and constants. And in line 50, the SetTileData() operation updates the information for labels, bar codes and buttons with these Ids.

To see this example in execution, I created a timer to each a second generates random information and update it in the band.

Finally, the following video shows how the App Windows 10, generates random information and sends it to the Band. It shows this information in the corresponding Page

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, EnglishPost, Microsoft Band, Video, Visual Studio 2015, Windows 10 Tagged: Code Sample, English Post, Microsoft Band, Video, Visual Studio 2015, Windows 10

#MSBAND – Actualizando información en Tiles con #VS2015 y #Windows10

Hola!

Hoy es momento de mostrar cómo podemos actualizar la información que se muestra en un Tile. Para actualizar la información necesitamos conocer

  • El Id del Tile
  • El Id del Page
  • Los Ids de los controles dentro de la Page

El siguiente ejemplo de código, muestra una clase en la que se registran estos identificadores. Y en la línea 50, la operación SetTileData() actualiza la información para etiquetas, códigos de barras y botones con estos Ids.

Para ver este ejemplo en ejecución, he creado un timer que cada un segundo genera información aleatoria y la actualiza en la band.

Finalmente, el siguiente video, muestra como la App Windows 10, genera información aleatoria y la envía a la Band. En la misma se muestra esta información en la Page correspondiente

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, Microsoft Band, Visual Studio 2015, Windows 10 Tagged: Code Sample, Microsoft Band, Visual Studio 2015, Windows 10

#MSBAND – Suscribe to User interaction with #MicrosoftBand and #VS2015

Hola!

Today I start from back to forward. First a video where we can see

  • A deployed custom Tile in a Band, with
    • A label
    • A barcode
    • 2 buttons
  • A Windows Universal Application on Windows 10 which
    • Connects to the Band
    • Capture the clicks of a user on the buttons
    • Displays the button pressed in the app

In the previous post I wrote on how to create this Custom Tile. In the post, I also wrote about the importance of the identifiers for the Tile and the Tile controls. In this example, these values are a GUID for a Tile and a series of constants for the Tile UI elements.

The simplest events of interaction of a user with the Band that we can capture are

  • Open or close a Tile
  • Press a button

The class [TileManager] is the one who publish events for these scenarios. In the following code example, we can see the subscription to 2 events. Also, when a Tile is Opened the status bar is updated with a custom message.

The capture of the mouse clicks on buttons is similar. Although it is important to note that we perform a “filter” of the captured actions to see if this action is from our tile (line 94). Then as we can identify the button by its identifier and work on it.

In the following code example, I update a message in the UI of the app with the specific button pressed..

And now you can see the video again and you will surely have lot more sense.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, EnglishPost, Microsoft Band, Video, Visual Studio 2015, Windows 10 Tagged: Code Sample, English Post, Microsoft Band, Video, Visual Studio 2015, Windows 10

#MSBAND – Capturando la interacción de un usuario en la #MicrosoftBand #VS2015

Hola!

Hoy empiezo de atrás hacia adelante. En primer lugar un video en el que podemos ver

  • Un Tile personalizada desplegada en una Band, con
    • una etiqueta
    • un código de barras
    • 2 botones
  • Una Windows Universal Application en Windows 10 que
    • Se conecta a la Band
    • Captura los clics de un usuario sobre los botones
    • Muestra el botón presionado en la app

En el post anterior vimos cómo crear esta Custom Tile. En el mismo, remarqué la importancia de los identificadores para el Tile y para los controles. En este ejemplo, estos valores son un GUID para un Tile y una serie de constantes para los elementos de la Tile.

Los eventos de interacción de un usuario con la Band más simples que podemos capturar son

  • Abrir o cerrar un Tile
  • Presionar un botón

La clase [TileManager] nos ofrece una serie de eventos para estos casos. En el siguiente ejemplo de código podemos ver la suscripción a estos 2 eventos y además como se actualiza la status bar cuando se abre un tile Custom.

La captura de los clics en los botones es similar. Aunque es importante tener en cuenta que debemos hacer un “filtro” de las acciones capturadas para ver si esta acción es de nuestro Tile (línea 94). Luego ya podemos identificar el botón por su identificador y trabajar sobre el mismo. En el siguiente ejemplo de código, actualizo un mensaje en la UI de la app con el botón presionado.

Y ahora ya puedes ver el video nuevamente y seguramente tendrá mucho más sentido.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, Microsoft Band, Visual Studio 2015, Windows 10 Tagged: Code Sample, Microsoft Band, Visual Studio 2015, Windows 10

#MSBAND – About #Tiles format, and how to create complex ones

Hola!

Today I’m going to review a little deeper the way in which Tiles are defined. The Microsoft Band SDK explains in detail this topic in Chapter 8 “Customizing Tile Layouts”. This chapter explains the available controls, the available dimensions and much more information concerning the design of tiles.

After programming a little on this model, and perhaps by professional deformation, my instinct leads me to separate my code in a view and a model. With this in mind, the creation of a Tile could be split into 3 parts:

  • Tile Definition
    • It defines the Tile Id, name and images that will define it in the Band
  • Page Layout User Interface
    • It is the graphic representation of the elements that compose the page that is displayed when you press on the tile
  • Page Layout Data
    • Is the data associated with the previous graphic

In yesterday’s sample, the only control that was associated with a Page of the tile was a button. That’s why the separation is very simple. The comments indicate each of the parties

If we want to create a more complex model, we could add a little text and a bar code. The following design sample

  • A ScrollFlowPanel control with vertical orientation as the main container
  • A title in the header with a TextBlock
  • A control to display information from a barcode
  • A control ScrollFlowPanel with horizontal orientation for display 2 buttons

The code for the definition of this page would be as follows

It is important to emphasize, each control Ids are passed as parameter since they will be those using later data. The section of sample data would look like:

And finally, the Association of all elements together, including the ids of controls would look like:

When the tile is displayed in the band is ugly enough for me, but …

With a little scroll down, we can see how the controls are adjusted automatically and how we can interact with them.

In the next one, I’ll explain how to interact with this buttons.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, EnglishPost, Microsoft Band, Visual Studio 2015 Tagged: Code Sample, English Post, Microsoft Band, Visual Studio 2015

#MSBAND – Sobre el formato de las #Tiles, y algunas más complejas

Hola!

Hoy voy a repasar un poco más la forma en la que se definen y agregan Tiles a la Microsoft Band. El punto de partida debería ser el SDK, en el mismo se explica en detalle cómo funciona un Tile. El capítulo 8 “Customizing Tile Layouts” explica los controles con los que podemos trabajar, las dimensiones disponibles y mucha más información relativa al diseño de tiles.

Después de programar un poco sobre este modelo, y tal vez por deformación profesional, el instinto me ha llevadp a separar la programación en una vista y en un modelo de datos. Es por eso que he decidido podría separar en 3 partes la creación de un Tile:

  • Tile Definition
    • Define el Tile Id, el Nombre y las imágenes que lo definirán en la Band
  • Page Layout User Interface
    • Es la representación gráfica de los elementos que componen la página que se muestra cuando se presiona sobre el tile
  • Page Layout Data
    • Son los datos asociados a la representación gráfica anterior

En el ejemplo del post de ayer, el único control que se mostraba asociado una Page del tile era un botón. Es por eso que la separación queda muy simple.

El en siguiente ejemplo de código, los comentarios indican cada una de las 3 partes que comenté antes

Si queremos crear una vista un poco más compleja podríamos agregar un poco de texto y un control de código de barras. La siguiente imagen, puede servir de referencia y en la misma se incluyen

  • Un control ScrollFlowPanel con orientación vertical como contenedor principal
  • Un título en la cabecera con un TextBlock
  • Un control para mostrar información de un código de barras
  • Un control ScrollFlowPanel con orientación horizontal para mostrar 2 botones

El código para la definición de la UI de esta page sería el siguiente

Es importante remarcar, que los identificadores de cada control se pasan como parámetro ya que los mismos serán los que se usen para luego asociar los datos em otra operación. La sección de muestra de datos quedaría como muestra el siguiente ejemplo de código:

Y finalmente, la asociación de todos los elementos juntos, incluidos los ids de los controles quedaría así:

En ejecución, la vista queda deja bastante que desear, pero

Con un poco de scroll hacia abajo, podemos ver como se ajustan los controles automáticamente.

En el próximo post, mostraré como capturar las interacciones de los usuarios cuando utilizan una página asociada a un Tile en la Band.

 

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, Microsoft Band, Visual Studio 2015, Windows 10 Tagged: Code Sample, Microsoft Band, Visual Studio 2015, Windows 10

#MSBAND – List, add and delete Tiles using an #Windows10 app and Visual Studio 2015

Hola!

After a couple of post on how to connect and use C# to access a Microsoft Band information, today’s post will explain about how we can work with the Tiles of in a Band using C# code. In the references section, there are a couple of links explaining how Tiles works in in a Band. In this post I will explain the most important actions we have to work with Tiles

  • We will use the TileManager class to work with Tiles
  • With this class, you will be able
    • get the custom Tiles added to the Band
    • add a Tile
    • delete a Tile
    • find out the available space to add Tiles
    • Etc.

Let’s start with an easy sample

Add or remove a Tile

The essential features that we have to define the moment of creating a Tile are

  • Id (guid) to identify the Tile
  • A name for the Tile
  • 2 images to identify it, 24 x 24 pixels and 46 x 46 pixels

For this example, the images that I will use will be the following:

And the code to add a Tile is as follows.

  • 142 to 150 lines, defines the Tile, and also the contents of the
  • Lines 152 to 152, removed the Tile (if it exists) and then add the Tile with your content

At this time, we will see that it starts the process of synchronization between the app on Windows 10 and the band. This starts with a notification in the Band while the Tile is removed:

And confirmation on the App to add this tile to the Band.

Once the process is finished, you will see the new Tile between the band.

The elimination, only shows the synchronization and then we will see that the tile is no longer between the Band.

List the Tiles custom in the Band

To list the tiles custom, also we will use the TileManager class. The following example shows a Message Dialog with the data of the Tiles custom.

The message of example shown would be the following

And that’s all for today, in the next few posts we will see how to work with a user interactions in a Tile.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References


Filed under: Code Sample, EnglishPost, Microsoft Band, Visual Studio 2015, Windows 10 Tagged: Code Sample, English Post, Microsoft Band, Visual Studio 2015, Windows 10

#MSBAND – Listar, crear y eliminar Tiles desde una app #Windows10 con Visual Studio 2015

Hola!

Después de ver como conectarnos y utilizar C# para acceder a la información de una Microsoft Band, hoy veremos una de las acciones más interesantes que podemos hacer: trabajar con las Tiles de una Band. En la sección de referencias, hay un par de links donde se explica cómo funcionan las tiles en una Band. En este post explicaré las acciones más importantes que tenemos para trabajar con Tiles

  • Utilizaremos la clase TileManager para trabajar con Tiles
  • Con esta clase podremos
    • Obtener los Tiles personalizados agregados a la Band
    • Agregar un Tile
    • Eliminar un Tile
    • Averiguar el espacio disponible para agregar Tiles
    • o Etc

Empecemos con los ejemplos más simples

Agregar o Eliminar un Tile

Las características fundamentales que tenemos que definir al momento de crear un Tile son

  • Un id (guid) para identificar el mismo
  • Un nombre para el Tile
  • 2 imágenes para identificarlo, de 24 x 24 pixels y de 46 x 46 pixels

Para este ejemplo, las imágenes que utilizaré serán las siguientes:

Y el código para agregar un Tile es el siguiente.

  • En las líneas 142 a 150, se define el Tile, y además el contenido del mismo
  • Las líneas 152 a 152, eliminan el Tile (si es que existe) y luego agrega el Tile con su contenido

En este momento veremos que se inicia el proceso de sincronización entre la app en Windows 10 y la band. Esto comienza con una notificación en la Band mientras se elimina el Tile:

Y la confirmación en la App para agregar este tile a la Band.

Una vez finalizado el proceso, podremos ver el nuevo Tile entre las opciones de la band.

La eliminación, solo muestra la sincronización y luego veremos que el tile no está más entre las opciones de la Band.

Listar las Tiles personalizadas en la Band

Para listar las tiles personalizadas, también utilizaremos la clase TileManager. El siguiente ejemplo muestra un Message Dialog con la información de las Tiles personalizadas.

El mensaje de ejemplo mostrado sería el siguiente

Y eso es todo por hoy, en próximos posts veremos cómo trabajar con las interacciones de un usuario en un Tile.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

Microsoft Band Get Started

Microsoft Band SDK

Microsoft Band Tiles

Microsoft Band Experience Design Guidelines

– El Bruno, Como conectar una Microsoft Band a un Windows 10 device

– El Bruno, Conexión y acceso a los sensores de una Band en una app Windows 10 con Visual Studio 2015


Filed under: BlueTooth, Bluetooth Low Energy, Code Sample, Microsoft Band, Visual Studio 2015, Windows 10 Tagged: Bluetooth, BlueTooth Low Energy, Code Sample, Microsoft Band, Visual Studio 2015, Windows 10
Página 1 de 41234