Forum Xamarin.Forms

DatePicker & TimePicker width and rendering problems on Universal Windows

Thibault_VellicusThibault_Vellicus CHUniversity ✭✭

Hello

For those having troubles with the rendering of DatePicker or TimePicker on Universal Windows platform, I had to write this custom renderer:

[assembly: ExportRenderer(typeof(Xamarin.Forms.TimePicker), typeof(MyTimePickerRenderer))] [assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(MyDatePickerRenderer))] namespace Observo.Client.Win.CustomRenderer { public class MyDatePickerRenderer : ViewRenderer<Xamarin.Forms.DatePicker, Windows.UI.Xaml.Controls.DatePicker> { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.DatePicker> e) { base.OnElementChanged(e); if (e.NewElement != null) { SetNativeControl(new Windows.UI.Xaml.Controls.DatePicker { MinWidth = 0 }); } } protected override Windows.Foundation.Size MeasureOverride(Windows.Foundation.Size availableSize) { //availableSize.Width value is wrong!!! return base.MeasureOverride(availableSize); } } public class MyTimePickerRenderer : ViewRenderer<Xamarin.Forms.TimePicker, Windows.UI.Xaml.Controls.TimePicker> { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TimePicker> e) { base.OnElementChanged(e); if (e.NewElement != null) { SetNativeControl(new Windows.UI.Xaml.Controls.TimePicker { MinWidth = 0 }); } } } }

Initial post from @AlessandroMoscatelli : http://forums.xamarin.com/discussion/comment/201993/#Comment_201993

Posts

  • Thibault_VellicusThibault_Vellicus CHUniversity ✭✭

    Or maybe easier in App.xaml:

    <Application x:Class="ObservoForm.Client.Win.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ObservoForm.Client.Win" RequestedTheme="Light"> <Application.Resources> <ResourceDictionary> <Style TargetType="TimePicker"> <Setter Property="MinWidth" Value="0" /> </Style> <Style TargetType="DatePicker"> <Setter Property="MinWidth" Value="0" /> </Style> </ResourceDictionary> </Application.Resources> </Application>

  • ShranarShranar FRMember

    It works but I have an issue on the dateChange event (DatePicker). The date of the Xamarin.Forms.Datepicker don't change and the entry of the datepicker become empty.

    Bind the Xamarin.Forms.Datepicker works now.

    • DatePickerRenderer
    
    protected override void OnElementChanged(ElementChangedEventArgs e)
            {
                base.OnElementChanged(e);
    
                if (e.NewElement != null)
                {
                    SetNativeControl(new Windows.UI.Xaml.Controls.DatePicker { MinWidth = 0 });
                    this.Control.DateChanged += dateChanged;     
                }
            }
    
    private void dateChanged(object sender, DatePickerValueChangedEventArgs e)
            {
                this.Element.Date = e.NewDate.Date;
            }
    
    

    However I don't know how to correctly bind the datepicker entry.

  • joao.martinsjoao.martins PTMember
    edited August 2016

    I had an exception when doing the XAML version: Message "Position 14:37. Can't resolve MinWidthProperty on DatePicker". Can you help please? I did this inside a Grid:
    <Grid.Resources> <ResourceDictionary> <Style TargetType="DatePicker"> <Setter Property="MinWidth" Value="0" /> </Style> </ResourceDictionary> </Grid.Resources>

  • Thibault_VellicusThibault_Vellicus CHUniversity ✭✭

    @joao.martins : Are you writing this code into the PCL project? If yes, it won't work. You have to write the XAML code directly in the App.xaml from the Windows UWP project.
    We define here the UI from the Windows.UI.Xaml.Controls.DatePicker control and not the Xamarin.Forms.DatePicker.

  • joao.martinsjoao.martins PTMember

    @VellicusThibault: Well, that was the problem! And it is solved. Many thanks!

  • @Thibault_Vellicus I am facing the same problem. If I write the suggested code in the UWP app.xaml file then it is working fine. But it is not working through the one using CustomRenderer.

    Here is the snippet of my custom date picker renderer:
    _[assembly: ExportRenderer(typeof(CustomDatePicker), typeof(CustomDatePickerRenderer))]
    namespace MyApp.UWP.Implementations.Controls
    {
    public class CustomDatePickerRenderer : DatePickerRenderer
    {
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Background = new SolidColorBrush(Colors.Transparent);
                Control.FocusVisualPrimaryBrush = new SolidColorBrush(Colors.Transparent);
                Control.FocusVisualSecondaryBrush = new SolidColorBrush(Colors.Transparent);
                Control.BorderThickness = new Windows.UI.Xaml.Thickness(0);
                Control.FontSize = 16;
        Control.MinWidth = 0;
            }
        }
    }
    

    }_

    I am trying to set the min-width of the control to 0 but it doesn't seem to affect the date picker at all. Could you please suggest something as I would like to resolve this issue using the renderer.

    Thanks in advance!

Sign In or Register to comment.