WPF Toolkit DatePicker/Calender issue

bonkers123

Hi, I have a DatePicker, where I set the CalendarStyle (I'm using mvvm). The issue is, when I select a day on the calender, nothing happens (Looks like the Click event just never fires, or something.) The Control looks as follow:

<tool:DatePicker Grid.Column="1" Grid.Row="8" SelectedDate="{Binding BirthDate}" CalendarStyle="{DynamicResource CalenderStyleNew}"></tool:DatePicker>

Where the style looks as follow:

<Style TargetType="Controls:Calendar" x:Key="CalenderStyleNew">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Controls:Calendar">
<StackPanel HorizontalAlignment="Center" x:Name="Root">
<Controls:Calendar x:Name="Calendar" SelectedDate="{TemplateBinding SelectedDate}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
Controls:Calendar.CalendarDayButtonStyle
<Style>
<Setter Property="Button.Height" Value="50"></Setter>
<Setter Property="Button.Width" Value="50"></Setter>
<Setter Property="Button.FontSize" Value="20"></Setter>
</Style>
</Controls:Calendar.CalendarDayButtonStyle>
Controls:Calendar.CalendarButtonStyle
<Style>
<Setter Property="Button.Height" Value="50"></Setter>
<Setter Property="Button.Width" Value="50"></Setter>
<Setter Property="Button.FontSize" Value="20"></Setter>
</Style>
</Controls:Calendar.CalendarButtonStyle>
</Controls:Calendar>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I need the buttons bigger, because it's a touch screen app... Test this in your app, and you'll see, nothing happens when you select a day... Any help would be much appreciated. Kind regards, Hugo

bonkers123

ok, after A LOT of struggling, I managed to make a work around... but, it's not pretty !!! An easier solution would be much appreciated. What I did, was the following:

<Controls:DatePicker Grid.Column="1" Grid.Row="6" SelectedDate="{Binding BirthDate}" ViewModels:EmployeeViewModel.DatePickerGotFocus="{Binding}">
Controls:DatePicker.CalendarStyle
<Style TargetType="Controls:Calendar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Controls:Calendar">
<StackPanel HorizontalAlignment="Center" x:Name="Root">
<Controls:Calendar x:Name="Calendar" ViewModels:EmployeeViewModel.OnCalenderLoaded="{Binding}" SelectedDate="{Binding BirthDate}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
Controls:Calendar.CalendarDayButtonStyle
<Style>
<Setter Property="Button.Height" Value="50"></Setter>
<Setter Property="Button.Width" Value="50"></Setter>
<Setter Property="Button.FontSize" Value="20"></Setter>
</Style>
</Controls:Calendar.CalendarDayButtonStyle>
Controls:Calendar.CalendarButtonStyle
<Style>
<Setter Property="Button.Height" Value="50"></Setter>
<Setter Property="Button.Width" Value="50"></Setter>
<Setter Property="Button.FontSize" Value="20"></Setter>
</Style>
</Controls:Calendar.CalendarButtonStyle>
</Controls:Calendar>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Controls:DatePicker.CalendarStyle>
</Controls:DatePicker>

Then I made attached properties for the DatePicker and Calendar as follow:

private Calendar _calender;
private DatePicker _datePicker;

bonkers123

lol, I over complicated this a bit. The final solution I made was as follow:

<tool:DatePicker Grid.Column="1" Grid.Row="8" SelectedDate="{Binding BirthDate}" ViewModels:PatronViewModel.DatePickerGotFocus="{Binding}" Height="34" FontSize="18">
tool:DatePicker.LayoutTransform
<ScaleTransform ScaleY="1.5" ScaleX="1.5"></ScaleTransform>
</tool:DatePicker.LayoutTransform>
tool:DatePicker.CalendarStyle
<Style TargetType="tool:Calendar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="tool:Calendar">
<StackPanel HorizontalAlignment="Center" x:Name="Root">
<tool:Calendar x:Name="Calendar" ViewModels:PatronViewModel.OnCalenderLoaded="{Binding}" SelectedDate="{Binding BirthDate}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
tool:Calendar.LayoutTransform
<ScaleTransform ScaleX="2" ScaleY="2"></ScaleTransform>
</tool:Calendar.LayoutTransform>
</tool:Calendar>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</tool:DatePicker.CalendarStyle>
</tool:DatePicker>

So by simply scaling the DatePicker, I got a cool touch screen DatePicker....

Member 3423847

I tried your code above. For some reason, when I select a date from the calendar popup, it doesn't close the popup or select a date. I removed all Bindings since I don't have a viewmodel. I am just trying this out before putting it in my project.

bonkers123

I remember having this problem.... I had to do some magic on the actual date time by hiding and showing the actual boxes....

Jimmy Carter 0

I have the same problem (selecting date does nothing and I am not using view model) I was hoping you could elaborate on the "magic" that you used to resolve this problem. Thanks.

bonkers123

You don't even want to know what I had to do to fix this !!!! It's INSANE !

tronix01

hi bonkers, i thank you very much!!!!. your snippet helps me to solve my DatePicker SelectedDate - Binding problem! here is my solution. just override the ControlTemplate of the DatePicker-Control and bind the SelectedDate of the PopupCalendar.