Дата формата WPF TabItem

Я пытаюсь создать стиль для TabControl для достижения двух целей:

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

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

см. скриншот здесь

Вот код 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>

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


person Pierre Theate    schedule 13.02.2016    source источник
comment
ЧЧ это строка формата для 24-часового формата, так вы уверены, что ваше время 15:45, а не 3:45?   -  person ChrisF    schedule 13.02.2016
comment
Да, я был уверен, я сделал скриншот, когда задал вопрос. Использование ItemTemplate, как это предлагается в принятом ответе, устранило эту проблему. Спасибо.   -  person Pierre Theate    schedule 14.02.2016


Ответы (1)


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

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

person Szabolcs Dézsi    schedule 13.02.2016
comment
У меня все еще есть 2 вопроса, я немного запутался с шаблоном управления, который используется для содержимого заголовка. Я хотел бы добавить отступ в заголовке вкладки, чтобы текст не был слишком близко к границе, и создать шаблон данных для содержимого вкладки со списком. Я не понимаю, куда поместить код XAML для этих двух изменений. - person Pierre Theate; 16.02.2016