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 la mesa de trabajo mientras está expandido, puede hacer clic con el botón secundario en el botón de expansión en el panel Objetos y escala de tiempo y, a continuación, hacer clic en Expandir Botón de expansión.

Vista de la mesa de trabajo de un control SimpleExpander

Desglosar la plantilla de control

La plantilla del control SimpleExpander está formada por los siguientes elementos:

• Un panel de diseño de cuadrícula (Grid)   Necesario para mantener varios elementos secundarios en el botón de expansión. El panel de diseño de cuadrícula (Grid) también se usa porque facilita al diseñador de la interfaz de usuario de la aplicación la incorporación de más elementos a la plantilla. El panel de diseño de cuadrícula (Grid) se divide en dos áreas: el área de borde, que representa el encabezado, y el área ExpandSite, que representa el contenido.

• Un elemento Border   Se usa porque incluye una propiedad BorderThickness que se puede enlazar mediante una plantilla a la propiedad BorderThickness del botón de expansión al que se aplica esta plantilla.

• Un elemento ToggleButton   Incluido en el elemento Border, expande y contrae el botón de expansión.

• Un elemento ContentPresenter   Incluido en el elemento Border, se enlaza automáticamente a la propiedad Header del botón de expansión al que se aplica esta plantilla.

• Un elemento ContentPresenter en el área ExpandSite   Se usa 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 según lo previsto.

  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 el panel Desencadenadores para ver las propiedades que cambian cuando se activa 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 usa 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.

Procedimientos recomendados 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 de la mesa de trabajo 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 debe establecerse explícitamente en la clase del control. Para ello, establezca la propiedad ContentSource del elemento ContentPresenter (en el nodo Border de la plantilla) como Header.

• El elemento ToggleButton usa una plantilla independiente denominada ExpanderToggleButton. Para modificarlo, haga clic con el botón secundario en el elemento ToggleButton, elija Editar plantilla y, a continuación, haga clic en Editar actual 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 que mantenga este enlace, ya que el enlace bidireccional le permite expandir el botón de expansión mediante programació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 por el nombre, es necesario que actualice también el desencadenador IsExpanded si cambia o reemplaza el elemento ExpandSite.