XAML 如何根据CollectionView项目的大小更改其大小

d4so4syb  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(167)

我尝试使用CollectionView创建自定义操作表,但在自动调整高度时遇到问题。当我将CollectionView插入页面时,它占用了所有可用空间。需要执行什么操作才能使CollectionView的高度根据其元素的高度进行更改?

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

Current UI

gtlvzcf8

gtlvzcf81#

当我将CollectionView插入页面时,它会占用所有可用空间。要使CollectionView的高度根据其元素的高度而变化,需要执行什么操作?
从Jason的观点来看,Collectionview中的小行,可以给collectionView.HeightRequest设置一个值。当项增加时,高度也会随之增加。
我创建了一个名为. RowHeigth的属性。如果我在CollectionView中添加项(使用AddCommand),RowHeigth将增加。

<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接口的类。

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

dw1jzc5e2#

在我的例子中,将BindableLayaout附加到StackLayout是最好的解决方案。https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/bindablelayout

相关问题