WPF Toolkit DatePicker/Calender issue - WPF Discussion Boards

WPF Toolkit DatePicker/Calender issue

24-Jun-09 22:10

Take a look here Karl,Josh[^] and here MSDN[^]

bonkers12324-Jun-09 21:26

24-Jun-09 21:26

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

bonkers12324-Jun-09 22:58

24-Jun-09 22:58

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;

    public static object GetDatePickerGotFocus(DependencyObject obj)
    {
      return (object)obj.GetValue(DatePickerGotFocusProperty);
    }

    public static void SetDatePickerGotFocus(DependencyObject obj, object value)
    {
      obj.SetValue(DatePickerGotFocusProperty, value);
    }

    // Using a DependencyProperty as the backing store for DatePickerGotFocus.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DatePickerGotFocusProperty =
        DependencyProperty.RegisterAttached("DatePickerGotFocus", typeof(object), typeof(EmployeeViewModel), new UIPropertyMetadata(OnDatePickerGotFocus));

    private static void OnDatePickerGotFocus(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      DatePicker datePicker = d as DatePicker; //d.GetValue(FocusEditProperty) as TextBox;
      EmployeeViewModel model = e.NewValue as EmployeeViewModel;
      if (datePicker != null && model != null)
      {
        model._datePicker = datePicker;
      }
    }


    public static object GetOnCalenderLoaded(DependencyObject obj)
    {
      return (object)obj.GetValue(OnCalenderLoadedProperty);
    }

    public static void SetOnCalenderLoaded(DependencyObject obj, object value)
    {
      obj.SetValue(OnCalenderLoadedProperty, value);
    }

    // Using a DependencyProperty as the backing store for OnCalenderLoaded.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty OnCalenderLoadedProperty =
        DependencyProperty.RegisterAttached("OnCalenderLoaded", typeof(object), typeof(EmployeeViewModel), new UIPropertyMetadata(OnCalenderLoaded));

    private static void OnCalenderLoaded(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      Calendar calendar = d as Calendar; //d.GetValue(FocusEditProperty) as TextBox;
      EmployeeViewModel model = e.NewValue as EmployeeViewModel;
      if (calendar != null && model != null)
      {
        model._calender = calendar;
      }
    }

And then I set the visibility as follows:
public DateTime _birthDate;

public DateTime BirthDate
   {
     get { return _birthDate; }
     set
     {
       _birthDate = value;
       OnPropertyChanged("BirthDate");
       if (_calender != null)
       {
         _calender.Visibility = Visibility.Hidden;
         _datePicker.GotFocus += new RoutedEventHandler(_datePicker_GotFocus);
       }
     }
   }

   private void _datePicker_GotFocus(object sender, RoutedEventArgs e)
   {
     _calender.Visibility = Visibility.Visible;
     etc..

bonkers12325-Jun-09 1:40

25-Jun-09 1:40

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 342384716-Nov-09 9:29

Member 3423847

16-Nov-09 9:29

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.

bonkers12323-Nov-09 0:20

23-Nov-09 0:20

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

Jimmy Carter23-Dec-09 9:57

Jimmy Carter

23-Dec-09 9:57

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.

bonkers12312-Jan-10 2:07

12-Jan-10 2:07

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

WPF Combobox not navigating to items on key press

tronix0127-Jan-11 22:54

tronix01

27-Jan-11 22:54

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.

<Popup Name="Part_CalendarPopup" 
        Margin="0,22,-22,-12"
        HorizontalAlignment="Right" 
        PlacementTarget="{Binding ElementName=Part_CalendarButton}" StaysOpen="False">
        <Grid Name="Part_CalendarGrid" Background="White">
          <cal:Calendar
             SelectedDate="{Binding SelectedDate, Mode=TwoWay}"  <!-- the holy line -->
             Height="160" Width="160" 
             FooterVisibility="Collapsed" WeekColumnVisibility="Collapsed"   
             FontSize="9"/>
            </Grid>
         </Popup>

S Rajput24-Jun-09 20:22

Re: WPF Combobox not navigating to items on key press

24-Jun-09 20:22

Hi.. Inside my code the combobox is not responding to key press events.. like if user presses M, combobox should select Marrylands in the dropdownlist like the ASP .net combobox does. Can anyone please help???

<ComboBox HorizontalAlignment="Right" Height="23" Name="cmbPortsFrom" KeyDown="cmbPortsFrom_KeyDown" Width="105" SelectedIndex="0" Grid.Row="2" Grid.Column="0" >

<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Code}" FontSize="15" Height="20"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>

codebehind:

Dim lDataSource2 As ICollection(Of BusinessLayer.Ports)
lDataSource2 = mBalObjPorts.getPortData()
Me.cmbPortsFrom.ItemsSource = lDataSource2

ABitSmart24-Jun-09 20:25

Re: WPF Combobox not navigating to items on key press

24-Jun-09 20:25

SR81 wrote:
KeyDown="cmbPortsFrom_KeyDown"

What are you doing in the keydown event ?

S Rajput24-Jun-09 20:29

Re: WPF Combobox not navigating to items on key press

24-Jun-09 20:29

apparently nothing, its an empty function.I believe the combobox should automatically select Marrylands from the list if user presses "M" key??

Christian Graus24-Jun-09 21:08

Christian Graus

24-Jun-09 21:08

Perhaps your empty event is preventing this from occuring ?

Christian Graus

Driven to the arms of OSX by Vista.

"! i don't exactly like or do programming and it only gives me a headache." - spotted in VB forums.

I can do things with my brain that I can't even google. I can flex the front part of my brain instantly anytime I want. It can be exhausting and it even causes me vision problems for some reason. - CaptainSeeSharp

Re: WPF Combobox not navigating to items on key press

S Rajput24-Jun-09 21:22

Re: WPF Combobox not navigating to items on key press

24-Jun-09 21:22

I have removed the function, still its not working.
It could be because the combobox contains nearlly 500 rows?
Anyhow i am writing the keypress event function to achieve this. Thanks.

ABitSmart24-Jun-09 21:37

Re: WPF Combobox not navigating to items on key press

24-Jun-09 21:37

SR81 wrote:
It could be because the combobox contains nearlly 500 rows?

That doesn't seem logical.

Perhaps because changes to VisualTree will be making it difficult to decide what to use as SelectedValuePath. Just a guess.

ABitSmart24-Jun-09 21:34

Re: WPF Combobox not navigating to items on key press

24-Jun-09 21:34

If you are going to use a just a TextBox then do it this way,

<ComboBox x:Name="myComboBox" IsEditable="true" DisplayMemberPath="Code"  Height="266" >
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>                
</ComboBox>

If no, you would have to implement the functionality on KeyDown event (specifically by overriding OnPreviewKeyDown). This[^] might be of help.

S Rajput28-Jun-09 18:45