2012-01-25 6 views
0

У меня есть таблица данных для tabitem в элементе управления вкладкой. Пакет данных не охватывает все элементы управления Tabitem, beckground - серый или белый, цвет управления по умолчанию.Datatemplate для Tabitem не охватывает все пространство tabitem (WPF Tabcontrol)

enter image description here

DataTemplate из TabItem:

<DataTemplate x:Key="ClosableTabItemTemplate"> 
      <Border BorderThickness="1" BorderBrush="Transparent" CornerRadius="4"> 
       <!--Border to make the tab item gap from the content--> 
       <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4"> 
        <!--Border for the rounded corners--> 
        <!--TabItem Content Grid--> 
        <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="25"/> 
          <!--Icon Column--> 
          <ColumnDefinition Width="1*"/> 
          <!--Title Column--> 
          <ColumnDefinition Width="20"/> 
          <!--Close Button Column--> 
         </Grid.ColumnDefinitions> 

         <!--Icon of tab Item--> 
         <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/> 

         <!--Title of tab Item--> 
         <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem" Height="23" HorizontalAlignment="Left" 
              Margin="4,1,0,0" VerticalAlignment="Top" FontFamily="Courier" FontSize="12" /> 

         <!--Close button of tab Item--> 
         <Button Style="{DynamicResource TabButton}" 
              Name="button_close" Content="x" 
              Command="{Binding Path=CloseCommand}" 
              Grid.Column="2" Grid.Row="1" 
              Height="20" Width="20" 
              Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right" 
              FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
              Visibility="Visible" ToolTip="Close" 
              BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0" 
              > 
         </Button> 
        </Grid> 
       </Border> 
      </Border> 



      <DataTemplate.Triggers> 

       <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True"> 
        <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" /> 
       </DataTrigger> 

       <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="False"> 
        <!--<Trigger Property="IsSelected" Value="False">--> 
        <Setter TargetName="InsideBorder" Property="BorderBrush"> 
         <Setter.Value> 
          <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="#FFCCCCD0" /> 
           <GradientStop Color="#FF526593" Offset="1" /> 
          </LinearGradientBrush> 
         </Setter.Value> 
        </Setter> 
        <Setter TargetName="tabItemGrid" Property="Background"> 
         <Setter.Value> 
          <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="#FFCCCCD0" /> 
           <GradientStop Color="#FF526593" Offset="1" /> 
          </LinearGradientBrush> 
         </Setter.Value> 
        </Setter> 
       </DataTrigger> 
       <!--</Trigger>--> 
      </DataTemplate.Triggers> 
     </DataTemplate> 

TabControl:

<TabControl Name="MainTabCtrl" Margin="0" Padding="0" BorderThickness="0" Background="Transparent" 
         IsSynchronizedWithCurrentItem="True" 
         ItemsSource="{Binding Path=TabViewModels}" 
         ItemTemplate="{StaticResource ClosableTabItemTemplate}"> 

когда код Xaml из TabItem не был внутри DataTemplate он работал прекрасно - «Прозрачная» первая граница выполняла эту работу, и не было серого/белого фона. но когда я переместил код внутри DataTemplate, появился серый фон.

Как сделать фон прозрачного табита?

Я добавил HorizontalContentAlignment = "Stretch" VerticalContentAlignment = "Stretch" для tabcontrol, это немного сужает серое пространство, но оно все еще продолжается.

+1

DataTemplate - это только определение того, как будет выглядеть содержимое tabitem. Контейнер, в этом случае TabItem может содержать другие элементы управления с пометкой и дополнением самостоятельно, которые не могут быть изменены с помощью шаблона. Чтобы изменить это, попробуйте изменить ItemContainerStyle. Помните: контейнер должен содержать настройки и визуальное появление всех элементов, независимо от содержимого; Шаблон содержит только разницу между этими элементами. – dowhilefor

+0

попробовал это сейчас. Я установил tabcontrol: «ItemContainerStyle =" {StaticResource ContainerStyle} ", тогда я создал стиль типа TabItem и установил для фона прозрачный, но теперь фон прозрачен только тогда, когда элемент не выбран. Элемент, который выбирается как backgound остается белым, и когда я нажимаю мышь на невыбранную вкладку, он показывает синий цвет по умолчанию вместо прозрачного фона. Добавлены style.triggers, но они игнорируются указанными выше цветами по умолчанию. Я отправлю еще один вопрос с картинками. спасибо за помощь – Rodniko

+0

Я разместил другой, более подробный вопрос: http: //stackoverflow.com/questions/9002729/itemcontainerstyle-of-tabitem-is-overriden-by-defalt-blue-white-control-colors-i – Rodniko

ответ

1

Попробуйте установить Padding для TabItems на ноль.

+0

он только сузил серый цвет назад – Rodniko

+0

Вы должны написать шаблон управления для TabItem. – hival

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