CODEWITHSUNDEEP
wpfxaml
davecove
davecove

Reputation: 1071

Tabs of equal width in TabControl

I have 4 tabs at the top of a tab control. I would like for each tab to use 25% of the TabControl's width.

What is the correct way, using XAML, to do that?

Here is what I have tried:

<Grid  HorizontalAlignment="Left" Height="458" Margin="10,65,0,0" VerticalAlignment="Top" Width="276">
    <TabControl Grid.IsSharedSizeScope="True" HorizontalAlignment="Stretch">
        <TabItem Header="Cameras">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
        <TabItem Header="MultiCam">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
        <TabItem Header="Search">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
        <TabItem Header="Admin" Margin="-2,-2,-10,-1">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

Upvotes: 7

Views: 9735

Answers (2)

Bizhan
Bizhan

Reputation: 17085

Here's another trick, a Grid can overlap any number of elements:

<Grid>
    <UniformGrid Columns="4" Margin="5,0">
        <FrameworkElement x:Name="c1"/>
        <!-- no need to add the other three -->
    </UniformGrid>
    <TabControl>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
    </TabControl>
</Grid>

a UniformGrid the same size of the TabControl is used to measure the width of each column. add only one FrameworkElement since all TabItems are the same size.

Upvotes: 15

Shlomo
Shlomo

Reputation: 14350

I have a funky solution. Not sure if it's optimal. Set the width of your TabItems to the following:

        <TabItem Header="Search" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}, Path=ActualWidth, Converter={StaticResource quarter}}">
        </TabItem>

You'll need to add the converter as a static resource:

<Window.Resources>
    <local:OneQuarterConverter x:Key="quarter" />
</Window.Resources>

And the code for the converter is as follows:

class OneQuarterConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double) value)/4.1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double)value) * 4.1;
    }
}

Divided by 4.1 because of borders and margins, etc..

Upvotes: 0

Related Questions