Menú elementos

En este post veremos el aspecto del menú que contiene los posibles elementos que podemos agregar a los recursos educativos y cómo lo desarrollamos.

El menú tendrá forma de acordeón, compuesto de tres secciones. En la primera de ella encontraremos dos botones, uno de ellos para acceder a imágenes que tengamos en nuestro disco duro y el otro para acceder a una pantalla donde podremos realizar búsquedas de imágenes en Flickr (esta opción la desarrollaremos en otro post más adelante). La segunda sección nos da la opción de insertar videos y audios que tengamos en nuestra máquina. Y la última de la secciones está enfocada a figuras (círculos y cuadrados) y texto.

El aspecto que queremos conseguir es el siguiente:

En el siguiente enlace podemos encontrar la solución de ejemplo con el UserControl correspondiente a este menú. Debemos copiar los estilos que aparecen en el fichero App.xaml, el código del fichero MenuElementos.xaml y MenuElementos.xmal.cs.

Megaupload: MenuElementos.zip

La parte de funcionalidad de cada botón se puede agregar en el fichero MenuElementos.xmal.cs.

Menú principal

Una vez que ya tenemos estructurado el marco de la aplicación, crearemos una barra en la parte superior como menú principal. En dicho menú recogeremos la siguiente funcionalidad:

• Archivo: Nuevo, Abrir y Guardar.
• Edición: Copiar, Cortar y Pegar.
• Descripción: SCORM.

Además en la parte derecha de la barra colocaremos dos botones, uno de ellos para el panel de configuración y el otro para la opción de pantalla completa.

El aspecto que queremos conseguir es el siguiente:

Para ello necesitamos agregar al proyecto un nuevo Silverlight User Control. Sobre el nombre del proyecto, botón derecho: Añadir/Nuevo Elemento/Silverlight/Silverlight User Control. Y le llamaremos MenuPrincipal.

En el siguiente enlace podemos encontrar la solución de ejemplo con el UserControl correspondiente a este menú. Debemos copiar los estilos que aparecen en el fichero App.xaml, el código del fichero MenuPrincipal.xaml y MenuPrincipal.xmal.cs.

Megaupload: Menuprincipal.rar

Estructura del marco de trabajo de la herramienta DigitalBook

Para comenzar con el desarrollo de la aplicación es conveniente establecer la estructura que tendrá el marco de trabajo. El marco de la aplicación tendrá el menú principal en la parte superior, el menú de elementos en el lateral izquierdo, la barra de propiedades en el lateral derecho, la barra de estado en la parte inferior y en el centro el marco donde ser visualizan las páginas.

El aspecto final que queremos conseguir es el que se muestra en la siguiente figura:

Para conseguir esta distribución y permitir que el aspecto se adapte a las dimensiones del navegador, donde más tarde se visualizará la aplicación, se dividirá el marco mediante una tabla con tres filas y tres columnas. El siguiente código lo debemos añadir en el fichero Page.xaml de la aplicación. De este modo tendremos dividido el marco tal y como queremos.

Establecemos las columnas que tendrá la aplicación con sus respectivos porcentajes de tamaño.80 indica 80 pixeles; 80* indica 80%

<Grid.ColumnDefinitions>

<ColumnDefinition Width="163" MinWidth="90"/>

<ColumnDefinition Width="90*" MinWidth="90"/>

<ColumnDefinition Width="170" MinWidth="100"/>

</Grid.ColumnDefinitions>

Establecemos las filas que tendrá la aplicación con sus respectivos porcentajes de tamaño

<Grid.RowDefinitions>

<RowDefinition Height="65" MinHeight="30"/>

<RowDefinition Height="70*" MinHeight="100"/>

<RowDefinition Height="20" MinHeight="20"/>

</Grid.RowDefinitions>