DatePicker Calendar Popup problem

07-27-2008 11:19 AM |

Found a problem with DatePicker in DataGrid. This is not a DataGrid problem, but a issue with DatePicker. But it is easy to show it in DataGrid.

My DataGrid is a full page dataGrid. I have Columns use DatePicker as edit control.  Because the popup calendar always opens at a position below the DatePicker button, so it would not be accessible if the row is close to the bottom of the screen.

Re: DatePicker Calendar Popup problem

07-28-2008 5:56 AM |

I too have come across such issue with datepicker... 

Re: DatePicker Calendar Popup problem

09-29-2008 11:22 AM |

I have just tested this bug in RC0. The calendar popup is showing up correctly when the DatePicker control is at the bottom edge of the screen.

However, if my date column is in the last column of the DataGrid, the DataPicker is at the right edge of the screen, the calendar in the popup is still not fully accessible. In this case, I think the popup should be right aligned with the button, not left aligned with the inputbox.

When fixing bugs,  please test all the possible cases. The calendar control should be accessible no matter where (left/right/top/bottom edge of the screen) user put the DatePicker.

Re: DatePicker Calendar Popup problem

09-29-2008 11:31 AM |

+1, this issue made me to change the design so that datepicker is not close to the right side of a silverlight application.

Re: Re: DatePicker Calendar Popup problem

11-26-2008 2:34 PM |

Here is the solution if you derive from DatePicker:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;

namespace SilverlightApplication1
{
    public partial class MyDatePicker:DatePicker 
    {
        Popup _popup;
        FrameworkElement _root;

        public MyDatePicker()
        {

        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this._popup = GetTemplateChild("Popup") as Popup;
            this._root = GetTemplateChild("Root") as FrameworkElement;


            if (this._popup != null)
            {
                this._popup.Opened += new EventHandler(_popup_Opened);
            }
        }

        void _popup_Opened(object sender, EventArgs e)
        {

            Canvas c = this._popup.Child as Canvas;

            if (c != null)
            {
                Calendar cal = c.Children[1] as Calendar;

                if (cal != null)
                {
                    cal.SizeChanged += new SizeChangedEventHandler(cal_SizeChanged);
                }
            }
        }

        void cal_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            Calendar c = sender as Calendar;
            if (c != null)
            {
                if (Application.Current != null && Application.Current.Host != null && Application.Current.Host.Content != null)
                {
                    double pageHeight = Application.Current.Host.Content.ActualHeight;
                    double pageWidth = Application.Current.Host.Content.ActualWidth;
                    double calendarHeight = c.ActualHeight;
                    double dpHeight = this.ActualHeight;

                    if (this._root != null)
                    {
                        MatrixTransform mt = this._root.TransformToVisual(null) as MatrixTransform;

                        if (mt != null)
                        {
                            double dpX = mt.Matrix.OffsetX;
                            double dpY = mt.Matrix.OffsetY;

                            double calendarX = dpX;

                            if (calendarX + c.ActualWidth > pageWidth)
                            {
                                Canvas.SetLeft(c, -c.ActualWidth);
                            }
                        }
                    }
                }
            }
        }
    }
}