如何创建存在于具有 GridItemsLayout 的 CollectionView 末尾的页脚？

Question

我有一个带有 GridItemsLayout 的 CollectionView，其中包含一个主题列表作为 ItemsSource。我希望页脚出现在 CollectionView 的末尾，就好像它是最后一项一样，但此时，它只是出现在列表的垂直末端。

Screenshot of what is currently happening

这是 CollectionView XAML:

<CollectionView x:Name="collectionViewSubjects">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Span="2" HorizontalItemSpacing="15" VerticalItemSpacing="20"
                                 Orientation="Vertical"/>
                </CollectionView.ItemsLayout>

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <border:SfBorder Style="{DynamicResource listItemBorder}">
                            <AbsoluteLayout HeightRequest="180">

                                <gradient:SfGradientView AbsoluteLayout.LayoutFlags="All"
                                                         AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
                                                         Style="{StaticResource subjectItemGradient}"/>

                                <Label Text="{Binding Name}"
                                       AbsoluteLayout.LayoutFlags="All"
                                       AbsoluteLayout.LayoutBounds="0.5, 0.1, 0.9, 0.2"
                                       FontAttributes="Bold"/>
                                
                                <Label Text="{Binding Credits, StringFormat='0 / {0} credits'}"
                                       AbsoluteLayout.LayoutFlags="All"
                                       AbsoluteLayout.LayoutBounds="0.5, 0.35, 0.9, 0.2"/>
                                
                                <Label Text="{Binding Standards, StringFormat='{0} standards'}"
                                       AbsoluteLayout.LayoutFlags="All"
                                       AbsoluteLayout.LayoutBounds="0.5, 0.53, 0.9, 0.2"/>

                                <Button:SfButton Text="View Info" CornerRadius="30"
                                                 TextColor="Black"
                                                 FontAttributes="Bold"
                                                 FontSize="17"
                                                 AbsoluteLayout.LayoutFlags="All"
                                                 AbsoluteLayout.LayoutBounds="0.5, 0.85, 0.7, 0.2"
                                                 Style="{StaticResource subjectButtonGradient}"/>

                            </AbsoluteLayout>
                        </border:SfBorder>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
                
                <CollectionView.Footer>
                    <border:SfBorder Style="{DynamicResource listItemBorder}"
                                     BackgroundColor="Black"
                                     HeightRequest="180">
                        <Button Text="Add Subject"
                                TextColor="Yellow"
                                BackgroundColor="Transparent"/>
                    </border:SfBorder>
                </CollectionView.Footer>

            </CollectionView>

编辑： 这是同一页面的代码隐藏：

SubjectsPageViewModel ViewModel;
    public SubjectsPage()
    {
        InitializeComponent();

        ViewModel = new SubjectsPageViewModel();
        BindingContext = ViewModel;
        collectionViewSubjects.ItemsSource = ViewModel.Subjects;

        //var model = 
        //model.IsVisible = true;
    }

Answer 1

您可以提前在DataTemplate中定义Button。并将最后一项的属性 IsVisible 设置为 true .

在Xaml

<DataTemplate>

  <StackLayout>

    <border:SfBorder IsVisible="{Binding IsVisible,Converter={StaticResource BoolConverter}}" Style="{DynamicResource listItemBorder}">
      <AbsoluteLayout HeightRequest="180">

        //...
      </AbsoluteLayout>
    </border:SfBorder>

    <border:SfBorder IsVisible="{Binding IsVisible}" Style="{DynamicResource listItemBorder}"
                                     BackgroundColor="Black"
                                     HeightRequest="180">
                        <Button Text="Add Subject"
                                TextColor="Yellow"
                                BackgroundColor="Transparent"/>
    </border:SfBorder>

   </StackLayout>

 </DataTemplate>

在你的模型中

public class xxxModel : INotifyPropertyChanged
{
   

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    bool isVisible=false;   // the button is invisible in default

    public bool IsVisible
    {
        get
        {
            return isVisible;
        }

        set
        {
            if (isVisible != value)
            {
                isVisible = value;
                NotifyPropertyChanged("IsVisible");
            }
        }
    }

    //other properties
}

在后面的代码中

创建转换器

public class BoolConverter : IValueConverter
    {
       
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var isVisible = (bool)value;

            return !isVisible;
        }
      

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

初始化 ItemSource

后调用以下行

var model = ItemSource[ItemSource.Count - 1] as xxxModel;

model.IsVisible = true;

如何创建存在于具有 GridItemsLayout 的 CollectionView 末尾的页脚？

How do you create a footer that exists at the end of CollectionView that has a GridItemsLayout?

xaml

collectionview

xamarin

xamarin.forms

在Xaml

在你的模型中

在后面的代码中