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));
        }
    }
}

Answer 2

A better approach is to move your datatemplate to a separate file. I will assume the file you have shared is called CarouselPage.xaml and is of type ContentPage:

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

Create a new ContentView file (xaml+code-behind) let name it FrasiViewItemTemplate.xaml overwrite it with:

<RelativeLayout  x:Class="yournamespace.FrasiViewItemTemplate"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <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>

You can access the elements of your DataTemplate in it code-behind FrasiViewItemTemplate.xaml.cs overwrite it with (don't forget the namespace):

(pay attention to it base class it is no longer ContentView)

    public partial class FrasiViewItemTemplate : RelativeLayout
    {
        public FrasiViewItemTemplate()
        {
            BindingContext = this;
            InitializeComponent();
        }

        private void FlipToBack_Tapped(object sender, System.EventArgs e)
        {

        }

        private void CuoreVuoto_Clicked(object sender, System.EventArgs e)
        {
            CuoreVuoto.IsVisible = false;
            CuorePieno.IsVisible = true;

        }

        private void CuorePieno_Clicked(object sender, System.EventArgs e)
        {
            CuoreVuoto.IsVisible = true;
            CuorePieno.IsVisible = false;
        }

        private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
        {

        }
    }