1. Home
  2. Forum
  3. Xamarin.Forms
  4. Group Header like tabbed menu

Group Header like tabbed menu

Hi,

Is It possible to create a listview with a group header like a tabbed menu on de top of listview?

Thanks


9 Replies
LN Lakshmi Natarajan Syncfusion Team October 29, 2021 06:36 AM UTC

Hi Fernando, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Group Header like tabbed menu” from our side. We would like to inform you that you can achieve your requirement by customizing the GroupHeader using the SfListView.GroupHeaderTemplate. 
 
Please refer to the following code snippets for more reference, 
<syncfusion:SfListView.GroupHeaderTemplate> 
    <DataTemplate> 
        <Grid BackgroundColor="#4CA1FE" HeightRequest="60"> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="2" /> 
                <ColumnDefinition Width="*" /> 
                <ColumnDefinition Width="2" /> 
                <ColumnDefinition Width="*" /> 
                <ColumnDefinition Width="2" /> 
            </Grid.ColumnDefinitions> 
            <Grid Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > 
                <Label x:Name="info" BackgroundColor="Transparent" Text="Informations" FontAttributes="Bold" FontSize="18" TextColor="White"  
            HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  /> 
            </Grid> 
            <Grid Grid.Column="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > 
                <Label x:Name="status" BackgroundColor="Transparent" Text="Status" FontAttributes="Bold" FontSize="18" TextColor="White"   
            HorizontalTextAlignment="Center" VerticalTextAlignment="Center" /> 
            </Grid> 
            <BoxView Grid.Column="0" BackgroundColor="White" /> 
            <BoxView Grid.Column="2" BackgroundColor="White" /> 
            <BoxView Grid.Column="4" BackgroundColor="White" /> 
        </Grid> 
    </DataTemplate> 
</syncfusion:SfListView.GroupHeaderTemplate> 
 
Output 
 
 
Please refer to our user guidance document to customize the GroupHeader, 
UG link:  
KB links: 
 
You can also refer to our user guidance document to customize the Header as TabView in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


FE Fernando November 1, 2021 12:47 PM UTC

Hi,


In this example https://help.syncfusion.com/xamarin/listview/headerandfooter#tabview-appearance-using-listview-header is possible to keep a single list and as you scroll through the list, change the header programmatically? In this example it is necessary tapped on the header and the list will filter only the selected one. I would like to always have the complete list and highlighted the header referring to the part of the list that is visible like the attached image.


Thanks.


Attachment: header_sample_zip_2244ae20.zip


LN Lakshmi Natarajan Syncfusion Team November 2, 2021 12:34 PM UTC

Hi Fernando, 
 
Thank you for the update. 
 
#Regarding is it possible to keep a single list and as you scroll through the list, change the header programmatically? 
 
We would like to let you know that you can achieve your requirement by loading the SfListView inside the SfListView.HeaderTemplate and scroll the header programmatically based on the visible Group. 
 
Please refer to our user guidance document regarding the same, 
 
Please refer to our following documentation regarding programmatic scrolling, 
 
We have prepared a sample to achieve your requirement and attached in the following link, 
 
Output 
 
 
You can also refer to our user guidance document related to the ListView scrolling, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


FE Fernando November 4, 2021 10:18 AM UTC

Thank you very much!

It's perfect.


LN Lakshmi Natarajan Syncfusion Team November 8, 2021 04:45 AM UTC

Hi Fernando, 
 
Thank you for the update. 
 
We are glad that our solution meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 
 
Lakshmi Natarajan 
 


FE Fernando November 11, 2021 12:23 PM UTC

Hi,

In this example could demonstrate with remote data?

Thanks


LN Lakshmi Natarajan Syncfusion Team November 12, 2021 05:34 AM UTC

Hi Fernando, 
 
Thank you for the update. 
 
#Regarding In this example could demonstrate with remote data? 
 
We have modified our sample using API data instead of local data to achieve your requirement. Please find the modified sample in the following link, 
 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


FE Fernando November 12, 2021 12:41 PM UTC

Hi Lakshmi,

Thank you very much.

Is it possible in this example when tapped any item in top row list, make the bottom list scroll up according to the item selected in the top one?

In addition, would it be possible to also show around three items in the top list and only the one that is active show BoxView line by ItemTemplate conditional like image below?

list sample.png

Thanks


LN Lakshmi Natarajan Syncfusion Team November 15, 2021 11:24 AM UTC

Hi Fernando, 
 
Thank you for the update. 
 
#Regarding Is it possible in this example when tapped any item in top row list, make the bottom list scroll up according to the item selected in the top one? 
 
You can achieve your requirement by programmatically scrolling the list when tapping the header item. Please refer to the following code snippets for more reference, 
 
private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
{ 
    var tappedItem = ParentListView.DataSource.DisplayItems.FirstOrDefault(x => (x is GroupResult group) && (group.Key.ToString() == (e.ItemData as ItemsDetails).ItemName)); 
    var index = ParentListView.DataSource.DisplayItems.IndexOf(tappedItem); 
 
    ParentListView.LayoutManager.ScrollToRowIndex(index, Syncfusion.ListView.XForms.ScrollToPosition.Start, true); 
} 
 
 
You can also refer to our user guidance document regarding the same, 
UG links: 
 
#Regarding would it be possible to also show around three items in the top list and only the one that is active show BoxView line by ItemTemplate conditional? 
 
You can achieve your requirement by customizing the ItemTemplate based on the model property. Please refer to the following code snippets for more reference, 
 
<syncfusion:SfListView.ItemTemplate> 
    <DataTemplate> 
        <Grid> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="*"/> 
                <RowDefinition Height="3"/> 
            </Grid.RowDefinitions> 
            <Label Text="{Binding ItemName}" TextColor="LightGray" FontSize="Medium" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"> 
                <Label.Triggers> 
                    <DataTrigger TargetType="Label" 
                                Binding="{Binding HighLight}" 
                                Value="true"> 
                        <Setter Property="TextColor" Value="Red"/> 
                    </DataTrigger> 
                </Label.Triggers> 
            </Label> 
            <BoxView Grid.Row="1" BackgroundColor="Red" > 
                <BoxView.Triggers> 
                    <DataTrigger TargetType="BoxView" 
                                Binding="{Binding HighLight}" 
                                Value="false"> 
                        <Setter Property="IsVisible" Value="false"/> 
                    </DataTrigger> 
                </BoxView.Triggers> 
            </BoxView> 
        </Grid> 
    </DataTemplate> 
</syncfusion:SfListView.ItemTemplate> 
 
 
We have modified our sample to achieve your requirement and attached in the following link, 
 
 
 
You can also customize the ItemTemplate using DataTemplateSelector. Please refer to our user guidance document regarding the same in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
  
 


Loader.
Up arrow icon