xamarin forms expand and collapse comments on button click

Chirag Pokiya 96

how to create expand view in Xamarin form when I click on Comment button like below screen shot?

1 answer

JarvanZhang 23,951

Welcome to our Microsoft Q&A platform!

To achieve the function as the pictures shown, try using Community.Toolkit.Expander control which provides an expandable container to host any content. Here is the related doc, you could refer to it: https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/expander#create-expander-content-on-demand

However, the expandable container should only be expanded when clicking the comment menu in the picture. So we need to make a little change, try to remove the Expander.Header template and use the button/menu to change the expanding status instead. Here is the sample code, you could refer to it:

   <ContentPage ...  
           xmlns:xct="http://xamarin.com/schemas/2020/toolkit">  
     
       <ContentPage.Content>  
           <StackLayout>  
               <Button Text="button" Clicked="Button_Clicked" />  
               <xct:Expander x:Name="expander" BackgroundColor="LightBlue">  
                   <xct:Expander.ContentTemplate>  
                       <DataTemplate>  
                           <Grid Padding="10">  
                               <Grid.ColumnDefinitions>  
                                   <ColumnDefinition Width="Auto" />  
                                   <ColumnDefinition Width="Auto" />  
                               </Grid.ColumnDefinitions>  
                               <Image Source="yali"  
                                      Aspect="AspectFill"  
                                      HeightRequest="120"  
                                      WidthRequest="120" />  
                               <Label Grid.Column="1"  
                                      Text="Details"  
                                      FontAttributes="Italic" />  
                           </Grid>  
                       </DataTemplate>  
                   </xct:Expander.ContentTemplate>  
               </xct:Expander>  
           </StackLayout>  
       </ContentPage.Content>  
   </ContentPage>  
     
   //button click event  
   private async void Button_Clicked(object sender, EventArgs e)  
   {  
       expander.IsExpanded = !expander.IsExpanded;  
   }

Best Regards,

Jarvan Zhang

If the response is helpful, please click "Accept Answer" and upvote it.

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.

JarvanZhang 23,951 Reputation points

2021-09-28T09:53:41.233+00:00

Hi, @Chirag Pokiya
May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.
Chirag Pokiya 96 Reputation points

2021-10-06T12:05:34.46+00:00

Hi @Jarvan Zhang!

This seems like a nice option, but I cannot get it working since this function would be part of a collectionview. So the code als ends up under the collectionview itself. When I do that, the C# code is not able to find the name "expander". Do you know how to solve this?
Chirag Pokiya 96 Reputation points

2021-10-06T12:19:12.213+00:00

<CollectionView
x:Name="CVUserActivity">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid
<ImageButton Source="Eye"/>
<ImageButton source=".Heart"/>
<ImageButton x:Name="CommentImageBtn"
Clicked="commentImgBtn_Clicked">
<Grid ColumnSpan="3"
Grid.Row="1"
IsVisible="False"
x:Name="CommentGrid">
<Label Grid.Column="1"
Text="Details"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
As in above code I have commentImgBtn_Clicked where I want to expand CommentGrid section.

JarvanZhang 23,951

@Chirag Pokiya
Try using data binding to change the value of IsExpanded property.

   public partial class TestPage : ContentPage  
   {  
       public TestPage()  
       {  
           InitializeComponent();  
           BindingContext = new CustomViewModel();  
       }  
       private void Button_Clicked(object sender, EventArgs e)  
       {  
           var button = sender as Button;  
           var model = button.BindingContext as _Model;  
           model.Status = !model.Status;  
       }  
   }

DataTemplate's code

   <DataTemplate>  
       <StackLayout>  
           <Button Clicked="Button_Clicked"/>  
           <xct:Expander x:Name="expander" BackgroundColor="LightBlue" IsExpanded="{Binding Status}">  
               <xct:Expander.ContentTemplate>  
                   <DataTemplate>  
                       ...  
                   </DataTemplate>  
               </xct:Expander.ContentTemplate>  
           </xct:Expander>  
       </StackLayout>  
   </DataTemplate>

Or get the expander control in the button click event to change the status as below.

   private void Button_Clicked(object sender, EventArgs e)  
   {  
       var button = sender as Button;  
       var parentLayout = button.Parent as StackLayout;  
       var expander = parentLayout.Children[2] as Expander;  
     
       expander.IsExpanded = !expander.IsExpanded;  
   }