xamarinxamarin.formslistviewitem

Change item control property of checked listview item Xamarin.Forms


Hy, I am trying to show a comment input if the item checkbox is checked and hide it else, i have this XAML

<ListView ItemsSource="{Binding TaskItems}" x:Name="TasksItems" HasUnevenRows="True" VerticalScrollBarVisibility="Default" SelectionMode="None">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <StackLayout IsVisible="True" Orientation="Vertical">
                <Grid BackgroundColor="White">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>

                    <StackLayout Grid.Column="0" Grid.Row="0">
                        <input:CheckBox Type="Box" IsChecked="{Binding TaskChecked , Mode=TwoWay}"/>
                    </StackLayout>

                    <StackLayout Grid.Column="0" Grid.Row="1" IsVisible="{Binding CommentRequired}">
                        <Entry BackgroundColor="White" PlaceholderColor="Black" HeightRequest="40" TextColor="Black"/>
                    </StackLayout>
                </Grid>
            </StackLayout>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

and i have this c# code to read the items from database

public class TaskData
{
    public bool TaskChecked { get; set; }
    public bool CommentRequired { get; set; }
}

public partial class HomePage : ContentPage
{
    public HomePage()
    {
        ObservableCollection<TaskData> TaskItems { get; set; }
        ObservableCollection<TaskData> TasksList;
        TaskItems = new ObservableCollection<TaskData>();

        //Loop the tasks from database result
        While...
           TaskItems.Add(new TaskData
           {
               TaskChecked = false,
               CommentRequired = false,
           });
        //End Loop

        TasksListView.ItemsSource = TaskItems;
    }
}

Now i need to add a "CheckChanged" event to show the comment Entry (IsVisible="True") when the user check the checkbox of the targed listview item

Thanks


Solution

  • First add the event.

    <input:CheckBox Type="Box" IsChecked="{Binding TaskChecked , Mode=TwoWay}" CheckedChanged="OnCheckBoxCheckedChanged"/>
    

    Add Name for the second stack

    <StackLayout x:Name="StackLayoutEntry" Grid.Column="0" Grid.Row="1" IsVisible="{Binding CommentRequired}">
    <Entry BackgroundColor="White" PlaceholderColor="Black" HeightRequest="40" TextColor="Black"/>
    </StackLayout>
    

    Then in code Behind use this function to find the entry for the clicked checkbox

    void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
    {
       var Sender = (CheckBox)sender;
       var stacklayoutentry = Sender.Parent.FindByName<StackLayout>("StackLayoutEntry");
       stacklayoutentry.IsVisible = True;
    
    }
    

    This might also help you also Check

    Another approach but you an identifier to your selected item. Check