SimpleTabControl y SimpleTabItem
El control de ficha es un control de elementos en el que se muestra el contenido de las fichas. Normalmente, los elementos secundarios de un control de ficha son elementos de la ficha, que son controles de contenido con encabezado, cada uno de los cuales tiene un elemento encabezado y un elemento de contenido. Para colocar los elementos de un control de ficha en Microsoft® Expression Blend™, haga clic con el botón secundario en el control de ficha en Objetos y escala de tiempo y, a continuación, haga clic en Agregar SimpleTabItem para agregar elementos individuales a la colección, o bien haga clic en Enlazar ItemsSource a datos para generar la colección de elementos de ficha desde un origen de datos. .
Para modificar el texto del elemento de ficha, haga clic en él en Objetos y escala de tiempo y, a continuación, haga clic en Editar texto. También puede activar el elemento de ficha haciendo doble clic en él y dibujando un control.
Vista del área de diseño de un control SimpleTabControl después de agregar dos elementos SimpleTabItem
Desglosar la plantilla de control
La plantilla del control SimpleTabControl está formada por los siguientes elementos:
- Un panel de diseño Grid, que se usa para que el control de ficha contenga los diversos elementos secundarios. 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. La fila superior de este panel usa el ajuste automático de tamaño para que el alto cambie con el tamaño del elemento de ficha mayor. La fila inferior usa el escalado proporcional (*) para que ocupe el espacio restante y muestre el contenido del elemento de ficha (PART_SelectedContentHost).
- Un elemento TabPanel denominado HeaderPanel, que es un panel de diseño personalizado que permite saber cómo organizar los elementos de ficha.
- Un elemento Border, que se usa porque incluye una propiedad BorderThickness que se puede enlazar mediante plantilla a la propiedad BorderThickness del control de ficha al que se aplica esta plantilla.
- Un elemento ContentPresenter denominado PART_SelectedContentHost, que se usa para mostrar la propiedad Content del control de ficha al que se aplica esta plantilla.
La plantilla del control SimpleTabItem está formada por los siguientes elementos:
- Un panel de diseño Grid, que se usa para que el control de ficha contenga los diversos elementos secundarios. El panel Grid se usa también porque facilita al diseñador de la UI de la aplicación la adición de otros elementos a la plantilla. Este panel Grid usa el concepto de tamaño compartido, lo que permite que cada elemento de ficha tenga el mismo ancho que todos los demás elementos de ficha del control de ficha.
- Un elemento Border, que se usa porque incluye una propiedad BorderThickness que se puede enlazar mediante plantilla a la propiedad BorderThickness del control de ficha al que se aplica esta plantilla.
- Un elemento ContentPresenter denominado ContentSite, que se enlaza a la propiedad Header del elemento de ficha al que se aplica esta plantilla. El enlace se establece en la propiedad ContentSource del elemento ContentSite.
Vista de objetos: partes básicas (plantilla) de un control SimpleTabControl (izquierda) y un control SimpleTabItem (derecha)
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 del elemento de ficha, el desencadenador de IsSelected establece la propiedad ZIndex del elemento de ficha, que fuerza su colocación en el frente. Por este motivo, es necesario mantener este desencadenador para que el elemento de ficha funcione correctamente. El desencadenador IsSelected también establece un valor BorderThickness más grueso y cambia el color de Background para mostrar que el elemento está seleccionado.
Pinceles usados
Las plantillas SimpleTabControl y SimpleTabItem usan los siguientes recursos de pincel del diccionario de recursos SimpleStyles.xaml:
- La propiedad Background del control de ficha se establece mediante WindowBackgroundBrush cuando no hay ningún desencadenador activo.
- La propiedad BorderBrush del control de ficha se establece mediante SolidBorderBrush cuando no hay ningún desencadenador activo y mediante DisabledBorderBrush cuando IsEnabled es False.
- La propiedad Foreground del control de ficha se establece mediante DisabledForegroundBrush cuando IsEnabled es False.
- La propiedad Background del elemento Border del elemento de ficha se establece mediante LightBrush cuando no hay ningún desencadenador activo, mediante WindowBackgroundBrush cuando IsSelected es True y mediante DisabledBackgroundBrush cuando IsEnabled es False.
- La propiedad BorderBrush del elemento Border del elemento de ficha se establece mediante SolidBorderBrush y mediante DisabledBorderBrush cuando IsEnabled es False.
- La propiedad Foreground del elemento de ficha se establece mediante DisabledForegroundBrush cuando IsEnabled es False.
Además, las plantillas usan enlaces a colores del sistema, lo que permite que los controles usen los valores predeterminados del sistema. En muchos casos, es posible que desee cambiar estos pinceles para poder crear un diseño único. Para ello, puede modificar los desencadenadores que establecen los colores del sistema.
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.
- El elemento TabPanel denominado HeaderPanel en la plantilla es un panel de diseño específico usado para TabControl. TabPanel sabe cómo disponer los elementos de ficha en varias filas y cómo colocarlos en capas cuando se selecciona un elemento de ficha. Puede usar un contenedor de diseño distinto para HeaderPanel, pero es necesario establecer su propiedad IsItemsHost como True.
- Para modificar la plantilla SimpleTabItem, haga clic en el botón Editar recurso situado al lado del estilo SimpleTabItem en el panel Recursos. A continuación, en el modo de edición del estilo, haga clic con el botón secundario en Style, en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, después, haga clic en Editar plantilla o Editar una copia.
- La plantilla de control del sistema TabControl es considerablemente más compleja que SimpleTabControl. Permite acoplar TabPanel en diferentes direcciones de acuerdo con la propiedad Orientation de TabControl. SimpleTabControl omite la propiedad Orientation para hacer el proceso más sencillo, pero si desea colocar TabPanel en otra ubicación, puede modificar las filas y las columnas de la cuadrícula.
- No se debe cambiar el nombre del elemento ContentPresenter denominado PART_SelectedContentHost, ya que la clase del control sabe buscar este nombre como el lugar para mostrar el elemento de ficha.