[Solved] Change DatePicker Selector Popup

[Blaise]

Hello,



I'd like to display the DatePicker and TimePicker popups as full screen popups, while:

1) still leaving the loopItem sizes the same

2) have them in the center of the screen horizontally

3) do this dynamically in code - I believe this makes sense for capturing the current window size.



I've looked at modifying generic.xaml here: "\RadControls for Metro XAML Q1 2012 BETA\Binaries\Input\Telerik.UI.Xaml.Input\Themes" but don't think that helps much.



Is this possible?



Thanks,

Blaise

[Georgi]

Hi Blaise,

Thank you for contacting us and for your question.

Currently the Selector supports vertical stretching only - you may achieve this by setting the ItemCount property to zero (0).

We may think of adding properties like SelectorHorizontalAlignment and SelectorVerticalAlignment, giving more precise control over the position of the Popup on the screen. We may also expose an Opening event that will allow you to specify the desired screen bounds where the Popup should be positioned.

I have added this as a feature request and we will implement it in a future release. I have also updated your Telerik points for your time and feedback.

Do not hesitate to contact us with any question/problem you may have with our tools.

Kind regards,
Georgi
the Telerik team

[Blaise]

Thanks Georgi.  The ItemCount tip was helpful.  I think the following workaround should work:

public class DatePicker : RadDatePicker
    {
        private Popup popupRoot;
        private Button pickButton;
        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this.popupRoot = this.GetTemplateChild("PART_Popup") as Popup;
            this.pickButton = this.GetTemplateChild("PART_PickerButton") as Button;
            this.popupRoot.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            this.popupRoot.Opened += popupRoot_Opened;
            this.popupRoot.Closed += popupRoot_Closed;
        }

        void popupRoot_Closed(object sender, object e)
        {
            this.popupRoot.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        }

        void popupRoot_Opened(object sender, object e)
        {
            Border border = (Border)this.popupRoot.Child;
            var windowBounds = Window.Current.Bounds;
            border.Width = windowBounds.Width;
            border.Height = windowBounds.Height;

            Func<UIElement, UIElement, Windows.Foundation.Point> GetOffset = delegate(UIElement control1, UIElement control2)
            {
                return control1.TransformToVisual(control2).TransformPoint(new Windows.Foundation.Point(0, 0));
            };

            Windows.Foundation.Point buttonOffSet = GetOffset(this.pickButton, Window.Current.Content);

            this.popupRoot.VerticalOffset = -buttonOffSet.Y;
            this.popupRoot.HorizontalOffset = -buttonOffSet.X;
            this.popupRoot.UpdateLayout();
            this.popupRoot.Visibility = Windows.UI.Xaml.Visibility.Visible;
        }
    }

Additional Steps:
1) In \RadControls for Metro XAML Q1 2012 BETA\Binaries\Input\Telerik.UI.Xaml.Input\Themes\Generic.xaml set Width=300 for the child grid of PART_SelectorLayoutRoot.
2) Set the ItemCount=0 for DatePicker.

The GetOffset delegate is courtesy of Adam Freeman's book "Metro Revealed".

Thanks for your help - please let me know if you see any downside in this approach.

Thanks,
Blaise

[Georgi]

Hi Blaise,

Thanks for getting back to me.

Yes, the following workaround should work. We are updating the Size, Horizontal and Vertical offset properties at an earlier stage and you simply override them. I cannot see any implementation downside of this approach, the only thing that you may need to consider is that the Tap-outside-to-dismiss will not be possible and the only way to close the Popup will be through the OK/Cancel buttons (or the Enter/Escape keys).

Thanks for sharing your implementation with the community. Please let me know if I can be of help with any other question you may have.

Greetings,
Georgi
the Telerik team