从代码访问 DataTemplate 的元素

Question

我想找到一种从 C# 访问 ButtonImage 元素的方法。 DataTemplate 中包含的所有内容都不能从 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>

在 c# 中，我想回忆一下 CuorePieno 元素我该怎么办？

Answer 1

更好的方法是将您的 datatemplate 移动到一个单独的文件中。我假设您共享的文件名为 CarouselPage.xaml 并且类型为 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>

创建一个新的 ContentView 文件（xaml+code-behind）将其命名为 FrasiViewItemTemplate.xaml 覆盖它：

<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>

您可以在代码隐藏中访问 DataTemplate 的元素 FrasiViewItemTemplate.xaml.cs 覆盖它（不要忘记命名空间） :

(注意是base class不再是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)
        {

        }
    }

Answer 2

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

同意Jason的回复，你可以使用Binding来改变ImageButton的IsVisible属性，我做了一个例子，你可以看看：

<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>

代码隐藏

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

ViewModelBase class继承INotifyPropertyChanged接口，对nofity数据进行了更改。

public class ViewModelBase : INotifyPropertyChanged
{
    
    public event PropertyChangedEventHandler PropertyChanged;

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

从代码访问 DataTemplate 的元素

Access elements of a DataTemplate from code

c#

xaml

datatemplate

xamarin.forms