WPF DatePicker make separator fixed and always visible - wpf

Question

I am developing a WPF application in which I would like to use the default DatePicker control. I also want to let the user insert manually the date, but I want to prevent the separator ("/") to be deleted by the user. (more precisely, even if the DatePicker's textbox is "empty", the separators should be still there)
Can this be done without creating a new Custom Control? Thank you!

Answer 1

I have made the following sample:
<DatePicker HorizontalAlignment="Left" Margin="132,118,0,0" VerticalAlignment="Top" Width="204" Name="DatePicker"
SelectedDateChanged="DatePicker_OnSelectedDateChanged">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox x:Name="TextBox1" Grid.Column="0"
Style="{StaticResource DatePickerTextBoxStyle}"
TextChanged="OnTextboxTextChanged1" PreviewTextInput="OnPreviewTextInput1"/>
<Label Grid.Column="1" Content="/" FontSize="18" HorizontalAlignment="Center"/>
<TextBox x:Name="TextBox2" Grid.Column="2" Style="{StaticResource DatePickerTextBoxStyle}"
TextChanged="OnTextboxTextChanged2" PreviewTextInput="OnPreviewTextInput2"/>
<Label Grid.Column="3" Content="/" FontSize="18" HorizontalAlignment="Center"/>
<TextBox x:Name="TextBox3" Grid.Column="4" Style="{StaticResource DatePickerTextBoxStyle}"
TextChanged="OnTextboxTextChanged3" PreviewTextInput="OnPreviewTextInput3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
And in your codebehind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private static void TrimText(TextBox textbox)
{
textbox.Text = textbox.Text.Trim();
if (textbox.Text.Length == 2) textbox.Text = textbox.Text.PadLeft(2, '0');
textbox.CaretIndex = textbox.Text.Length;
}
private void OnTextboxTextChanged1(object sender, TextChangedEventArgs e)
{
var textbox = sender as TextBox;
if (textbox == null) return;
TrimText(textbox);
if (textbox.Text.Length != 2) return;
var datePickerTxtBox = DatePicker.Template.FindName("PART_TextBox", DatePicker) as DatePickerTextBox;
var secondTxtbox = datePickerTxtBox.Template.FindName("TextBox2", datePickerTxtBox) as TextBox;
secondTxtbox.Focus();
}
private void OnTextboxTextChanged2(object sender, TextChangedEventArgs e)
{
var textbox = sender as TextBox;
if (textbox == null) return;
TrimText(textbox);
if (textbox.Text.Length != 2) return;
var datePickerTxtBox = DatePicker.Template.FindName("PART_TextBox", DatePicker) as DatePickerTextBox;
var thirdTxtbox = datePickerTxtBox.Template.FindName("TextBox3", datePickerTxtBox) as TextBox;
thirdTxtbox.Focus();
}
private void OnTextboxTextChanged3(object sender, TextChangedEventArgs e)
{
var textbox = sender as TextBox;
if (textbox == null) return;
TrimText(textbox);
if (textbox.Text.Length != 2) return;
var datePickerTxtBox = DatePicker.Template.FindName("PART_TextBox", DatePicker) as DatePickerTextBox;
var firstTxtbox = datePickerTxtBox.Template.FindName("TextBox1", datePickerTxtBox) as TextBox;
var secondTxtbox = datePickerTxtBox.Template.FindName("TextBox2", datePickerTxtBox) as TextBox;
DateTime date;
var text = firstTxtbox.Text + secondTxtbox.Text + textbox.Text;
if (!DateTime.TryParseExact(text,"ddMMyy",null,DateTimeStyles.None, out date))
firstTxtbox.Text = secondTxtbox.Text = textbox.Text = string.Empty;
else DatePicker.DisplayDate = date;
}
private void OnPreviewTextInput1(object sender, TextCompositionEventArgs e)
{
e.Handled = !(new Regex("[0-9]+").IsMatch(e.Text));
}
private void OnPreviewTextInput2(object sender, TextCompositionEventArgs e)
{
e.Handled = !(new Regex("[0-9]+").IsMatch(e.Text));
}
private void OnPreviewTextInput3(object sender, TextCompositionEventArgs e)
{
e.Handled = !(new Regex("[0-9]+").IsMatch(e.Text));
}
private void DatePicker_OnSelectedDateChanged(object sender, SelectionChangedEventArgs e)
{
var newDate = DateTime.Parse(e.Source.ToString());
DatePicker.DisplayDate = newDate;
var datePickerTxtBox = DatePicker.Template.FindName("PART_TextBox", DatePicker) as DatePickerTextBox;
var firstTxtbox = datePickerTxtBox.Template.FindName("TextBox1", datePickerTxtBox) as TextBox;
var secondTxtbox = datePickerTxtBox.Template.FindName("TextBox2", datePickerTxtBox) as TextBox;
var thirdTxtbox = datePickerTxtBox.Template.FindName("TextBox3", datePickerTxtBox) as TextBox;
firstTxtbox.Text = DatePicker.DisplayDate.ToString("dd");
secondTxtbox.Text = DatePicker.DisplayDate.ToString("MM");
thirdTxtbox.Text = DatePicker.DisplayDate.ToString("yy");
}
}
This is just a sample of how you may work around this. It is lacking of some validation, mainly in the inner textboxes used to hold year, month and day values. Nevertheless it is something as you possibly want
EDIT>>> Also the codebehind must be improved for production as I have lot of repeated code. But this is just an example.
EDIT2>>>> This is how it looks: