Creating Binding between button and ListView Image in Xamarin forms

PrawalGuptaPrawalGupta USMember ✭✭

I am new in xamarin forms and I am trying to implement Tree Structure Like if you checked a Parent cell, all child cell will be checked and vice versa.

For parent cell I used buttons in GridLayout and for child row I used ListView having Image and labels as given in below code.

      <RowDefinition Height="40" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />

      <ColumnDefinition Width="50" />
      <ColumnDefinition Width="50" />
      <ColumnDefinition Width="*" />

    <Button BackgroundColor="#CDBA96"  Grid.Row="0" Grid.Column="0" Clicked="btnAllInvert_Clicked" Image="btn_check_on.png"/>
    <Button BackgroundColor="#CDBA96"  Grid.Row="0" Grid.Column="1" FontSize="30" Text="+"/>
    <Button BackgroundColor="#CDBA96"  Grid.Row="0" Grid.Column="2" Text=" Parent 1 "/>

    <ListView x:Name="listViewTest" BackgroundColor="#CDBA96" ItemSelected="OnItemSelected" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2">
                    <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">

                    <Image Source="btn_check_on.png" x:Name="btnInvert">
                              <TapGestureRecognizer Tapped="Invert_Clicked"/>

                        <StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
                            <Label Text="{Binding .}" VerticalTextAlignment="Center" FontSize="Medium" />
                            <Label Text="Label 2" VerticalTextAlignment="Center" FontSize="Small" />


Code behind :

public TestPage ()
            InitializeComponent ();
            listViewTest.ItemsSource = new [] { "a", "b", "c" };
        public void OnItemSelected (object sender, SelectedItemChangedEventArgs e) {
            if (e.SelectedItem == null) return; // has been set to null, do not 'process' tapped event
            DisplayAlert("Tapped", e.SelectedItem + " row was tapped", "OK");
            ((ListView)sender).SelectedItem = null; // de-select the row
        public void btnAllInvert_Clicked(object sender, EventArgs e)


        int flag = 1;

        public void Invert_Clicked (object sender, EventArgs e) {

            var btnInvert = (Image)sender;
            if (flag == 1) {

                btnInvert.Source = "btn_check_off.png";
                flag = 0;
            } else {
                btnInvert.Source = "btn_check_on.png";
                flag = 1;


Now on Invert_Clicked method I am able to invert image for single cell/ row only. Now My requirement is to Invert all child row image on method btnAllInvert_Clicked(). How to do this and how to make such bindings. Thanks in advance.


  • xinmengxinmeng GBMember ✭✭
    edited April 2016

    I think you can bind the image source, when you click the button, change the image source ~

            Source="{Binding ImageSourcePath}"
            WidthRequest="40" />

    The variance of the source should be ImageSource:

    public ImageSource ImageSourcePath;
  • MittchelvanVlietMittchelvanVliet USUniversity ✭✭

    Maybe you could try using an IValueConverter. This converter will convert on/off based on certain conditions for you.
    For example a Bool on the child objects (on/off) with an IValueConverter that returns the right .png.

    If you do this, the only thing you have to do is set the bool on/off for al child objects and it will automatically take the right image for you!

  • Hi
    please on help for me

    Now i am creating upload image in xamarin forms MVVM.
    I need image binding in listview

Sign In or Register to comment.