在Xamarin.forms中列出具有动态单元大小的视图

时间:2016-06-16 10:47:55

标签: listview xamarin.forms

我正在尝试创建一个列表视图,它可以更改单击的单元格高度。

我的自定义单元格看起来像

namespace Myapp
{
    public class MyCell:ViewCell
    { 
        public MyCell ()
        {
            Label objLabel = new Label {
                VerticalTextAlignment = TextAlignment.Center,
                TextColor = Color.Yellow,                
            };
            objLabel.SetBinding (Label.TextProperty, new Binding ("Name"));


        StackLayout objLayout = new StackLayout {
            Padding = new Thickness (20, 0, 0, 0),
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.StartAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            Children = { objLabel }
        };

        Frame objFrame_Inner = new Frame {
            Padding = new Thickness (15, 15, 15, 15),
            HeightRequest = 36,
            OutlineColor = Color.Accent,
            BackgroundColor = Color.Blue,
            Content = objLayout,                
        };

        Frame objFrame_Outer = new Frame {
            Padding = new Thickness (0, 0, 0, 10),
            Content = objFrame_Inner,
            HeightRequest = 50
        };

        View = objFrame_Outer;            

        //this.BindingContextChanged += MyCellBindingContextChanged;
    }

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        WalletCard objMenuItem = (WalletCard)this.BindingContext;
        objMenuItem.PropertyChanged += MyItemPropertyChanged;
    }

    void MyCellBindingContextChanged (object sender, EventArgs e)
    {
        WalletCard objMenuItem = (MyItem)this.BindingContext;
        objMenuItem.PropertyChanged += WalletCardPropertyChanged;
    }

    void MyItemPropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        switch (e.PropertyName) {
        case "CellHeight":
            this.Height = (this.BindingContext as MyItem).CellHeight;
            this.ForceUpdateSize ();
            break;
        }
    }
}
}

ListView用法

<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Name="MyTemplate" x:Key="MyTemplate">
        <local:MyCell></local:MyCell>
        </DataTemplate>
    </ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
    <ListView HasUnevenRows="true"
                    ItemsSource = "{Binding myItems}"
                    ItemTapped="ItemTapped"
                    ItemTemplate = "{StaticResource MyTemplate}"
            />
</ContentPage.Content>

点击列表视图中的项目时,相应项目的CellHeight属性会增加。

修改

添加项目分接事件

void ItemTapped(object sender, ItemTappedEventArgs e) {
        var selectedItem = (MyItem)e.Item;
        selectedItem.CellHeight = 200;
    }

/编辑

问题是第一次点击项目时,高度不会改变,但在选择不同项目后再次点击时高度会发生变化。

我知道如何解决这个问题,或者是否有其他优雅的方法来实现这一目标。

0 个答案:

没有答案