Best approach to slide between listviews

Im trying to create a view (my image) where you can click on the specific date up top and it will redirect to that dates listview, kinda like a tabbedpage. But the view is itself a part of a tabbedpage (the one in the bottom). How do I best do that?

I disable swiping for the tabbedpage, and want to be able swipe between the dates. Im not sure what approach is the best for this view.

Best Answers

Answers

  • batmacibatmaci DEMember ✭✭✭✭✭
    You can use collectionview or sflistview
  • JarvanJarvan Member, Xamarin Team Xamurai
    edited October 2019

    Try to use Xamarin.Forms Shell. Xamarin.Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require, including:

    • A single place to describe the visual hierarchy of an application.
    • A common navigation user experience.
    • A URI-based navigation scheme that permits navigation to any page in the application.
    • An integrated search handler.

    Check the Tutorial:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/introduction.

  • larzrazlarzraz Member ✭✭

    @Jarvan said:
    Try to use Xamarin.Forms Shell. Xamarin.Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require, including:

    • A single place to describe the visual hierarchy of an application.
    • A common navigation user experience.
    • A URI-based navigation scheme that permits navigation to any page in the application.
    • An integrated search handler.

    Check the Tutorial:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/introduction.

    Thanks for your answer!
    I have looked at this, but I have some issues with it. I want the topbar to have some padding around, rounded corners and a button/DatePicker next to it. I cant figure out how? is this possible?

  • JarvanJarvan Member, Xamarin Team Xamurai

    I want the topbar to have some padding around, rounded corners and a button/DatePicker next to it.

    Try to use FlyoutItem and add the ShellSection. For rounded corners, you may need to create a custom renderer.

    <FlyoutItem Route="animals"
                    Title="Animals"
                    FlyoutDisplayOptions="AsMultipleItems">
        <ShellSection Title="Domestic"
                 Route="domestic"
                 Icon="paw.png">
            <ShellContent Route="cats"
                              Style="{StaticResource DomesticShell}"
                              Title="Cats"
                              Icon="cat.png"
                              ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Route="dogs"
                              Style="{StaticResource DomesticShell}"
                              Title="Dogs"
                              Icon="dog.png"
                              ContentTemplate="{DataTemplate views:DogsPage}" />
        </ShellSection>
        <ShellContent Route="monkeys"
                          Style="{StaticResource MonkeysShell}"
                          Title="Monkeys"
                          Icon="monkey.png"
                          ContentTemplate="{DataTemplate views:MonkeysPage}" />
        ...
    </FlyoutItem>
    

  • JarvanJarvan Member, Xamarin Team Xamurai

    1.You can also use tabView plugins in contentPage.
    Two plugins about TabView:
    https://help.syncfusion.com/xamarin/sftabview/selection-changed
    https://github.com/chaosifier/TabView

    2.Customlize a tabView. All rounded corners and a button/DatePicker can be achieve on this Grid.

    <Grid BackgroundColor="#FAFAFA" Padding="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
    
        <Grid.RowDefinitions>
            <RowDefinition Height="40"></RowDefinition>
        </Grid.RowDefinitions>
    
        <Label Text="Tab1" Grid.Column="0"  TextColor="{Binding Tab1Visible, Converter={StaticResource focus}}" VerticalOptions="Center" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
    
        <Label Text="Tab2" Grid.Column="1"  TextColor="{Binding Tab2Visible, Converter={StaticResource focus}}" VerticalOptions="Center" HorizontalTextAlignment="Center"  HorizontalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
    
        <Label Text="Tab3" Grid.Column="2"   TextColor="{Binding Tab3Visible, Converter={StaticResource focus}}" VerticalOptions="Center" HorizontalTextAlignment="Center"  HorizontalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
    
        <BoxView BackgroundColor="#80FF0000" IsVisible="{Binding Tab1Visible}" HeightRequest="3" Grid.Column="0" VerticalOptions="End" ></BoxView>
        <BoxView BackgroundColor="#80FF0000"  IsVisible="{Binding Tab2Visible}" HeightRequest="3" Grid.Column="1" VerticalOptions="End" ></BoxView>
        <BoxView BackgroundColor="#80FF0000"  IsVisible="{Binding Tab3Visible}"  HeightRequest="3" Grid.Column="2" VerticalOptions="End" ></BoxView>
    
        <ContentView BackgroundColor="Transparent" Grid.Column="0">
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="1"></TapGestureRecognizer>
            </ContentView.GestureRecognizers>
        </ContentView>
    
        <ContentView BackgroundColor="Transparent" Grid.Column="1">
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="2"></TapGestureRecognizer>
            </ContentView.GestureRecognizers>
        </ContentView>
    
        <ContentView BackgroundColor="Transparent" Grid.Column="2">
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="3"></TapGestureRecognizer>
            </ContentView.GestureRecognizers>
        </ContentView>
    </Grid>
    

    https://forums.xamarin.com/discussion/comment/309761/#Comment_309761

  • larzrazlarzraz Member ✭✭

    @Jarvan
    Im trying your approach but struggle to nest my listviews in the carrouselview. Im struggling figuring out what should be the itemsource for the Carrousel. Should it be a collection of listviews or what? :)

  • JarvanJarvan Member, Xamarin Team Xamurai

    ItemsSource is the source of items to template and display.

    Check the link:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/data-and-databinding

  • larzrazlarzraz Member ✭✭

    @Jarvan What im struggling with is not the binding of my listview, but to bind my carouselview to a collection of the listviews.

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited October 2019

    Do you mean clicking the tab to change the corresponding carouselview? If so, set a property in listview's model class and bind the carouselview's itemSource to this property.

  • larzrazlarzraz Member ✭✭

    @Jarvan at the moment im struggleling just getting the carouselview to show my listview. I have created a contentview with a listview inside and im trying to bind to this. Am i doing this wrong?

     Caru.ItemsSource = new List<View>
            {
                new ListContentView(TodayDateMinusTwo),
                new ListContentView(TodayDateMinusOne),
                new ListContentView(Today)
            };
    
     <ContentView Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3" >
                <CarouselView x:Name="Caru">
                    <CarouselView.EmptyView>
                        <Label Text="No items currently exist!"/>
    
                    </CarouselView.EmptyView>
                    <CarouselView.ItemTemplate>
    
                         <DataTemplate>
                            <ContentView Content="{Binding Content}"/>
                        </DataTemplate> 
                    </CarouselView.ItemTemplate>
                </CarouselView>
            </ContentView> 
    

    It does Change the baggroundcolor of the ListContentView but the items does not appear

  • JarvanJarvan Member, Xamarin Team Xamurai

    Use ObservableCollection instead of List and set model class to inherit INotifyPropertyChanged interface.

  • larzrazlarzraz Member ✭✭

    Im a little bit unsure which model class i have to set to inherit the INotifyPropertyChanged interface

  • larzrazlarzraz Member ✭✭

    @Jarvan
    its still only blank for me, it only sets the background color. Am I doing it wrong?
    My BaseViewModel implements iNotifyPropertyChanged

        public class TodaysMatchesViewModel : BaseViewModel
    {
         public ObservableCollection<ListContentView> LCV { get { return _lcv; } set { _lcv = value; OnPropertyChanged("LCV"); } 
    }
    ...
          public void SetList()
            {
                LCV = new ObservableCollection<ListContentView>
               { 
                    new ListContentView(TodayDateMinusTwo),
                    new ListContentView(TodayDateMinusOne),
                    new ListContentView(Today)
                };
            }
    
    
    
     }
      <ContentView Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">
                <CarouselView x:Name="Caru" ItemsSource="{Binding LCV}">
                    <CarouselView.EmptyView>
                        <Label Text="No items currently exist!" />
                    </CarouselView.EmptyView>
                    <CarouselView.ItemTemplate>
    
                        <DataTemplate>
                            <ContentView Content="{Binding Content}" />
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>
            </ContentView>
    

    Im setting by context and calling the setlist method in codebehind.

    Thank you for your help!

  • larzrazlarzraz Member ✭✭

    I can swipe between the 3 views, so I suspect its my binding for the listview in the the 3 views thats wrong? eventhough if i call the view outside the carouselview it shows the list with items in it

Sign In or Register to comment.