mirror of
https://gitee.com/chinware/atomui.git
synced 2024-12-02 11:57:42 +08:00
250 lines
15 KiB
XML
250 lines
15 KiB
XML
<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> |