如何根据其项目的大小更改 CollectionView 大小 [英] How to change CollectionView size according sizes of its items

问题描述

我正在尝试使用 CollectionView 创建自定义操作表，但在自动调整高度时遇到问题.当我将 CollectionView 插入页面时，它会占用所有可用空间.需要做什么才能让 CollectionView 的高度根据其元素的高度而变化?

I am trying to create a custom Action Sheet using CollectionView, but I have a problem with auto resizing the height. When I insert the CollectionView into the page, it takes up all the free space. What needs to be done so that the height of the CollectionView changes depending on the height of its elements?

<?xml version="1.0" encoding="utf-8"?>

<StackLayout
    Margin="60, 0">
    <CollectionView
        BackgroundColor="White"
        x:Name="CollectionViewControl">

        <CollectionView.Header>
            <Label
                x:Name="HeaderLabel"
                TextTransform="Uppercase"
                HorizontalTextAlignment="Center"
                FontAttributes="Bold" />
        </CollectionView.Header>

        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0, 10" x:DataType="modalDialogs:ActionSheetItem">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="8*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="{Binding Name}" />
                    <Image Grid.Column="1" Source="arrow_down" IsVisible="{Binding IsSelected}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>

        <CollectionView.Footer>
            <Button
                BackgroundColor="Transparent"
                TextColor="Green"
                Text="Cancel"
                HorizontalOptions="End" />
        </CollectionView.Footer>

    </CollectionView>
</StackLayout>

当前用户界面

推荐答案

当我将 CollectionView 插入页面时，它占用了所有可用空间.需要做什么才能让 CollectionView 的高度根据其元素的高度而变化?

When I insert the CollectionView into the page, it takes up all the free space. What needs to be done so that the height of the CollectionView changes depending on the height of its elements?

在 Jason 看来，Collectionview 中的小行，您可以为 collectionView.HeightRequest 设置一个值.当item增加时，高度也会增加.

From Jason's opinion, little rows in Collectionview, you can set a value to collectionView.HeightRequest. when item increase, the height will increase as well.

我创建了一个名为.RowHeigth 的属性.如果我在 CollectionView 中添加项目(使用 AddCommand)，RowHeigth 将增加.

I create a property called.RowHeigth. If I add item in the CollectionView(with AddCommand), RowHeigth will increase.

 <StackLayout Margin="60,0">
        <CollectionView
            x:Name="CollectionViewControl"
            BackgroundColor="Blue"
            HeightRequest="{Binding rowHeigth}"
            ItemsSource="{Binding items}">

            <CollectionView.Header>
                <Label
                    x:Name="HeaderLabel"
                    FontAttributes="Bold"
                    HorizontalTextAlignment="Center"
                    TextTransform="Uppercase" />
            </CollectionView.Header>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="0,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="8*" />
                            <ColumnDefinition Width="2*" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Name}" />
                        <Image
                            Grid.Column="1"
                            HeightRequest="30"
                            IsVisible="{Binding IsSelected}"
                            Source="a11.png" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>

            <CollectionView.Footer>
                <Button
                    BackgroundColor="Transparent"
                    HorizontalOptions="End"
                    Text="Cancel"
                    TextColor="Green" />
            </CollectionView.Footer>

        </CollectionView>

        <Button
            x:Name="btnadd"
            Command="{Binding AddCommand}"
            Text="add item" />
    </StackLayout>

 public partial class Page5 : ContentPage
{
    public Page5()
    {
        InitializeComponent();
        this.BindingContext = new itemviewmodel();
    }
}
public class itemviewmodel:ViewModelBase
{
    public ObservableCollection<ActionSheetItem> items { get; set; }
    private int _rowHeigth;
    public int rowHeigth
    {
        get { return _rowHeigth; }
        set
        {
            _rowHeigth = value;
            RaisePropertyChanged("rowHeigth");
        }
    }
    public ICommand AddCommand { protected set; get; }
    public itemviewmodel()
    {
        items = new ObservableCollection<ActionSheetItem>();

        for(int i=0;i<5;i++)
        {
            ActionSheetItem item = new ActionSheetItem();
            item.Name = "name " + i;
            item.IsSelected = true;
            items.Add(item);

        }
        rowHeigth = items.Count * 60;

        AddCommand = new Command<ActionSheetItem>(async (key) => {
            items.Add(new ActionSheetItem() {  Name = "test letter ", IsSelected=true });
            rowHeigth = items.Count * 60;
        });

    }
}

ViewModelBase 是实现 INotifyPropertyChanged 接口的类.

The ViewModelBase is class that implementing INotifyPropertyChanged interface.

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

这篇关于如何根据其项目的大小更改 CollectionView 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！