question

ChiragPokiya-7649 avatar image
0 Votes"
ChiragPokiya-7649 asked JarvanZhang-MSFT edited

xamarin forms expand and collapse comments on button click

how to create expand view in Xamarin form when I click on Comment button like below screen shot?
134218-screenshot-2021-09-22-at-14856-pm.png


dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

Hello @ChiragPokiya-7649 ,​

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://docs.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.


· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, @ChiragPokiya-7649
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.

0 Votes 0 ·

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?

0 Votes 0 ·


<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.




0 Votes 0 ·
Show more comments