WPF TabItem 格式日期

Question

我正在尝试为 TabControl 创建一种样式以实现 2 个目标：

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>

提前感谢您的帮助。

Answer 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 用于内容区域中显示的内容。 ContentTemplate 中的 ContentPresenter 将实例化来自 ItemTemplate 的控件。