WPF TabItem 格式日期

Question

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

以不同的背景颜色和粗体显示选定的 TabItem。
格式化选项卡 header 文本，绑定到视图模型中的日期，格式为小时和分钟，如“15:45”。

我几乎成功了，但 header 文本也显示了日期部分。此外，它显示 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>

在此先感谢您的帮助。

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

WPF TabItem 格式日期

WPF TabItem format date

wpf

string-formatting

mvvm

tabitem