Forum Xamarin.Forms

DatePicker not working in ListView

luvalencialuvalencia Member ✭✭
edited December 2018 in Xamarin.Forms

Hello, I have this problem:

I created a ListView like this:

<ListView x:Name="ListRoutes"
                  ItemsSource="{Binding Routes}">
<ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Margin="0,10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.5"/>
                                    <ColumnDefinition Width="0.5"/>
                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>

                                <StackLayout Grid.Column="0" Grid.Row="0"
                                             VerticalOptions="EndAndExpand">
                                    <Label Text="Depart"/>
                                    **<DatePicker x:Name="DatePicker" Date="{Binding RouteDate}"
                                                MinimumDate="{Binding RouteDate}"
                                                MaximumDate="12/31/2050"
                                                WidthRequest="100"/>**
                                </StackLayout>

                                <StackLayout Grid.Column="1" Grid.Row="0"
                                             Orientation="Horizontal"
                                             VerticalOptions="EndAndExpand"
                                             HorizontalOptions="FillAndExpand"
                                             Padding="0,5,0,0">
                                    <Entry Style="{StaticResource BordingEntry}"
                                                        HorizontalOptions="FillAndExpand"
                                                        Text="{Binding TimeHour}"
                                                        Keyboard="Numeric"/>

                                    <Label Text=":"
                                           VerticalTextAlignment="Center"/>
                                    <Entry Style="{StaticResource BordingEntry}"
                                                        HorizontalOptions="FillAndExpand"
                                                        Text="{Binding TimeMinute}"
                                                        Keyboard="Numeric"/>
                                </StackLayout>





                            </Grid>
                               </ViewCell>
                                </DataTemplate>
                                </ListView.ItemTemplate>
                                </ListView>

The problem is that each time I tap on any entry, the DatePicker showsUp, even when I stop typing in an entry the datepicker shows up :neutral:

I don't know if it is because the listview doesnt support a datepicker or what ...

Any idea? Thanks!!!

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Can you please fix your markdown so the site doesn't try to render your XAML? Then people can be sure what they are reading isn't missing anything.
    https://redpillxamarin.com/2016/12/13/faq-frequently-asked-questions/

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    A couple testing/confirmation suggestions.
    1. Set the BackgroundColor of your Entrys and DatePicker to obvious and different colors like Lime and Fuschia. This often reveals that controls are wider or taller and taking more space than we think they are. That alone can solve mysteries when we learn that we're really tapping on a control that we didn't realize we were tapping on.
    2. Take out the AndExpand on the DatePicker. This could account for the control going wider than you think and thus you are tapping it without knowing.
    3. Try tapping on the Entry with a stylus or through a remote control app like Vyser using your PC mouse. That will ensure that you are really tapping ONLY on the Entry and not getting a tap on 2 or controls in a small screen real estate. Its easy for a big finger to tap on 2-3 items at once.

  • luvalencialuvalencia Member ✭✭

    Thank you for your answer, I did it all what you said and all is normal!!
    I had to use SyncfusionListview, and it helped me to solve it

    Sooo, I think that there is a bug in there with the Native ListView

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Do me a favor? Go ahead and fix the XAML of your post even though you've got a solution. I want to copy it into one of my own projects to test this with, using the native ListView to see if I get the same behavior.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Seems to work as expected in UWP

    Seems to work as expected in Android

    I don't think its a bug in the OEM controls. Probably just something in your XAML where controls are overlapping.

            <ListView ItemsSource="{Binding WidgetCollection}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Switch IsToggled="{Binding IsSelected}" />
                                <Entry Text="{Binding Name}"
                                       BackgroundColor="Lime"/>
                                <DatePicker Date="{Binding SomeDate}"
                                            BackgroundColor="SaddleBrown"/>
    
                                <!--  UI layer even for UI purposes. Not for logic or workflow  -->
                                <!--  Notice that it is automatically wired to the page code behind without having to specify it  -->
                                <Button Clicked="Button_OnClicked"
                                        Text="UI Layer" />
    
                                <!--  The ListView binded collection element has the command and the handler  -->
                                <Button Command="{Binding ModelCommand}"
                                        Text="Model Command" />
    
                                <!--  The command is on the ViewModel and takes the collection element as the parameter  -->
                                <Button Command="{Binding Source={x:Reference this},
                                                          Path=BindingContext.VmCommand}"
                                        CommandParameter="{Binding .}"
                                        Text="VM Command" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    
  • luvalencialuvalencia Member ✭✭
    edited December 2018

    Thank you very much for your support!! I just edited my code with Markdown as you said.

Sign In or Register to comment.