c#wpfxamlcontroltemplatemahapps.metro
Datepicker Fontcolor on Focus
I want to change the Foreground (font color) of the mouse-over-day:
I've oriented myself on the following stackoverflow-question How Change datepicker's Selected Date Text Color (White) and also on the general calendar-style (github) of the mahapps-metro framework.
I not very good at styles and it took me a whole day to get the following output:
It changed the font color of the mouse-over day, nice! But the style for Background and selected cell is gone :(
<DatePicker
x:Name="dtpEnddate">
<DatePicker.Resources>
<Color
x:Key="NewColor">Pink</Color>
</DatePicker.Resources>
<DatePicker.CalendarStyle>
<Style
BasedOn="{StaticResource MahApps.Metro.Styles.BaseMetroCalendar}"
TargetType="Calendar">
<Setter
Property="CalendarDayButtonStyle">
<Setter.Value>
<Style
BasedOn="{StaticResource MahApps.Metro.Styles.MetroCalendarDayButtonStyle}"
TargetType="{x:Type CalendarDayButton}">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type CalendarDayButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition
GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState
x:Name="Normal" />
<VisualState
x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.75"
Duration="0" />
<ColorAnimation
Duration="0"
To="{StaticResource NewColor}"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="NormalText" />
</Storyboard>
</VisualState>
<VisualState
x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.9"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState
x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation
Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="Opacity"
To=".35"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="NormalText"
TextElement.Foreground="#000000"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<Rectangle
x:Name="HighlightBackground"
Fill="{DynamicResource MahApps.Brushes.Accent4}"
Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
I tried to copy the complete code inside of the original source from <Style x:Key="MahApps.Styles.CalendarDayButton" TargetType="{x:Type CalendarDayButton}"> with the additional ColorAnimation inside of the MouseOver-VisualState, but it ended up in the same result without background and selected cell.
Do you have any tips how to change the font color of the day on mouse-over? I would prefer to create a new style-snippet based on the frameworks style, not to recreate the whole style.
Here is some additional code from my App.xaml. I don't know if this is the reason:
<Color
x:Key="AccentColor">#9e0000</Color>
<Color
x:Key="AccentColor2">#9e0000
</Color>
<Color
x:Key="AccentColor3">#9e0000
</Color>
<Color
x:Key="AccentColor4">#9e0000
</Color>
<Color
x:Key="AccentColorWhite">#FFFFFF</Color>
<SolidColorBrush
x:Key="lightGray"
Color="LightGray"></SolidColorBrush>
<SolidColorBrush
x:Key="HighlightBrush"
Color="{StaticResource HighlightColor}" />
<SolidColorBrush
x:Key="AccentBaseColorBrush"
Color="{StaticResource AccentBaseColor}" />
<SolidColorBrush
x:Key="AccentColorBrush"
Color="{StaticResource AccentColor}" />
<SolidColorBrush
x:Key="AccentColorBrush2"
Color="{StaticResource AccentColor2}" />
<SolidColorBrush
x:Key="AccentColorBrush3"
Color="{StaticResource AccentColor3}" />
<SolidColorBrush
x:Key="AccentColorBrush4"
Color="{StaticResource AccentColor4}" />
<SolidColorBrush
x:Key="WindowTitleColorBrush"
Color="{StaticResource AccentColor}" />
<Color
x:Key="IdealForegroundColor">White</Color>
<SolidColorBrush
x:Key="IdealForegroundColorBrush"
Color="{StaticResource IdealForegroundColor}" />
<SolidColorBrush
x:Key="IdealForegroundDisabledBrush"
Opacity="0.4"
Color="{StaticResource IdealForegroundColor}" />
<SolidColorBrush
x:Key="AccentSelectedColorBrush"
Color="{StaticResource IdealForegroundColor}" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<!-- Flat slider -->
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Red.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
Solution
Original Solution for Version 2.4.9
Unfortunately, if you need to adapt any part of control templates like visual states, you have to rewrite or copy it completely and adapt the parts in question. Styles can be based on others, but control templates cannot. However, as you already found out, you only have to adapt the calendar button style, not all styles for calendar.
Your style seems to be heavily edited and compared to the base style, there is a lot missing, which causes the missing visual representation. If you want to change the mouse over foreground color, you only have to add a Trigger to the control template triggers, that observes if IsMouseOver is True. Then you can set the Foreground brush to your NewBrush (I renamed it to brush).
<!-- IsMouseOver -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{StaticResource NewBrush}" />
</Trigger>
In this case, change your resource to a brush instead of a color (Foreground is of type Brush).
<SolidColorBrush x:Key="NewBrush" Color="Pink"/>
This is the whole DatePicker with the copied and adapted style for the calendar day buttons.
<DatePicker x:Name="dtpEnddate">
<DatePicker.Resources>
<SolidColorBrush x:Key="NewColor" Color="Pink"/>
</DatePicker.Resources>
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}"
BasedOn="{StaticResource MahApps.Styles.Calendar.DateTimePicker}">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="{x:Type CalendarDayButton}">
<Setter Property="FontFamily" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontFamily, Mode=OneWay}" />
<Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontSize, Mode=OneWay}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="Padding" Value="5 1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid>
<Rectangle x:Name="TodayBackground"
Fill="{DynamicResource MahApps.Brushes.Accent}"
Opacity="0" />
<Rectangle x:Name="SelectedBackground"
Fill="{DynamicResource MahApps.Brushes.Accent4}"
Opacity="0" />
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="HighlightBackground"
Fill="{DynamicResource MahApps.Brushes.Accent4}"
Opacity="0" />
<Path x:Name="Blackout"
Margin="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"
Fill="{DynamicResource MahApps.Brushes.Accent3}"
Opacity="0"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill" />
<ContentPresenter x:Name="NormalText"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<Rectangle x:Name="DayButtonFocusVisual"
IsHitTestVisible="false"
Stroke="{DynamicResource MahApps.Brushes.Accent3}"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.75"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.9"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="Opacity"
To=".35"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualState x:Name="Active" />
<VisualState x:Name="Inactive" />
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualState x:Name="NormalDay" />
<VisualState x:Name="BlackoutDay" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<!-- IsInactive -->
<Trigger Property="IsInactive" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Gray2}" />
</Trigger>
<!-- IsMouseOver -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{StaticResource NewColor}" />
</Trigger>
<!-- IsSelected -->
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.AccentBase}" />
</Trigger>
<!-- IsToday, IsTodayHighlighted and IsSelected -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="DayButtonFocusVisual" Property="Stroke" Value="{DynamicResource MahApps.Brushes.Gray1}" />
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Accent}" />
</MultiDataTrigger>
<!-- IsToday and IsTodayHighlighted -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Selected.Foreground}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="1" />
</MultiDataTrigger>
<!-- IsBlackedOut -->
<Trigger Property="IsBlackedOut" Value="True">
<Setter TargetName="Blackout" Property="Opacity" Value="1" />
</Trigger>
<!-- IsToday and IsBlackedOut -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsToday" Value="True" />
<Condition Property="IsBlackedOut" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Blackout" Property="Fill" Value="{DynamicResource MahApps.Brushes.Accent}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="0.5" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
This is what the result looks like for Red theme (might not be yours).
Update for Version 1.6.5
As you mentioned later in the comments, you are using MahApps.Metro version 1.6.5. Styles and templates change over time. The old version is incompatible with the current version.
Here is an adapted style based on the default style of the correct version.
<DatePicker x:Name="dtpEnddate">
<DatePicker.Resources>
<SolidColorBrush x:Key="NewBrush" Color="Pink"/>
</DatePicker.Resources>
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}"
BasedOn="{StaticResource MahApps.Metro.Styles.MetroCalendar}">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="{x:Type CalendarDayButton}">
<Setter Property="FontFamily" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontFamily, Mode=OneWay}" />
<Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontSize, Mode=OneWay}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid>
<Rectangle x:Name="TodayBackground"
Fill="{DynamicResource AccentColorBrush}"
Opacity="0" />
<Rectangle x:Name="SelectedBackground"
Fill="{DynamicResource AccentColorBrush4}"
Opacity="0" />
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="HighlightBackground"
Fill="{DynamicResource AccentColorBrush4}"
Opacity="0" />
<Path x:Name="Blackout"
Margin="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"
Fill="{DynamicResource AccentColorBrush3}"
Opacity="0"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill" />
<ContentPresenter x:Name="NormalText"
Margin="5 1 5 1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<Rectangle x:Name="DayButtonFocusVisual"
IsHitTestVisible="false"
Stroke="{DynamicResource AccentColorBrush3}"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.75"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.9"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="Opacity"
To=".35"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Active" />
<VisualState x:Name="Inactive">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="(TextElement.Foreground)"
Duration="0">
<DiscreteObjectKeyFrame Value="{DynamicResource GrayBrush2}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NormalDay" />
<VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Blackout"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource NewBrush}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource AccentColorBrush}" />
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="DayButtonFocusVisual" Property="Stroke" Value="{DynamicResource GrayBrush1}" />
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource AccentColorBrush}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="1" />
</MultiDataTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsToday" Value="True" />
<Condition Property="IsBlackedOut" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Blackout" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="0.5" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>