AndreiMisiukevich / CardView

CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms
MIT License
710 stars 114 forks source link

Using plugin as Segmented Tabs #338

Closed kerberosargos closed 4 years ago

kerberosargos commented 4 years ago

Hello firstly thank you for sharing works.

I have researched but I did not find. I would like to ask "is there any way to use your plugin as segmented tabs".

I mean I would like to create 2 constant listviews on ContentPage than I would like to show them by click segmented tabs. I think your plugin created based on ItemSource?

Thank you in advance.

AndreiMisiukevich commented 4 years ago

Hi, yes, you can do it easily. There are two approaches: 1) Put two list views to ItemsSource 2) Use DataTemplateSelector for two different lists

kerberosargos commented 4 years ago

Can you write very simple sample? I am trying above code but it is giving me Null error.

 <cards:CarouselView>

        <cards:CarouselView.ItemsSource>
            <x:Array Type="{x:Type View}">
                <ContentView>
                    <Image Source="yourImage.png" />
                </ContentView>
                <RelativeLayout>
                    <Button Text="Click" />
                </RelativeLayout>
                <StackLayout>
                    <Label Text="any text" />
                </StackLayout>
            </x:Array>
        </cards:CarouselView.ItemsSource>

    </cards:CarouselView>

Error details

System.NullReferenceException: 'Object reference not set to an instance of an object.'

AndreiMisiukevich commented 4 years ago

Can you write very simple sample? I am trying above code but it is giving me Null error.

 <cards:CarouselView>

        <cards:CarouselView.ItemsSource>
            <x:Array Type="{x:Type View}">
                <ContentView>
                    <Image Source="yourImage.png" />
                </ContentView>
                <RelativeLayout>
                    <Button Text="Click" />
                </RelativeLayout>
                <StackLayout>
                    <Label Text="any text" />
                </StackLayout>
            </x:Array>
        </cards:CarouselView.ItemsSource>

    </cards:CarouselView>

Error details

System.NullReferenceException: 'Object reference not set to an instance of an object.'

Maybe that is because you don't have yourImage.png ?

 <cards:CarouselView>
        <cards:CarouselView.ItemsSource>
            <x:Array Type="{x:Type View}">
                <ContentView  BackgroundColor="Red" />
                <ContentView BackgroundColor="Green" />
            </x:Array>
        </cards:CarouselView.ItemsSource>
    </cards:CarouselView>
kerberosargos commented 4 years ago

Sorry but result is same. I am getting same error.

kerberosargos commented 4 years ago

I am so sorry. Mistake is mine. I did not add XAML reference to top of page. Thank you for your help.

AndreiMisiukevich commented 4 years ago

I am so sorry. Mistake is mine. I did not add XAML reference to top of page. Thank you for your help.

great :) if it works now

kerberosargos commented 4 years ago

Hello again. I have tested in my real project but below code seems does not work. This approach is right or not?

 <cards:CarouselView>

                <cards:CarouselView.ItemsSource>
                    <x:Array Type="{x:Type View}">

                        <ContentView BackgroundColor="Orange">

                                <ListView
                                    x:Name="xBindableLayout"
                                    CachingStrategy="RecycleElementAndDataTemplate"
                                    GroupDisplayBinding="{Binding Key}"
                                    HasUnevenRows="True"
                                    IsGroupingEnabled="True"
                                    ItemTemplate="{StaticResource xPolicyDetail}"
                                    ItemsSource="{Binding PolicyItemsAsGroup}"
                                    SeparatorVisibility="None"
                                    VerticalScrollBarVisibility="Never">

                                    <ListView.GroupHeaderTemplate>
                                        <DataTemplate>
                                            <ViewCell>

                                                <yummy:PancakeView
                                                    Margin="10,-1,10,1"
                                                    Padding="10,5"
                                                    BackgroundColor="{Binding Key.BackgroundColor}"
                                                    CornerRadius="5,5,0,0"
                                                    HasShadow="False">

                                                    <yummy:PancakeView.Behaviors>
                                                        <cbehaviors:ViewTappedBehavior
                                                            AnimationType="Fade"
                                                            Command="{Binding Path=BindingContext.ExpandItemsCommand, Source={x:Reference xBindableLayout}}"
                                                            CommandParameter="{Binding Key}" />
                                                    </yummy:PancakeView.Behaviors>

                                                    <yummy:PancakeView.GestureRecognizers>
                                                        <TapGestureRecognizer />
                                                    </yummy:PancakeView.GestureRecognizers>

                                                    <Grid ColumnSpacing="5">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="*" />
                                                            <ColumnDefinition Width="Auto" />
                                                            <ColumnDefinition Width="30" />
                                                        </Grid.ColumnDefinitions>

                                                        <Label
                                                            Grid.Column="0"
                                                            FontSize="22"
                                                            HorizontalOptions="StartAndExpand"
                                                            Text="{Binding Key.Title}"
                                                            TextColor="White"
                                                            VerticalOptions="Center" />

                                                        <Label
                                                            Grid.Column="1"
                                                            FontSize="14"
                                                            HorizontalOptions="StartAndExpand"
                                                            Text="{Binding Key.SubTitle}"
                                                            TextColor="White"
                                                            VerticalOptions="Center" />

                                                        <Label
                                                            Grid.Column="2"
                                                            FontFamily="{StaticResource FontAwesomeSolid}"
                                                            FontSize="24"
                                                            HorizontalOptions="EndAndExpand"
                                                            Text="{Binding Key.StateIcon}"
                                                            TextColor="White"
                                                            VerticalOptions="Center" />

                                                    </Grid>

                                                </yummy:PancakeView>

                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.GroupHeaderTemplate>

                                </ListView>

                        </ContentView>
                        <ContentView BackgroundColor="Red" />
                        <ContentView BackgroundColor="Green" />

                    </x:Array>
                </cards:CarouselView.ItemsSource>

            </cards:CarouselView>
AndreiMisiukevich commented 4 years ago

yes, this approach is right. What exactly doesn't work?