Maui/samples/CommunityToolkit.Maui.Sample/Pages/Views/Expander/ExpanderPage.xaml at c38ce1c83112e7cc4d6f3a927abc7b4fb9342d12 · CommunityToolkit/Maui · GitHub

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?xml version="1.0" encoding="utf-8"?>
<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                x:Class="CommunityToolkit.Maui.Sample.Pages.Views.ExpanderPage"
                xmlns:sample="clr-namespace:CommunityToolkit.Maui.Sample"
                xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
                xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
                x:TypeArguments="viewModels:ExpanderViewModel"
                x:DataType="viewModels:ExpanderViewModel"
                Padding="12, 12, 12, 0"
                Title="Expander">

    <ScrollView>
        <VerticalStackLayout Spacing="10">
            <Button Text="Navigate to C# Sample" Clicked="GoToCSharpSampleClicked"/>

            <Label Text="Simple expander" FontSize="24" FontAttributes="Bold"/>

            <mct:Expander>
                <mct:Expander.Header>
                    <Label Text="Simple Expander (Tap Me)" FontSize="16" FontAttributes="Bold"/>
                </mct:Expander.Header>

                <mct:Expander.Behaviors>
                    <mct:ExpanderAnimationBehavior />
                </mct:Expander.Behaviors>

                <mct:Expander.Content>
                    <VerticalStackLayout>
                        <Label Text="Item 1"/>
                        <Label Text="Item 2"/>
                    </VerticalStackLayout>
                </mct:Expander.Content>
            </mct:Expander>

            <Label Text="Multi-level expander" FontSize="24" FontAttributes="Bold"/>

            <mct:Expander Direction="Up">
                <mct:Expander.Header>
                    <Label Text="Multi-Level Expander (Tap Me)" FontSize="16" FontAttributes="Bold"/>
                </mct:Expander.Header>

                <mct:Expander.Behaviors>
                    <mct:ExpanderAnimationBehavior />
                </mct:Expander.Behaviors>

                <mct:Expander.Content>
                    <mct:Expander Direction="Down" BackgroundColor="LightGray">
                        <mct:Expander.Header>
                            <Label Text="Nested Expander (Tap Me)" FontSize="14" FontAttributes="Bold"/>
                        </mct:Expander.Header>

                        <mct:Expander.Behaviors>
                            <mct:ExpanderAnimationBehavior />
                        </mct:Expander.Behaviors>

                        <mct:Expander.Content>
                            <Label Text="Item 1" />
                        </mct:Expander.Content>
                    </mct:Expander>
                </mct:Expander.Content>
            </mct:Expander>

            <Label Text="Expander in CollectionView with LinearItemsLayout" FontSize="24" FontAttributes="Bold"/>

            <CollectionView ItemsSource="{Binding ContentCreators}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <mct:Expander x:DataType="sample:ContentCreator"
                                      ExpandedChanged="Expander_ExpandedChanged">
                            <mct:Expander.Header>
                                <Label Text="{Binding Name}"/>
                            </mct:Expander.Header>

                            <mct:Expander.Behaviors>
                                <mct:ExpanderAnimationBehavior />
                            </mct:Expander.Behaviors>

                            <mct:Expander.Content>
                                <VerticalStackLayout>
                                    <Label Text="{Binding Resource}" HorizontalOptions="Center"/>
                                    <Image Source="{Binding Image}"
                                               WidthRequest="100"
                                               HeightRequest="100"/>
                                </VerticalStackLayout>
                            </mct:Expander.Content>
                        </mct:Expander>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <Label Text="Expander in CollectionView with GridItemsLayout" FontSize="24" FontAttributes="Bold"/>

            <CollectionView ItemsSource="{Binding ContentCreators}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                     Span="4"
                                     HorizontalItemSpacing="5"
                                     VerticalItemSpacing="5" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <mct:Expander x:DataType="sample:ContentCreator"
                                      HeightRequest="180"
                                      ExpandedChanged="Expander_ExpandedChanged">
                            <mct:Expander.Header>
                                <Label Text="{Binding Name}"/>
                            </mct:Expander.Header>
                            <mct:Expander.Content>
                                <VerticalStackLayout>
                                    <Label Text="{Binding Resource}" HorizontalOptions="Center"/>
                                    <Image Source="{Binding Image}"
                                           WidthRequest="100"
                                           HeightRequest="100"/>
                                </VerticalStackLayout>
                            </mct:Expander.Content>
                        </mct:Expander>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</pages:BasePage>