Access elements of a DataTemplate from code

Question

I would like to find a way to access the ButtonImage element from c#. Everything contained in the DataTemplate is not callable from c#.

                    <CarouselView                   
                        x:Name="FrasiView"
                        RelativeLayout.WidthConstraint="{ConstraintExpression
                        Type=RelativeToParent,
                        Property=Width,
                        Factor=1}"
                        RelativeLayout.YConstraint="{ConstraintExpression
                        Type=Constant,
                        Constant=45}"
                        PeekAreaInsets="18"
                        HeightRequest="370">
                        <CarouselView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" SnapPointsType="MandatorySingle" SnapPointsAlignment="Center"/>
                        </CarouselView.ItemsLayout>
                        <CarouselView.ItemTemplate>
                            <DataTemplate>
                                <RelativeLayout>
                                    <RelativeLayout x:Name="FrontView">
                                        <RelativeLayout.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="FlipToBack_Tapped"/>
                                        </RelativeLayout.GestureRecognizers>
                                          <ImageButton
                                            x:Name="CuoreVuoto"
                                            RelativeLayout.YConstraint="{ConstraintExpression
                                            Type=Constant,
                                            Constant=22}"
                                            RelativeLayout.XConstraint="{ConstraintExpression
                                            Type=Constant,
                                            Constant=275}"
                                            Source="IconHeart"
                                            WidthRequest="24"
                                            Clicked="CuoreVuoto_Clicked"
                                            BackgroundColor="Transparent"/>
                                          <ImageButton
                                          x:Name="CuorePieno"
                                          RelativeLayout.YConstraint="{ConstraintExpression
                                          Type=Constant,
                                          Constant=22}"
                                          RelativeLayout.XConstraint="{ConstraintExpression
                                          Type=Constant,
                                          Constant=275}"
                                          Source="IconHeart"
                                          WidthRequest="24"
                                          Clicked="CuorePieno_Clicked"
                                          IsVisible="False"
                                          BackgroundColor="Transparent"/>
                                         </RelativeLayout>
                               </RelativeLayout>
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>

In c# I would like to recall the CuorePieno element how could I do?

Answer 1

I would like that when the user presses on the ImageButton, the IsVisible property changes

I agree with Jason's reply, you can use Binding to change ImageButton IsVisible property, I do one sample that you can take a look:

<RelativeLayout>
        <CarouselView
            x:Name="FrasiView"
            HeightRequest="370"
            ItemsSource="{Binding lists}"
            PeekAreaInsets="18"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                  Property=Width,
                                                                  Factor=1}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
                                                              Constant=45}">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout
                    Orientation="Horizontal"
                    SnapPointsAlignment="Center"
                    SnapPointsType="MandatorySingle" />
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>

                    <RelativeLayout x:Name="FrontView">
                        <Label Text="{Binding str}" />
                        <ImageButton
                            x:Name="CuoreVuoto"
                            BackgroundColor="Transparent"
                            Clicked="CuoreVuoto_Clicked"
                            IsVisible="{Binding Vuoto}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,
                                                                              Constant=275}"
                            RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
                                                                              Constant=22}"
                            Source="c1.png"
                            WidthRequest="24" />
                        <ImageButton
                            x:Name="CuorePieno"
                            BackgroundColor="Transparent"
                            Clicked="CuorePieno_Clicked"
                            IsVisible="{Binding Pieno}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,
                                                                              Constant=275}"
                            RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
                                                                              Constant=22}"
                            Source="check.png"
                            WidthRequest="24" />
                    </RelativeLayout>

                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </RelativeLayout>

Code-behind

public partial class Page1 : ContentPage
{
    public ObservableCollection<carouselmodel> lists { get; set; }
    public Page1()
    {
        InitializeComponent();
        lists = new ObservableCollection<carouselmodel>()
        {
            new carouselmodel(){str="test 1",Vuoto=true,Pieno=false},
            new carouselmodel(){str="test 2",Vuoto=true,Pieno=false},
            new carouselmodel(){str="test 3",Vuoto=true,Pieno=false},
            new carouselmodel(){str="test 4",Vuoto=true,Pieno=false},
            new carouselmodel(){str="test 5",Vuoto=true,Pieno=false},
            new carouselmodel(){str="test 6",Vuoto=true,Pieno=false}
        };
        this.BindingContext = this;
    }

    private void CuoreVuoto_Clicked(object sender, EventArgs e)
    {
        var button = sender as ImageButton;
        var model = button.BindingContext as carouselmodel;
        if(model.Vuoto==true)
        {
            model.Vuoto = false;
            model.Pieno = true;
        }
    }

    private void CuorePieno_Clicked(object sender, EventArgs e)
    {
        var button = sender as ImageButton;
        var model = button.BindingContext as carouselmodel;
        if (model.Pieno == true)
        {
            model.Pieno = false;
            model.Vuoto = true;                
        }
    }
}

public class carouselmodel : ViewModelBase
{
    public string str { get; set; }
    private bool _Vuoto;
    public bool Vuoto
    {
        get { return _Vuoto; }
        set
        {
            _Vuoto = value;
            RaisePropertyChanged("Vuoto");
        }
    }

    private bool _Pieno;
    public bool Pieno
    {
        get
        { return _Pieno; }
        set
        {
            _Pieno = value;
            RaisePropertyChanged("Pieno");
        }
    }
}

The ViewModelBase class inherit INotifyPropertyChanged interface, to nofity data changed.

public class ViewModelBase : INotifyPropertyChanged
{
    
    public event PropertyChangedEventHandler PropertyChanged;

     
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}