Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tabs of equal width in TabControl

Tags:

wpf

xaml

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>
like image 708
davecove Avatar asked Nov 26 '14 20:11

davecove


1 Answers

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.

like image 199
Bizhan Avatar answered Sep 22 '22 14:09

Bizhan