How can I change status of a checkbox and a ImageButton with one click (from one or from the other)? .Net Maui

Question

I need to click on the ImageButton and change the status of the checkbox and vice-versa. How can I grab both names or ids, to reference?

I've include x:Name="{Binding nameFrmoCollection}" on both, but it didn't work, beause the object sender does not bring it.

This is my code:

my Xaml:

 <BindableLayout.ItemTemplate >
     <DataTemplate x:DataType="model:ConvenioProfissional">
         <Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
             <StackLayout>
                 <ImageButton Source="{Binding Convenio_Img}" Clicked="OnImageButtonClicked" WidthRequest="100" HeightRequest="100" BackgroundColor="transparent" BorderColor="transparent" BorderWidth="2" CornerRadius="10"/>
                 <CheckBox Margin="0,-35,0,0" Color="#66AEBA" HeightRequest="30"/>                               
             </StackLayout>
         </Frame>
     </DataTemplate>
 </BindableLayout.ItemTemplate>       

My Code Behind (working for the ImageButton so far).

 public void OnImageButtonClicked(object sender, EventArgs e)
 {
     ImageButton button = (ImageButton)sender;           

     ((ImageButton)sender).BorderWidth = 4;
     ((ImageButton)sender).BorderColor = ButtonUpTextColor;
     ((ImageButton)sender).CornerRadius = 10;
 }

Thanks

Answer 1

We cannot get the control through x:Name which is in DataTemplate from code behind. Instead, we could use Data bindings

Suppose we want to change the CheckBox IsChecked Property when ImageButton is clicked. The following is the demo I made.

Here is the xaml file. For the ImageButton, we use Command instead of a clicked event. For Command binding, you may refer to Relative Bindings.

<BindableLayout.ItemTemplate >
    <DataTemplate x:DataType="model:ConvenioProfissional">
        <Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
            <StackLayout>
                <ImageButton Source="{Binding Convenio_Img}" 
                             Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=ClickedCommand}" 
                             CommandParameter="{Binding .}" 
                             WidthRequest="100" HeightRequest="100" BackgroundColor="transparent" 
                             BorderColor="transparent" BorderWidth="2" CornerRadius="10"/>
                <CheckBox    IsChecked="{Binding IsChecked}" Margin="0,-35,0,0" Color="#66AEBA" HeightRequest="30" />
            </StackLayout>
        </Frame>
    </DataTemplate>
</BindableLayout.ItemTemplate>

Then comes our Model, that is ConvenioProfissional. In this model, we have to implement INotifyPropertyChanged, which defines a single event named PropertyChanged. When we modify the IsChecked value, the UI will also update.

public class ConvenioProfissional : INotifyPropertyChanged
{
    public string Convenio_Img { get; set; }

    public bool isChecked;
    public bool IsChecked
    { 
        get
        {
            return isChecked;
        }      
                        
        set
        {
            isChecked = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsChecked)));
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
}

Finally, this is the ViewModel. We have to implement the ClickedCommand for ImageButton. Through the CommandParameter, we got the ConvenioProfissional instance that we clicked, and then we just modify the IsChecked Property for it.

public class MainPageViewModel
{
    public ObservableCollection<ConvenioProfissional>  ItemCollection { get; set; } = new ObservableCollection<ConvenioProfissional>();   

    public MainPageViewModel() 
    {
        // add some test data, just ignore it
        ItemCollection.Add(new ConvenioProfissional() { Convenio_Img = "help.png", IsChecked = false });
    }

    public Command ClickedCommand 
    { 
        get
        {
            return new Command((e) =>
            {
                var obj = e as ConvenioProfissional;
                foreach(var item in ItemCollection)
                {
                    if(obj == item) 
                    { 
                        item.IsChecked = true;
                    }
                }
            });
        } 
    }
}

If you have any questions, feel to ask!

Hope it helps!