首页 > 解决方案 > 如何根据 CollectionView Items 更改元素的可见性

问题描述

在我的应用程序中,我创建了一个带有 a 的页面CollectionView,当这个 CollectionView 为空时会显示 aLabel并且在点击按钮时,新项目将添加到 CollectionView 中。我希望标签也消失或在按钮点击时将其可见性设置为 false。
CollectionView 和标签的 XAML

<!--Recent Doctors List-->
                    <CollectionView Grid.Row="2"
                                    ItemsSource="{Binding RecentDoctors}">

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Grid ColumnSpacing="0"
                                      RowSpacing="0"
                                      Padding="0,10,0,10">

                                        <!--Recent Doctors Item Template-->
                                        <pancake:PancakeView BackgroundColor="#F2F2F2"
                                                         HasShadow="True"
                                                         Elevation="5"
                                                         CornerRadius="10"
                                                         Margin="7,0"
                                                         Padding="20,5,0,5">
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="80"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>

                                                <!--Doctors Image-->
                                                <Frame Grid.Column="0" 
                                                   BackgroundColor="#CCCCCC"
                                                   IsClippedToBounds="True"
                                                   Padding="0"
                                                   HasShadow="False"
                                                   CornerRadius="100"
                                                   HeightRequest="80">

                                                    <Image HorizontalOptions="Center"
                                                       VerticalOptions="Center"/>
                                                </Frame>

                                                <!--Doctors Info-->
                                                <StackLayout Grid.Column="1"
                                                         VerticalOptions="Center"
                                                         Spacing="0">

                                                    <!--Doctors Name Label-->
                                                    <Label Text="{Binding DoctorsName}"
                                                       TextColor="Black"
                                                       FontAttributes="Bold"
                                                       FontSize="17"/>

                                                    <!--Specialization Label-->
                                                    <Label Text="{Binding Specialization}"
                                                       TextColor="Black"
                                                       FontAttributes="Bold"
                                                       FontSize="17"/>

                                                    <!--Location Label-->
                                                    <Label Text="{Binding Location}"
                                                       TextColor="#999999"
                                                       FontSize="12"/>
                                                </StackLayout>
                                            </Grid>
                                        </pancake:PancakeView>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>

<!--Add Doctors Button-->
        <pancake:PancakeView Grid.Row="1" 
                             BackgroundColor="#0F8DF4"
                             HasShadow="True"
                             CornerRadius="100"
                             WidthRequest="60"
                             HeightRequest="60"
                             Elevation="6"
                             VerticalOptions="End"
                             HorizontalOptions="End"
                             Margin="0,0,10,20"
                             xamEffects:TouchEffect.Color="White"
                             xamEffects:Commands.Tap="{Binding AddDoctorCommand}">

            <!--Plus Icon-->
            <renderers:FontAwesomeIcon Text="{x:Static helpers:IconsFA.Plus}"
                                       FontSize="30"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center"
                                       TextColor="White"/>
        </pancake:PancakeView>

        <!--No Doctors Label-->
        <Label Grid.Row="1"
               IsVisible="{Binding HasAnyRecentDoctors, Mode=TwoWay}"
               Text="You Currently Have No Recent Doctors"
               FontSize="14"
               TextColor="Gray"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>

视图模型

public class TelemedicinePageViewModel : BaseViewModel
    {
        #region PROPERTIES
        /// <summary>
        /// Collection of RecentDoctorsInfo
        /// </summary>
        public ObservableCollection<RecentDoctorsInfo> RecentDoctors { get; set; } = new ObservableCollection<RecentDoctorsInfo>();

        /// <summary>
        /// Collection of MyDoctorsInfo
        /// </summary>
        public ObservableCollection<MyDoctorsInfo> MyDoctors { get; set; } = new ObservableCollection<MyDoctorsInfo>();

        private bool _hasAnyRecentDoctors;
        public bool HasAnyRecentDoctors
        {
            get 
            { 
                if(RecentDoctors.Count == 0)
                {
                    _hasAnyRecentDoctors = true;
                }
                else if(RecentDoctors.Count > 0)
                {
                    _hasAnyRecentDoctors = false;
                }

                return _hasAnyRecentDoctors; 
            }

            set
            {
                _hasAnyRecentDoctors = value;
                OnPropertyChanged();
            }
        }

        /// <summary>
        /// Command for adding new 
        /// </summary>
        public ICommand AddDoctorCommand { get; set; }
        #endregion

        /// <summary>
        /// Main Constructor for the class
        /// </summary>
        public TelemedicinePageViewModel()
        {
            AddDoctorCommand = new RelayCommand(AddDoctor);

            MyDoctors.Add(new MyDoctorsInfo()
            {
                None = "none"
            });
        }

        #region METHODS

        public void AddDoctor()
        {
            RecentDoctors.Add(new RecentDoctorsInfo() 
            { 
                DoctorsName = "Steven Strange",
                Specialization = "Sorcerer Supreme",
                Location = "177a Bleecker St. | USA"
            });
        }
        #endregion
    }

这是我迄今为止尝试过的,即 HasAnyRecentDoctors 布尔值。任何帮助表示赞赏

标签: c#xamlxamarinmvvmxamarin.forms

解决方案


所以事实证明CollectionView有一个称为 EmptyView 的属性,可用于在CollectionView没有项目/数据时显示反馈。漂亮的东西;-)。
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/emptyview


推荐阅读