2014-11-26 2 views
3

У меня есть 4 вкладки в верхней части элемента управления вкладки. Я бы хотел, чтобы каждая вкладка использовала 25% ширины TabControl.Вкладки равной ширины в TabControl

Каков правильный способ, используя XAML, сделать это?

Вот что я пробовал:

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

ответ

7

Вот еще один трюк:

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

Все элементы в равномерной сетке имеют одинаковую ширину, поэтому вам просто нужно привязать к одному элементу.

+0

Технически говоря, вам нужен только один элемент в 'UniformGrid' для привязки' ActualWidth'. Сетка обрабатывает значение ширины, основанное на свойстве 'Columns'. Кроме того, вы можете использовать 'FrameworkElement', а не' Canvas', так как это тип, который фактически определяет ['ActualWidth'] (https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement. actualwidth (v = vs.110) .aspx). –

+0

@DanLyons благодарю вас за внимание. Я отредактировал свой ответ – Bijan

0

У меня есть обалденное решение. Не уверен, что это оптимально. Установите ширину вашего TabItems на следующее:

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

Вам нужно добавить конвертер в качестве статического ресурса:

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

И код для преобразователя заключается в следующем:

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

Разделенные на 4.1 из-за границ и полей и т.д ..

+0

Действительно слишком приблизительный ... – Benlitz

Смежные вопросы