TWO SFLISTVIEW

[Maria]

Hello: 

I have a program where i have a main list which has scroll, and then I have a list in the bottom horizontal position always where I show the same image as in the main listing but in tiny so that I see all the items I have int big one.

What I would like to know is if I can select an item in the main one and without touching the secondary list, I will select that item as well.

The purpose is that if I have a main list with scroll and select for example the fisrst item and move the list to select the last one that I see in the list below all the items that I have indicated. 

Thank you very much in advance.

[Muthu Kumaran Gnanavinayagam]

Hi Maria, 

 

We have checked the reported query “Need to automatically select the items in the second SfListView by selecting the items in first SfListView” from our side. You can achieve your requirement by using the SelectionChanged event in SfListView. To achieve non-scrollable SfListView items, you can set the ItemSize for each item based on the Page Width(In case of Horizontal orientation) and total number of underlying collection items using the OnSizeAllocated Override method of that Page. You can get the selected items of MainListView in its SelectionChanged event and set it to MiniListView as like below example. 

 

Code snippet[C#]: 

public partial class MainPage : ContentPage 

    { 

        public MainPage() 

        { 

            InitializeComponent(); 

        } 

 

        protected override void OnSizeAllocated(double width, double height) 

        { 

            MiniList.ItemSize = width / ViewModel.contactsinfo.Count; 

            base.OnSizeAllocated(width, height); 

        } 

 

        private void MainList_SelectionChanged(object sender, Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs e) 

        { 

            if (e.AddedItems.Count>0) 

                MiniList.SelectedItems.Add(e.AddedItems[0]); 

            if (e.RemovedItems.Count>0) 

                MiniList.SelectedItems.Remove(e.RemovedItems[0]); 

        } 

    } 

 

Code snippet[XAML]: 

<ContentPage> 

 

    <ContentPage.BindingContext> 

        <local:ContactsViewModel x:Name="ViewModel"/> 

    </ContentPage.BindingContext> 

         

    <ContentPage.Content> 

        <Grid x:Name="GridView"> 

            <Grid.RowDefinitions> 

                <RowDefinition Height="50"/> 

                <RowDefinition Height="*"/> 

                <RowDefinition Height="100"/> 

            </Grid.RowDefinitions> 

 

            <Label Text="Auto select list" BackgroundColor="#d3d3d3" FontSize="Medium" FontAttributes="Bold" VerticalTextAlignment="Center"/> 

 

            <Grid BackgroundColor="Bisque" Grid.Row="1"> 

 

                <listView:SfListView x:Name="MainList" ItemSize="120" ItemsSource="{Binding contactsinfo}" SelectionChanged="MainList_SelectionChanged" ItemSpacing="0,0,5,0" SelectionMode="Multiple" BackgroundColor="#D3D3D3"> 

                    <listView:SfListView.ItemTemplate> 

                        <DataTemplate> 

                            <ViewCell> 

                                <ViewCell.View> 

                                    <Grid x:Name="grid" RowSpacing="1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> 

                                        <Image Source="{Binding ContactImage}" HeightRequest="70" WidthRequest="70" 

                           VerticalOptions="CenterAndExpand" 

                           HorizontalOptions="CenterAndExpand"> 

                                        </Image> 

                                    </Grid> 

                                </ViewCell.View> 

                            </ViewCell> 

                        </DataTemplate> 

                    </listView:SfListView.ItemTemplate> 

                </listView:SfListView> 

 

            </Grid> 

 

            <listView:SfListView x:Name="MiniList" Grid.Row="2" ItemsSource="{Binding contactsinfo}" SelectionMode="Multiple" Orientation="Horizontal" BackgroundColor="#D3D3D3"> 

                <listView:SfListView.ItemTemplate> 

                    <DataTemplate> 

                        <ViewCell> 

                            <ViewCell.View> 

                                <Grid x:Name="grid"> 

                                    <Grid.RowDefinitions> 

                                        <RowDefinition Height="*" /> 

                                    </Grid.RowDefinitions> 

                                    <Grid RowSpacing="1"> 

                                        <Image Source="{Binding ContactImage}" 

                           VerticalOptions="Center" 

                           HorizontalOptions="Center" 

                           HeightRequest="50"> 

                                        </Image> 

                                    </Grid> 

                                </Grid> 

                            </ViewCell.View> 

                        </ViewCell> 

                    </DataTemplate> 

                </listView:SfListView.ItemTemplate> 

            </listView:SfListView> 

 

        </Grid> 

    </ContentPage.Content> 

</ContentPage> 

 

Note: The BindingContext and the ItemsSource bound to both the SfListView’s should be same to achieve your requirement. 

 

For your reference, we have attached the sample and you can download it from the below link. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/136028/ze/ListViewSample669148051 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran.