How to make an accordion style content holder UWP

问题

So i am trying to make an accordion content holder for an uwp application. I can't find anything resembling what i want to achive in the documentation. Is this someting i need to build from scratch using stackpanels and codebehiend ect ect, or are there tools I can use within the libary which I havent found yet ?

Here Is an example of what i want. When the users clicks on a vaccine name, a content box containg information about that vaccine will dropdown. And if it is click while expanded, it will slide back up and only display the name again. An accordion.

Any suggestions, tutorials, articles on the subject will be much appreciated. Thanks in advance.

回答1:

There is UWP Community Toolkit available that has an expander control that you may be able to utilize. You can get the code sample from the Windows Store and the source code is on github.

https://blogs.windows.com/buildingapps/2016/08/17/introducing-the-uwp-community-toolkit/#v6cSIzET7QwQOb8O.97

回答2:

I believe from the answer that you know how to make a ListView using DataTemplate. If not search the documentation for this.

So I believe that the most important piece of the question is about the expanding.

First in your DataTemplate bind Height to your DataModel for example like this:

<Grid Height="{x:Bind Item.Height, Mode = OneWay}">...</Grid>

Then place Clicked (or Tapped if its control doesn't support Clicked) event on that arrow, and handle it in the code like this (Tapped may require different arguments but they'll appear automatically anyway):

Arrow_Clicked(object sender, RoutedEventArgs e)
{
    var item = (sender as Button).DataSource as Item;
    if (item.Height == 80)
        item.Height = 200;
    else
        item.Height = 80;
}

来源：https://stackoverflow.com/questions/43676405/how-to-make-an-accordion-style-content-holder-uwp

标签

visual-studio

xaml

uwp

accordion