Ghost1372

everything can be handy

Accordion

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>

DevWinUI

Demo

you can run demo and see this feature.

0%