首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用xaml在ListView中横向显示值?

如何使用xaml在ListView中横向显示值?
EN

Stack Overflow用户
提问于 2018-08-01 20:15:50
回答 2查看 1.9K关注 0票数 1

我正在尝试在ListView中显示一组值

What I am Getting Is

What I Want Is

Listview.Xaml

代码语言:javascript
复制
 <ListView x:Name="itemsource" >
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell IsEnabled="False">
                                    <ViewCell.View>
                                    <StackLayout>
                                            <Label Text="{Binding Value1}"/>
                                            <Label Text="{Binding Value2}"/>
                                    </StackLayout>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
EN

回答 2

Stack Overflow用户

发布于 2018-08-01 21:28:41

我已经创建了水平listView的自定义控件,它对我来说工作得很好。在xamarin中,没有水平listView选项。下面是完整的代码

代码语言:javascript
复制
public class HorizontalList : Grid
    {
        protected readonly ICommand SelectedCommand;
        protected readonly StackLayout ItemsStackLayout;

        public event EventHandler SelectedItemChanged;

        public static StackOrientation ListOrientation { get; set; }

        public HorizontalList()
        {
            SelectedCommand = new Command<object>(item => {
                var selectable = item as ISelectable;
                if (selectable == null)
                    return;

                SetSelected(selectable);
                SelectedItem = selectable.IsSelected ? selectable : null;
            });

            ItemsStackLayout = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Padding =new Thickness(0, 0, 0, 0),
                Margin=new Thickness(0, 0, 0, 0),
                Spacing = 5,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions=LayoutOptions.FillAndExpand
            };
            Children.Add(ItemsStackLayout);
        }

        public static readonly BindableProperty CommandProperty =
            BindableProperty.Create<HorizontalList, ICommand>(p => p.Command, null);

        public ICommand Command
        {
            get { return (ICommand)GetValue(CommandProperty); }
            set { SetValue(CommandProperty, value); }
        }

        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
        propertyName: "ItemsSource",
        returnType: typeof(IEnumerable),
        declaringType: typeof(HorizontalList),
        defaultValue: null,
        defaultBindingMode: BindingMode.OneWay,
            propertyChanged: ItemsSourceChanged);



        //public static readonly BindableProperty ItemsSourceProperty =
        //BindableProperty.Create<HorizontalList, IEnumerable>(p => p.ItemsSource, default(IEnumerable<object>), BindingMode.TwoWay, null, ItemsSourceChanged);

        public static readonly BindableProperty SelectedItemProperty =
            BindableProperty.Create<HorizontalList, object>(p => p.SelectedItem, default(object), BindingMode.TwoWay, null, OnSelectedItemChanged);

            public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(
            propertyName: "ItemTemplate",
            returnType: typeof(DataTemplate),
                declaringType: typeof(HorizontalList),
            defaultValue: default(DataTemplate));

        //public static readonly BindableProperty ItemTemplateProperty =
            //BindableProperty.Create<HorizontalList, DataTemplate>(p => p.ItemTemplate, default(DataTemplate));

        public IEnumerable ItemsSource
        {
            get { return (IEnumerable)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

        public object SelectedItem
        {
            get { return (object)GetValue(SelectedItemProperty); }
            set { SetValue(SelectedItemProperty, value); }
        }

        public DataTemplate ItemTemplate
        {
            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
            set { SetValue(ItemTemplateProperty, value); }
        }

        //private static void ItemsSourceChanged(BindableObject bindable, IEnumerable oldValue, IEnumerable newValue)
        //{
        //    var itemsLayout = (HorizontalList)bindable;
        //    itemsLayout.SetItems();
        //}

        private static void ItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var itemsLayout = (HorizontalList)bindable;
            itemsLayout.SetItems();
        }

        protected virtual void SetItems()
        {
            ItemsStackLayout.Children.Clear();

            if (ItemsSource == null)
                return;

            foreach (var item in ItemsSource)
                ItemsStackLayout.Children.Add(GetItemView(item));

            SelectedItem = ItemsSource.OfType<ISelectable>().FirstOrDefault(x => x.IsSelected);
        }

        protected virtual View GetItemView(object item)
        {
            var content = ItemTemplate.CreateContent();
            var view = content as View;
            if (view == null)
                return null;

            view.BindingContext = item;

            var gesture = new TapGestureRecognizer
            {
                Command = SelectedCommand,
                CommandParameter = item
            };

            AddGesture(view, gesture);

            return view;
        }

        protected void AddGesture(View view, TapGestureRecognizer gesture)
        {
            view.GestureRecognizers.Add(gesture);

            var layout = view as Layout<View>;

            if (layout == null)
                return;

            foreach (var child in layout.Children)
                AddGesture(child, gesture);
        }

        protected virtual void SetSelected(ISelectable selectable)
        {
            selectable.IsSelected = true;
        }

        protected virtual void SetSelectedItem(ISelectable selectedItem)
        {
            var items = ItemsSource;

            foreach (var item in items.OfType<ISelectable>())
                item.IsSelected = selectedItem != null && item == selectedItem && selectedItem.IsSelected;

            var handler = SelectedItemChanged;
            if (handler != null)
                handler(this, EventArgs.Empty);
        }

        private static void OnSelectedItemChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var itemsView = (HorizontalList)bindable;
            if (newValue == oldValue)
                return;

            var selectable = newValue as ISelectable;
            itemsView.SetSelectedItem(selectable ?? oldValue as ISelectable);
        }

    }


    public interface ISelectable
    {
        bool IsSelected { get; set; }

        ICommand SelectCommand { get; set; }
    }

在XAML中调用。

复仇空间-

代码语言:javascript
复制
xmlns:customControls="clr-namespace:ABC.CustomControls;assembly=ABC"

和UI-

代码语言:javascript
复制
<ScrollView Orientation="Horizontal" >
                      <customControls:HorizontalList 
                         ItemsSource="{Binding Listdata}" ListOrientation="Horizontal">
                                    <customControls:HorizontalList.ItemTemplate>
                                        <DataTemplate>
                                         <StackLayout>
                                           <Label Text="{Binding Value1}"/>
                                            <Label Text="{Binding Value2}"/> 
                                        </StackLayout>
                                        </DataTemplate>
                                    </customControls:HorizontalList.ItemTemplate>
                                </customControls:HorizontalList>
                    </ScrollView>
票数 3
EN

Stack Overflow用户

发布于 2018-08-03 03:37:40

只需更改StackLayout的方向即可。

代码语言:javascript
复制
<ListView x:Name="itemsource" >
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell IsEnabled="False">
                                        <ViewCell.View>
                                        <StackLayout  Orientation="Horizontal">
                                                <Label Text="{Binding Value1}"/>
                                                <Label Text="{Binding Value2}"/>
                                        </StackLayout>
                                        </ViewCell.View>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

这是做这件事最简单的方法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51633091

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档