Cómo estirar los encabezados de los elementos de la pestaña WPF al ancho del control principal

xaml tabs (11)

Además de la solución accedida de Ryan Versaw que ofrece anchos de encabezado de artículos de tabla iguales, encontré la siguiente manera de hacerlo dependiente de la longitud de cada encabezado.

Primero obtenemos la cadena de cada encabezado tabItem agregando esta línea al multibinding xaml. Así se convierte en:

<MultiBinding Converter="{StaticResource tabSizeConverter}"> <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" /> <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" /> <Binding Path="Header" RelativeSource="{RelativeSource Self}"/> </MultiBinding>

Y un poco más de código en el convertidor (los valores [] también reciben el encabezado del elemento de tabla):

public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) { TabControl tabControl = values[0] as TabControl; string AllHeaders = ""; for (int i = 0; i < tabControl.Items.Count; i++) { int index = tabControl.Items[i].ToString().IndexOf("Header:") + "Header:".Length; string currentHeader = tabControl.Items[i].ToString().Substring(index); currentHeader = currentHeader.Substring(0, currentHeader.Length - " Content:".Length); AllHeaders += currentHeader; } //Normalize width according to header length double width = values[2].ToString().Length * tabControl.ActualWidth / AllHeaders.Length; //Subtract 1, otherwise we could overflow to two rows. var retVal = (width <= 1) ? 0 : (width - 1); return retVal; }

Sospecho que podría haber una manera más eficiente de obtener la cadena AllHeaders de todos los encabezados, pero funciona bien como está ...

¿Hay alguna forma en XAML de hacer que los encabezados de los elementos de la pestaña se extiendan a lo ancho del control de la pestaña?

Por ejemplo, tengo tres pestañas: rojo, azul y verde. Si tengo un control de pestaña con su ancho configurado en automático, los encabezados de la pestaña solo llenarán parte del espacio sobre el contenido de la pestaña, pero quiero que llenen todo el espacio. Para mi ejemplo de tres pestañas, el rojo debería ocupar el primer tercio del control, el azul debería ocupar el tercio central y el verde el tercio final.

Tengo una idea de cómo hacer esto en un código detrás del cual estoy trabajando ahora, pero estoy interesado en hacerlo de la manera más fácil posible.

Aquí hay una solución indolora que usa plantillas solamente:

Espero haber incluido todos los colores y funcionará para ti. Ahh ... Snap! ¡Mi efecto de desaturación! Mi proyecto de inicio de WPF puede capturar ese efecto desde allí si lo desea (es más fácil presionar el efecto en el desencadenador que recolorearlo todo, lo mismo que con los resaltados). Sí, eso es un montón de código, pero simplemente cambié ItemsContainer para lucir mejor y reemplacé el control de encabezado estándar con UniformGrid y configuré Filas o Columnas a 1 dependiendo de TabStripPlacement. Ahora puedo colapsar este código, u ocultarlo en algún lugar. :)

Es posible vincular el ancho al Ancho Real del control de la pestaña principal como se muestra a continuación.

Lo he envuelto en un estilo para aplicarlo a todas las páginas de pestañas.

<Grid> <Grid.Resources> <Style TargetType="TabItem"> <Setter Property="Width" Value="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}}"/> </Style> </Grid.Resources> <TabControl> <TabItem Header="Page3"/> <TabItem Header="Page2"/> <TabItem Header="Page3"/> </TabControl> </Grid>

Estoy usando la siguiente solución: En la ventana principal, uso un evento de tamaño de la ventana y en el evento Inicializado de control de tabulación para configurar el Ancho de cada pestaña. El número ''5'' corresponde a mi número de pestañas.

private void tabchanger_Initialized(object sender, EventArgs e) { foreach (TabItem item in tabchanger.Items) { double newW = (tabchanger.ActualWidth / 5) - 1; if (newW < 0) newW = 0; item.Width = newW; } } private void Window_SizeChanged(object sender, SizeChangedEventArgs e) { foreach (TabItem item in tabchanger.Items) { double newW = (tabchanger.ActualWidth / 5) - 1; if (newW < 0) newW = 0; item.Width = newW; } }

He resuelto este problema creando un convertidor especial:

public class TabItemWidthAdjustmentConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { Double lTabControlWidth = value is Double ? (Double)value : 50; // 50 just to see something, in case of error Int32 lTabsCount = (parameter != null && parameter is String) ? Int32.Parse((String)parameter) : 1; return lTabControlWidth / lTabsCount; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }

Y calculo el valor de un elemento de pestaña en el elemento Etiqueta del control de tabla, para evitar calcularlo para cada pestaña por separado. Aquí está el código de ejemplo (Tenga en cuenta que en mi caso necesitaba un ScrollViewer horizontal, porque tengo varios elementos de pestañas y con un ancho mínimo):

Puedo decir que esto funciona como un encanto en mi caso :) ¡Espero que alguien lo encuentre útil!

PD No necesitaba / quería ningún estilo en mi caso.

No sé si funcionará para las pestañas, pero siempre que necesito estirar algo para llenar un contenedor, he usado un ViewBox . ¿Es ese el tipo de cosa que estás buscando?

Pude hacer esto usando un convertidor así:

namespace WpfApplication1.Converters { public class SizeConverter : IValueConverter { #region IValueConverter Members public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { double width = Double.Parse(value.ToString()); //Subtract 1, otherwise we could overflow to two rows. return .25 * width - 1; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotSupportedException(); } #endregion } }

Luego agregando el espacio de nombres a mi xaml:

xmlns:local="clr-namespace:WpfApplication1.Converters"

Luego, haciendo que todos los TabItems usen el convertidor:

<Window.Resources> <local:SizeConverter x:Key="sizeConverter" /> <Style TargetType="{x:Type TabItem}"> <Setter Property="Width" Value="{Binding ElementName=x_Grid, Path=ActualWidth, Converter={StaticResource sizeConverter}}" /> </Style> </Window.Resources>

x_Grid es el x: Nombre del elemento padre Quiero que las pestañas sean 1/4 de, si eso tiene sentido.

Seguí la sugerencia de Charlie y seguí replanteando la ruta. Aquí hay una implementación simple de TabControl que divide el espacio disponible de manera equitativa entre sus TabItem s, usando UniformGrid :

Control de XAML

Código de control detrás de

using System.Windows.Controls; using System.Windows.Controls.Primitives; namespace YourNamespace.Views { /// <summary> /// A TabControl with large tabs. /// </summary> public partial class BigTabsTabControl : TabControl { public BigTabsTabControl() { InitializeComponent(); } public override void OnApplyTemplate() { base.OnApplyTemplate(); if (this.Template != null) { UniformGrid X = this.Template.FindName("headerPanel", this) as UniformGrid; if (X != null) X.Columns = this.Items.Count; } } } }

Eso es. Ahora puede agregar TabItem s a este control y ellos ajustarán su ancho automáticamente. No es necesario especificar Grid.Column para estas TabItem s, funcionan bien sin ella, incluso en el momento del diseño.

Soy un chico de estilo de la vieja escuela. y prefiere este tipo de funcionalidad para encapsular en el código del propio control. Mi control derivado se parece a lo siguiente:

public class CustomTabControl :TabControl { protected override void OnRenderSizeChanged(System.Windows.SizeChangedInfo sizeInfo) { foreach (TabItem item in this.Items) { double newW = (this.ActualWidth / Items.Count) - 1; if (newW < 0) newW = 0; item.Width = newW; } } }

y mi XAML parece

</infrastructure:CustomTabControl> <TabItem /> <TabItem /> </infrustracture:CustomControl>

Alguien puede explicar por qué todo el mundo prefiere el control de estilo en lugar de derivar.

Todo el mundo parece ir por la ruta del convertidor, pero en realidad es tan simple como usar un UniformGrid con Rows establecidas en 1 en la plantilla TabControl , en lugar de TabPanel . Por supuesto, tendrá que volver a colocarlo en la plantilla, pero esto no es tan malo.

Tomé el ejemplo de Jordan y le hice algunos cambios. Esta versión debería funcionar para cualquier número de pestañas:

namespace WpfApplication1.Converters { public class TabSizeConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) { TabControl tabControl = values[0] as TabControl; double width = tabControl.ActualWidth / tabControl.Items.Count; //Subtract 1, otherwise we could overflow to two rows. return (width <= 1) ? 0 : (width - 1); } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) { throw new NotSupportedException(); } } }

Mismo espacio de nombres en el xaml:

xmlns:local="clr-namespace:WpfApplication1.Converters"

Y esto hará que todas las pestañas lo utilicen:

<Window.Resources> <local:TabSizeConverter x:Key="tabSizeConverter" /> <Style TargetType="{x:Type TabItem}"> <Setter Property="Width"> <Setter.Value> <MultiBinding Converter="{StaticResource tabSizeConverter}"> <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" /> <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" /> </MultiBinding> </Setter.Value> </Setter> </Style> </Window.Resources>