Equal Width Tabs in TabControl
I have 4 tabs at the top of a tab control. I would like each tab to use 25% of the TabControl width.
What's the correct way to use XAML?
Here's what I've 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>
+3
source to share
2 answers
Here's another trick:
<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>
All elements in a uniform grid have the same width, so you just need to snap to one element.
+7
source to share
I have a funky solution. Not sure if it is optimal. Set the width of your TabItems as follows:
<TabItem Header="Search" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}, Path=ActualWidth, Converter={StaticResource quarter}}">
</TabItem>
You will need to add the converter as a static resource:
<Window.Resources>
<local:OneQuarterConverter x:Key="quarter" />
</Window.Resources>
And the converter code looks like this:
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;
}
}
Splitting into 4.1 because of borders and margins, etc.
0
source to share