Accordion
Property
Name |
SelectedIndex |
ItemsSource |
ItemTemplate |
HeaderTemplate |
Subtitle |
Description |
Profile |
Footer |
AccordionItem
Property
Name |
Header |
HeaderTemplate |
AccordionPanel
Property
Name |
SelectedIndex |
ItemsSource |
ItemTemplate |
HeaderTemplate |
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <dev:Accordion ItemsSource="{x:Bind ViewModel.SampleImageAndTextData, Mode=OneWay}"> <dev:Accordion.ItemTemplate> <DataTemplate x:DataType="model:SampleData"> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{x:Bind ImageUrl}" Stretch="UniformToFill" /> </DataTemplate> </dev:Accordion.ItemTemplate> <dev:Accordion.HeaderTemplate> <DataTemplate x:DataType="model:SampleData"> <Grid> <Grid.Background> <SolidColorBrush Opacity="0.25" Color="{ThemeResource CardBackgroundFillColorDefault}" /> </Grid.Background> <TextBlock Margin="0,0,0,4" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{ThemeResource TitleTextBlockStyle}" Text="{x:Bind Name}" /> </Grid> </DataTemplate> </dev:Accordion.HeaderTemplate> </dev:Accordion>
|

Demo
you can run demo and see this feature.