Hiding button in expander based on collection view column value

Question

Hi

I have a collection view with an expander which contains a button. The collection view has the observable collection BookedJobsList as the item source.

How can I show/hide the button when user expands the expander, based on if value exists in one of the columns in observable collection BookedJobsList?

Thanks

Regards

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodels="clr-namespace:StaffApp.ViewModels" 
             xmlns:models="clr-namespace:BussinessObjects;assembly=StaffApp.BusinessObjects"              
             xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
             x:Class="StaffApp.Views.BookedJobsPage"
             x:DataType="viewmodels:BookedJobsViewModel" >

    <ContentPage.BindingContext>
        <viewmodels:BookedJobsViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <CollectionView x:Name="BookedJobsListView" ItemsSource="{Binding BookedJobsList}" >
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:BookedJobs">
                    <xct:Expander >
                        <xct:Expander.Header HeaderBackgroundColor="White" >
                            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" >
                                <Label Text="{Binding Date1, StringFormat='{0:dd}'}" />
                            </StackLayout>
                        </xct:Expander.Header>
                        <StackLayout>
                            <Button x:Name="clientdocument" Text="Client Document" 
                                    Command="{Binding Path=BindingContext.ClientDocumentCommand, Source={x:Reference UpcomingJobsListView}}" 
                                    CommandParameter="{Binding .}" />
                        </StackLayout>
                    </xct:Expander>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>
</ContentPage>

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

based on if value exists in one of the columns in observable collection BookedJobsList

Try to set data binding for the IsEnabled of the xct:Expander control based on the column's value. You could create a custom valueConverter class to detect if the property's value is null and return a bool result.

Here is the sample code, you could refer to it.

   <ContentPage.Resources>  
       <local:ExpanderValueConverter x:Key="converter"/>  
   </ContentPage.Resources>  
     
   <ContentPage.Content>  
       <StackLayout >  
           <CollectionView ItemsSource="{Binding DataColellection}" >  
               <CollectionView.ItemTemplate>  
                   <DataTemplate>  
                       <xct:Expander IsEnabled="{Binding TestValue,Converter={StaticResource converter}}">  
                           <xct:Expander.Header>  
                               <StackLayout>  
                                   <Label Text="{Binding TheContent}"/>  
                               </StackLayout>  
                           </xct:Expander.Header>  
                           <Button Text="Button"/>  
                       </xct:Expander>  
                   </DataTemplate>  
               </CollectionView.ItemTemplate>  
           </CollectionView>  
       </StackLayout>  
   </ContentPage.Content>  

Model calss and custom ValueConverter class

   public class TestPageModel  
   {  
       ...  
       public string TestValue { get; set; }  
   }  
     
   public class ExpanderValueConverter : IValueConverter  
   {  
       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
       {  
           var theValue = (string)value;  
           return theValue != null ? true : false;  
       }  
       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
       {  
           throw new NotImplementedException();  
       }  
   }  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.