Xamarin ListView Dynamic ItemTemplate

最新推荐文章于 2021-12-17 07:14:55 发布

小天够

最新推荐文章于 2021-12-17 07:14:55 发布

阅读量451

点赞数 1

分类专栏： Xamarin 文章标签： Xamarin

本文链接：https://blog.csdn.net/yhz815/article/details/102895025

版权

Xamarin 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍如何使用DataTemplateSelector在ListView中实现动态加载不同数据模板的方法。通过创建DynamicTemplateSelector类，根据不同数据类型选择对应的DataTemplate，实现了文本输入框与下拉选择框的动态切换。代码示例详细展示了Xamarin应用中UI数据绑定的具体实现。

摘要由CSDN通过智能技术生成

实现ListView动态加载不同的数据模板需要用到DataTemplateSelector

public class DynamicTemplateSelector: DataTemplateSelector
    {
        public DataTemplate TextTemplate { set; get; }
        public DataTemplate PickerTemplate { set; get; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var model = item as ItemModel;
            if (model.DataType == 1)
                return TextTemplate;
            else
                return PickerTemplate;

        }
    }

 public class ItemModel
    {
        public string Label { set; get; }
        public string Value { set; get; }
        public int DataType { set; get; }
    }

UI数据绑定

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinApp"
             xmlns:c="clr-namespace:XamarinApp.Controls"
             x:Class="XamarinApp.MainPage">

    <ContentPage.Resources>
        <DataTemplate x:Key="textTemplate">
            <ViewCell>
                <StackLayout Orientation="Horizontal" VerticalOptions="Center"  HorizontalOptions="FillAndExpand">
                    <Label Text="{Binding Label}" VerticalOptions="Center"/>
                    <Entry Text="{Binding Value}" Margin="10,0" HorizontalOptions="FillAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="pickertTemplate">
            <ViewCell>
                <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
                    <Label Text="{Binding Label}" VerticalOptions="Center"/>
                    <Picker SelectedItem="{Binding Value,Mode=TwoWay}" Margin="10,0" HorizontalOptions="FillAndExpand">
                        <Picker.Items>
                            <x:String>男</x:String>
                            <x:String>女</x:String>
                        </Picker.Items>
                    </Picker>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
        <c:DynamicTemplateSelector x:Key="dynamicTemplate" TextTemplate="{StaticResource textTemplate}" PickerTemplate="{StaticResource pickertTemplate}">
            
        </c:DynamicTemplateSelector>
    </ContentPage.Resources>
    <StackLayout>
        <ListView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource dynamicTemplate}" Margin="15,20">
            
        </ListView>
    </StackLayout>
</ContentPage>

public partial class MainPage : ContentPage
    {
        private List<ItemModel> items;
        public List<ItemModel> Items
        {
            get
            {
                return items;
            }

            set
            {
                items = value;
            }
        }
        public MainPage()
        {
            InitializeComponent();
            Items = new List<ItemModel>();
            Items.Add(new ItemModel() {DataType=1, Label="姓名",Value="" });
            Items.Add(new ItemModel() { DataType = 2, Label = "性别", Value = "男" });

            this.BindingContext = this;
        }

       
    }

用起来就是这么简单，噢耶！