[UWP]如何在UWP中实现“显示更多”功能？ [英] [UWP]How to implement 'show more' functionalityin UWP?

问题描述

我有几个切换按钮的列表，说16项。一次只能选择一个状态。我想预先只显示8个项目，并在其下方显示一个标签，上面写着"显示更多"。当用户点击它时，我将显示列表中剩余的8个项目。 

我认为我们可以保留2个堆栈面板，其中一个隐藏在显示更多内容之前。但是，在这种情况下，很难保持从这两个堆栈面板中选择哪个项目并关闭旧堆栈面板并选择新项目。 

我们能做什么它更好的方式，其中后端列表只有一个？ 

解决方案

您好Adobe Systems Incorporated ，

您可以使用ListView显示所有切换按钮项。首先，我们分别创建两个具有更多或更少项目的List源，当点击加载更多按钮时，我们更改ListView itemsSource以使其显示更多或更少的项目。这是我的示例
代码，您可以查看它。

在Xaml中，

<网格背景=" {ThemeResource ApplicationPageBackgroundThemeBrush}"> 
< Grid.RowDefinitions> 
< RowDefinition Height =" Auto" /> 
< RowDefinition Height =" 30" /> 
< /Grid.RowDefinitions> 
< ListView Name =" MyListView"的ItemsSource = QUOT; {结合}"> 
< ListView.ItemTemplate> 
< DataTemplate> 
< ToggleButton IsChecked =" {Binding IsCheck，Mode = TwoWay}" Content =" {Binding Name，Mode = TwoWay}" /> 
< / DataTemplate> 
< /ListView.ItemTemplate> 
< / ListView> 
< Button Margin =" 20,0,0,0" Grid.Row = QUOT 1 QUOT;名称= QUOT; LoadMoreBt"内容="加载更多"点击= QUOT; Button_Click" /> 
< / Grid> 
 

在后面的代码中，

公开密封partial class MainPage：Page 
 {
 public ObservableCollection< Model> LessListSource {get;组; } 
 public ObservableCollection< Model> MoreListSource {get;组; } 
 public MainPage（）
 {
 this.InitializeComponent（）; 
 LessListSource = new ObservableCollection< Model>（）; 
 MoreListSource = new ObservableCollection< Model>（）; 
 
 LessListSource.Add（new Model {Name =" ToggleButton 1"，IsCheck = true}）; 
 LessListSource.Add（new Model {Name =" ToggleButton 2"，IsCheck = true}）; 
 
 LessListSource.Add（new Model {Name =" ToggleButton 3"，IsCheck = true}）; 
 
 LessListSource.Add（new Model {Name =" ToggleButton 4"，IsCheck = true}）; 
 LessListSource.Add（new Model {Name =" ToggleButton 5"，IsCheck = true}）; 
 LessListSource.Add（new Model {Name =" ToggleButton 6"，IsCheck = true}）; 
 LessListSource.Add（new Model {Name =" ToggleButton 7"，IsCheck = true}）; 
 LessListSource.Add（new Model {Name =" ToggleButton 8"，IsCheck = true}）; 
 
 foreach（LessListSource中的var项目）
 {
 MoreListSource.Add（item）; 
} 
 MoreListSource.Add（new Model {Name =" ToggleButton 11"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 12"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 13"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 14"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 15"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 16"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 17"，IsCheck = true}）; 
 MoreListSource.Add（new Model {Name =" ToggleButton 18"，IsCheck = true}）; 
 
 MyListView.DataContext = LessListSource; 
} 
 bool IsLess = true; 
 private void Button_Click（object sender，RoutedEventArgs e）
 {
 if（IsLess）
 {
 MyListView.DataContext = MoreListSource; 
 LoadMoreBt.Content =" Load Less" ;; 
 IsLess = false; 
} 
 else 
 {
 MyListView.DataContext = LessListSource; 
 LoadMoreBt.Content =" Load More" ;; 
 IsLess = true; 
} 
} 
} 
 
公共类型号：INotifyPropertyChanged 
 {
私人字符串名称; 
 private bool isCheck; 
公共事件PropertyChangedEventHandler PropertyChanged; 
 protected void RaisePropertyChanged（string name）
 {
 if（PropertyChanged！= null）
 {
 PropertyChanged（this，new PropertyChangedEventArgs（name））; 
} 
} 
 
 public bool IsCheck 
 {
 get 
 {
 return isCheck; 
} 
设置
 {
 if（value！= isCheck）
 {
 isCheck = value; 
 RaisePropertyChanged（" IsCheck"）; 
} 
} 
} 
 
公共字符串名称
 {
获取
 {
返回名称; 
} 
设置
 {
 if（name！= value）
 {
 name = value; 
 RaisePropertyChanged（" Name"）; 
} 
} 
} 
} 

祝你好运，

Breeze

Hi,

I have a list of few toggle buttons say 16 items. Only one will be selected state at a time. I want to show only 8 items upfront and show a label below it which says "Show more". When user clicks it, I will show remaining 8 items of the list. 

I think we can keep 2 stack panels from which one is hiding before show more is clicked. But, in that case, it will be difficult to maintain which item is selected out of these 2 stack panels and switching off the old one and selecting the new one. 

Can we do it in better way wherein backend list is one only? 

解决方案

Hi Adobe Systems Incorporated,

You can use a ListView to show all the toggle button items. Firstly, we create two List source with more or less items respectively, when click the load more button, we changes the ListView itemsSource to make it display more or less items. Here is my sample code, you can check it.

In the Xaml,

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <ListView Name="MyListView" ItemsSource="{Binding}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ToggleButton IsChecked="{Binding IsCheck,Mode=TwoWay}" Content="{Binding Name,Mode=TwoWay}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Margin="20,0,0,0" Grid.Row="1" Name="LoadMoreBt"  Content="Load More" Click="Button_Click"/>
    </Grid>

In the code behind,

    public sealed partial class MainPage : Page
    {
        public ObservableCollection<Model> LessListSource { get; set; }
        public ObservableCollection<Model> MoreListSource { get; set; }
        public MainPage()
        {
            this.InitializeComponent();
            LessListSource = new ObservableCollection<Model>();
            MoreListSource = new ObservableCollection<Model>();

            LessListSource.Add(new Model { Name = "ToggleButton 1", IsCheck = true });
            LessListSource.Add(new Model { Name = "ToggleButton 2", IsCheck = true });

            LessListSource.Add(new Model { Name = "ToggleButton 3", IsCheck = true });

            LessListSource.Add(new Model { Name = "ToggleButton 4", IsCheck = true });
            LessListSource.Add(new Model { Name = "ToggleButton 5", IsCheck = true });
            LessListSource.Add(new Model { Name = "ToggleButton 6", IsCheck = true });
            LessListSource.Add(new Model { Name = "ToggleButton 7", IsCheck = true });
            LessListSource.Add(new Model { Name = "ToggleButton 8", IsCheck = true });

            foreach(var item in LessListSource)
            {
                MoreListSource.Add(item);
            }
            MoreListSource.Add(new Model { Name = "ToggleButton 11", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 12", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 13", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 14", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 15", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 16", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 17", IsCheck = true });
            MoreListSource.Add(new Model { Name = "ToggleButton 18", IsCheck = true });

            MyListView.DataContext = LessListSource;
        }
        bool IsLess=true;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (IsLess)
            {
                MyListView.DataContext = MoreListSource;
                LoadMoreBt.Content = "Load Less";
                IsLess = false;
            }
            else
            {
                MyListView.DataContext = LessListSource;
                LoadMoreBt.Content = "Load More";
                IsLess = true;
            }
        }
    }

    public class Model : INotifyPropertyChanged
    {
        private string name;
        private bool isCheck;
        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }

        public bool IsCheck
        {
            get
            {
                return isCheck;
            }
            set
            {
                if (value != isCheck)
                {
                    isCheck = value;
                    RaisePropertyChanged("IsCheck");
                }
            }
        }

        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                if (name != value)
                {
                    name = value;
                    RaisePropertyChanged("Name");
                }
            }
        }
    }

Best regards,

Breeze

这篇关于[UWP]如何在UWP中实现“显示更多”功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！