SimpleExpander
El botón de expansión es un control de contenido con encabezado que muestra un encabezado y una ventana contraíble en la que se muestra contenido. Para asignar un título al botón de expansión en Microsoft® Expression Blend™, modifique la propiedad Header. Para colocar contenido en un botón de expansión, haga doble clic en él y, a continuación, dibuje un elemento. Si desea colocar varios elementos dentro de un botón de expansión, primero deberá agregar un panel de diseño como Grid o Canvas. Un botón de expansión también puede mostrar texto de forma predeterminada; para modificar este texto, haga clic con el botón secundario en el botón de expansión y, a continuación, haga clic en Editar texto. Para ver el botón de expansión en el área de diseño cuando está expandido, puede hacer clic con el botón secundario en el botón de expansión en Objetos y escala de tiempo y, a continuación, hacer clic en Expandir Expander.
Vista del área de diseño de un control SimpleExpander
Desglosar la plantilla de control
La plantilla del control SimpleExpander está formada por los siguientes elementos:
- Un panel Grid, que es un panel de diseño necesario para incluir diversos elementos secundarios dentro del botón de expansión. El panel Grid también se usa porque facilita al diseñador de la interfaz de usuario (UI) de la aplicación la adición de otros elementos a la plantilla. Este panel se divide en dos áreas: el área Border, que representa el encabezado, y el área ExpandSite, que representa el contenido.
- Un elemento Border, que se utiliza porque incluye una propiedad BorderThickness que se puede enlazar mediante una plantilla a la propiedad BorderThickness del control de expansión al que se aplica esta plantilla.
- Un elemento ToggleButton, que se encuentra dentro del elemento Border y que expande y contrae el botón de expansión.
- Un elemento ContentPresenter, que está incluido dentro del elemento Border y se enlaza automáticamente a la propiedad Header del control de expansión al que se aplica esta plantilla.
- Un elemento ContentPresenter en el área ExpandSite, que se utiliza para mostrar la propiedad Content del botón de expansión al que se aplica esta plantilla. Los dos elementos ContentPresenter deben estar presentes para que el botón de expansión funcione como se espera.
Vista de objetos: partes básicas (plantilla) de un control SimpleExpander
Desencadenadores de propiedad usados
Los desencadenadores de propiedad de la plantilla de control sirven para hacer que el control reaccione ante los cambios de propiedad. Puede hacer clic en los elementos en Desencadenadores, en el panel Interacción, para ver las propiedades que cambian cuando está activo un desencadenador. Por ejemplo, en la plantilla SimpleExpander, cuando la propiedad IsExpanded pasa a ser True, el área ExpandSite se vuelve visible.
Pinceles usados
La plantilla SimpleExpander utiliza los siguientes recursos de pincel del diccionario de recursos SimpleStyles.xaml:
- La propiedad Background se establece mediante LightBrush cuando no hay ningún desencadenador activo y mediante DisabledBackgroundBrush cuando IsEnabled es False.
- La propiedad BorderBrush se establece mediante NormalBorderBrush cuando no hay ningún desencadenador activo y mediante DisabledBorderBrush cuando IsEnabled es False.
- La propiedad Background del elemento Border se establece mediante NormalBrush cuando no hay ningún desencadenador activo.
- La propiedad Background del elemento ExpandSite se establece mediante WindowBackgroundBrush cuando no hay ningún desencadenador activo.
- La propiedad BorderBrush del elemento ExpandSite se establece mediante SolidBorderBrush cuando no hay ningún desencadenador activo.
- La propiedad Foreground se establece mediante DisabledForegroundBrush cuando IsEnabled es False.
Prácticas recomendadas e instrucciones de diseño
- En general, debe usar un control Grid como raíz de la plantilla si espera que el diseñador agregue más elementos visuales al control. Expression Blend busca un panel de diseño como el control Grid y lo activa de forma predeterminada para que los elementos nuevos del área de diseño se agreguen como elementos secundarios del panel de diseño.
- Puesto que el botón de expansión tiene dos elementos ContentPresenter (uno para el encabezado y otro para el contenido), el elemento ContentPresenter del encabezado necesita estar establecido explícitamente para la clase del control. Para hacerlo, establezca la propiedad ContentSource del elemento ContentPresenter (en el nodo Border de la plantilla) como Header.
- El elemento ToggleButton utiliza una plantilla independiente denominada ExpanderToggleButton. Para modificarlo, haga clic con el botón secundario en el elemento ToggleButton, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla o Editar una copia. ToggleButton se conecta al resto del botón de expansión mediante el enlace entre IsChecked en ToggleButton e IsExpanded en el botón de expansión. Para que esta propiedad se actualice correctamente, es necesario mantener este enlace: el enlace bidireccional permite expandir mediante programación el botón de expansión.
- De forma predeterminada, el área ExpandSite está contraída y se hace visible mediante un desencadenador. Puesto que el desencadenador hace referencia al elemento ExpandSite mediante el nombre, es necesario actualizar también el desencadenador IsExpanded si cambia o reemplaza el elemento ExpandSite.