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.

<Grid>
     <Grid.RowDefinitions>
      <RowDefinition Height="40" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="50" />
      <ColumnDefinition Width="50" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <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">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">

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

                        <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" />
                        </StackLayout>

                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
        </Grid>

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.

Answers

  • xinmengxinmeng GBMember ✭✭
    edited April 2016

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

    <Image
            x:Name="Image"
            HeightRequest="40"
            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!

    https://forums.xamarin.com/discussion/18849/how-do-i-use-ivalueconverters

  • MohammedismailsameerMohammedismailsameer USMember ✭✭

    Hi
    please on help for me

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

Sign In or Register to comment.