is there any way to add one button to whole listview not for every item in list view or can I put button beside listview

[etawreed]

I have back button I want to add it once only to list view or put it in the same

StackLayout how I can do it like image ??

this is my xaml code :

                    <StackLayout Orientation="Horizontal" IsVisible="True" x:Name="ItemsPart">

<!-- Back Button : back to category list -->

                            <buttons:SfButton

                            Text="Back"

                           WidthRequest="150"

                            HeightRequest="150"

                            HorizontalOptions="Start"

                            Grid.Row="2"

                            Grid.Column="0"

                            Margin="0,13"

                            HorizontalTextAlignment="Center"

                            VerticalTextAlignment="Center"

                            Padding="0">

                            </buttons:SfButton>

<!-- Restaurant List Item -->

                        <sync:SfListView

                                    x:Name="listItemsView"

                                    Grid.Row="2"

                                    Grid.Column="1"

                                    Padding="8"

                                    AutoFitMode="Height"

                                    HorizontalOptions="Center"

                                    ItemSpacing="3"

                                   HeightRequest="442"

                                    SelectionMode="Single"

                                    IsScrollingEnabled="True"

                                    IsScrollBarVisible="True"

                                    >

                            <sync:SfListView.ItemTemplate>

                                <DataTemplate>

                                    <Frame BackgroundColor="#EEEEEE" Padding="2">

                                        <Grid >

                                            <Grid.RowDefinitions>

                                                <RowDefinition Height="*" />

                                                <RowDefinition Height="38" />

                                            </Grid.RowDefinitions>

                                            <Image

                                                    Grid.Row="0"

                                                    Aspect="AspectFill"

                                                    BackgroundColor="{DynamicResource Gray-200}"

                                                    Source="{Binding icon}">

                                            </Image>

                                            <Grid Grid.Row="1">

                                                <Label Grid.Row="0"

                                                   Grid.Column="0"

                                                   Text="{Binding Name}"

                                                   Grid.ColumnSpan="2"

                                                   LineBreakMode="WordWrap"

                                                   HorizontalTextAlignment="Start"

                                                   VerticalTextAlignment="Center"

                                                   TextColor="Black"

                                                   Opacity="0.87"

                                                   Margin="2,0,0,0"

                                                   FontSize="16">

                                                </Label>

                                                <Label Grid.Row="0"

                                                   Grid.Column="1"

                                                   Text="{Binding price}"

                                                   HorizontalTextAlignment="End"

                                                  VerticalTextAlignment="Center"

                                                   TextColor="Black"

                                                   Opacity="0.87"

                                                   Grid.ColumnSpan="1"

                                                   Margin="0,0,2,0"

                                                   FontSize="16">

                                                </Label>

                                            </Grid>

                                        </Grid>

                                    </Frame>

                                </DataTemplate>

                            </sync:SfListView.ItemTemplate>

                            <!-- Layout to customize no. of columns in SfListView -->

                            <sync:SfListView.LayoutManager>

                                <sync:GridLayout SpanCount="{core:OnPlatformOrientationIntValue Desktop=4, PhonePortrait=2, PhoneLandscape=3, TabletPortrait=3, TabletLandscape=4}" />

                            </sync:SfListView.LayoutManager>

                        </sync:SfListView>

                    </StackLayout>

[Lakshmi Natarajan]

Hi Etawreed, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “is there any way to add one button to whole listview not for every item in list view or can I put button beside listview” from our side. We would like to inform you that you can achieve your requirement by adding dummy item in the collection and customizing the item as back button using DataTemplateSelector in SfListView.  

 

Please refer to the following code snippets to achieve your requirement, 

 

Create an dummy item and add to the collection. 

public ContactsViewModel() 

{ 

    ContactsInfo = new ObservableCollection<Contacts>(); 

    GenerateInfo(); 

 

    //.Add dummy item at 0th first index. 

    ContactsInfo.Insert(0, new Contacts("", "")); 

} 

 

Customize the ListViewItem using DataTemplateSelector. 

<ContentPage.Resources> 

<ResourceDictionary> 

    <local:ListViewTemplateSelector x:Key="ListViewTemplateSelector"> 

        <local:ListViewTemplateSelector.ListViewItemTemplate> 

            <DataTemplate> 

                <Frame BackgroundColor="#EEEEEE" Padding="2"> 

                    <Grid > 

                        <Grid.RowDefinitions> 

                            <RowDefinition Height="*" /> 

                            <RowDefinition Height="38" /> 

                        </Grid.RowDefinitions> 

                        <Image HeightRequest="150" WidthRequest="150" 

                                            Grid.Row="0" 

                                            Aspect="AspectFill" 

                                            BackgroundColor="Gray" 

                                            Source="{Binding ContactImage}"> 

                        </Image> 

                        <Grid Grid.Row="1"> 

                            <Label Grid.Row="0" 

                                            Grid.Column="0" 

                                            Text="{Binding ContactName}" 

                                            Grid.ColumnSpan="2" 

                                            LineBreakMode="WordWrap" 

                                            HorizontalTextAlignment="Start" 

                                            VerticalTextAlignment="Center" 

                                            TextColor="Black" 

                                            Opacity="0.87" 

                                            Margin="2,0,0,0" 

                                            FontSize="16"> 

                            </Label> 

                            <Label Grid.Row="0" 

                                            Grid.Column="1" 

                                            Text="{Binding ContactNumber}" 

                                            HorizontalTextAlignment="End" 

                                            VerticalTextAlignment="Center" 

                                            TextColor="Black" 

                                            Opacity="0.87" 

                                            Grid.ColumnSpan="1" 

                                            Margin="0,0,2,0" 

                                            FontSize="16"> 

                            </Label> 

                        </Grid> 

                    </Grid> 

                </Frame> 

            </DataTemplate> 

        </local:ListViewTemplateSelector.ListViewItemTemplate> 

 

        <local:ListViewTemplateSelector.BackButtonTemplate> 

            <DataTemplate> 

                <!-- Back Button : back to category list --> 

                <buttons:SfButton 

                    Text="Back" 

                    WidthRequest="150" 

                    HeightRequest="150" 

                    HorizontalOptions="Start" 

                    Grid.Row="2" 

                    Grid.Column="0" 

                    Margin="0,13" 

                    HorizontalTextAlignment="Center" 

                    VerticalTextAlignment="Center" 

                    Padding="0"> 

                </buttons:SfButton> 

            </DataTemplate> 

        </local:ListViewTemplateSelector.BackButtonTemplate> 

    </local:ListViewTemplateSelector> 

</ResourceDictionary> 

</ContentPage.Resources> 

     

<ContentPage.Content> 

<StackLayout Orientation="Horizontal" IsVisible="True" x:Name="ItemsPart"> 

 

    <!-- Restaurant List Item --> 

    <sync:SfListView 

                            x:Name="listItemsView" 

                            Grid.Row="2" 

                            Grid.Column="1" 

                            Padding="8" 

                            AutoFitMode="Height" 

                            HorizontalOptions="Center" 

                            ItemSpacing="3" 

                            SelectionMode="Single" 

                            IsScrollingEnabled="True" 

                            IsScrollBarVisible="True" 

                            ItemsSource="{Binding ContactsInfo}" 

                            ItemTemplate="{StaticResource ListViewTemplateSelector}"> 

                 

        <!-- Layout to customize no. of columns in SfListView --> 

        <sync:SfListView.LayoutManager> 

            <sync:GridLayout SpanCount="4" /> 

        </sync:SfListView.LayoutManager> 

                 

    </sync:SfListView> 

</StackLayout> 

</ContentPage.Content> 

 

Return button template for the first item. 

public class ListViewTemplateSelector : DataTemplateSelector 

{ 

    public DataTemplate BackButtonTemplate { get; set; } 

    public DataTemplate ListViewItemTemplate { get; set; } 

 

    public ListViewTemplateSelector() 

    { 

    } 

 

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container) 

    { 

        var contact = item as Contacts; 

             

        if (contact == null) 

            return null; 

 

        var index = (container as SfListView).DataSource.DisplayItems.IndexOf(contact); 

        return index == 0 ? this.BackButtonTemplate : this.ListViewItemTemplate; 

    } 

} 

 

We have attached a demo sample based on the code snippets provided, 

Sample: https://www.syncfusion.com/downloads/support/forum/166954/ze/ListViewXamarin1430847598 

 

 

 

You can also refer to our user guidance document regarding DataTemplateSelector from the following link, 

UG link: https://help.syncfusion.com/xamarin/listview/viewappearance#data-template-selector 

 

Also, we are afraid that this is the best possible way to achieve this requirement since the ListView is a template based control and we could achieve this requirement by customizing the ItemTemplate. 

 

You can also use HeaderTemplate which will be added at the top of the ListView. Please refer to our user guidance document regarding the same, 

UG link: https://help.syncfusion.com/xamarin/listview/headerandfooter 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[etawreed]

thank you 

[Lakshmi Natarajan]

Hi Etawreed, 

 

Thank you for your reply. 

 

Please let us know if you need further assistance. As always we are happy to help you out. 

 

Regards, 

Lakshmi Natarajan 

  

 

[etawreed]

no thank you