How to Stretch WPF Tab Item Headers to Parent Control Width How to Stretch WPF Tab Item Headers to Parent Control Width wpf wpf

How to Stretch WPF Tab Item Headers to Parent Control Width


I took Jordan's example and made some changes to it. This version should work for any number of tabs:

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();        }    }}

Same namespace in the xaml:

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

And this will make all tabs use it:

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


Everyone seems to be going the converter route, but it really is as simple as using a UniformGrid with Rows set to 1 in the TabControl template, in place of the TabPanel. Of course, you will have to re-template it, but this isn't too bad.


I was able to do this using a Converter like so:

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    }}

Then adding the namespace to my xaml:

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

Then making all of the TabItems use the converter:

<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 is the x:Name of the parent element I want the tabs to be 1/4 of, if that makes sense.