Reputation: 149
Having some trouble with the DatePicker. Got a little stuck and could use some help/fresh look at the problem.
The Goal is to create a custom style for DatePicker, which differs mainly by:
Problem:
I am using custom style, with a Key, from a Resource Dictionary.
So far I passed the first objective and see no problems with the second one. But the last one, boy, appeared to be pretty tough. Only solution which worked is to set the property Focusable="False", but it is not an option, since it cuts off the ability to manually input the date.
Here is the style:
<Style x:Key="DatePicker" TargetType="{x:Type DatePicker}">
<Setter Property="Foreground" Value="{StaticResource DarkGrayBrush}" />
<Setter Property="Focusable" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="SelectedDateFormat" Value="Short" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<!--Set CalendarStyle to DatePickerCalendarStyle.-->
<Setter Property="CalendarStyle"
Value="{DynamicResource DatePickerCalendarStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
CornerRadius="0"
Background="Transparent">
<Grid x:Name="PART_Root"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button"
Grid.Column="1"
Foreground="{TemplateBinding Foreground}"
Focusable="True"
HorizontalAlignment="Left"
Margin="1,0,1,0"
Grid.Row="0"
VerticalAlignment="Center" Style="{StaticResource IconButtonStyle}">
<Image Source="/img/calendar.png" Height="20" />
</Button>
<Border BorderBrush="{StaticResource BlueBrush}"
BorderThickness="2"
CornerRadius="0"
Padding="0"
Width="150"
Height="23"
Background="{StaticResource WhiteBrush}">
<DatePickerTextBox x:Name="PART_TextBox"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
Focusable="{TemplateBinding Focusable}"
FocusVisualStyle="{x:Null}"
HorizontalContentAlignment="Left"
Grid.Row="0"
SelectionBrush="{x:Null}"
VerticalContentAlignment="Center"
BorderThickness="0"
Background="Transparent"
Width="150">
</DatePickerTextBox>
</Border>
<Grid x:Name="PART_DisabledVisual"
Grid.ColumnSpan="2"
Grid.Column="0"
IsHitTestVisible="False"
Opacity="0"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0"
Fill="#A5FFFFFF"
RadiusY="1"
Grid.Row="0"
RadiusX="1" />
<Rectangle Grid.Column="1"
Fill="#A5FFFFFF"
Height="18"
Margin="3,0,3,0"
RadiusY="1"
Grid.Row="0"
RadiusX="1"
Width="19" />
<Popup x:Name="PART_Popup"
AllowsTransparency="True"
Placement="Bottom"
PlacementTarget="{Binding ElementName=PART_TextBox}"
StaysOpen="False" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any help will be appreciated.
Thanks.
UPDATE:
Here is the link to my solution:
Upvotes: 1
Views: 774
Reputation: 1155
The highlight frame you are referring to is caused by a built-in visual state(MouseOver) in the DatePicker control, try these steps:
add a datepicker control to your project.
right click on the datepicker and pick "Edit Template \ Edit a Copy...".
this will take you to the template designer.
the textbox is actually another control inside the datepicker control, you will need to change the template of the textbox now, look for a control called "Part_Texbox", right click on it and pick "Edit Template \ Edit a Copy...".
you will need to change the values for the "MouseOver" visual state, check this image: https://postimg.org/image/ndqhew9g1/
Upvotes: 1