2016-02-13 3 views
0

Я пытаюсь создать стиль для TabControl для достижения 2 целей:WPF TabItem формат дата

  1. Показать выбранный TabItem с другим цветом фона и выделены жирным шрифтом.
  2. Отформатируйте текст заголовка вкладки, привязанный к дате в модели представления, до часов и минут, например «15:45».

Мне почти удалось, но текст заголовка также отображает часть даты. Кроме того, он отображает 03:45 вместо 15:45.

see screenshot here

Вот код XAML Я использую:

<TabControl ItemsSource="{Binding MC}" > 
     <TabControl.Resources> 
      <Style TargetType="{x:Type TabItem}"> 
       <Setter Property="Background" Value="#01535F" /> 
       <Setter Property="Foreground" Value="Azure" /> 
       <Setter Property="FontSize" Value="16" /> 
       <Setter Property="BorderBrush" Value="Black" /> 
       <Setter Property="BorderThickness" Value="1" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="TabItem"> 
          <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1"> 
           <Grid Name="Panel"> 
            <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            ContentSource="Header" 
            /> 
            <!--<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />--> 
           </Grid> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsSelected" Value="True"> 
            <Setter Property="FontWeight" Value="Bold" /> 
            <Setter TargetName="Panel" Property="Background" Value="#003F44" /> 
           </Trigger> 
           <Trigger Property="IsSelected" Value="False"> 
            <Setter TargetName="Panel" Property="Background" Value="#01535F" /> 
           </Trigger> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter Property="FontWeight" Value="Bold" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="HeaderTemplate"> 
        <Setter.Value> 
         <DataTemplate> 
          <HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" /> 
         </DataTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </TabControl.Resources> 
    </TabControl> 

Заранее спасибо за любую помощь.

+0

«HH» * - это строка формата для 24-часовых часов, так что вы уверены, что ваше время 15:45, а не на самом деле 3:45? – ChrisF

+0

Да, я был уверен, я сделал снимок экрана в то же время, когда задал вопрос. Использование ItemTemplate, как предложено в принятом ответе, устраняет эту проблему. Спасибо. –

ответ

0

Я думаю, что это то, что вы ищете:

<TabControl ItemsSource="{Binding MC}"> 
    <TabControl.Resources> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Background" Value="#01535F" /> 
      <Setter Property="Foreground" Value="Azure" /> 
      <Setter Property="FontSize" Value="16" /> 
      <Setter Property="BorderBrush" Value="Black" /> 
      <Setter Property="BorderThickness" Value="1" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1"> 
          <Grid Name="Panel"> 
           <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" /> 
          </Grid> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="True"> 
           <Setter Property="FontWeight" Value="Bold" /> 
           <Setter TargetName="Panel" Property="Background" Value="#003F44" /> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="False"> 
           <Setter TargetName="Panel" Property="Background" Value="#01535F" /> 
          </Trigger> 
          <Trigger Property="IsMouseOver" Value="true"> 
           <Setter Property="FontWeight" Value="Bold" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.Resources> 

    <TabControl.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}"></TextBlock> 
     </DataTemplate> 
    </TabControl.ItemTemplate> 
</TabControl> 

ItemTemplate для области заголовка, то ContentTemplate это за то, что показывается в области контента. То, что ContentPresenter в ContentTemplate будет создавать элементы управления из ItemTemplate.

+0

Отлично, вот что я пытался сделать. Спасибо. –

+0

У меня все еще есть 2 вопроса, я немного смущен шаблоном управления, который используется для содержимого заголовка. Я хотел бы добавить дополнение в заголовок табуляции, чтобы текст не был слишком близок к границе и создал шаблон данных для содержимого вкладки со списком. Я не понимаю, где поставить код XAML для тезисов 2 изменения. –