Mejores prácticas: diseño y visualización de cuadros de diálogo
Al diseñar y mostrar cuadros de diálogo en la aplicación de mapa, hay muchos factores a considerar como la forma de mostrar la interfaz de usuario (UI), el diseño y tema general, cómo lograr la integración sin problemas con el marco de aplicación actual, y si hay acciones que desea realizar a medida que se cierra el cuadro de diálogo o una vez que se ha cerrado, como la eliminación de una capa del mapa.
Visualizar la UI
Para visualizar la UI (cuadro de diálogo) con el Visor, la interfaz de programación de aplicaciones (API) de extensibilidad dispone de dos métodos: Mostrar ventana y Ocultar ventana. Estos métodos están disponibles fuera de MapApplication.Current. El método MapApplication.Current.ShowWindow muestra cualquier Elemento del marco en una ventana de cuadro de diálogo flotante. Para hacerlo, simplemente pase el objeto que desea visualizar al método, junto con el título del cuadro de diálogo. Además del contenido y el título del diálogo, el método Mostrar Ventana acepta los siguientes argumentos opcionales:
- isModal: un boleano que determina si es diálogo es de modelos. Por defecto, no lo es.
- onHidingHandler: un controlador de eventos al que se llama cuando se ha iniciado el cierre de un cuadro de diálogo
- onHideHandler: un controlador de eventos al que se llama cuando el diálogo se ha cerrado por completo
- windowType: un valor numérico que determina si la ventana debe aparecer utilizando los colores del entorno de tiempo de diseño (es decir, Application Builder) o el entorno del tiempo de ejecución (es decir Visor)
- arriba: un doble anulable que determina el desplazamiento de la ventana, en píxeles, desde la parte superior de la aplicación. Si se omite, la ventana estará centrada verticalmente.
- izquierda: un doble anulable que especifica el desplazamiento de la ventana, en píxeles, desde la parte izquierda de la aplicación. Si se omite, la ventana estará centrada horizontalmente.
El método Mostrar Ventana también hace volver una referencia a la ventana flotante que se muestra. A pesar de que la firma del método Mostrar Ventana indica un tipo de regreso a objeto, con el Visor y Application Builder, será un caso de ventana flotante fiable.
Si está implementando un comando, muestre la UI tan pronto como se hace clic en el botón (es decir, se ejecuta el comando). Si el comando requiere que el usuario interactúe con el mapa, la UI debe indicar esto.
Cuando utiliza Mostrar ventana, establezca el fondo de la UI para que sea transparente. El cuadro de diálogo que contiene la UI tendrá el color de fondo basado en los colores del tema de la aplicación, que a su vez, los pueden configurar los usuarios que están diseñando la aplicación.
Para ver un ejemplo de la visualización de la UI de Silverlight en el Visor, supongamos que ha implementado Control de usuario con el código predeterminado, detrás de la clase y el Lenguaje de marcado extensible (XAML) de la aplicación, de la siguiente manera:
<UserControl x:Class="MyExtension.SimpleDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock Text="This is my Silverlight UI!" Margin="20" />
</Grid>
</UserControl>
Una herramienta que muestra este control en un cuadro de diálogo cuando se ejecuta la herramienta, se implementaría como sigue:
[Export(typeof(ICommand))]
[DisplayName("Show A Simple Dialog")]
[Category("My Tools")]
[Description("Tool to show a simple dialog")]
[DefaultIcon("<Insert path to icon>")]
public class ShowDialogCommand : ICommand
{
private SimpleDialog dialog = null;
public void Execute(object parameter)
{
// Instantiate a new dialog if one does not already exist.
dialog = dialog ?? new SimpleDialog();
// Display the dialog.
MapApplication.Current.ShowWindow("Simple Dialog", dialog);
}
public bool CanExecute(object parameter)
{
// Return true so that the command is always enabled.
return true;
}
public event EventHandler CanExecuteChanged;
}
En el Visor que tiene el tema predeterminado se abrirá el siguiente cuadro de diálogo:
 |
Personalización del diseño
Utilice la personalización del diseño para agregar la UI (por ejemplo, paneles) a la aplicación que no desea que aparezca en un cuadro de diálogo flotante. Si la UI siempre debería estar visible, inclúyala en el diseño. Para darle al usuario la capacidad de activar y desactivar la UI, puede:
- Incluir un botón de cerrar o similar en la UI que establece la propiedad de Visibilidad a Contraído.
- Cree una herramienta (es decir, implemente ICommand) que encuentre el control mediante MapApplication.Current.FindControlInLayout, luego establece la propiedad de Visibilidad a visible.
Nota:Puesto que lo diseños no necesariamente incluirán la UI, asegúrese de controlar el caso cuando FindControlInLayout se devuelve nulo.
No camine de forma programada por el árbol visual para agregar dinámicamente elementos a la aplicación. Este enfoque requiere que el árbol visual se estructure de una manera determinada, y por lo tanto es inherentemente frágil. El código que hace esto puede romperse de diseño a diseño y de versión a versión.
Consulte más información en Crear un diseño personalizado, y vea los ejemplos de la sección Controles de las ArcGIS Viewer for Silverlight muestras interactivas.
Pinceles
El ensamblado de extensibilidad incluye un conjunto de pinceles que se utilizan en el Visor y Application Builder. Utilice los pinceles integrados para darle color a la UI. Esto mantiene los colores de la UI coherentes con los de la aplicación y permite a los usuarios finales configurarlos mediante los colores del tema.
Los siguientes pinceles están disponibles:
Pinceles del visor
- BackgroundGradientBrush: el color primario de fondo para elementos de interfaz de usuario en el Visor. Esto se utiliza como el fondo de los cuadros de diálogo y el panel lateral.
- BackgroundStartGradientStopColorBrush: el color de inicio de BackgroundGradientBrush.
- BackgroundEndGradientStopColorBrush: el color final de BackgroundGradientBrush.
- BackgroundTextColorBrush: el color de texto primario de fondo para elementos de interfaz de usuario en el Visor. Diseñado para su aplicación al texto que se superpone a los elementos que usan BackgroundGradientBrush como fondo o relleno.
- AccentColorBrush: define un color que contrasta con BackgroundGradientBrush, pero es diferente del color del texto. Este color se utiliza, por ejemplo, en bordes, barras de desplazamiento y botones.
- AccentTextColorBrush: define un color para el texto del Visor que se superpone en elementos que utilizan AccentColorBrush como fondo o relleno.
- SelectionColorBrush: diseñado para utilizarlo como el color de los elementos seleccionados. Este color se utiliza, por ejemplo, para resaltar la capa seleccionada en Contenido de mapa.
- SelectionOutlineColorBrush: está diseñado para su uso conjuntamente con SelectionColorBrush para contornear las selecciones. Este color se utiliza, por ejemplo, para el contorno de la capa seleccionada en Contenido de mapa.
Pinceles de Application Builder
- DesignHostBackgroundBrush: el color primario de fondo para elementos de interfaz de usuario de Application Builder.
- DesignHostBackgroundTextBrush: el color de texto primario para elementos de interfaz de usuario de Application Builder. Diseñado para su aplicación al texto que se superpone a los elementos que usan DesignHostBackgroundBrush como fondo o relleno.
- DesignHostAccentBrush: un color que contrasta con el color de fondo del Application Builder, pero es diferente del color del texto.
- DesignHostAccentTextBrush: el color para el texto del Application Builder que se superpone en elementos que utilizan DesignHostAccentBrush como fondo o relleno.
Acciones al cerrar el cuadro de diálogo
Para iniciar una acción cuando se cierra una ventana mostrada por su add-in, transmita un controlador de eventos al parámetro onHidingHandler o onHideHandler del método Map.Application.Current.ShowWindow.
- onHidingHandler—Le permite realizar alguna lógica antes de que la ventana se haya cerrado y, si es necesario, cancela la operación de cerrar ventana. Puede utilizar esto, por ejemplo, si el usuario cierra la ventana durante una operación y desea preguntarles si desean anular la operación.
- onHideHandler—Para realizar la lógica después de que la ventana se ha cerrado. Puede utilizar esto, por ejemplo, para quitar una capa de resultados del mapa.