Search code examples
wpfxamldatepicker

WPF Datepicker Calendar Style Bug

I am developing a WPF application and I'm using the standard WPF Datepicker.

Here is the XAML Code:

<DatePicker Grid.Column="0" Grid.Row="5" Margin="5,0,5,12"
  x:Name="SendungDatePicker" SelectedDate="{Binding Path=ProduktionsDatum}"
  ToolTip="{x:Static resx:MetaData.DateTooltip}" />

However, when I use it, the upper part of the calendar isn't displayed correctly:

enter image description here

As you can see, I can't see the month and year.

How can I solve this problem?

Thank you for your help

EDIT

I generated a template for the calendar style:

<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
        <Setter Property="Foreground" Value="#FF333333"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE4EAF0" Offset="0"/>
                    <GradientStop Color="#FFECF0F4" Offset="0.16"/>
                    <GradientStop Color="#FFFCFCFD" Offset="0.16"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Calendar}">
                    <StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
                        <CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{TemplateBinding CalendarItemStyle}" Height="Auto" Width="Auto"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

How can I update the height of the header of the calendar?

Solution

  • If you generate a style for CalendarItem then you will find that Height of Header Button is 20 and FontSize is 10.5. So you override the CalendarItem style and defined either the height of PART_HeaderTemplate or decrease the FontSize.

    <Button x:Name="PART_PreviousButton" Grid.Column="0" Focusable="False" HorizontalAlignment="Left" Height="20" Grid.Row="0" Template="{StaticResource PreviousButtonTemplate}" Width="28"/>
<Button x:Name="PART_HeaderButton" Grid.Column="1" FontWeight="Bold" Focusable="False" FontSize="10.5" HorizontalAlignment="Center" Grid.Row="0" Template="{StaticResource HeaderButtonTemplate}"  VerticalAlignment="Center"/>
<Button x:Name="PART_NextButton" Grid.Column="2" Focusable="False" HorizontalAlignment="Right" Height="20" Grid.Row="0" Template="{StaticResource NextButtonTemplate}" Width="28"/>