atomui/samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.CollapseShowCase"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:atom="https://atomui.net"
    xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"

    mc:Ignorable="d">
    <desktop:ShowCasePanel>
        <desktop:ShowCaseItem
            Title="Collapse"
            Description="By default, any number of panels can be expanded at a time. The first panel is expanded in this example.">
            <atom:Collapse>
                <atom:CollapseItem Header="This is panel header 1">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 2">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 3">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
            </atom:Collapse>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Size"
            Description="Ant Design supports a default collapse size as well as a large and small size.
If a large or small collapse is desired, set the size property to either large or small respectively. Omit the size property for a collapse with the default size.">
            <StackPanel Orientation="Vertical" Spacing="20" Margin="0, 0, 10, 0">
                <atom:Separator Title="Default Size" TitlePosition="Left" FontWeight="Bold" />
                <atom:Collapse SizeType="Middle">
                    <atom:CollapseItem Header="This is default size panel header">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>
                <atom:Separator Title="Small Size" TitlePosition="Left" FontWeight="Bold" />
                <atom:Collapse SizeType="Small">
                    <atom:CollapseItem Header="This is small size panel header">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>
                <atom:Separator Title="Large Size" TitlePosition="Left" FontWeight="Bold" />
                <atom:Collapse SizeType="Large">
                    <atom:CollapseItem Header="This is large size panel header">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Accordion"
            Description="In accordion mode, only one panel can be expanded at a time.">
            <atom:Collapse IsAccordion="True">
                <atom:CollapseItem Header="This is panel header 1">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 2">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 3">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
            </atom:Collapse>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Nested panel"
            Description="Collapse is nested inside the Collapse." Margin="0, 0, 10, 0">
            <atom:Collapse>
                <atom:CollapseItem Header="This is panel header 1">
                    <atom:Collapse>
                        <atom:CollapseItem Header="This is panel header 1">
                            <TextBlock TextWrapping="Wrap">
                                A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                            </TextBlock>
                        </atom:CollapseItem>
                    </atom:Collapse>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 2">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 3">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
            </atom:Collapse>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Borderless"
            Description="A borderless style of Collapse." Margin="0, 0, 10, 0">
            <atom:Collapse IsBorderless="True">
                <atom:CollapseItem Header="This is panel header 1">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 2">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 3">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
            </atom:Collapse>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="No Arrow"
            Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component."
            Margin="0, 0, 10, 0">
            <atom:Collapse>
                <atom:CollapseItem Header="This is panel header 1">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 2" IsShowExpandIcon="False">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
            </atom:Collapse>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Extra node"
            Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
            <StackPanel Orientation="Vertical" Spacing="20">
                <atom:Collapse ExpandIconPosition="{Binding CollapseExpandIconPosition}">
                    <atom:CollapseItem Header="This is panel header 1"
                                       AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                    <atom:CollapseItem Header="This is panel header 2"
                                       AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                    <atom:CollapseItem Header="This is panel header 3"
                                       AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>

                <StackPanel Orientation="Horizontal" Spacing="5">
                    <TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
                    <atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
                        <atom:OptionButton IsChecked="True">Start</atom:OptionButton>
                        <atom:OptionButton>End</atom:OptionButton>
                    </atom:OptionButtonGroup>
                </StackPanel>
            </StackPanel>

        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Ghost Collapse"
            Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
            <atom:Collapse IsGhostStyle="True">
                <atom:CollapseItem Header="This is panel header 1">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 2">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
                <atom:CollapseItem Header="This is panel header 3">
                    <TextBlock TextWrapping="Wrap">
                        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                    </TextBlock>
                </atom:CollapseItem>
            </atom:Collapse>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Collapsible"
            Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Collapse>
                    <atom:CollapseItem Header="This panel can only be collapsed by clicking text">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>
                <atom:Collapse TriggerType="Icon">
                    <atom:CollapseItem Header="This panel can only be collapsed by clicking icon">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>

                <atom:Collapse IsEnabled="False">
                    <atom:CollapseItem Header="This panel can't be collapsed">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>

                <atom:Collapse IsEnabled="False">
                    <atom:CollapseItem Header="This panel can't be collapsed" IsSelected="True">
                        <TextBlock TextWrapping="Wrap">
                            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                        </TextBlock>
                    </atom:CollapseItem>
                </atom:Collapse>
            </StackPanel>
        </desktop:ShowCaseItem>

    </desktop:ShowCasePanel>
</UserControl>