WPF DatePicker日历星期显示过密及IsMouseOver失效问题求助

我自定义了日期按钮样式后，成功修改了DatePicker日历中的日期按钮，但遇到两个问题：

• 星期标题显示过于紧凑（截图：）
• IsMouseOver触发器完全不生效

附上我写的自定义样式代码：

<!-- 日历DatePicker中的日期按钮样式 -->
<Style TargetType="Button" x:Key="CalendarDateButtonStyle">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#3E053A"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="FontStretch" Value="SemiExpanded"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                         Content="{TemplateBinding Content}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="3"/>
        </Style>
    </Style.Resources>

    <Style.Triggers>
        <!-- 鼠标悬停时修改边框和文字 -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderBrush" Value="White"/>
            <!-- 按钮边框 -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- 文字颜色 -->
            <Setter Property="Background" Value="#FDE5FB"/>
            <!-- 背景保持透明？注释写错了 -->
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <!-- 按钮边框 -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- 文字颜色 -->
            <Setter Property="Background" Value="#FDE5FB"/>
            <!-- 背景保持透明？注释写错了 -->
        </Trigger>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <!-- 按钮边框 -->
            <Setter Property="Foreground" Value="Black"/>
            <!-- 文字颜色 -->
            <Setter Property="Background" Value="#FDE5FB"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding IsToday, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="Background" Value="#FFFFFF"/>
            <Setter Property="BorderBrush" Value="#FDE5FB"/>
            <Setter Property="Foreground" Value="#6e0968"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

问题原因及解决方案 #

1. 星期标题显示紧凑的原因 #

你直接将样式的TargetType设为Button，会影响日历内所有Button类型控件——包括星期标题所在的CalendarDayButton（星期标题容器）。默认星期标题按钮有固定内边距和尺寸，你的样式覆盖了这些默认值，导致标题被挤压。

解决方法：
将样式的TargetType改为CalendarDateButton，这是DatePicker日历中专门用于日期按钮的控件，不会影响星期标题：

<Style TargetType="CalendarDateButton" x:Key="CalendarDateButtonStyle">

2. IsMouseOver触发器不生效的原因 #

• 目标类型错误：日历中的日期按钮实际是CalendarDateButton（继承自Button），直接给Button写样式会导致触发器无法正确绑定到控件的IsMouseOver属性。
• 不必要的DataTrigger：你用DataTrigger绑定IsSelected和IsToday，但这两个是CalendarDateButton的固有属性，直接用Trigger更可靠。

解决方法：

• 修改样式的TargetType为CalendarDateButton；
• 将DataTrigger替换为普通Trigger，直接绑定控件属性；
• 优化模板结构，直接在Border上设置CornerRadius，避免嵌套Style。

修改后的完整样式 #

<!-- 日历DatePicker中的日期按钮样式 -->
<Style TargetType="CalendarDateButton" x:Key="CalendarDateButtonStyle">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#3E053A"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="FontStretch" Value="SemiExpanded"/>
    <Setter Property="Padding" Value="3"/> <!-- 增加内边距，避免日期按钮过挤 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CalendarDateButton">
                <Border 
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}"
                     CornerRadius="3">
                    <ContentPresenter 
                         Content="{TemplateBinding Content}"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="#FDE5FB"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="#FDE5FB"/>
        </Trigger>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" Value="#6e0968"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="#FDE5FB"/>
        </Trigger>
        <Trigger Property="IsToday" Value="True">
            <Setter Property="Background" Value="#FFFFFF"/>
            <Setter Property="BorderBrush" Value="#FDE5FB"/>
            <Setter Property="Foreground" Value="#6e0968"/>
        </Trigger>
    </Style.Triggers>
</Style>

应用样式到DatePicker #

需要将样式关联到DatePicker的日历样式中：

<DatePicker>
    <DatePicker.CalendarStyle>
        <Style TargetType="Calendar">
            <Setter Property="CalendarDateButtonStyle" Value="{StaticResource CalendarDateButtonStyle}"/>
        </Style>
    </DatePicker.CalendarStyle>
</DatePicker>

内容的提问来源于stack exchange，提问作者user29991065