xaml - 如何创建一个存在于 CollectionView 末尾且具有 GridItemsLayout 的页脚?
问题描述
我有一个带有 GridItemsLayout 的 CollectionView,其中包含一个主题列表作为 ItemsSource。我希望页脚出现在 CollectionView 的末尾,就好像它是最后一项一样,但此时,它只是出现在列表的垂直端。
这是 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;
}
解决方案
您可以提前在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;
推荐阅读
- python - Discord PY - 我需要命令来定义机器人将发送 NSFW 的频道 ID
- java - 当我运行 `./gradlew wrapper` 时,Minecraft Forge 帽子会导致此错误?
- python - 在 Python 中读取 npm start 控制台输出
- mysql - MySQL:插入日志中的列为空
- django - django 中的 {% url %} 是什么?
- java - Android Facebook 登录弹出对话框
- android - 构建android源代码后如何刷到设备?
- vector - SymPy 中的向量积求和
- html - 为什么 Chrome 会报告我的代码中没有的 element.style 规则?
- python - 为什么我不能在此代码中将“elif”的条件放在“if”条件的同一行中?