How to change template of DateTimePicker

[Torchok19081986]

Hallo i want to use currently mahapps metro datetimepicker for own project, but i have to customize template of datetimepicker.
How can i set for example calendaritemstyle or foreground of days instead of black color?
Is there possiblity to change headerstyle as well by creating custom ressourcedictionary or not ?
Many thanks for advice and answers.

[punker76]

The DateTimePicker uses internally the Calendar control and it's possible to change these styles from outside. Setting the day foreground is a little bit tricky because of limitations to the WPF control itself.

<mah:DateTimePicker>
    <mah:DateTimePicker.CalendarStyle>
        <Style TargetType="{x:Type Calendar}" BasedOn="{StaticResource {x:Type Calendar}}">
            <Setter Property="CalendarItemStyle" Value="{StaticResource Custom.Styles.CalendarItem}" />
        </Style>
    </mah:DateTimePicker.CalendarStyle>
</mah:DateTimePicker>

with this style for the calendar items

<Style x:Key="Custom.Styles.CalendarItem" TargetType="{x:Type CalendarItem}" BasedOn="{StaticResource MahApps.Styles.CalendarItem}">
    <Setter Property="Margin" Value="0 3" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CalendarItem}">
                <ControlTemplate.Resources>
                    <!--  Used for day names  -->
                    <DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
                        <TextBlock Margin="0 6 0 6"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   FontWeight="Bold"
                                   Foreground="Crimson" // <- here you can change the color for the day names
                                   Opacity="0.8"
                                   Text="{Binding}" />
                    </DataTemplate>
                </ControlTemplate.Resources>
                <Grid x:Name="PART_Root">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0"
                                  HorizontalAlignment="Stretch"
                                  Background="{DynamicResource MahApps.Brushes.Accent}">
                                <Button x:Name="PART_HeaderButton"
                                        Grid.Row="0"
                                        Focusable="False"
                                        Style="{DynamicResource MahApps.Styles.Button.Calendar.Header}" />
                                <Button x:Name="PART_PreviousButton"
                                        Grid.Row="0"
                                        Focusable="False"
                                        Style="{DynamicResource MahApps.Styles.Button.Calendar.Previous}" />
                                <Button x:Name="PART_NextButton"
                                        Grid.Row="0"
                                        Focusable="False"
                                        Style="{DynamicResource MahApps.Styles.Button.Calendar.Next}" />
                            </Grid>
                            <Grid x:Name="PART_MonthView"
                                  Grid.Row="1"
                                  Margin="6 0 6 6"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  Visibility="Visible">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                            </Grid>
                            <Grid x:Name="PART_YearView"
                                  Grid.Row="1"
                                  Margin="6 0 6 6"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  Visibility="Hidden">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                            </Grid>
                        </Grid>
                    </Border>
                    <Rectangle x:Name="PART_DisabledVisual"
                               Fill="{DynamicResource MahApps.Brushes.Control.Disabled}"
                               Opacity="0"
                               Stretch="Fill"
                               Stroke="{DynamicResource MahApps.Brushes.Control.Disabled}"
                               StrokeThickness="1"
                               Visibility="Collapsed" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="PART_DisabledVisual"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, FallbackValue={x:Static CalendarMode.Month}}" Value="Year">
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, FallbackValue={x:Static CalendarMode.Month}}" Value="Decade">
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>