We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Activate searchbar listview of another form

Hi,

I have 2 pages.

In the first, there is a tabview that call two contentview pages.

Here is the code on the first page:


<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"

             x:Class="Finimpresa.Page1"

             xmlns:local="clr-namespace:Finimpresa"

             x:Name="MainView"

             NavigationPage.HasNavigationBar="true">

    <ContentPage.ToolbarItems>

        <ToolbarItem Name="MenuItem1" Order="Primary" Icon="search.png" Text="Ricerca" Priority="1" Clicked="MenuItem1_Clicked"/>

    </ContentPage.ToolbarItems>

    <NavigationPage.TitleView>

        <Label x:Name="LbTitle" Text="HOME" HorizontalOptions="StartAndExpand" FontSize="14" FontAttributes="Bold" TextColor="White"/>

    </NavigationPage.TitleView>

    <ContentPage.Content>

        <tabView:SfTabView OverflowMode="DropDown"

                           SelectionChanged="SfTabView_SelectionChanged"

                           VisibleHeaderCount="2"

                           EnableSwiping="false"

                           BackgroundColor="#f1e9dc"

                           TabHeaderPosition="Bottom"

                           DisplayMode="ImageWithText"

                           HeightRequest="50">

            <tabView:SfTabView.SelectionIndicatorSettings>

                <tabView:SelectionIndicatorSettings Position="Bottom"

                                                    AnimationDuration="500"

                                                    StrokeThickness="2"/>

            </tabView:SfTabView.SelectionIndicatorSettings>

            <tabView:SfTabView.Items>

                <tabView:SfTabItem Title="Home"

                                   ImageSource="home.png">

                    <tabView:SfTabItem.Content>

                        <local:Home/>

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

                <tabView:SfTabItem Title="Notizie"

                                   ImageSource="news.png">

                    <tabView:SfTabItem.Content>

                        <local:News/>

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

            </tabView:SfTabView.Items>

    </tabView:SfTabView>

    </ContentPage.Content>


</ContentPage>



The second home page has a listview and a search bar for searching records.

This is the code:


<ContentView xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:pulltorefresh="clr-namespace:Syncfusion.SfPullToRefresh.XForms;assembly=Syncfusion.SfPullToRefresh.XForms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:Finimpresa"

             x:Class="Finimpresa.Home"

             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms">

        <ContentView.Content>

        <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

        <SearchBar x:Name="filterText"

                   Grid.Row="0"

                   HeightRequest="40"

                   FontSize="14"

                   Placeholder="Digita l'impresa da visualizzare"

                   TextChanged="filterText_TextChanged"

                   IsVisible="false"/>

        <pulltorefresh:SfPullToRefresh x:Name="pullToRefresh"

                                   Grid.Row="1"

                                   ProgressBackgroundColor="#a72321"

                                   ProgressStrokeColor="White"

                                   RefreshContentHeight="50"

                                   RefreshContentWidth="50" TransitionMode="Push" IsRefreshing="False">

            <pulltorefresh:SfPullToRefresh.PullableContent>

                <syncfusion:SfListView x:Name="MyListView"

                           ItemTapped="MyListView_ItemTapped"

                           ListViewCachingStrategy="RecycleTemplate"

                           AutoFitMode="DynamicHeight"

                           SelectionMode="None"

                           ItemsSource="{Binding PropertyClientis}">

                    <syncfusion:SfListView.ItemTemplate>

                        <DataTemplate x:DataType="local:PropertyClienti">

                            <border:SfBorder CornerRadius="0,10,0,10"

                                             BorderColor="white"

                                             HasShadow="True"

                                             Margin="5"

                                             BackgroundColor="white"

                                             HorizontalOptions="FillAndExpand"

                                             VerticalOptions="FillAndExpand">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="Auto"/>

                                    </Grid.RowDefinitions>

                                    <StackLayout Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal">

                                        <Image Source="social.png"

                                                   Grid.Column="0"

                                                   HeightRequest="32"

                                                   WidthRequest="32"

                                                   HorizontalOptions="StartAndExpand"

                                                   VerticalOptions="CenterAndExpand"/>

                                    </StackLayout>

                                    <StackLayout Grid.Column="2" Grid.Row="1" Orientation="Vertical" VerticalOptions="StartAndExpand">

                                        <Label TextColor="Black"

                                                           FontSize="13"

                                                           FontAttributes="Bold"

                                                           Text="{Binding Denominazione}"

                                                           HorizontalOptions="StartAndExpand"

                                                           VerticalOptions="Start"/>

                                        <Label x:Name="LbCf"

                                                           TextColor="Black"

                                                           FontSize="12"

                                                           Text="{Binding CdFc}"

                                                           HorizontalOptions="StartAndExpand"

                                                           VerticalOptions="Start"

                                                           IsVisible="true"/>

                                        <Label FontSize="12"

                                                           TextColor="Black"

                                                           Text="{Binding Email}"

                                                           HorizontalOptions="StartAndExpand"

                                                           VerticalOptions="Start"/>

                                    </StackLayout>

                                </Grid>

                            </border:SfBorder>

                        </DataTemplate>

                    </syncfusion:SfListView.ItemTemplate>

                </syncfusion:SfListView>

            </pulltorefresh:SfPullToRefresh.PullableContent>

        </pulltorefresh:SfPullToRefresh>

    </Grid>

    </ContentView.Content>

</ContentView>


I would like that clicking on the MenuItem1 of the first page can display the hidden searchbar found on the Home page.

I used this code in C # but it doesn't work.

Can you give me a hand?

Thank you


3 Replies

SY Suthi Yuvaraj Syncfusion Team November 3, 2022 02:10 AM UTC

We have checked the reported queryActivate searchbar listview of another form”, We would like to let you know that If the SearchBar IsVisible property is handle from button click on another form doesnot works without SfListView and SfTabView. The bool value changes is not properly updated when changing from another page button. In this case Relative binding can be use bind the value of IsVisible by defining the property in ViewModel and Binding the command to the ToolbarItem instead of clicked event. Please refer the below code snippet for relative binding


Code snippet:

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<SearchBar x:Name="filterText"

Grid.Row="0"

HeightRequest="40"

FontSize="14"

Placeholder="Digita l'impresa da visualizzare"

IsVisible="{Binding Source={RelativeSource AncestorType={x:Type local:ViewModel}},Mode=TwoWay, Path=IsVisible}"



Please refer the below documentation for Relative Binding in Xamarin.Forms

Documentation Link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/relative-bindings


Also Please refer the documentation for https://help.syncfusion.com/xamarin/listview/mvvm#binding-command-of-button-inside-the-itemtemplate-of-xamarinforms-listview-to-viewmodel-command



FA Fabio November 3, 2022 12:22 PM UTC

I'm new to xamarin and viewmodel between different pages, is it possible to have an example based on my code? In the guides I have read but I understand little.


I thought I had solved it but if I reload the content of the tabview later the tapped of the listview of the Home page no longer works. 

I managed everything with a parameter that is used to manage the display of the searchbar on the Home page.

Basically on the first page Page1 I have the tabview with a CenterButton. At the Click on the Center Button I reload the Home page with the content and I display the searchBar and it works but with this code:

tab.Items[tab.SelectedIndex].Content = GetItemContent(tabIndex);

it no longer makes me load the page at the tapped of the Home listview ... I place the xaml and cs code


FirstPage:

Code Xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"

             x:Class="Finimpresa.Page1"

             xmlns:local="clr-namespace:Finimpresa"

             x:Name="MainView"

             NavigationPage.HasNavigationBar="true">

    <NavigationPage.TitleView>

        <Label x:Name="LbTitle" Text="HOME" HorizontalOptions="StartAndExpand" FontSize="14" FontAttributes="Bold" TextColor="White"/>

    </NavigationPage.TitleView>

    <ContentPage.Content>

        <tabView:SfTabView OverflowMode="CenterButton" x:Name="tab"

                           SelectionChanged="SfTabView_SelectionChanged"

                           TabItemTapped="tabView_TabItemTapped"

                           VisibleHeaderCount="2"

                           EnableSwiping="false"

                           BackgroundColor="#f1e9dc"

                           TabHeaderPosition="Bottom"

                           DisplayMode="ImageWithText"

                           TabHeight="50">

            <tabView:SfTabView.CenterButtonView>

                <Grid>

                    <Image Source="search.png"

                           HeightRequest="48"

                           WidthRequest="48"

                           VerticalOptions="CenterAndExpand"

                           HorizontalOptions="CenterAndExpand">

                        <Image.GestureRecognizers>

                            <TapGestureRecognizer Tapped="MenuItem1_Clicked"/>

                        </Image.GestureRecognizers>

                    </Image>

                </Grid>

            </tabView:SfTabView.CenterButtonView>

            <tabView:SfTabView.SelectionIndicatorSettings>

                <tabView:SelectionIndicatorSettings Position="Bottom"

                                                    AnimationDuration="500"

                                                    StrokeThickness="2"/>

            </tabView:SfTabView.SelectionIndicatorSettings>

            <tabView:SfTabView.Items>

                <tabView:SfTabItem Title="Home"

                                   ImageSource="home.png"

                                   HeightRequest="50">

                    <tabView:SfTabItem.Content>

                        <local:Home/>

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

                <tabView:SfTabItem Title="Notizie"

                                   ImageSource="news.png"

                                   HeightRequest="50">

                    <tabView:SfTabItem.Content>

                        <local:News/>

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

            </tabView:SfTabView.Items>

        </tabView:SfTabView>

    </ContentPage.Content>

</ContentPage>


First page

Code cs:

    public partial class Page1 : ContentPage

    {


        public Page1()

        {

            InitializeComponent();

        }


        private void SfTabView_SelectionChanged(object sender, Syncfusion.XForms.TabView.SelectionChangedEventArgs e)

        {

            if (e.Index == 0)

            {

                LbTitle.Text = "HOME";

            }

            if (e.Index == 1)

            {

                LbTitle.Text = "NOTIZIE";

            }

        }


        private void MenuItem1_Clicked(object sender, EventArgs e)

        {

            var tabIndex = tab.SelectedIndex;

            Parametri.ActiveSearchBar = true;

            tab.Items[tab.SelectedIndex].Content = GetItemContent(tabIndex);

        }

        private View GetItemContent(int index)

        {

            switch (index)

            {

                case 0:

                    return new Home().Content;

                case 1:

                    return new News().Content;

                default:

                    return new Home().Content;

            }

        }

    }


Page Home Xaml:

        <ContentView.Content>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>

        <SearchBar x:Name="filterText"

                   Grid.Row="0"

                   HeightRequest="40"

                   FontSize="14"

                   Placeholder="Digita l'impresa da visualizzare"

                   TextChanged="filterText_TextChanged"

                   IsVisible="false"/>

        <pulltorefresh:SfPullToRefresh x:Name="pullToRefresh"

                                   Grid.Row="1"

                                   ProgressBackgroundColor="#a72321"

                                   ProgressStrokeColor="White"

                                   RefreshContentHeight="50"

                                   RefreshContentWidth="50" TransitionMode="Push" IsRefreshing="False">

            <pulltorefresh:SfPullToRefresh.PullableContent>

                <syncfusion:SfListView x:Name="MyListView"

                           ItemTapped="MyListView_ItemTapped"

                           ListViewCachingStrategy="RecycleTemplate"

                           AutoFitMode="DynamicHeight"

                           SelectionMode="None"

                           ItemsSource="{Binding PropertyClientis}">

                    <syncfusion:SfListView.ItemTemplate>

                        <DataTemplate x:DataType="local:PropertyClienti">

                            <border:SfBorder CornerRadius="0,10,0,10"

                                             BorderColor="white"

                                             HasShadow="True"

                                             Margin="5"

                                             BackgroundColor="white"

                                             HorizontalOptions="FillAndExpand"

                                             VerticalOptions="FillAndExpand">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="Auto"/>

                                    </Grid.RowDefinitions>

                                    <StackLayout Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal">

                                        <Image Source="social.png"

                                                   Grid.Column="0"

                                                   HeightRequest="32"

                                                   WidthRequest="32"

                                                   HorizontalOptions="StartAndExpand"

                                                   VerticalOptions="CenterAndExpand"/>

                                    </StackLayout>

                                    <StackLayout Grid.Column="2" Grid.Row="1" Orientation="Vertical" VerticalOptions="StartAndExpand">

                                        <Label TextColor="Black"

                                                           FontSize="13"

                                                           FontAttributes="Bold"

                                                           Text="{Binding Denominazione}"

                                                           HorizontalOptions="StartAndExpand"

                                                           VerticalOptions="Start"/>

                                        <Label x:Name="LbCf"

                                                           TextColor="Black"

                                                           FontSize="12"

                                                           Text="{Binding CdFc}"

                                                           HorizontalOptions="StartAndExpand"

                                                           VerticalOptions="Start"

                                                           IsVisible="true"/>

                                        <Label FontSize="12"

                                                           TextColor="Black"

                                                           Text="{Binding Email}"

                                                           HorizontalOptions="StartAndExpand"

                                                           VerticalOptions="Start"/>

                                    </StackLayout>

                                </Grid>

                            </border:SfBorder>

                        </DataTemplate>

                    </syncfusion:SfListView.ItemTemplate>

                </syncfusion:SfListView>

            </pulltorefresh:SfPullToRefresh.PullableContent>

        </pulltorefresh:SfPullToRefresh>

    </Grid>

    </ContentView.Content>


Code cs page Home call type page "ContentPage", this is code:

        private async void MyListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)

       {

            await Navigation.PushAsync(new CategoryPdf());

        }



Thank you



SY Suthi Yuvaraj Syncfusion Team November 7, 2022 02:17 PM UTC

We are unable to reproduce the issue at our end. We have created a sample with provided code snippet and  tapped event is triggered and navigated to the another page , also on tapping  the Tab on the TabView  also reloads the ListView. We have attached the sample for reference. Please modify the sample to reproduce the issue or please share the below details which would be more helpful for us to find the solution as soon as possible.

  1. Code snippet related to Tapped Event of SfListView
  2. Code snippet related to Tapped Event in SfTabview
  3. Issue replication video or image
  4. SfListView and Xamarin.Forms version

Attachment: ListViewXamarin_b006f004.zip

Loader.
Live Chat Icon For mobile
Up arrow icon