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 Cuadrícula o Lienzo. 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 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 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 cuadrícula, que es el panel de diseño necesario para incluir diversos elementos secundarios dentro del botón de expansión. El panel de cuadrícula también se usa porque facilita al diseñador de la interfaz de usuario de la aplicación la adición de otros elementos a la plantilla. El panel de cuadrícula se divide en dos áreas: el área de borde, que representa el encabezado, y el área ExpandSite, que representa el contenido.

• Un elemento Border, que se usa porque incluye una propiedad BorderThickness que se puede enlazar mediante una plantilla con la propiedad BorderThickness del botón 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 con la propiedad Header del botón de expansión al que se aplica esta plantilla.

• Un elemento ContentPresenter en el área ExpandSite, que 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

  

Volver al principio

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 de 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.

Volver al principio

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.

Volver al principio

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 necesita estar establecido explícitamente para 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 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, ya que 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.

Volver al principio