test/atomui
1
0
Fork 0
mirror of https://gitee.com/chinware/atomui.git synced 2024-11-29 18:38:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

* 格式化代码；

Browse Source
This commit is contained in:
zeroone 2024-09-09 23:54:25 +08:00
parent 2748a6903e
commit 480a9be15c
218 changed files with 4867 additions and 4099 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Directory.Build.props
View File

@ -1,7 +1,6 @@
<Project>
<PropertyGroup>
<RootNamespace>AtomUI</RootNamespace>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<LangVersion>latest</LangVersion>

7
samples/AtomUI.Demo.Desktop/App.axaml
View File

@ -1,9 +1,8 @@
<Application
x:Class="AtomUI.Demo.Desktop.App"
<Application x:Class="AtomUI.Demo.Desktop.App"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedThemeVariant="Light"
><!--强制使用默认主题，因目前未适配暗黑主题，如果系统为暗黑主题时，演示demo会展示不正常 -->
RequestedThemeVariant="Light">
<!-- 强制使用默认主题，因目前未适配暗黑主题，如果系统为暗黑主题时，演示demo会展示不正常 -->
<Application.Styles>
<FluentTheme />
</Application.Styles>

5
samples/AtomUI.Demo.Desktop/AtomUI.Demo.Desktop.csproj.DotSettings
View File

@ -1,2 +1,5 @@
<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=base/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=controls_005Ccolors/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=controls_005Cpathicon/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils/@EntryIndexedValue">False</s:Boolean></wpf:ResourceDictionary>

3
samples/AtomUI.Demo.Desktop/Base/ShowCaseItem.cs
View File

@ -1,10 +1,9 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Layout;
using Avalonia.LogicalTree;
using Avalonia.Media;
namespace AtomUI.Demo.Desktop.ShowCase;
namespace AtomUI.Demo.Desktop;
public class ShowCaseItem : ContentControl
{

2
samples/AtomUI.Demo.Desktop/Base/ShowCasePanel.cs
View File

@ -6,7 +6,7 @@ using Avalonia.LogicalTree;
using Avalonia.Metadata;
using AvaloniaControlList = Avalonia.Controls.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
namespace AtomUI.Demo.Desktop;
public class ShowCasePanel : Control
{

14
samples/AtomUI.Demo.Desktop/Controls/Colors/ColorItemControl.axaml
View File

@ -1,5 +1,4 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
@ -13,24 +12,21 @@
<Setter Property="controls:ColorItemControl.Height" Value="35" />
<Setter Property="controls:ColorItemControl.Template">
<ControlTemplate TargetType="controls:ColorItemControl">
<Border
Width="{TemplateBinding Width}"
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<Panel>
<TextBlock
Padding="8"
<TextBlock Padding="8"
FontSize="12"
FontWeight="600"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding ColorName}" />
<TextBlock
Name="PART_HexTextBlock"
<TextBlock Name="PART_HexTextBlock"
Padding="8"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontWeight="600"
FontSize="10"
FontWeight="600"
Foreground="{TemplateBinding Foreground}"
IsVisible="False"
Opacity="0.8"

8
samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListControl.axaml
View File

@ -1,5 +1,4 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
@ -9,7 +8,7 @@
<ControlTheme x:Key="{x:Type controls:ColorListControl}" TargetType="controls:ColorListControl">
<Setter Property="controls:ColorListControl.Template">
<ControlTemplate TargetType="controls:ColorListControl">
<ItemsControl ItemsSource="{Binding Colors }">
<ItemsControl ItemsSource="{Binding Colors}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
@ -17,9 +16,8 @@
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorItemViewModel">
<controls:ColorItemControl
<controls:ColorItemControl Background="{Binding Brush}"
ColorName="{Binding ColorDisplayName}"
Background="{Binding Brush}"
Foreground="{Binding TextBrush}"
Hex="{Binding Hex}" />
</DataTemplate>

10
samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListGroupControl.axaml
View File

@ -1,5 +1,4 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
@ -9,16 +8,15 @@
<ControlTheme x:Key="{x:Type controls:ColorListGroupControl}" TargetType="controls:ColorListGroupControl">
<Setter Property="controls:ColorListGroupControl.Template">
<ControlTemplate TargetType="controls:ColorListGroupControl">
<ItemsControl ItemsSource="{Binding ColorList }">
<ItemsControl ItemsSource="{Binding ColorList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="2"/>
<UniformGrid Columns="2" Rows="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorListViewModel">
<controls:ColorListControl ListData="{Binding}"
Margin="10"/>
<controls:ColorListControl Margin="10" ListData="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

9
samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconGallery.axaml
View File

@ -1,5 +1,4 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
@ -12,14 +11,12 @@
<ItemsControl ItemsSource="{Binding IconInfos}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:IconInfoItemModel">
<controls:IconInfoItem
IconName ="{Binding IconName}"
IconKind="{Binding IconKind}"/>
<controls:IconInfoItem IconKind="{Binding IconKind}" IconName="{Binding IconName}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

21
samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconInfoItem.axaml
View File

@ -1,9 +1,8 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:atom="https://atomui.net"
xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
xmlns:atom="https://atomui.net"
x:CompileBindings="True"
x:DataType="viewModels:IconInfoItemModel">
@ -13,22 +12,18 @@
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<ControlTemplate TargetType="controls:IconInfoItem">
<Border
Width="{TemplateBinding Width}"
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<StackPanel Orientation="Vertical">
<atom:PathIcon
<atom:PathIcon Width="48"
Height="48"
HorizontalAlignment="Center"
Kind="{Binding IconKind}"
Width="48"
Height="48">
</atom:PathIcon>
<TextBlock
Margin="0,20, 0, 0"
Kind="{Binding IconKind}" />
<TextBlock Margin="0,20,0,0"
Padding="8"
FontSize="13"
HorizontalAlignment="Center"
FontSize="13"
Foreground="{TemplateBinding Foreground}"
Text="{Binding IconName}" />
</StackPanel>

155
samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml
View File

@ -1,161 +1,158 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.AlertShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.AlertShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<desktop:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest usage for short messages.">
<desktop:ShowCaseItem Title="Basic" Description="The simplest usage for short messages.">
<StackPanel Orientation="Vertical">
<atom:Alert Classes="test" Type="Success">Success Text</atom:Alert>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="More types"
Description="There are 4 types of Alert: success, info, warning, error.">
<desktop:ShowCaseItem Title="More types" Description="There are 4 types of Alert: success, info, warning, error.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success">Success Text</atom:Alert>
<atom:Alert Type="Info">Info Text</atom:Alert>
<atom:Alert Type="Warning">Warning Text</atom:Alert>
<atom:Alert Type="Error">Error Text</atom:Alert>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Closable"
Description="To show close button.">
<desktop:ShowCaseItem Title="Closable" Description="To show close button.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Warning" IsClosable="True">
<atom:Alert IsClosable="True" Type="Warning">
Warning Text Warning Text Warning Text Warning Text Warning Text Warning TextWarning Text
</atom:Alert>
<atom:Alert Type="Error" IsClosable="True"
Description="Error Description Error Description Error Description Error Description Error Description Error Description">
<atom:Alert Description="Error Description Error Description Error Description Error Description Error Description Error Description"
IsClosable="True"
Type="Error">
Error Text
</atom:Alert>
<atom:Alert Type="Error" IsClosable="True"
<atom:Alert CloseIcon="{atom:IconProvider CloseSquareFilled}"
Description="Error Description Error Description Error Description Error Description Error Description Error Description"
CloseIcon="{atom:IconProvider CloseSquareFilled}">
IsClosable="True"
Type="Error">
Error Text
</atom:Alert>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Description"
Description="Additional description for alert message.">
<desktop:ShowCaseItem Title="Description" Description="Additional description for alert message.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success"
<atom:Alert Description="Success Description Success Description Success Description"
Message="Success Text"
Description="Success Description Success Description Success Description"/>
<atom:Alert Type="Info"
Type="Success" />
<atom:Alert Description="Info Description Info Description Info Description Info Description"
Message="Info Text"
Description="Info Description Info Description Info Description Info Description"/>
<atom:Alert Type="Warning"
Type="Info" />
<atom:Alert Description="Warning Description Warning Description Warning Description Warning Description"
Message="Warning Text"
Description="Warning Description Warning Description Warning Description Warning Description"/>
<atom:Alert Type="Error"
Type="Warning" />
<atom:Alert Description="Error Description Error Description Error Description Error Description"
Message="Error Text"
Description="Error Description Error Description Error Description Error Description"/>
Type="Error" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Description"
Description="Additional description for alert message.">
<desktop:ShowCaseItem Title="Description" Description="Additional description for alert message.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success"
<atom:Alert IsShowIcon="True"
Message="Success Tips"
IsShowIcon="True"/>
<atom:Alert Type="Info"
Type="Success" />
<atom:Alert IsShowIcon="True"
Message="Informational Notes"
IsShowIcon="True"/>
<atom:Alert Type="Warning"
Message="Warning"
Type="Info" />
<atom:Alert IsClosable="True"
IsShowIcon="True"
IsClosable="True"/>
<atom:Alert Type="Error"
Message="Warning"
Type="Warning" />
<atom:Alert IsShowIcon="True"
Message="Error"
IsShowIcon="True"/>
Type="Error" />
<atom:Alert Type="Success"
<atom:Alert Description="Detailed description and advice about successful copywriting."
IsShowIcon="True"
Message="Success Tips"
Type="Success" />
<atom:Alert Description="Additional description and information about copywriting."
IsShowIcon="True"
Description="Detailed description and advice about successful copywriting."/>
<atom:Alert Type="Info"
Message="Informational Notes"
IsShowIcon="True"
Description="Additional description and information about copywriting."/>
<atom:Alert Type="Warning"
Message="Warning"
Type="Info" />
<atom:Alert Description="This is a warning notice about copywriting."
IsClosable="True"
IsShowIcon="True"
Description="This is a warning notice about copywriting."/>
<atom:Alert Type="Error"
Message="Warning"
Type="Warning" />
<atom:Alert Description="This is an error message about copywriting."
IsShowIcon="True"
Message="Error"
IsShowIcon="True"
Description="This is an error message about copywriting."/>
Type="Error" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom action"
Description="Custom action.">
<desktop:ShowCaseItem Title="Custom action" Description="Custom action.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success"
<atom:Alert IsClosable="true"
IsShowIcon="True"
IsClosable="true">
Type="Success">
<atom:Alert.ExtraAction>
<atom:Button ButtonType="Text" SizeType="Small">UNDO</atom:Button>
</atom:Alert.ExtraAction>
Success Tips
</atom:Alert>
<atom:Alert Type="Error"
<atom:Alert Description="Error Description Error Description Error Description Error Description"
IsShowIcon="True"
Description="Error Description Error Description Error Description Error Description">
Type="Error">
<atom:Alert.ExtraAction>
<atom:Button ButtonType="Default" SizeType="Small" IsDanger="True">Detail</atom:Button>
<atom:Button ButtonType="Default"
IsDanger="True"
SizeType="Small">
Detail
</atom:Button>
</atom:Alert.ExtraAction>
Error Text
</atom:Alert>
<atom:Alert Type="Warning"
IsClosable="true">
<atom:Alert IsClosable="true" Type="Warning">
<atom:Alert.ExtraAction>
<atom:Button ButtonType="Text" SizeType="Small">Done</atom:Button>
</atom:Alert.ExtraAction>
Warning Text
</atom:Alert>
<atom:Alert Type="Info"
IsShowIcon="False"
<atom:Alert Description="Info Description Info Description Info Description Info Description"
IsClosable="true"
Description="Info Description Info Description Info Description Info Description">
IsShowIcon="False"
Type="Info">
<atom:Alert.ExtraAction>
<StackPanel Orientation="Vertical" Spacing="5">
<atom:Button ButtonType="Primary" SizeType="Small">Accept</atom:Button>
<atom:Button SizeType="Small" IsDanger="True" IsGhost="True">Decline</atom:Button>
<atom:Button IsDanger="True"
IsGhost="True"
SizeType="Small">
Decline
</atom:Button>
</StackPanel>
</atom:Alert.ExtraAction>
Info Text
</atom:Alert>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Loop Banner"
Description="Show a loop banner.">
<atom:Alert Type="Warning" IsShowIcon="True" IsMessageMarqueEnabled="True">
<desktop:ShowCaseItem Title="Loop Banner" Description="Show a loop banner.">
<atom:Alert IsMessageMarqueEnabled="True"
IsShowIcon="True"
Type="Warning">
I can be a React component, multiple React components, or just some text, Info Description Info Description Info Description Info Description
</atom:Alert>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

12
samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.AvatarShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.AvatarShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

329
samples/AtomUI.Demo.Desktop/ShowCase/BadgeShowCase.axaml
View File

@ -1,107 +1,129 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.BadgeShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.BadgeShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<desktop:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.">
<desktop:ShowCaseItem Title="Basic" Description="Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.">
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:CountBadge Count="5">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="0">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Overflow Count"
Description="${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.">
<desktop:ShowCaseItem Title="Overflow Count" Description="${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.">
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:CountBadge Count="99">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="100">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="99" OverflowCount="10">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="1000" OverflowCount="999">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Offset"
Description="Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.">
<desktop:ShowCaseItem Title="Offset" Description="Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.">
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:CountBadge Count="5" Offset="10, 10">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="Set size of numeral Badge.">
<desktop:ShowCaseItem Title="Size" Description="Set size of numeral Badge.">
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:CountBadge Count="5">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="5" Size="Small">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Standalone"
Description="Used in standalone when children is empty.">
<desktop:ShowCaseItem Title="Standalone" Description="Used in standalone when children is empty.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:ToggleSwitch IsChecked="{Binding StandaloneSwitchChecked}" />
<atom:CountBadge Count="{Binding StandaloneBadgeCount1}" BadgeColor="#faad14" ShowZero="True" />
<atom:CountBadge BadgeColor="#faad14"
Count="{Binding StandaloneBadgeCount1}"
ShowZero="True" />
<atom:CountBadge Count="{Binding StandaloneBadgeCount2}" />
<atom:CountBadge Count="{Binding StandaloneBadgeCount3}" BadgeColor="#52c41a" />
<atom:CountBadge BadgeColor="#52c41a" Count="{Binding StandaloneBadgeCount3}" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Dynamic"
Description="The count will be animated as it changes.">
<desktop:ShowCaseItem Title="Dynamic" Description="The count will be animated as it changes.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:CountBadge Count="{Binding DynamicBadgeCount}" OverflowCount="99">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<StackPanel Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
<atom:Button SizeType="Small" Command="{Binding AddDynamicBadgeCount}">Add</atom:Button>
<atom:Button SizeType="Small" Command="{Binding SubDynamicBadgeCount}">Sub</atom:Button>
<atom:Button SizeType="Small" Command="{Binding RandomDynamicBadgeCount}">Random</atom:Button>
<StackPanel VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="10">
<atom:Button Command="{Binding AddDynamicBadgeCount}" SizeType="Small">Add</atom:Button>
<atom:Button Command="{Binding SubDynamicBadgeCount}" SizeType="Small">Sub</atom:Button>
<atom:Button Command="{Binding RandomDynamicBadgeCount}" SizeType="Small">Random</atom:Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:DotBadge BadgeIsVisible="{Binding DynamicDotBadgeVisible}">
<Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:DotBadge>
<atom:ToggleSwitch VerticalAlignment="Center"
IsChecked="{Binding DynamicDotBadgeVisible, Mode=TwoWay}" />
<atom:ToggleSwitch VerticalAlignment="Center" IsChecked="{Binding DynamicDotBadgeVisible, Mode=TwoWay}" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Red badge"
Description="This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.">
<desktop:ShowCaseItem Title="Red badge" Description="This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal">
<atom:DotBadge Offset="15,9">
@ -112,11 +134,9 @@
</atom:DotBadge>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status"
Description="Standalone badge with status.">
<desktop:ShowCaseItem Title="Status" Description="Standalone badge with status.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:DotBadge Status="Success" />
@ -133,120 +153,177 @@
<atom:DotBadge Status="Warning" Text="Warning" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Ribbon"
Description="Use ribbon badge.">
<StackPanel Orientation="Vertical" Spacing="20" Margin="20, 0, 20, 0">
<desktop:ShowCaseItem Title="Ribbon" Description="Use ribbon badge.">
<StackPanel Margin="20,0,20,0"
Orientation="Vertical"
Spacing="20">
<atom:RibbonBadge Text="精益求精，打造体验优秀的 UISDK">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
<atom:RibbonBadge Text="甲辰计划雄起" RibbonColor="Pink">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<atom:RibbonBadge RibbonColor="Pink" Text="甲辰计划雄起">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
<atom:RibbonBadge Text="Avalonia 非常优秀" RibbonColor="Cyan">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<atom:RibbonBadge RibbonColor="Cyan" Text="Avalonia 非常优秀">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
<atom:RibbonBadge Text="Hippies" RibbonColor="Green">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<atom:RibbonBadge RibbonColor="Green" Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
<atom:RibbonBadge Text="Hippies" RibbonColor="purple" Placement="Start">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<atom:RibbonBadge Placement="Start"
RibbonColor="purple"
Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
<atom:RibbonBadge Text="Hippies" RibbonColor="volcano" Placement="Start">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<atom:RibbonBadge Placement="Start"
RibbonColor="volcano"
Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
<atom:RibbonBadge Text="Hippies" RibbonColor="magenta" Placement="Start">
<Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
Padding="10, 0, 10, 0">
<atom:RibbonBadge Placement="Start"
RibbonColor="magenta"
Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
<atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
<TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
<TextBlock Height="38"
FontWeight="Bold"
LineHeight="38">
Pushes open the window
</TextBlock>
<atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
<TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
</StackPanel>
</Border>
</atom:RibbonBadge>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Colorful Badge"
Description="We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.">
<desktop:ShowCaseItem Title="Colorful Badge" Description="We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Separator Title="Presets" FontWeight="SemiBold" TitlePosition="Left" />
<atom:Separator Title="Presets"
FontWeight="SemiBold"
TitlePosition="Left" />
<StackPanel Orientation="Vertical" Spacing="10">
<atom:DotBadge Text="Pink" DotColor="Pink" />
<atom:DotBadge Text="Red" DotColor="Red" />
<atom:DotBadge Text="Yellow" DotColor="Yellow" />
<atom:DotBadge Text="Orange" DotColor="Orange" />
<atom:DotBadge Text="Cyan" DotColor="Cyan" />
<atom:DotBadge Text="Green" DotColor="Green" />
<atom:DotBadge Text="Blue" DotColor="Blue" />
<atom:DotBadge Text="Purple" DotColor="Purple" />
<atom:DotBadge Text="GeekBlue" DotColor="GeekBlue" />
<atom:DotBadge Text="Magenta" DotColor="Magenta" />
<atom:DotBadge Text="Volcano" DotColor="Volcano" />
<atom:DotBadge Text="Gold" DotColor="Gold" />
<atom:DotBadge Text="Lime" DotColor="Lime" />
<atom:DotBadge DotColor="Pink" Text="Pink" />
<atom:DotBadge DotColor="Red" Text="Red" />
<atom:DotBadge DotColor="Yellow" Text="Yellow" />
<atom:DotBadge DotColor="Orange" Text="Orange" />
<atom:DotBadge DotColor="Cyan" Text="Cyan" />
<atom:DotBadge DotColor="Green" Text="Green" />
<atom:DotBadge DotColor="Blue" Text="Blue" />
<atom:DotBadge DotColor="Purple" Text="Purple" />
<atom:DotBadge DotColor="GeekBlue" Text="GeekBlue" />
<atom:DotBadge DotColor="Magenta" Text="Magenta" />
<atom:DotBadge DotColor="Volcano" Text="Volcano" />
<atom:DotBadge DotColor="Gold" Text="Gold" />
<atom:DotBadge DotColor="Lime" Text="Lime" />
</StackPanel>
<atom:Separator Title="Custom" FontWeight="SemiBold" TitlePosition="Left" />
<atom:Separator Title="Custom"
FontWeight="SemiBold"
TitlePosition="Left" />
<StackPanel Orientation="Vertical" Spacing="10">
<atom:DotBadge Text="#f50" DotColor="#f50" />
<atom:DotBadge Text="rgb(45, 183, 245)" DotColor="rgb(45, 183, 245)" />
<atom:DotBadge Text="hsl(102, 53%, 61%)" DotColor="hsl(102, 53%, 61%)" />
<atom:DotBadge Text="rgb(15, 141, 230)" DotColor="rgb(15, 141, 230)" />
<atom:DotBadge DotColor="#f50" Text="#f50" />
<atom:DotBadge DotColor="rgb(45, 183, 245)" Text="rgb(45, 183, 245)" />
<atom:DotBadge DotColor="hsl(102, 53%, 61%)" Text="hsl(102, 53%, 61%)" />
<atom:DotBadge DotColor="rgb(15, 141, 230)" Text="rgb(15, 141, 230)" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

256
samples/AtomUI.Demo.Desktop/ShowCase/ButtonShowCase.axaml
View File

@ -1,46 +1,49 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|Button">
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="Margin" Value="5" />
</Style>
</showcase:ShowCasePanel.Styles>
<showcase:ShowCaseItem
Title="Type"
Description="There are primary button, default button, dashed button, text button and link button in antd.">
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem Title="Type" Description="There are primary button, default button, dashed button, text button and link button in antd.">
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:Button ButtonType="Primary">Primary Button</atom:Button>
<atom:Button>Default Button</atom:Button>
<atom:Button ButtonType="Text">Text Button</atom:Button>
<atom:Button ButtonType="Link">Link Button</atom:Button>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Button Shape"
Description="Supported button shape display, such as primary, default, dashed and Text, etc.">
<desktop:ShowCaseItem Title="Button Shape" Description="Supported button shape display, such as primary, default, dashed and Text, etc.">
<StackPanel Orientation="Vertical">
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0, 0, 0, 20">
<WrapPanel Margin="0,0,0,20"
HorizontalAlignment="Left"
Orientation="Horizontal">
<atom:Button ButtonType="Primary">Primary</atom:Button>
<atom:Button>Default</atom:Button>
<atom:Button ButtonType="Text">Text</atom:Button>
<atom:Button ButtonType="Link">Link</atom:Button>
</WrapPanel>
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0, 0, 0, 20">
<WrapPanel Margin="0,0,0,20"
HorizontalAlignment="Left"
Orientation="Horizontal">
<atom:Button ButtonType="Primary" Shape="Round">Primary</atom:Button>
<atom:Button Shape="Round">Default</atom:Button>
<atom:Button ButtonType="Text" Shape="Round">Text</atom:Button>
<atom:Button ButtonType="Link" Shape="Round">Link</atom:Button>
</WrapPanel>
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal" Margin="0, 0, 0, 20">
<StackPanel Margin="0,0,0,20"
HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="10">
<atom:Button ButtonType="Primary" Shape="Circle">AA</atom:Button>
<atom:Button Shape="Circle">AA</atom:Button>
<atom:Button ButtonType="Text" Shape="Circle">AA</atom:Button>
@ -48,125 +51,175 @@
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="AtomUI supports three sizes of buttons: small, default and large.
If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
<DockPanel Margin="0, 0, 0, 0">
<StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
<desktop:ShowCaseItem Title="Size" Description="AtomUI supports three sizes of buttons: small, default and large. If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
<DockPanel Margin="0,0,0,0">
<StackPanel DockPanel.Dock="Top"
Orientation="Horizontal"
Spacing="5">
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ButtonSizeTypeOptionGroup">
<atom:OptionButtonGroup Name="ButtonSizeTypeOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Large</atom:OptionButton>
<atom:OptionButton>Default</atom:OptionButton>
<atom:OptionButton>Small</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0, 20, 0, 0" Spacing="10">
<StackPanel Margin="0,20,0,0"
Orientation="Vertical"
Spacing="10">
<WrapPanel>
<atom:Button ButtonType="Primary" SizeType="{Binding ButtonSizeType}">Primary</atom:Button>
<atom:Button ButtonType="Default" SizeType="{Binding ButtonSizeType}">Default</atom:Button>
<atom:Button ButtonType="Link" SizeType="{Binding ButtonSizeType}">Link</atom:Button>
</WrapPanel>
<WrapPanel>
<atom:Button ButtonType="Primary" Shape="Default" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}"/>
<atom:Button ButtonType="Primary" Shape="Circle" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}"/>
<atom:Button ButtonType="Primary" Shape="Round" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}"/>
<atom:Button ButtonType="Primary" Shape="Round" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}">Download</atom:Button>
<atom:Button ButtonType="Primary" Shape="Default" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}">Download</atom:Button>
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=DownloadOutlined}"
Shape="Default"
SizeType="{Binding ButtonSizeType}" />
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=DownloadOutlined}"
Shape="Circle"
SizeType="{Binding ButtonSizeType}" />
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=DownloadOutlined}"
Shape="Round"
SizeType="{Binding ButtonSizeType}" />
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=DownloadOutlined}"
Shape="Round"
SizeType="{Binding ButtonSizeType}">
Download
</atom:Button>
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=DownloadOutlined}"
Shape="Default"
SizeType="{Binding ButtonSizeType}">
Download
</atom:Button>
</WrapPanel>
</StackPanel>
</DockPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon"
Description="You can add an icon through the icon property and adjust the position of the icon using iconPosition.">
<desktop:ShowCaseItem Title="Icon" Description="You can add an icon through the icon property and adjust the position of the icon using iconPosition.">
<StackPanel Orientation="Vertical">
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:Button ButtonType="Primary" Shape="Circle" Icon="{atom:IconProvider Kind=SearchOutlined}"/>
<atom:Button ButtonType="Primary" Shape="Round"
Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
Shape="Circle" />
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
Shape="Round">
Search
</atom:Button>
<atom:Button ButtonType="Default" Shape="Circle" Icon="{atom:IconProvider Kind=SearchOutlined}"/>
<atom:Button ButtonType="Default" Shape="Round" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Default"
Icon="{atom:IconProvider Kind=SearchOutlined}"
Shape="Circle" />
<atom:Button ButtonType="Default"
Icon="{atom:IconProvider Kind=SearchOutlined}"
Shape="Round">
Search
</atom:Button>
<atom:Button ButtonType="Text" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Text"
Icon="{atom:IconProvider Kind=SearchOutlined}"
Shape="Default">
Search
</atom:Button>
<atom:Button ButtonType="Link" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Link"
Icon="{atom:IconProvider Kind=SearchOutlined}"
Shape="Default">
Search
</atom:Button>
</WrapPanel>
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:Button ButtonType="Primary" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsDanger="True">
Search
</atom:Button>
<atom:Button ButtonType="Default" Shape="Round" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Default"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsDanger="True"
Shape="Round">
Search
</atom:Button>
<atom:Button ButtonType="Text" Shape="Default" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Text"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsDanger="True"
Shape="Default">
Search
</atom:Button>
<atom:Button ButtonType="Link" Shape="Default" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Link"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsDanger="True"
Shape="Default">
Search
</atom:Button>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Loading"
Description="A loading indicator can be added to a button by setting the loading property on the Button.">
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10">
<desktop:ShowCaseItem Title="Loading" Description="A loading indicator can be added to a button by setting the loading property on the Button.">
<StackPanel Margin="10"
HorizontalAlignment="Stretch"
Orientation="Vertical">
<WrapPanel>
<atom:Button ButtonType="Primary" IsLoading="True">Loading</atom:Button>
<atom:Button ButtonType="Primary" SizeType="Small" IsLoading="True">Loading</atom:Button>
<atom:Button ButtonType="Primary" IsLoading="True" Icon="{atom:IconProvider Kind=PoweroffOutlined}"/>
<atom:Button ButtonType="Primary"
IsLoading="True"
SizeType="Small">
Loading
</atom:Button>
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=PoweroffOutlined}"
IsLoading="True" />
</WrapPanel>
<WrapPanel>
<atom:Button ButtonType="Primary" Name="LoadingBtn1">Click me!</atom:Button>
<atom:Button ButtonType="Primary" Name="LoadingBtn2" Icon="{atom:IconProvider Kind=PoweroffOutlined}">Click me!</atom:Button>
<atom:Button ButtonType="Primary" Name="LoadingBtn3" Icon="{atom:IconProvider Kind=PoweroffOutlined}"/>
<atom:Button Name="LoadingBtn1" ButtonType="Primary">Click me!</atom:Button>
<atom:Button Name="LoadingBtn2"
ButtonType="Primary"
Icon="{atom:IconProvider Kind=PoweroffOutlined}">
Click me!
</atom:Button>
<atom:Button Name="LoadingBtn3"
ButtonType="Primary"
Icon="{atom:IconProvider Kind=PoweroffOutlined}" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Block Button"
Description="block property will make the button fit to its parent width.">
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10">
<atom:Button ButtonType="Primary" HorizontalAlignment="Stretch">
<desktop:ShowCaseItem Title="Block Button" Description="block property will make the button fit to its parent width.">
<StackPanel Margin="10"
HorizontalAlignment="Stretch"
Orientation="Vertical">
<atom:Button HorizontalAlignment="Stretch" ButtonType="Primary">
Primary
</atom:Button>
<atom:Button ButtonType="Default" HorizontalAlignment="Stretch">
<atom:Button HorizontalAlignment="Stretch" ButtonType="Default">
Default
</atom:Button>
<atom:Button ButtonType="Text" HorizontalAlignment="Stretch">
<atom:Button HorizontalAlignment="Stretch" ButtonType="Text">
Text
</atom:Button>
<atom:Button ButtonType="Link" HorizontalAlignment="Stretch">
<atom:Button HorizontalAlignment="Stretch" ButtonType="Link">
Link
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Danger Buttons"
Description="danger is a property of button after antd 4.0.">
<desktop:ShowCaseItem Title="Danger Buttons" Description="danger is a property of button after antd 4.0.">
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:Button ButtonType="Primary" IsDanger="True">
Primary
@ -181,14 +234,12 @@ If a large or small button is desired, set the size property to either large or
Link
</atom:Button>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Ghost Button"
Description="ghost property will make button's background transparent, it is commonly used in colored background.">
<Border Background="rgb(190, 200, 200)"
Margin="10"
Padding="10">
<desktop:ShowCaseItem Title="Ghost Button" Description="ghost property will make button's background transparent, it is commonly used in colored background.">
<Border Margin="10"
Padding="10"
Background="rgb(190, 200, 200)">
<StackPanel Orientation="Vertical">
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:Button ButtonType="Primary" IsGhost="True">
@ -203,34 +254,45 @@ If a large or small button is desired, set the size property to either large or
<atom:Button ButtonType="Link" IsGhost="True">
Link
</atom:Button>
<atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True">
<atom:Button ButtonType="Primary"
IsDanger="True"
IsGhost="True">
Danger
</atom:Button>
</WrapPanel>
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:Button ButtonType="Primary" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Primary
</atom:Button>
<atom:Button ButtonType="Default" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Default"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Default
</atom:Button>
<atom:Button ButtonType="Text" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Text"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Text
</atom:Button>
<atom:Button ButtonType="Link" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Link"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Link
</atom:Button>
<atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsDanger="True"
IsGhost="True">
Danger
</atom:Button>
</WrapPanel>
</StackPanel>
</Border>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="To mark a button as disabled, add the disabled property to the Button.">
<desktop:ShowCaseItem Title="Disabled" Description="To mark a button as disabled, add the disabled property to the Button.">
<WrapPanel HorizontalAlignment="Stretch" Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Primary">
@ -269,7 +331,9 @@ If a large or small button is desired, set the size property to either large or
<atom:Button ButtonType="Primary" IsDanger="True">
Danger Primary
</atom:Button>
<atom:Button ButtonType="Primary" IsDanger="True" IsEnabled="False">
<atom:Button ButtonType="Primary"
IsDanger="True"
IsEnabled="False">
Danger Primary(disabled)
</atom:Button>
</StackPanel>
@ -277,7 +341,9 @@ If a large or small button is desired, set the size property to either large or
<atom:Button ButtonType="Default" IsDanger="True">
Danger Default
</atom:Button>
<atom:Button ButtonType="Default" IsDanger="True" IsEnabled="False">
<atom:Button ButtonType="Default"
IsDanger="True"
IsEnabled="False">
Danger Default(disabled)
</atom:Button>
</StackPanel>
@ -285,7 +351,9 @@ If a large or small button is desired, set the size property to either large or
<atom:Button ButtonType="Text" IsDanger="True">
Danger Text
</atom:Button>
<atom:Button ButtonType="Text" IsDanger="True" IsEnabled="False">
<atom:Button ButtonType="Text"
IsDanger="True"
IsEnabled="False">
Danger Text(disabled)
</atom:Button>
</StackPanel>
@ -293,11 +361,13 @@ If a large or small button is desired, set the size property to either large or
<atom:Button ButtonType="Link" IsDanger="True">
Danger Link
</atom:Button>
<atom:Button ButtonType="Link" IsDanger="True" IsEnabled="False">
<atom:Button ButtonType="Link"
IsDanger="True"
IsEnabled="False">
Danger Link(disabled)
</atom:Button>
</StackPanel>
</WrapPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

265
samples/AtomUI.Demo.Desktop/ShowCase/ButtonSpinnerShowCase.axaml
View File

@ -1,247 +1,222 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonSpinnerShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonSpinnerShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
<atom:ButtonSpinner Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three sizes of Input"
Description="There are three sizes of an button spinner: large (40px), default (32px) and small (24px).">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<desktop:ShowCaseItem Title="Three sizes of Input" Description="There are three sizes of an button spinner: large (40px), default (32px) and small (24px).">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:ButtonSpinner SizeType="Large" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner SizeType="Middle" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner SizeType="Small" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Variants"
Description="Variants of Input.">
<desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Outline">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
<desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ButtonSpinner Spin="HandleSpin"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
LeftAddOn="http://"
RightAddOn=".com"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerRightContent=".com"
LeftAddOn="http://"
Width="400"
HorizontalAlignment="Left"
InnerRightContent=".com">
<TextBlock
HorizontalAlignment="Left"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
<desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ButtonSpinner Spin="HandleSpin"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"
Width="400"
HorizontalAlignment="Left">
<TextBlock
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
NormalFilledColor=#8C8C8C}"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="￥"
InnerRightContent="RMB"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"
Width="400"
HorizontalAlignment="Left">
<TextBlock
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="￥"
InnerRightContent="RMB"
IsEnabled="False"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status"
Description="Add status to Input with status, which could be error or warning.">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:ButtonSpinner Spin="HandleSpin"
Status="Error"
Width="400"
HorizontalAlignment="Left">
<TextBlock
<desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
Spin="HandleSpin"
Status="Error">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
HorizontalAlignment="Left">
<TextBlock
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
Spin="HandleSpin"
Status="Warning">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Error"
Width="400"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
Spin="HandleSpin"
Status="Error">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
Spin="HandleSpin"
Status="Warning">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Error"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left"
StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Warning"
StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Error"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left"
StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left"
Spin="HandleSpin"
Status="Warning"
StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

12
samples/AtomUI.Demo.Desktop/ShowCase/CardShowCase.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.CardShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CardShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

121
samples/AtomUI.Demo.Desktop/ShowCase/CheckBoxShowCase.axaml
View File

@ -1,125 +1,126 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.CheckBoxShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CheckBoxShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|CheckBox">
<Setter Property="Margin" Value="0, 0, 5, 5"></Setter>
<Setter Property="Margin" Value="0, 0, 5, 5" />
</Style>
</showcase:ShowCasePanel.Styles>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest use.">
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem Title="Basic" Description="The simplest use.">
<StackPanel HorizontalAlignment="Left" Spacing="10">
<atom:CheckBox>Checkbox</atom:CheckBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled checkbox.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<desktop:ShowCaseItem Title="Disabled" Description="Disabled checkbox.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:CheckBox IsChecked="False" IsEnabled="False">UnChecked</atom:CheckBox>
<atom:CheckBox IsChecked="{x:Null}" IsEnabled="False">Indeterminate</atom:CheckBox>
<atom:CheckBox IsChecked="True" IsEnabled="False">Checked</atom:CheckBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Controlled Checkbox"
Description="Communicated with other components.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<atom:CheckBox IsChecked="{Binding ControlledCheckBoxCheckedStatus}"
IsEnabled="{Binding ControlledCheckBoxEnabledStatus}"
Command="{Binding CheckBoxHandler}"
Content="{Binding ControlledCheckBoxText}" />
<StackPanel Orientation="Horizontal" Spacing="10" Margin="0, 10, 0, 0">
<atom:Button SizeType="Small" ButtonType="Primary"
x:Name="CheckStatusBtn"
<desktop:ShowCaseItem Title="Controlled Checkbox" Description="Communicated with other components.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:CheckBox Command="{Binding CheckBoxHandler}"
Content="{Binding ControlledCheckBoxText}"
IsChecked="{Binding ControlledCheckBoxCheckedStatus}"
IsEnabled="{Binding ControlledCheckBoxEnabledStatus}" />
<StackPanel Margin="0,10,0,0"
Orientation="Horizontal"
Spacing="10">
<atom:Button x:Name="CheckStatusBtn"
ButtonType="Primary"
Command="{Binding CheckStatusHandler}"
CommandParameter="{Binding ElementName=CheckStatusBtn}"
SizeType="Small"
Text="{Binding CheckStatusBtnText}" />
<atom:Button SizeType="Small" ButtonType="Primary"
x:Name="EnableStatusBtn"
CommandParameter="{Binding ElementName=EnableStatusBtn}"
<atom:Button x:Name="EnableStatusBtn"
ButtonType="Primary"
Command="{Binding EnableStatusHandler}"
CommandParameter="{Binding ElementName=EnableStatusBtn}"
SizeType="Small"
Text="{Binding EnableStatusBtnText}" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Checkbox Group"
Description="Generate a group of checkboxes from an array.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<WrapPanel Margin="0, 0, 0, 10">
<desktop:ShowCaseItem Title="Checkbox Group" Description="Generate a group of checkboxes from an array.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<WrapPanel Margin="0,0,0,10">
<atom:CheckBox IsChecked="True">Apple</atom:CheckBox>
<atom:CheckBox IsChecked="True">Pear</atom:CheckBox>
<atom:CheckBox IsChecked="True">Orange</atom:CheckBox>
</WrapPanel>
<WrapPanel Margin="0, 0, 0, 10">
<WrapPanel Margin="0,0,0,10">
<atom:CheckBox>Apple</atom:CheckBox>
<atom:CheckBox IsChecked="True">Pear</atom:CheckBox>
<atom:CheckBox>Orange</atom:CheckBox>
</WrapPanel>
<WrapPanel Margin="0, 0, 0, 10">
<WrapPanel Margin="0,0,0,10">
<atom:CheckBox IsChecked="True" IsEnabled="False">Apple</atom:CheckBox>
<atom:CheckBox IsEnabled="False">Pear</atom:CheckBox>
<atom:CheckBox IsEnabled="False">Orange</atom:CheckBox>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Check all"
Description="The indeterminate property can help you to achieve a 'check all' effect.">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Spacing="10">
<desktop:ShowCaseItem Title="Check all" Description="The indeterminate property can help you to achieve a 'check all' effect.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<StackPanel>
<atom:CheckBox IsChecked="{Binding CheckedAllStatus}"
Command="{Binding CheckedAllStatusHandler}">
<atom:CheckBox Command="{Binding CheckedAllStatusHandler}" IsChecked="{Binding CheckedAllStatus}">
Check all
</atom:CheckBox>
</StackPanel>
<WrapPanel Margin="0, 20, 0, 0">
<WrapPanel Margin="0,20,0,0">
<atom:CheckBox x:Name="AppleCheckBox"
IsChecked="{Binding AppleCheckedStatus}"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=AppleCheckBox}">
CommandParameter="{Binding ElementName=AppleCheckBox}"
IsChecked="{Binding AppleCheckedStatus}">
Apple
</atom:CheckBox>
<atom:CheckBox x:Name="PearCheckBox"
IsChecked="{Binding PearCheckedStatus}"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=PearCheckBox}">
CommandParameter="{Binding ElementName=PearCheckBox}"
IsChecked="{Binding PearCheckedStatus}">
Pear
</atom:CheckBox>
<atom:CheckBox x:Name="OrangeCheckBox"
IsChecked="{Binding OrangeCheckedStatus}"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=OrangeCheckBox}">
CommandParameter="{Binding ElementName=OrangeCheckBox}"
IsChecked="{Binding OrangeCheckedStatus}">
Orange
</atom:CheckBox>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Use with Grid"
Description="We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto,Auto" Margin="10">
<desktop:ShowCaseItem Title="Use with Grid" Description="We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.">
<Grid Margin="10"
ColumnDefinitions="*,*,*"
RowDefinitions="Auto,Auto,Auto">
<atom:CheckBox Grid.Row="0" Grid.Column="0">A</atom:CheckBox>
<atom:CheckBox Grid.Row="0" Grid.Column="1">B</atom:CheckBox>
<atom:CheckBox Grid.Row="0" Grid.Column="2">C</atom:CheckBox>
<atom:CheckBox Grid.Row="1" Grid.Column="0">D</atom:CheckBox>
<atom:CheckBox Grid.Row="1" Grid.Column="1">D</atom:CheckBox>
</Grid>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

106
samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml
View File

@ -1,16 +1,14 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.CollapseShowCase"
<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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Collapse"
Description="By default, any number of panels can be expanded at a time. The first panel is expanded in this example.">
<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">
@ -28,14 +26,15 @@
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase: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" />
<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 Margin="0,0,10,0"
Orientation="Vertical"
Spacing="20">
<atom:Separator Title="Default Size"
FontWeight="Bold"
TitlePosition="Left" />
<atom:Collapse SizeType="Middle">
<atom:CollapseItem Header="This is default size panel header">
<TextBlock TextWrapping="Wrap">
@ -43,7 +42,9 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Separator Title="Small Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Separator Title="Small Size"
FontWeight="Bold"
TitlePosition="Left" />
<atom:Collapse SizeType="Small">
<atom:CollapseItem Header="This is small size panel header">
<TextBlock TextWrapping="Wrap">
@ -51,7 +52,9 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Separator Title="Large Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Separator Title="Large Size"
FontWeight="Bold"
TitlePosition="Left" />
<atom:Collapse SizeType="Large">
<atom:CollapseItem Header="This is large size panel header">
<TextBlock TextWrapping="Wrap">
@ -60,11 +63,9 @@ If a large or small collapse is desired, set the size property to either large o
</atom:CollapseItem>
</atom:Collapse>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Accordion"
Description="In accordion mode, only one panel can be expanded at a time.">
<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">
@ -82,11 +83,11 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Nested panel"
Description="Collapse is nested inside the Collapse." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Nested panel"
Margin="0,0,10,0"
Description="Collapse is nested inside the Collapse.">
<atom:Collapse>
<atom:CollapseItem Header="This is panel header 1">
<atom:Collapse>
@ -108,11 +109,11 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Borderless"
Description="A borderless style of Collapse." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Borderless"
Margin="0,0,10,0"
Description="A borderless style of Collapse.">
<atom:Collapse IsBorderless="True">
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
@ -130,11 +131,11 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="No Arrow"
Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="No Arrow"
Margin="0,0,10,0"
Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component.">
<atom:Collapse>
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
@ -147,27 +148,24 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Extra node"
Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Extra node"
Margin="0,0,10,0"
Description="Render extra element in the top-right corner of each panel.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Collapse ExpandIconPosition="{Binding CollapseExpandIconPosition}">
<atom:CollapseItem Header="This is panel header 1"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
<atom:CollapseItem AddOnContent="{atom:IconProvider Kind=SettingOutlined}" 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"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
<atom:CollapseItem AddOnContent="{atom:IconProvider Kind=SettingOutlined}" 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"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
<atom:CollapseItem AddOnContent="{atom:IconProvider Kind=SettingOutlined}" 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>
@ -176,18 +174,18 @@ If a large or small collapse is desired, set the size property to either large o
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
<atom:OptionButtonGroup Name="ExpandButtonPosGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Start</atom:OptionButton>
<atom:OptionButton>End</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Ghost Collapse"
Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Ghost Collapse"
Margin="0,0,10,0"
Description="Making collapse's background to transparent.">
<atom:Collapse IsGhostStyle="True">
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
@ -205,11 +203,11 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Collapsible"
Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Collapsible"
Margin="0,0,10,0"
Description="Specify the trigger area of collapsible by collapsible.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Collapse>
<atom:CollapseItem Header="This panel can only be collapsed by clicking text">
@ -242,7 +240,7 @@ If a large or small collapse is desired, set the size property to either large o
</atom:CollapseItem>
</atom:Collapse>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

190
samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml
View File

@ -1,86 +1,85 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ComboBoxShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ComboBoxShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<showcase:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<atom:ComboBox PlaceholderText="Please select" Width="300">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
<desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
<atom:ComboBox Width="300" PlaceholderText="Please select">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</showcase:ShowCaseItem>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three sizes of Input"
Description="There are three sizes of an ComboBox: large (40px), default (32px) and small (24px).">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:ComboBox SizeType="Large" PlaceholderText="Please select">
<desktop:ShowCaseItem Title="Three sizes of Input" Description="There are three sizes of an ComboBox: large (40px), default (32px) and small (24px).">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:ComboBox PlaceholderText="Please select" SizeType="Large">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox SizeType="Middle" PlaceholderText="Please select">
<atom:ComboBox PlaceholderText="Please select" SizeType="Middle">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox SizeType="Small" PlaceholderText="Please select">
<atom:ComboBox PlaceholderText="Please select" SizeType="Small">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Variants"
Description="Variants of Input.">
<desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ComboBox StyleVariant="Outline" PlaceholderText="Please select" Width="300">
<atom:ComboBox Width="300"
PlaceholderText="Please select"
StyleVariant="Outline">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox StyleVariant="Filled" PlaceholderText="Please select" Width="300">
<atom:ComboBox Width="300"
PlaceholderText="Please select"
StyleVariant="Filled">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox StyleVariant="Borderless" PlaceholderText="Please select" Width="300">
<atom:ComboBox Width="300"
PlaceholderText="Please select"
StyleVariant="Borderless">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
<desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
LeftAddOn="http://"
PlaceholderText="Please select"
RightAddOn=".com">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
@ -88,19 +87,19 @@
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
>
<atom:ComboBox Width="300"
PlaceholderText="Please select"
RightAddOn="{atom:IconProvider Kind=SettingOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
LeftAddOn="http://"
<atom:ComboBox Width="300"
InnerRightContent=".com"
>
LeftAddOn="http://"
PlaceholderText="Please select">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
@ -108,35 +107,38 @@
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
<desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ComboBox PlaceholderText="Please select" Width="300"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"
>
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
NormalFilledColor=#8C8C8C}"
PlaceholderText="Please select">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
InnerLeftContent="￥"
InnerRightContent="RMB">
InnerRightContent="RMB"
PlaceholderText="Please select">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
InnerLeftContent="￥"
InnerRightContent="RMB" IsEnabled="False">
InnerRightContent="RMB"
IsEnabled="False"
PlaceholderText="Please select">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
@ -144,13 +146,14 @@
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status"
Description="Add status to Input with status, which could be error or warning.">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:ComboBox PlaceholderText="Please select" Width="300"
<desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:ComboBox Width="300"
PlaceholderText="Please select"
Status="Error">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
@ -158,7 +161,8 @@
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
PlaceholderText="Please select"
Status="Warning">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
@ -166,58 +170,64 @@
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
PlaceholderText="Please select"
Status="Error">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
PlaceholderText="Please select"
Status="Warning">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
PlaceholderText="Please select"
Status="Error"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
StyleVariant="Filled">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
PlaceholderText="Please select"
Status="Warning"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
StyleVariant="Filled">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
PlaceholderText="Please select"
Status="Error"
StyleVariant="Filled"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
StyleVariant="Borderless">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
<atom:ComboBox Width="300"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
PlaceholderText="Please select"
Status="Warning"
StyleVariant="Filled"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
Status="Error"
StyleVariant="Borderless"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
Status="Warning"
StyleVariant="Borderless"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
StyleVariant="Borderless">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
@ -225,7 +235,7 @@
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

12
samples/AtomUI.Demo.Desktop/ShowCase/DatePickerShowCase.cs.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.DatePickerShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DatePickerShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

35
samples/AtomUI.Demo.Desktop/ShowCase/DrawerShowCase.axaml
View File

@ -6,6 +6,7 @@
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
xmlns:utils="clr-namespace:AtomUI.Demo.Desktop.Utils"
mc:Ignorable="d">
<UserControl.Styles>
@ -45,22 +46,22 @@
</Style>
</UserControl.Styles>
<showcase:ShowCasePanel>
<desktop:ShowCasePanel>
<showcase:ShowCaseItem Title="Basic" Description="Basic drawer.">
<desktop:ShowCaseItem Title="Basic" Description="Basic drawer.">
<Panel>
<atom:ToggleSwitch x:Name="OpenButton01" Content="Open" />
<atom:Drawer IsOpen="{Binding $parent[Panel].((atom:ToggleSwitch)Children[0]).IsChecked}" OpenOn="{Binding $parent[TopLevel]}">
<TextBlock Margin="50" Text="Some contents..." />
</atom:Drawer>
</Panel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Custom Placement" Description="The Drawer can appear from any edge of the screen.">
<desktop:ShowCaseItem Title="Custom Placement" Description="The Drawer can appear from any edge of the screen.">
<Panel>
<StackPanel Classes="ControllerPanel">
<ListBox Classes="PlacementList"
ItemsSource="{desktop:Enum atom:DrawerPlacement}"
ItemsSource="{utils:Enum atom:DrawerPlacement}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open" />
</StackPanel>
@ -71,13 +72,13 @@
<TextBlock Margin="50" Text="Some contents..." />
</atom:Drawer>
</Panel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Extra Actions" Description="Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.">
<desktop:ShowCaseItem Title="Extra Actions" Description="Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.">
<Panel>
<StackPanel Classes="ControllerPanel">
<ListBox Classes="PlacementList"
ItemsSource="{desktop:Enum atom:DrawerPlacement}"
ItemsSource="{utils:Enum atom:DrawerPlacement}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open" />
</StackPanel>
@ -88,28 +89,28 @@
<TextBlock Margin="50" Text=" TODO " />
</atom:Drawer>
</Panel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Render in current area" Description="Render in current area.">
<desktop:ShowCaseItem Title="Render in current area" Description="Render in current area.">
<Panel>
<StackPanel Height="120"
atom:Watermark.Glyph="{atom:TextGlyph AtomUI}"
Classes="ControllerPanel">
<ListBox Classes="PlacementList"
ItemsSource="{desktop:Enum atom:DrawerPlacement}"
ItemsSource="{utils:Enum atom:DrawerPlacement}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open" />
</StackPanel>
<atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[1]).IsChecked}"
OpenOn="{Binding $parent[showcase:ShowCaseItem]}"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<TextBlock Margin="50" Text=" Some contents... " />
</atom:Drawer>
</Panel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Basic" Description="Basic drawer.">
<desktop:ShowCaseItem Title="Basic" Description="Basic drawer.">
<Grid ColumnDefinitions="Auto,*">
<Border Grid.ColumnSpan="2"
Height="300"
@ -123,7 +124,7 @@
HorizontalAlignment="Right"
VerticalAlignment="Top"
Content="Open Drawer #2" />
<ComboBox x:Name="CbxHorizontalAlignment" ItemsSource="{desktop:Enum atom:DrawerPlacement}" />
<ComboBox x:Name="CbxHorizontalAlignment" ItemsSource="{utils:Enum atom:DrawerPlacement}" />
<Button Click="ButtonOpenOnCurrentParent_OnClick" Content="Open On Current's Parent" />
</StackPanel>
@ -163,7 +164,7 @@
</Border>
</atom:Drawer>
</Grid>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

331
samples/AtomUI.Demo.Desktop/ShowCase/DropdownButtonShowCase.axaml
View File

@ -1,55 +1,74 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.DropdownButtonShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DropdownButtonShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The most basic dropdown menu.">
<atom:DropdownButton ButtonType="Link" TriggerType="Hover" x:Name="Test">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic dropdown menu.">
<atom:DropdownButton x:Name="Test"
ButtonType="Link"
TriggerType="Hover">
Hover me
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
<atom:MenuItem Header="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<atom:MenuItem Header="Paste"
Icon="{atom:IconProvider Kind=FileDoneOutlined}"
InputGesture="Ctrl+P" />
<atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
</atom:MenuItem>
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Button Types"
Description="Support centralized button type.">
<desktop:ShowCaseItem Title="Button Types" Description="Support centralized button type.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:DropdownButton ButtonType="Primary" TriggerType="Click">
Edit File
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Primary" Shape="Round" TriggerType="Click">
<atom:DropdownButton ButtonType="Primary"
Shape="Round"
TriggerType="Click">
Edit File
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
@ -58,9 +77,15 @@
Edit File
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
@ -69,180 +94,272 @@
Edit File
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Arrow"
Description="You could display an arrow.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Arrow" Description="You could display an arrow.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|DropdownButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="Margin" Value="5" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<WrapPanel>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="BottomEdgeAlignedLeft">
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="BottomEdgeAlignedLeft"
TriggerType="Hover">
BottomLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="Bottom">
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="Bottom"
TriggerType="Hover">
Bottom
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="BottomEdgeAlignedRight">
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="BottomEdgeAlignedRight"
TriggerType="Hover">
BottomRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="TopEdgeAlignedLeft">
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="TopEdgeAlignedLeft"
TriggerType="Hover">
TopLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="Top">
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="Top"
TriggerType="Hover">
Top
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="TopEdgeAlignedRight">
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="TopEdgeAlignedRight"
TriggerType="Hover">
TopRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Placement"
Description="Support 6 placements.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Placement" Description="Support 6 placements.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|DropdownButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="Margin" Value="5" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<WrapPanel>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="BottomEdgeAlignedLeft">
<atom:DropdownButton ButtonType="Default"
Placement="BottomEdgeAlignedLeft"
TriggerType="Hover">
BottomLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="Bottom">
<atom:DropdownButton ButtonType="Default"
Placement="Bottom"
TriggerType="Hover">
Bottom
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="BottomEdgeAlignedRight">
<atom:DropdownButton ButtonType="Default"
Placement="BottomEdgeAlignedRight"
TriggerType="Hover">
BottomRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="TopEdgeAlignedLeft">
<atom:DropdownButton ButtonType="Default"
Placement="TopEdgeAlignedLeft"
TriggerType="Hover">
TopLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="Top">
<atom:DropdownButton ButtonType="Default"
Placement="Top"
TriggerType="Hover">
Top
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="TopEdgeAlignedRight">
<atom:DropdownButton ButtonType="Default"
Placement="TopEdgeAlignedRight"
TriggerType="Hover">
TopRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

51
samples/AtomUI.Demo.Desktop/ShowCase/EmptyShowCase.axaml
View File

@ -1,45 +1,38 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.EmptyShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.EmptyShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Simplest Usage.">
<atom:EmptyIndicator PresetImage="Default"/>
</showcase:ShowCaseItem>
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Simplest Usage.">
<atom:EmptyIndicator PresetImage="Default" />
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="AtomUI supports three sizes of buttons: small, default and large.">
<desktop:ShowCaseItem Title="Size" Description="AtomUI supports three sizes of buttons: small, default and large.">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<atom:EmptyIndicator PresetImage="Simple" SizeType="Small"/>
<atom:EmptyIndicator PresetImage="Simple" SizeType="Middle"/>
<atom:EmptyIndicator PresetImage="Simple" SizeType="Large"/>
<atom:EmptyIndicator PresetImage="Simple" SizeType="Small" />
<atom:EmptyIndicator PresetImage="Simple" SizeType="Middle" />
<atom:EmptyIndicator PresetImage="Simple" SizeType="Large" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customize"
Description="Customize image source, image size, description and extra content.">
<desktop:ShowCaseItem Title="Customize" Description="Customize image source, image size, description and extra content.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:EmptyIndicator ImagePath="avares://AtomUI.Demo.Desktop/Assets/EmptyShowCase/empty.svg" SizeType="Large"
Description="Customize Description"/>
<atom:EmptyIndicator Description="Customize Description"
ImagePath="avares://AtomUI.Demo.Desktop/Assets/EmptyShowCase/empty.svg"
SizeType="Large" />
<atom:Button HorizontalAlignment="Center" ButtonType="Primary">Create Now</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="No description"
Description="Simplest Usage with no description.">
<atom:EmptyIndicator PresetImage="Default" IsShowDescription="False"/>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
<desktop:ShowCaseItem Title="No description" Description="Simplest Usage with no description.">
<atom:EmptyIndicator IsShowDescription="False" PresetImage="Default" />
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

136
samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml
View File

@ -1,56 +1,59 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ExpanderShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ExpanderShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Expander"
Description="By default, The simplest usage is to expand downward.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Expander" Description="By default, The simplest usage is to expand downward.">
<atom:Expander 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:Expander>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="Ant Design supports a default Expander size as well as a large and small size.
If a large or small Expander is desired, set the size property to either large or small respectively. Omit the size property for a Expander with the default size.">
<StackPanel Orientation="Vertical" Spacing="20" Margin="0, 0, 10, 0">
<atom:Separator Title="Default Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Expander SizeType="Middle" Header="This is default size panel header">
<desktop:ShowCaseItem Title="Size" Description="Ant Design supports a default Expander size as well as a large and small size. If a large or small Expander is desired, set the size property to either large or small respectively. Omit the size property for a Expander with the default size.">
<StackPanel Margin="0,0,10,0"
Orientation="Vertical"
Spacing="20">
<atom:Separator Title="Default Size"
FontWeight="Bold"
TitlePosition="Left" />
<atom:Expander Header="This is default size panel header" SizeType="Middle">
<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:Expander>
<atom:Separator Title="Small Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Expander SizeType="Small" Header="This is small size panel header">
<atom:Separator Title="Small Size"
FontWeight="Bold"
TitlePosition="Left" />
<atom:Expander Header="This is small size panel header" SizeType="Small">
<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:Expander>
<atom:Separator Title="Large Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Expander SizeType="Large" Header="This is large size panel header">
<atom:Separator Title="Large Size"
FontWeight="Bold"
TitlePosition="Left" />
<atom:Expander Header="This is large size panel header" SizeType="Large">
<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:Expander>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Expanding Direction"
Description="The content area supports expansion in four directions.">
<DockPanel Margin="0, 0, 0, 0" Height="300">
<StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
<desktop:ShowCaseItem Title="Expanding Direction" Description="The content area supports expansion in four directions.">
<DockPanel Height="300" Margin="0,0,0,0">
<StackPanel DockPanel.Dock="Top"
Orientation="Horizontal"
Spacing="5">
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandDirectionOptionGroup">
<atom:OptionButtonGroup Name="ExpandDirectionOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Down</atom:OptionButton>
<atom:OptionButton>Up</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
@ -58,20 +61,21 @@ If a large or small Expander is desired, set the size property to either large o
</atom:OptionButtonGroup>
</StackPanel>
<Panel Margin="0, 20, 0, 0">
<atom:Expander Header="This is panel header" ExpandDirection="{Binding ExpandDirection}"
Name="DirectionDemoExpander">
<Panel Margin="0,20,0,0">
<atom:Expander Name="DirectionDemoExpander"
ExpandDirection="{Binding ExpandDirection}"
Header="This is 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:Expander>
</Panel>
</DockPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Nested panel"
Description="Expander is nested inside the Collapse." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Nested panel"
Margin="0,0,10,0"
Description="Expander is nested inside the Collapse.">
<atom:Expander Header="This is panel header 1">
<atom:Expander Header="This is nested panel header">
<TextBlock TextWrapping="Wrap">
@ -79,35 +83,35 @@ If a large or small Expander is desired, set the size property to either large o
</TextBlock>
</atom:Expander>
</atom:Expander>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Borderless"
Description="A borderless style of Expander." Margin="0, 0, 10, 0">
<atom:Expander IsBorderless="True" Header="This is panel header 1">
<desktop:ShowCaseItem Title="Borderless"
Margin="0,0,10,0"
Description="A borderless style of Expander.">
<atom:Expander Header="This is panel header 1" IsBorderless="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:Expander>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="No Arrow"
Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="No Arrow"
Margin="0,0,10,0"
Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component.">
<atom:Expander Header="This is panel header 1" 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:Expander>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Extra node"
Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Extra node"
Margin="0,0,10,0"
Description="Render extra element in the top-right corner of each panel.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Expander Header="This is panel header 1"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}"
ExpandIconPosition="{Binding ToggleIconPosition}">
<atom:Expander AddOnContent="{atom:IconProvider Kind=SettingOutlined}"
ExpandIconPosition="{Binding ToggleIconPosition}"
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>
@ -115,52 +119,54 @@ If a large or small Expander is desired, set the size property to either large o
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
<atom:OptionButtonGroup Name="ExpandButtonPosGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Start</atom:OptionButton>
<atom:OptionButton>End</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Ghost Collapse"
Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
<atom:Expander IsGhostStyle="True" Header="This is panel header 1">
<desktop:ShowCaseItem Title="Ghost Collapse"
Margin="0,0,10,0"
Description="Making collapse's background to transparent.">
<atom:Expander Header="This is panel header 1" IsGhostStyle="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:Expander>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Collapsible"
Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Collapsible"
Margin="0,0,10,0"
Description="Specify the trigger area of collapsible by collapsible.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Expander 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:Expander>
<atom:Expander TriggerType="Icon" Header="This panel can only be collapsed by clicking icon">
<atom:Expander Header="This panel can only be collapsed by clicking icon" TriggerType="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:Expander>
<atom:Expander IsEnabled="False" Header="This panel can't be collapsed">
<atom:Expander Header="This panel can't be collapsed" IsEnabled="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:Expander>
<atom:Expander IsEnabled="False" Header="This panel can't be collapsed" IsExpanded="True">
<atom:Expander Header="This panel can't be collapsed"
IsEnabled="False"
IsExpanded="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:Expander>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

1
samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml.cs
View File

@ -1,7 +1,6 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Layout;
namespace AtomUI.Demo.Desktop.ShowCase;

54
samples/AtomUI.Demo.Desktop/ShowCase/GroupBoxShowCase.axaml
View File

@ -1,16 +1,14 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.GroupBoxShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.GroupBoxShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Basic usage of the GroupBox control.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Basic usage of the GroupBox control.">
<atom:GroupBox HeaderTitle="Title Info">
<Panel Height="100">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
@ -18,11 +16,9 @@
</TextBlock>
</Panel>
</atom:GroupBox>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Header title Position"
Description="GroupBox Header supports three position types: Left, Center and Right.">
<desktop:ShowCaseItem Title="Header title Position" Description="GroupBox Header supports three position types: Left, Center and Right.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:GroupBox HeaderTitle="Title Info">
<Panel Height="40">
@ -46,34 +42,40 @@
</Panel>
</atom:GroupBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Header title style"
Description="GroupBox Header supports customizing some properties of color and font.">
<desktop:ShowCaseItem Title="Header title style" Description="GroupBox Header supports customizing some properties of color and font.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:GroupBox HeaderTitle="Title Info" HeaderFontStyle="Italic">
<atom:GroupBox HeaderFontStyle="Italic" HeaderTitle="Title Info">
<Panel Height="40">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
<atom:GroupBox HeaderTitle="Title Info" HeaderTitlePosition="Center" HeaderFontWeight="Bold">
<atom:GroupBox HeaderFontWeight="Bold"
HeaderTitle="Title Info"
HeaderTitlePosition="Center">
<Panel Height="40">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
<atom:GroupBox HeaderTitle="Title Info" HeaderTitlePosition="Right" HeaderFontStyle="Oblique">
<atom:GroupBox HeaderFontStyle="Oblique"
HeaderTitle="Title Info"
HeaderTitlePosition="Right">
<Panel Height="40">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
<atom:GroupBox HeaderTitle="Title Info" HeaderTitlePosition="Center" HeaderFontStyle="Oblique" HeaderTitleColor="Coral" HeaderFontWeight="Medium">
<atom:GroupBox HeaderFontStyle="Oblique"
HeaderFontWeight="Medium"
HeaderTitle="Title Info"
HeaderTitleColor="Coral"
HeaderTitlePosition="Center">
<Panel Height="40">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
@ -81,18 +83,16 @@
</Panel>
</atom:GroupBox>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Header Icon"
Description="GroupBox Header supports specifying Icon.">
<atom:GroupBox HeaderTitle="Title Info" HeaderIcon="{atom:IconProvider Kind=GithubOutlined}">
<desktop:ShowCaseItem Title="Header Icon" Description="GroupBox Header supports specifying Icon.">
<atom:GroupBox HeaderIcon="{atom:IconProvider Kind=GithubOutlined}" HeaderTitle="Title Info">
<Panel Height="100">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

9
samples/AtomUI.Demo.Desktop/ShowCase/IconShowCase.axaml
View File

@ -1,5 +1,4 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.IconShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.IconShowCase"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:AtomUI.Demo.Desktop.Controls"
@ -24,17 +23,17 @@
<TabControl>
<TabItem Header="Outlined">
<ScrollViewer>
<controls:IconGallery IconThemeType="Outlined"/>
<controls:IconGallery IconThemeType="Outlined" />
</ScrollViewer>
</TabItem>
<TabItem Header="Filled">
<ScrollViewer>
<controls:IconGallery IconThemeType="Filled"/>
<controls:IconGallery IconThemeType="Filled" />
</ScrollViewer>
</TabItem>
<TabItem Header="Two Tone">
<ScrollViewer>
<controls:IconGallery IconThemeType="TwoTone"/>
<controls:IconGallery IconThemeType="TwoTone" />
</ScrollViewer>
</TabItem>
</TabControl>

454
samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml
View File

@ -1,36 +1,40 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.InfoFlyoutShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.InfoFlyoutShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The most basic example. The size of the floating layer depends on the contents region.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic example. The size of the floating layer depends on the contents region.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:FlyoutHost Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button ButtonType="Primary">Hover me</atom:Button>
</atom:FlyoutHost>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three ways to trigger"
Description="Mouse to click, focus and move in.">
<desktop:ShowCaseItem Title="Three ways to trigger" Description="Mouse to click, focus and move in.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:FlyoutHost Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button>Hover me</atom:Button>
@ -38,17 +42,19 @@
<atom:FlyoutHost Trigger="Click">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button>Click me</atom:Button>
</atom:FlyoutHost>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
<desktop:ShowCaseItem Title="Placement" Description="There are 12 placement options available.">
<Grid>
<Grid.Styles>
<Style Selector="atom|Button">
@ -57,134 +63,216 @@
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<atom:FlyoutHost Grid.Row="1" Grid.Column="0" Trigger="Hover" Placement="LeftEdgeAlignedTop">
<atom:FlyoutHost Grid.Row="1"
Grid.Column="0"
Placement="LeftEdgeAlignedTop"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LT"/>
<atom:Button Text="LT" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2" Grid.Column="0" Trigger="Hover" Placement="Left">
<atom:FlyoutHost Grid.Row="2"
Grid.Column="0"
Placement="Left"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Left"/>
<atom:Button Text="Left" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3" Grid.Column="0" Trigger="Hover" Placement="LeftEdgeAlignedBottom">
<atom:FlyoutHost Grid.Row="3"
Grid.Column="0"
Placement="LeftEdgeAlignedBottom"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LB"/>
<atom:Button Text="LB" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="1" Trigger="Hover" Placement="TopEdgeAlignedLeft">
<atom:FlyoutHost Grid.Row="0"
Grid.Column="1"
Placement="TopEdgeAlignedLeft"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TL"/>
<atom:Button Text="TL" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="2" Trigger="Hover" Placement="Top">
<atom:FlyoutHost Grid.Row="0"
Grid.Column="2"
Placement="Top"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Top"/>
<atom:Button Text="Top" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="3" Trigger="Hover" Placement="TopEdgeAlignedRight">
<atom:FlyoutHost Grid.Row="0"
Grid.Column="3"
Placement="TopEdgeAlignedRight"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TR"/>
<atom:Button Text="TR" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="1" Grid.Column="4" Trigger="Hover" Placement="RightEdgeAlignedTop">
<atom:FlyoutHost Grid.Row="1"
Grid.Column="4"
Placement="RightEdgeAlignedTop"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RT"/>
<atom:Button Text="RT" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2" Grid.Column="4" Trigger="Hover" Placement="Right">
<atom:FlyoutHost Grid.Row="2"
Grid.Column="4"
Placement="Right"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Right"/>
<atom:Button Text="Right" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3" Grid.Column="4" Trigger="Hover" Placement="RightEdgeAlignedBottom">
<atom:FlyoutHost Grid.Row="3"
Grid.Column="4"
Placement="RightEdgeAlignedBottom"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RB"/>
<atom:Button Text="RB" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="1" Trigger="Hover" Placement="BottomEdgeAlignedLeft">
<atom:FlyoutHost Grid.Row="4"
Grid.Column="1"
Placement="BottomEdgeAlignedLeft"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BL"/>
<atom:Button Text="BL" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="2" Trigger="Hover" Placement="Bottom">
<atom:FlyoutHost Grid.Row="4"
Grid.Column="2"
Placement="Bottom"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Bottom"/>
<atom:Button Text="Bottom" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="3" Trigger="Hover" Placement="BottomEdgeAlignedRight">
<atom:FlyoutHost Grid.Row="4"
Grid.Column="3"
Placement="BottomEdgeAlignedRight"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BR"/>
<atom:Button Text="BR" />
</atom:FlyoutHost>
</Grid>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Arrow"
Description="Support show, hide or keep arrow in the center.">
<desktop:ShowCaseItem Title="Arrow" Description="Support show, hide or keep arrow in the center.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Segmented x:Name="ArrowSegmented">
<atom:SegmentedItem>Show</atom:SegmentedItem>
@ -199,180 +287,240 @@
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<atom:FlyoutHost Grid.Row="1" Grid.Column="0"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="1"
Grid.Column="0"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="LeftEdgeAlignedTop"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LT"/>
<atom:Button Text="LT" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2" Grid.Column="0"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="2"
Grid.Column="0"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Left"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Left"/>
<atom:Button Text="Left" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3" Grid.Column="0"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="3"
Grid.Column="0"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="LeftEdgeAlignedBottom"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LB"/>
<atom:Button Text="LB" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="1"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="0"
Grid.Column="1"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="TopEdgeAlignedLeft"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TL"/>
<atom:Button Text="TL" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="2"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="0"
Grid.Column="2"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Top"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Top"/>
<atom:Button Text="Top" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="3"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="0"
Grid.Column="3"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="TopEdgeAlignedRight"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TR"/>
<atom:Button Text="TR" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="1" Grid.Column="4"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="1"
Grid.Column="4"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="RightEdgeAlignedTop"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RT"/>
<atom:Button Text="RT" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2" Grid.Column="4"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="2"
Grid.Column="4"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Right"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Right"/>
<atom:Button Text="Right" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3" Grid.Column="4"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="3"
Grid.Column="4"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="RightEdgeAlignedBottom"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RB"/>
<atom:Button Text="RB" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="1"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="4"
Grid.Column="1"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="BottomEdgeAlignedLeft"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BL"/>
<atom:Button Text="BL" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="2"
Trigger="Hover"
<atom:FlyoutHost Grid.Row="4"
Grid.Column="2"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Bottom"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Bottom"/>
<atom:Button Text="Bottom" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="3"
Trigger="Hover"
Placement="BottomEdgeAlignedRight"
<atom:FlyoutHost Grid.Row="4"
Grid.Column="3"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
Placement="BottomEdgeAlignedRight"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BR"/>
<atom:Button Text="BR" />
</atom:FlyoutHost>
</Grid>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

1
samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml.cs
View File

@ -1,7 +1,6 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
namespace AtomUI.Demo.Desktop.ShowCase;

245
samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml
View File

@ -1,137 +1,174 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.LineEditShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.LineEditShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic usage"
Description="Basic usage example.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic usage" Description="Basic usage example.">
<atom:LineEdit Watermark="Basic usage" />
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three sizes of Input"
Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:LineEdit Watermark="Large" SizeType="Large"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined}" />
<atom:LineEdit Watermark="Middle" SizeType="Middle"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined}" />
<atom:LineEdit Watermark="Small" SizeType="Small"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined}" />
<desktop:ShowCaseItem Title="Three sizes of Input" Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"
SizeType="Large"
Watermark="Large" />
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"
SizeType="Middle"
Watermark="Middle" />
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"
SizeType="Small"
Watermark="Small" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Variants"
Description="Variants of Input.">
<desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit Watermark="Outlined" StyleVariant="Outline" />
<atom:LineEdit Watermark="Filled" StyleVariant="Filled" />
<atom:LineEdit Watermark="Borderless" StyleVariant="Borderless" />
<atom:LineEdit StyleVariant="Outline" Watermark="Outlined" />
<atom:LineEdit StyleVariant="Filled" Watermark="Filled" />
<atom:LineEdit StyleVariant="Borderless" Watermark="Borderless" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
<desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
Text="mysite"/>
<atom:LineEdit RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400" HorizontalAlignment="Left"
Text="mysite"/>
<atom:LineEdit LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
Text="mysite"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="With clear icon"
Description="Input box with the remove icon, click the icon to delete everything.">
<atom:LineEdit Watermark="input with clear icon" Width="400" HorizontalAlignment="Left" IsEnableClearButton="True"/>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Password box"
Description="Input type of password.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit Watermark="input password"
Width="400"
PasswordChar="*"
RevealPassword="False"
<atom:LineEdit Width="400"
HorizontalAlignment="Left"
IsEnableRevealButton="True"/>
<atom:LineEdit Watermark="input password"
Width="400"
PasswordChar="*"
RevealPassword="False"
LeftAddOn="http://"
RightAddOn=".com"
Text="mysite" />
<atom:LineEdit Width="400"
HorizontalAlignment="Left"
RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
Text="mysite" />
<atom:LineEdit Width="400"
HorizontalAlignment="Left"
InnerRightContent=".com"
LeftAddOn="http://"
Text="mysite" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="With clear icon" Description="Input box with the remove icon, click the icon to delete everything.">
<atom:LineEdit Width="400"
HorizontalAlignment="Left"
IsEnableClearButton="True"
Watermark="input with clear icon" />
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Password box" Description="Input type of password.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit Width="400"
HorizontalAlignment="Left"
IsEnableRevealButton="True"
IsEnableClearButton="True"/>
PasswordChar="*"
RevealPassword="False"
Watermark="input password" />
<atom:LineEdit Width="400"
HorizontalAlignment="Left"
IsEnableClearButton="True"
IsEnableRevealButton="True"
PasswordChar="*"
RevealPassword="False"
Watermark="input password" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
<desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit Watermark="Enter your username"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"/>
<atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB"/>
<atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"/>
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
NormalFilledColor=#8C8C8C}"
Watermark="Enter your username" />
<atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB" />
<atom:LineEdit InnerLeftContent="￥"
InnerRightContent="RMB"
IsEnabled="False" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status"
Description="Add status to Input with status, which could be error or warning.">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:LineEdit Watermark="Error" Status="Error"/>
<atom:LineEdit Watermark="Warning" Status="Warning"/>
<atom:LineEdit Watermark="Error with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Error"/>
<atom:LineEdit Watermark="Warning with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Warning"/>
<desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:LineEdit Status="Error" Watermark="Error" />
<atom:LineEdit Status="Warning" Watermark="Warning" />
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Error"
Watermark="Error with prefix" />
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Warning"
Watermark="Warning with prefix" />
<atom:LineEdit Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
<atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Error"
StyleVariant="Filled"
Watermark="Error" />
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Warning"
StyleVariant="Filled"
Watermark="Warning" />
<atom:LineEdit Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Error"
StyleVariant="Borderless"
Watermark="Error" />
<atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Warning"
StyleVariant="Borderless"
Watermark="Warning" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Search box"
Description="Example of creating a search box by grouping a standard input with a search button.">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left"/>
<atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left" SearchButtonText="Search"/>
<desktop:ShowCaseItem Title="Search box" Description="Example of creating a search box by grouping a standard input with a search button.">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:SearchEdit Width="400"
HorizontalAlignment="Left"
Watermark="input search text" />
<atom:SearchEdit Width="400"
HorizontalAlignment="Left"
SearchButtonText="Search"
Watermark="input search text" />
<atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left" SearchButtonStyle="Primary" SearchButtonText="Search"/>
<atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left" SearchButtonStyle="Primary" SearchButtonText="Search"/>
<atom:SearchEdit Watermark="input search text"
Width="400"
<atom:SearchEdit Width="400"
HorizontalAlignment="Left"
SearchButtonStyle="Primary"
SearchButtonText="Search"
IsEnableClearButton="True"
/>
<atom:SearchEdit Watermark="input search text"
Width="400"
Watermark="input search text" />
<atom:SearchEdit Width="400"
HorizontalAlignment="Left"
SearchButtonStyle="Primary"
SearchButtonText="搜索一下"
InnerRightContent="{atom:IconProvider Kind=AudioOutlined, NormalFilledColor=#1677ff, Width=16, Height=16}"
IsEnableClearButton="True"
SizeType="Large"/>
</StackPanel>
</showcase:ShowCaseItem>
SearchButtonText="Search"
Watermark="input search text" />
</showcase:ShowCasePanel>
<atom:SearchEdit Width="400"
HorizontalAlignment="Left"
IsEnableClearButton="True"
SearchButtonStyle="Primary"
SearchButtonText="Search"
Watermark="input search text" />
<atom:SearchEdit Width="400"
HorizontalAlignment="Left"
InnerRightContent="{atom:IconProvider Kind=AudioOutlined,
NormalFilledColor=#1677ff,
Width=16,
Height=16}"
IsEnableClearButton="True"
SearchButtonStyle="Primary"
SearchButtonText="搜索一下"
SizeType="Large"
Watermark="input search text" />
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

30
samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml
View File

@ -1,44 +1,38 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ListBoxShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ListBoxShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic usage"
Description="Basic usage example.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic usage" Description="Basic usage example.">
<atom:ListBox>
<atom:ListBoxItem>Blue</atom:ListBoxItem>
<atom:ListBoxItem>Green</atom:ListBoxItem>
<atom:ListBoxItem>Red</atom:ListBoxItem>
<atom:ListBoxItem>Yellow</atom:ListBoxItem>
</atom:ListBox>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Hover effect"
Description="Disabled item hover effect.">
<desktop:ShowCaseItem Title="Hover effect" Description="Disabled item hover effect.">
<atom:ListBox DisabledItemHoverEffect="True">
<atom:ListBoxItem>Blue</atom:ListBoxItem>
<atom:ListBoxItem>Green</atom:ListBoxItem>
<atom:ListBoxItem>Red</atom:ListBoxItem>
<atom:ListBoxItem>Yellow</atom:ListBoxItem>
</atom:ListBox>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Item disabled"
Description="Disabled item.">
<desktop:ShowCaseItem Title="Item disabled" Description="Disabled item.">
<atom:ListBox>
<atom:ListBoxItem>Blue</atom:ListBoxItem>
<atom:ListBoxItem>Green</atom:ListBoxItem>
<atom:ListBoxItem IsEnabled="False">Red</atom:ListBoxItem>
<atom:ListBoxItem>Yellow</atom:ListBoxItem>
</atom:ListBox>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

112
samples/AtomUI.Demo.Desktop/ShowCase/LoadingIndicatorShowCase.axaml
View File

@ -1,92 +1,94 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.LoadingIndicatorShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.LoadingIndicatorShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic Usage"
Description="A simple loading status.">
<atom:LoadingIndicator/>
</showcase:ShowCaseItem>
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic Usage" Description="A simple loading status.">
<atom:LoadingIndicator />
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="A small LoadingIndicator is used for loading text, default sized LoadingIndicator for loading a card-level block, and large LoadingIndicator used for loading a page.">
<desktop:ShowCaseItem Title="Size" Description="A small LoadingIndicator is used for loading text, default sized LoadingIndicator for loading a card-level block, and large LoadingIndicator used for loading a page.">
<StackPanel Orientation="Horizontal">
<atom:LoadingIndicator SizeType="Small" VerticalAlignment="Center"/>
<atom:LoadingIndicator SizeType="Middle" VerticalAlignment="Center"/>
<atom:LoadingIndicator SizeType="Large" VerticalAlignment="Center"/>
<atom:LoadingIndicator VerticalAlignment="Center" SizeType="Small" />
<atom:LoadingIndicator VerticalAlignment="Center" SizeType="Middle" />
<atom:LoadingIndicator VerticalAlignment="Center" SizeType="Large" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom spinning indicator"
Description="Use custom loading indicator.">
<desktop:ShowCaseItem Title="Custom spinning indicator" Description="Use custom loading indicator.">
<StackPanel Orientation="Horizontal">
<atom:LoadingIndicator SizeType="Small"
VerticalAlignment="Center"
CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,NormalFilledColor=#1677ff}"/>
<atom:LoadingIndicator SizeType="Middle"
VerticalAlignment="Center"
CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,NormalFilledColor=#1677ff}"/>
<atom:LoadingIndicator SizeType="Large"
VerticalAlignment="Center"
CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,NormalFilledColor=#1677ff}"/>
<atom:LoadingIndicator VerticalAlignment="Center"
CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,
NormalFilledColor=#1677ff}"
SizeType="Small" />
<atom:LoadingIndicator VerticalAlignment="Center"
CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,
NormalFilledColor=#1677ff}"
SizeType="Middle" />
<atom:LoadingIndicator VerticalAlignment="Center"
CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,
NormalFilledColor=#1677ff}"
SizeType="Large" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customized description"
Description="Customized description">
<desktop:ShowCaseItem Title="Customized description" Description="Customized description">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:LoadingMaskHost IsLoading="True" SizeType="Small"
<atom:LoadingMaskHost IsLoading="True"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<Border Width="100" Height="100" Background="rgb(251, 251, 251)" />
LoadingMsg="Loading..."
SizeType="Small">
<Border Width="100"
Height="100"
Background="rgb(251, 251, 251)" />
</atom:LoadingMaskHost>
<atom:LoadingMaskHost IsLoading="True" SizeType="Middle"
<atom:LoadingMaskHost IsLoading="True"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<Border Width="100" Height="100" Background="rgb(251, 251, 251)"/>
LoadingMsg="Loading..."
SizeType="Middle">
<Border Width="100"
Height="100"
Background="rgb(251, 251, 251)" />
</atom:LoadingMaskHost>
<atom:LoadingMaskHost IsLoading="True" SizeType="Large"
<atom:LoadingMaskHost IsLoading="True"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<Border Width="100" Height="100" Background="rgb(251, 251, 251)"/>
LoadingMsg="Loading..."
SizeType="Large">
<Border Width="100"
Height="100"
Background="rgb(251, 251, 251)" />
</atom:LoadingMaskHost>
</StackPanel>
<atom:LoadingMaskHost IsLoading="True"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<atom:Alert Message="Alert message title"
Description="Further details about the context of this alert."
Type="Info"/>
<atom:Alert Description="Further details about the context of this alert."
Message="Alert message title"
Type="Info" />
</atom:LoadingMaskHost>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customized description"
Description="Customized description">
<desktop:ShowCaseItem Title="Customized description" Description="Customized description">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LoadingMaskHost IsLoading="{Binding IsLoadingSwitchChecked}"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<atom:Alert Message="Alert message title"
Description="Further details about the context of this alert."
Type="Info"/>
<atom:Alert Description="Further details about the context of this alert."
Message="Alert message title"
Type="Info" />
</atom:LoadingMaskHost>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock>Loading state：</TextBlock>
<atom:ToggleSwitch IsChecked="{Binding IsLoadingSwitchChecked}"/>
<atom:ToggleSwitch IsChecked="{Binding IsLoadingSwitchChecked}" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

161
samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml
View File

@ -1,16 +1,14 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.MenuShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.MenuShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Simplest Usage.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Simplest Usage.">
<atom:Menu>
<atom:MenuItem Header="_File">
<atom:MenuItem Header="New Text File" InputGesture="Ctrl+N" />
@ -24,11 +22,9 @@
</atom:MenuItem>
<atom:MenuItem Header="Disabled Item" IsEnabled="False" />
</atom:Menu>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon and submenu"
Description="With icon and submenu.">
<desktop:ShowCaseItem Title="Icon and submenu" Description="With icon and submenu.">
<atom:Menu>
<atom:MenuItem Header="_File">
<atom:MenuItem Header="New Text File" InputGesture="Ctrl+N" />
@ -44,43 +40,60 @@
<atom:MenuItem Header="_Edit">
<atom:MenuItem Header="Undo" InputGesture="Ctrl+Shift+Z" />
<atom:MenuSeparator />
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
<atom:MenuItem Header="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<atom:MenuItem Header="Paste"
Icon="{atom:IconProvider Kind=FileDoneOutlined}"
InputGesture="Ctrl+P" />
<atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
</atom:MenuItem>
</atom:MenuItem>
</atom:Menu>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="menu item with ToggleType"
Description="Renders a checkbox or radio button on a menu.">
<desktop:ShowCaseItem Title="menu item with ToggleType" Description="Renders a checkbox or radio button on a menu.">
<atom:Menu>
<atom:MenuItem Header="_Menu A">
<atom:MenuItem Header="New Text File" InputGesture="Ctrl+N" ToggleType="Radio" GroupName="Group1" />
<atom:MenuItem Header="New File" InputGesture="Ctrl+Alt+N" ToggleType="Radio" GroupName="Group1" />
<atom:MenuItem Header="New Window" InputGesture="Ctrl+Shift+N" ToggleType="Radio"
GroupName="Group1" />
<atom:MenuItem GroupName="Group1"
Header="New Text File"
InputGesture="Ctrl+N"
ToggleType="Radio" />
<atom:MenuItem GroupName="Group1"
Header="New File"
InputGesture="Ctrl+Alt+N"
ToggleType="Radio" />
<atom:MenuItem GroupName="Group1"
Header="New Window"
InputGesture="Ctrl+Shift+N"
ToggleType="Radio" />
<atom:MenuSeparator />
<atom:MenuItem Header="Save" InputGesture="Ctrl+S" ToggleType="CheckBox" />
<atom:MenuItem Header="Save As..." InputGesture="Ctrl+Shift+S" ToggleType="CheckBox"
Icon="{atom:IconProvider Kind=GithubOutlined}" />
<atom:MenuItem Header="Save All" InputGesture="Ctrl+K" ToggleType="CheckBox"
Icon="{atom:IconProvider Kind=CheckOutlined}" />
<atom:MenuItem Header="Save"
InputGesture="Ctrl+S"
ToggleType="CheckBox" />
<atom:MenuItem Header="Save As..."
Icon="{atom:IconProvider Kind=GithubOutlined}"
InputGesture="Ctrl+Shift+S"
ToggleType="CheckBox" />
<atom:MenuItem Header="Save All"
Icon="{atom:IconProvider Kind=CheckOutlined}"
InputGesture="Ctrl+K"
ToggleType="CheckBox" />
<atom:MenuSeparator />
<atom:MenuItem Header="Exit" />
<atom:MenuItem Header="Disabled" IsEnabled="False"/>
<atom:MenuItem Header="Disabled" IsEnabled="False" />
</atom:MenuItem>
</atom:Menu>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Scrollable menu"
Description="When there are too many menu items, up and down scroll buttons will appear.">
<desktop:ShowCaseItem Title="Scrollable menu" Description="When there are too many menu items, up and down scroll buttons will appear.">
<atom:Menu>
<atom:MenuItem Header="_Menu">
<atom:MenuItem Header="Menu Item" />
@ -121,59 +134,69 @@
<atom:MenuItem Header="Menu Item" />
</atom:MenuItem>
</atom:Menu>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Context menu"
Description="Right click to bring up the context menu.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Context menu" Description="Right click to bring up the context menu.">
<desktop:ShowCaseItem.Styles>
<Style Selector="Border#contextMenuContainer">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="6"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Padding" Value="10" />
<Setter Property="Margin" Value="10" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<Border Name="contextMenuContainer">
<Border.ContextMenu>
<atom:ContextMenu>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
<atom:MenuItem Header="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<atom:MenuItem Header="Paste"
Icon="{atom:IconProvider Kind=FileDoneOutlined}"
InputGesture="Ctrl+P" />
<atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
</atom:MenuItem>
</atom:ContextMenu>
</Border.ContextMenu>
<TextBlock Text="Right Click to show Context Menu" />
</Border>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Menu Flyout"
Description="Right Click to show Context Flyout">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Menu Flyout" Description="Right Click to show Context Flyout">
<desktop:ShowCaseItem.Styles>
<Style Selector="Border#contextFlyoutContainer">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="6"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Padding" Value="10" />
<Setter Property="Margin" Value="10" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<Border Name="contextFlyoutContainer">
<Border.ContextFlyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
<atom:MenuItem Header="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<atom:MenuItem Header="Paste"
Icon="{atom:IconProvider Kind=FileDoneOutlined}"
InputGesture="Ctrl+P" />
<atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
</atom:MenuItem>
</atom:MenuFlyout>
@ -181,7 +204,7 @@
<TextBlock Text="Right Click to show Context Flyout" />
</Border>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

57
samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml
View File

@ -1,61 +1,46 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.MessageShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.MessageShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest usage for Message.">
<atom:Button ButtonType="Primary"
Click="ShowSimpleMessage">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The simplest usage for Message.">
<atom:Button ButtonType="Primary" Click="ShowSimpleMessage">
Display normal message
</atom:Button>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Other types of message"
Description="Messages of success, error and warning types.">
<desktop:ShowCaseItem Title="Other types of message" Description="Messages of success, error and warning types.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Default"
Click="ShowSuccessMessage">
<atom:Button ButtonType="Default" Click="ShowSuccessMessage">
Success
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowInfoMessage">
<atom:Button ButtonType="Default" Click="ShowInfoMessage">
Info
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowWarningMessage">
<atom:Button ButtonType="Default" Click="ShowWarningMessage">
Warning
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowErrorMessage">
<atom:Button ButtonType="Default" Click="ShowErrorMessage">
Error
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Message with loading indicator"
Description="Display a global loading indicator, which is dismissed by itself asynchronously.">
<atom:Button ButtonType="Default"
Click="ShowLoadingMessage">
<desktop:ShowCaseItem Title="Message with loading indicator" Description="Display a global loading indicator, which is dismissed by itself asynchronously.">
<atom:Button ButtonType="Default" Click="ShowLoadingMessage">
Display a loading indicator
</atom:Button>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Callback"
Description="The above example will display a new message when the old message is about to close.">
<atom:Button ButtonType="Default"
Click="ShowSequentialMessage">
<desktop:ShowCaseItem Title="Callback" Description="The above example will display a new message when the old message is about to close.">
<atom:Button ButtonType="Default" Click="ShowSequentialMessage">
Display a loading indicator
</atom:Button>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml.cs
View File

@ -1,4 +1,4 @@
using AtomUI.Controls.Message;
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;

94
samples/AtomUI.Demo.Desktop/ShowCase/NotificationShowCase.axaml
View File

@ -1,116 +1,90 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.NotificationShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.NotificationShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest usage for Notification.">
<atom:Button ButtonType="Primary"
Click="ShowSimpleNotification">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The simplest usage for Notification.">
<atom:Button ButtonType="Primary" Click="ShowSimpleNotification">
Show Notification
</atom:Button>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Duration after which the notification box is closed"
Description="Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to TimeSpan.Zero, the notification box will never close automatically.">
<atom:Button ButtonType="Primary"
Click="ShowNeverCloseNotification">
<desktop:ShowCaseItem Title="Duration after which the notification box is closed" Description="Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to TimeSpan.Zero, the notification box will never close automatically.">
<atom:Button ButtonType="Primary" Click="ShowNeverCloseNotification">
Open the notification box
</atom:Button>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Notification with icon"
Description="A notification box with a icon at the left side.">
<desktop:ShowCaseItem Title="Notification with icon" Description="A notification box with a icon at the left side.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Default"
Click="ShowSuccessNotification">
<atom:Button ButtonType="Default" Click="ShowSuccessNotification">
Success
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowInfoNotification">
<atom:Button ButtonType="Default" Click="ShowInfoNotification">
Info
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowWarningNotification">
<atom:Button ButtonType="Default" Click="ShowWarningNotification">
Warning
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowErrorNotification">
<atom:Button ButtonType="Default" Click="ShowErrorNotification">
Error
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Placement"
Description="A notification box can appear from the top bottom topLeft topRight bottomLeft or bottomRight of the viewport via placement.">
<desktop:ShowCaseItem Title="Placement" Description="A notification box can appear from the top bottom topLeft topRight bottomLeft or bottomRight of the viewport via placement.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Primary"
Click="ShowTopNotification">
<atom:Button ButtonType="Primary" Click="ShowTopNotification">
Top
</atom:Button>
<atom:Button ButtonType="Primary"
Click="ShowBottomNotification">
<atom:Button ButtonType="Primary" Click="ShowBottomNotification">
Bottom
</atom:Button>
</StackPanel>
<atom:Separator />
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Primary"
Click="ShowTopLeftNotification">
<atom:Button ButtonType="Primary" Click="ShowTopLeftNotification">
TopLeft
</atom:Button>
<atom:Button ButtonType="Primary"
Click="ShowTopRightNotification">
<atom:Button ButtonType="Primary" Click="ShowTopRightNotification">
TopRight
</atom:Button>
</StackPanel>
<atom:Separator />
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Primary"
Click="ShowBottomLeftNotification">
<atom:Button ButtonType="Primary" Click="ShowBottomLeftNotification">
BottomLeft
</atom:Button>
<atom:Button ButtonType="Primary"
Click="ShowBottomRightNotification">
<atom:Button ButtonType="Primary" Click="ShowBottomRightNotification">
BottomRight
</atom:Button>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customized Icon"
Description="The icon can be customized to any icon node.">
<atom:Button ButtonType="Primary"
Click="ShowCustomIconNotification">
<desktop:ShowCaseItem Title="Customized Icon" Description="The icon can be customized to any icon node.">
<atom:Button ButtonType="Primary" Click="ShowCustomIconNotification">
Open the notification box
</atom:Button>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Show with progress"
Description="Show progress bar for auto-closing notification.">
<StackPanel Spacing="10" Orientation="Vertical">
<atom:OptionButtonGroup ButtonStyle="Outline" Name="HoverOptionGroup">
<desktop:ShowCaseItem Title="Show with progress" Description="Show progress bar for auto-closing notification.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:OptionButtonGroup Name="HoverOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Pause on hover</atom:OptionButton>
<atom:OptionButton>Don&apos;t pause on hover</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:Button ButtonType="Primary"
Click="ShowProgressNotification">
<atom:Button ButtonType="Primary" Click="ShowProgressNotification">
Show Notification
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

147
samples/AtomUI.Demo.Desktop/ShowCase/NumberUpDownShowCase.axaml
View File

@ -1,86 +1,107 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.NumberUpDownShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.NumberUpDownShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic usage"
Description="Numeric-only NumberUpDown.">
<atom:NumericUpDown Value="3"/>
</showcase:ShowCaseItem>
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic usage" Description="Numeric-only NumberUpDown.">
<atom:NumericUpDown Value="3" />
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three sizes of NumberUpDown"
Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:NumericUpDown SizeType="Large" Value="3"/>
<atom:NumericUpDown SizeType="Middle" Value="3"/>
<atom:NumericUpDown SizeType="Small" Value="3"/>
<desktop:ShowCaseItem Title="Three sizes of NumberUpDown" Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:NumericUpDown SizeType="Large" Value="3" />
<atom:NumericUpDown SizeType="Middle" Value="3" />
<atom:NumericUpDown SizeType="Small" Value="3" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Variants"
Description="Variants of NumberUpDown.">
<desktop:ShowCaseItem Title="Variants" Description="Variants of NumberUpDown.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown Value="3" StyleVariant="Outline"/>
<atom:NumericUpDown Value="3" StyleVariant="Filled"/>
<atom:NumericUpDown Value="3" StyleVariant="Borderless"/>
<atom:NumericUpDown StyleVariant="Outline" Value="3" />
<atom:NumericUpDown StyleVariant="Filled" Value="3" />
<atom:NumericUpDown StyleVariant="Borderless" Value="3" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
<desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
Value="3"/>
<atom:NumericUpDown RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400" HorizontalAlignment="Left"
Value="3"/>
<atom:NumericUpDown LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
Value="3"/>
<atom:NumericUpDown Width="400"
HorizontalAlignment="Left"
LeftAddOn="http://"
RightAddOn=".com"
Value="3" />
<atom:NumericUpDown Width="400"
HorizontalAlignment="Left"
RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
Value="3" />
<atom:NumericUpDown Width="400"
HorizontalAlignment="Left"
InnerRightContent=".com"
LeftAddOn="http://"
Value="3" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="With clear icon"
Description="Input box with the remove icon, click the icon to delete everything.">
<atom:NumericUpDown Watermark="input with clear icon" Width="400" HorizontalAlignment="Left" IsEnableClearButton="True" />
</showcase:ShowCaseItem>
<desktop:ShowCaseItem Title="With clear icon" Description="Input box with the remove icon, click the icon to delete everything.">
<atom:NumericUpDown Width="400"
HorizontalAlignment="Left"
IsEnableClearButton="True"
Watermark="input with clear icon" />
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
<desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown Watermark="Enter your value"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"/>
<atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB"/>
<atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"/>
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
NormalFilledColor=#8C8C8C}"
Watermark="Enter your value" />
<atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" />
<atom:NumericUpDown InnerLeftContent="￥"
InnerRightContent="RMB"
IsEnabled="False" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status"
Description="Add status to Input with status, which could be error or warning.">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:NumericUpDown Watermark="Error" Status="Error"/>
<atom:NumericUpDown Watermark="Warning" Status="Warning"/>
<atom:NumericUpDown Watermark="Error with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Error"/>
<atom:NumericUpDown Watermark="Warning with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Warning"/>
<desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
<StackPanel Margin="0,0,20,0"
Orientation="Vertical"
Spacing="10">
<atom:NumericUpDown Status="Error" Watermark="Error" />
<atom:NumericUpDown Status="Warning" Watermark="Warning" />
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Error"
Watermark="Error with prefix" />
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Warning"
Watermark="Warning with prefix" />
<atom:NumericUpDown Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
<atom:NumericUpDown Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Error"
StyleVariant="Filled"
Watermark="Error" />
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Warning"
StyleVariant="Filled"
Watermark="Warning" />
<atom:NumericUpDown Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:NumericUpDown Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Error"
StyleVariant="Borderless"
Watermark="Error" />
<atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Status="Warning"
StyleVariant="Borderless"
Watermark="Warning" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

6
samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml
View File

@ -1,5 +1,4 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.Overview"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.Overview"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
@ -23,8 +22,7 @@
</Style>
</UserControl.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<TextBlock
Margin="12,0"
<TextBlock Margin="12,0"
FontWeight="600"
Text="Welcome AtomUI for Avalonia/.NET" />
<!-- <StackPanel Margin="20"> -->

4
samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml.cs
View File

@ -1,8 +1,4 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Styling;
namespace AtomUI.Demo.Desktop.ShowCase;

12
samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.PaginationShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PaginationShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

13
samples/AtomUI.Demo.Desktop/ShowCase/PaletteShowCase.axaml
View File

@ -1,5 +1,4 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.PaletteShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PaletteShowCase"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:AtomUI.Demo.Desktop.Controls"
@ -30,13 +29,12 @@
<ItemsControl ItemsSource="{Binding LightLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorGroupViewModel">
<controls:ColorListGroupControl GroupData="{Binding}"
Margin="0, 0, 0, 10" />
<controls:ColorListGroupControl Margin="0,0,0,10" GroupData="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
@ -48,13 +46,12 @@
<ItemsControl ItemsSource="{Binding DarkLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorGroupViewModel">
<controls:ColorListGroupControl GroupData="{Binding}"
Margin="0, 0, 0, 10" />
<controls:ColorListGroupControl Margin="0,0,0,10" GroupData="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

196
samples/AtomUI.Demo.Desktop/ShowCase/PopupConfirmShowCase.axaml
View File

@ -1,38 +1,29 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.PopupConfirmShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PopupConfirmShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic usage"
Description="The basic example supports the title and description props of confirmation.">
<atom:PopupConfirm
Title="Delete the task"
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic usage" Description="The basic example supports the title and description props of confirmation.">
<atom:PopupConfirm Title="Delete the task"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
OkText="Ok">
<atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
</atom:PopupConfirm>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Locale text"
Description="Set okText and cancelText props to customize the button's labels.">
<atom:PopupConfirm
Title="Delete the task"
ConfirmContent="Are you sure to delete this task?">
<desktop:ShowCaseItem Title="Locale text" Description="Set okText and cancelText props to customize the button's labels.">
<atom:PopupConfirm Title="Delete the task" ConfirmContent="Are you sure to delete this task?">
<atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
</atom:PopupConfirm>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
<desktop:ShowCaseItem Title="Placement" Description="There are 12 placement options available.">
<Grid>
<Grid.Styles>
<Style Selector="atom|Button">
@ -41,143 +32,164 @@
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<atom:PopupConfirm
Grid.Row="1" Grid.Column="0" Trigger="Click" Placement="LeftEdgeAlignedTop"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="1"
Grid.Column="0"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="LeftEdgeAlignedTop"
Trigger="Click">
<atom:Button ButtonType="Default">LT</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="2" Grid.Column="0" Trigger="Click" Placement="Left"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="2"
Grid.Column="0"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="Left"
Trigger="Click">
<atom:Button ButtonType="Default">Left</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="3" Grid.Column="0" Trigger="Click" Placement="LeftEdgeAlignedBottom"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="3"
Grid.Column="0"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="LeftEdgeAlignedBottom"
Trigger="Click">
<atom:Button ButtonType="Default">LB</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="0" Grid.Column="1" Trigger="Click" Placement="TopEdgeAlignedLeft"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="0"
Grid.Column="1"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="TopEdgeAlignedLeft"
Trigger="Click">
<atom:Button ButtonType="Default">TL</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="0" Grid.Column="2" Trigger="Click" Placement="Top"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="0"
Grid.Column="2"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="Top"
Trigger="Click">
<atom:Button ButtonType="Default">Top</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="0" Grid.Column="3" Trigger="Click" Placement="TopEdgeAlignedRight"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="0"
Grid.Column="3"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="TopEdgeAlignedRight"
Trigger="Click">
<atom:Button ButtonType="Default">TR</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="1" Grid.Column="4" Trigger="Click" Placement="RightEdgeAlignedTop"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="1"
Grid.Column="4"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="RightEdgeAlignedTop"
Trigger="Click">
<atom:Button ButtonType="Default">RT</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="2" Grid.Column="4" Trigger="Click" Placement="Right"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="2"
Grid.Column="4"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="Right"
Trigger="Click">
<atom:Button ButtonType="Default">Right</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="3" Grid.Column="4" Trigger="Click" Placement="RightEdgeAlignedBottom"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="3"
Grid.Column="4"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="RightEdgeAlignedBottom"
Trigger="Click">
<atom:Button ButtonType="Default">RB</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="4" Grid.Column="1" Trigger="Click" Placement="BottomEdgeAlignedLeft"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="4"
Grid.Column="1"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="BottomEdgeAlignedLeft"
Trigger="Click">
<atom:Button ButtonType="Default">BL</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="4" Grid.Column="2" Trigger="Click" Placement="Bottom"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="4"
Grid.Column="2"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="Bottom"
Trigger="Click">
<atom:Button ButtonType="Default">Bottom</atom:Button>
</atom:PopupConfirm>
<atom:PopupConfirm
Grid.Row="4" Grid.Column="3" Trigger="Click" Placement="BottomEdgeAlignedRight"
Title="Delete the task"
<atom:PopupConfirm Title="Delete the task"
Grid.Row="4"
Grid.Column="3"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
Placement="BottomEdgeAlignedRight"
Trigger="Click">
<atom:Button ButtonType="Default">BR</atom:Button>
</atom:PopupConfirm>
</Grid>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customize icon"
Description="Set icon props to customize the icon.">
<atom:PopupConfirm
Title="Delete the task"
<desktop:ShowCaseItem Title="Customize icon" Description="Set icon props to customize the icon.">
<atom:PopupConfirm Title="Delete the task"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
Icon="{atom:IconProvider Kind=QuestionCircleOutlined}"
ConfirmStatus="Error"
OkText="Ok"
CancelText="Cancel">
Icon="{atom:IconProvider Kind=QuestionCircleOutlined}"
OkText="Ok">
<atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
</atom:PopupConfirm>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

893
samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml
View File

@ -1,339 +1,750 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ProgressBarShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ProgressBarShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|CircleProgress">
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="Margin" Value="5" />
</Style>
<Style Selector="atom|DashboardProgress">
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="Margin" Value="5" />
</Style>
<Style Selector="#CircleWithStep atom|StepsProgressBar">
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="Margin" Value="5" />
</Style>
</showcase:ShowCasePanel.Styles>
<showcase:ShowCaseItem
Title="Progress bar"
Description="A standard progress bar.">
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem Title="Progress bar" Description="A standard progress bar.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" />
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" />
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" ShowProgressInfo="False" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Value="30" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Value="50" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Status="Exception"
Value="70" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
ShowProgressInfo="False"
Value="50" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Circular progress bar"
Description="A circular progress bar.">
<desktop:ShowCaseItem Title="Circular progress bar" Description="A circular progress bar.">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" />
<atom:CircleProgress Value="70" Minimum="0" Maximum="100" Status="Exception" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" />
<atom:CircleProgress Maximum="100"
Minimum="0"
Value="75" />
<atom:CircleProgress Maximum="100"
Minimum="0"
Status="Exception"
Value="70" />
<atom:CircleProgress Maximum="100"
Minimum="0"
Value="100" />
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Mini size progress bar"
Description="Appropriate for a narrow area.">
<WrapPanel Orientation="Horizontal" Width="180" HorizontalAlignment="Left">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" SizeType="Middle" />
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" ShowProgressInfo="False" SizeType="Middle" />
<desktop:ShowCaseItem Title="Mini size progress bar" Description="Appropriate for a narrow area.">
<WrapPanel Width="180"
HorizontalAlignment="Left"
Orientation="Horizontal">
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Value="30" />
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Value="50" />
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Status="Exception"
Value="70" />
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
ShowProgressInfo="False"
SizeType="Middle"
Value="50" />
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="A smaller circular progress bar."
Description="A smaller circular progress bar.">
<desktop:ShowCaseItem Title="A smaller circular progress bar." Description="A smaller circular progress bar.">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:CircleProgress Value="70" Minimum="0" Maximum="100" Status="Exception" SizeType="Middle" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:CircleProgress Maximum="100"
Minimum="0"
SizeType="Middle"
Value="75" />
<atom:CircleProgress Maximum="100"
Minimum="0"
SizeType="Middle"
Status="Exception"
Value="70" />
<atom:CircleProgress Maximum="100"
Minimum="0"
SizeType="Middle"
Value="100" />
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Dynamic"
Description="A dynamic progress bar is better.">
<desktop:ShowCaseItem Title="Dynamic" Description="A dynamic progress bar is better.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="{Binding ProgressValue}" Minimum="0" Maximum="100"/>
<atom:CircleProgress Value="{Binding ProgressValue}" Minimum="0" Maximum="100"/>
<atom:ProgressBar Maximum="100"
Minimum="0"
Value="{Binding ProgressValue}" />
<atom:CircleProgress Maximum="100"
Minimum="0"
Value="{Binding ProgressValue}" />
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button SizeType="Small" Command="{Binding SubProgressValue}">Sub</atom:Button>
<atom:Button SizeType="Small" Command="{Binding AddProgressValue}">Add</atom:Button>
<atom:Button Command="{Binding SubProgressValue}" SizeType="Small">Sub</atom:Button>
<atom:Button Command="{Binding AddProgressValue}" SizeType="Small">Add</atom:Button>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom text format"
Description="You can set a custom text by setting the format prop.">
<desktop:ShowCaseItem Title="Custom text format" Description="You can set a custom text by setting the format prop.">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" ProgressTextFormat="\{0\} Days" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" />
<atom:CircleProgress Maximum="100"
Minimum="0"
ProgressTextFormat="\{0\} Days"
Value="75" />
<atom:CircleProgress Maximum="100"
Minimum="0"
Value="100" />
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Dashboard"
Description="By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.">
<desktop:ShowCaseItem Title="Dashboard" Description="By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.">
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" DashboardGapPosition="Left" />
<atom:DashboardProgress Value="60" Minimum="0" Maximum="100" DashboardGapPosition="Top" />
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" DashboardGapPosition="Right"
GapDegree="40" />
<atom:DashboardProgress Value="100" Minimum="0" Maximum="100" DashboardGapPosition="Bottom"
GapDegree="40" />
<atom:DashboardProgress DashboardGapPosition="Left"
Maximum="100"
Minimum="0"
Value="75" />
<atom:DashboardProgress DashboardGapPosition="Top"
Maximum="100"
Minimum="0"
Value="60" />
<atom:DashboardProgress DashboardGapPosition="Right"
GapDegree="40"
Maximum="100"
Minimum="0"
Value="75" />
<atom:DashboardProgress DashboardGapPosition="Bottom"
GapDegree="40"
Maximum="100"
Minimum="0"
Value="100" />
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Progress bar with success segment"
Description="Show several parts of progress with different status.">
<desktop:ShowCaseItem Title="Progress bar with success segment" Description="Show several parts of progress with different status.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="60" Minimum="0" Maximum="100" SuccessThreshold="30" />
<atom:ProgressBar Maximum="100"
Minimum="0"
SuccessThreshold="30"
Value="60" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="60" Minimum="0" Maximum="100" SuccessThreshold="30" />
<atom:DashboardProgress Value="60" Minimum="0" Maximum="100" SuccessThreshold="30"
SuccessThresholdBrush="Chocolate" />
<atom:CircleProgress Maximum="100"
Minimum="0"
SuccessThreshold="30"
Value="60" />
<atom:DashboardProgress Maximum="100"
Minimum="0"
SuccessThreshold="30"
SuccessThresholdBrush="Chocolate"
Value="60" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Stroke Linecap"
Description="By setting strokeLinecap='butt', you can change the linecaps from round to butt, see stroke-linecap for more information.">
<desktop:ShowCaseItem Title="Stroke Linecap" Description="By setting strokeLinecap='butt', you can change the linecaps from round to butt, see stroke-linecap for more information.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
<atom:ProgressBar Maximum="100"
Minimum="0"
StrokeLineCap="Square"
Value="75" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
<atom:CircleProgress Maximum="100"
Minimum="0"
StrokeLineCap="Square"
Value="75" />
<atom:DashboardProgress Maximum="100"
Minimum="0"
StrokeLineCap="Square"
Value="75" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom line gradient"
Description="Gradient encapsulation, circle and dashboard will ignore strokeLinecap when setting gradient.">
<desktop:ShowCaseItem Title="Custom line gradient" Description="Gradient encapsulation, circle and dashboard will ignore strokeLinecap when setting gradient.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="99" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" Status="Active" />
<atom:ProgressBar IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
Value="99" />
<atom:ProgressBar IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
Status="Active"
Value="50" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="90" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:CircleProgress Value="93" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}" />
<atom:CircleProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
Value="90" />
<atom:CircleProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
Value="100" />
<atom:CircleProgress IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
Value="93" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="90" Minimum="0" Maximum="100" StrokeLineCap="Square"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:DashboardProgress Value="100" Minimum="0" Maximum="100" StrokeLineCap="Square"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:DashboardProgress Value="93" Minimum="0" Maximum="100" StrokeLineCap="Square"
IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}" />
<atom:DashboardProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
StrokeLineCap="Square"
Value="90" />
<atom:DashboardProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
StrokeLineCap="Square"
Value="100" />
<atom:DashboardProgress IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}"
Maximum="100"
Minimum="0"
StrokeLineCap="Square"
Value="93" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Progress bar with steps"
Description="A progress bar with steps.">
<desktop:ShowCaseItem Title="Progress bar with steps" Description="A progress bar with steps.">
<StackPanel Orientation="Vertical" Spacing="5">
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" />
<atom:StepsProgressBar Value="30" Minimum="0" Maximum="100" Steps="5" />
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="5" SizeType="Middle" />
<atom:StepsProgressBar Value="80" Minimum="0" Maximum="100" Steps="8" SizeType="Small" />
<atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="5"
StepsStrokeBrush="{Binding StepsChunkBrushes}" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Steps="3"
Value="50" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Steps="5"
Value="30" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Steps="5"
Value="100" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
SizeType="Small"
Steps="8"
Value="80" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Steps="5"
StepsStrokeBrush="{Binding StepsChunkBrushes}"
Value="60" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Circular progress bar whit steps"
Description="A circular progress bar that support steps and color segments, default gap is 2px.">
<desktop:ShowCaseItem Title="Circular progress bar whit steps" Description="A circular progress bar that support steps and color segments, default gap is 2px.">
<StackPanel Orientation="Vertical" Spacing="5">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" StepCount="4" StepGap="8"
IndicatorThickness="20" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" StepCount="10" StepGap="8"
IndicatorThickness="20" />
<atom:CircleProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20" Status="Exception" />
<atom:CircleProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20"
SuccessThreshold="30" />
<atom:CircleProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
StepCount="4"
StepGap="8"
Value="50" />
<atom:CircleProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
StepCount="10"
StepGap="8"
Value="100" />
<atom:CircleProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
Status="Exception"
StepCount="8"
StepGap="10"
Value="77" />
<atom:CircleProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
StepCount="8"
StepGap="10"
SuccessThreshold="30"
Value="77" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" StepCount="4" StepGap="8"
IndicatorThickness="20" />
<atom:DashboardProgress Value="70" Minimum="0" Maximum="100" StepCount="10" StepGap="8"
IndicatorThickness="20" />
<atom:DashboardProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20" Status="Exception" />
<atom:DashboardProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20"
SuccessThreshold="30" />
<atom:DashboardProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
StepCount="4"
StepGap="8"
Value="50" />
<atom:DashboardProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
StepCount="10"
StepGap="8"
Value="70" />
<atom:DashboardProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
Status="Exception"
StepCount="8"
StepGap="10"
Value="77" />
<atom:DashboardProgress IndicatorThickness="20"
Maximum="100"
Minimum="0"
StepCount="8"
StepGap="10"
SuccessThreshold="30"
Value="77" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Circular progress bar whit steps"
Description="A circular progress bar that support steps and color segments, default gap is 2px.">
<StackPanel Orientation="Vertical" Spacing="5" x:Name="CircleWithStep">
<desktop:ShowCaseItem Title="Circular progress bar whit steps" Description="A circular progress bar that support steps and color segments, default gap is 2px.">
<StackPanel x:Name="CircleWithStep"
Orientation="Vertical"
Spacing="5">
<StackPanel Orientation="Vertical" Spacing="5">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="300">
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Large" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Small" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" IndicatorThickness="20" />
<StackPanel Width="300"
HorizontalAlignment="Left"
Orientation="Vertical">
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Large"
Value="50" />
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Value="50" />
<atom:ProgressBar Maximum="100"
Minimum="0"
SizeType="Small"
Value="50" />
<atom:ProgressBar IndicatorThickness="20"
Maximum="100"
Minimum="0"
Value="50" />
</StackPanel>
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Large"/>
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Middle"/>
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Small"/>
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" Width="20" Height="20"/>
<atom:CircleProgress Maximum="100"
Minimum="0"
SizeType="Large"
Value="50" />
<atom:CircleProgress Maximum="100"
Minimum="0"
SizeType="Middle"
Value="50" />
<atom:CircleProgress Maximum="100"
Minimum="0"
SizeType="Small"
Value="50" />
<atom:CircleProgress Width="20"
Height="20"
Maximum="100"
Minimum="0"
Value="50" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Large"/>
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Middle"/>
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Small"/>
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" Width="20" Height="20"/>
<atom:DashboardProgress Maximum="100"
Minimum="0"
SizeType="Large"
Value="50" />
<atom:DashboardProgress Maximum="100"
Minimum="0"
SizeType="Middle"
Value="50" />
<atom:DashboardProgress Maximum="100"
Minimum="0"
SizeType="Small"
Value="50" />
<atom:DashboardProgress Width="20"
Height="20"
Maximum="100"
Minimum="0"
Value="50" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Large"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Middle"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Small"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" ChunkHeight="20" ChunkWidth="20"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" ChunkHeight="30" ChunkWidth="20"/>
<atom:StepsProgressBar Maximum="100"
Minimum="0"
SizeType="Large"
Steps="3"
Value="50" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
SizeType="Middle"
Steps="3"
Value="50" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
SizeType="Small"
Steps="3"
Value="50" />
<atom:StepsProgressBar ChunkHeight="20"
ChunkWidth="20"
Maximum="100"
Minimum="0"
Steps="3"
Value="50" />
<atom:StepsProgressBar ChunkHeight="30"
ChunkWidth="20"
Maximum="100"
Minimum="0"
Steps="3"
Value="50" />
</WrapPanel>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Change progress value position"
Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
<desktop:ShowCaseItem Title="Change progress value position" Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerStartPercentPosition}"/>
<atom:ProgressBar Value="60" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerCenterPercentPosition}"/>
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerEndPercentPosition}"/>
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Width="300" IndicatorBarBrush="#001342" PercentPosition="{Binding InnerEndPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Width="400" PercentPosition="{Binding InnerCenterPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" PercentPosition="{Binding OutterStartPercentPosition}"/>
<atom:ProgressBar Value="60" Minimum="0" Maximum="100" PercentPosition="{Binding OutterCenterPercentPosition}" SizeType="Small"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" PercentPosition="{Binding OutterCenterPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" PercentPosition="{Binding OutterStartPercentPosition}"/>
<atom:ProgressBar Width="300"
Maximum="100"
Minimum="0"
PercentPosition="{Binding InnerStartPercentPosition}"
Value="30" />
<atom:ProgressBar Width="300"
Maximum="100"
Minimum="0"
PercentPosition="{Binding InnerCenterPercentPosition}"
Value="60" />
<atom:ProgressBar Width="300"
Maximum="100"
Minimum="0"
PercentPosition="{Binding InnerEndPercentPosition}"
Value="50" />
<atom:ProgressBar Width="300"
IndicatorBarBrush="#001342"
Maximum="100"
Minimum="0"
PercentPosition="{Binding InnerEndPercentPosition}"
Value="70" />
<atom:ProgressBar Width="400"
Maximum="100"
Minimum="0"
PercentPosition="{Binding InnerCenterPercentPosition}"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
PercentPosition="{Binding OutterStartPercentPosition}"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
PercentPosition="{Binding OutterCenterPercentPosition}"
SizeType="Small"
Value="60" />
<atom:ProgressBar Maximum="100"
Minimum="0"
PercentPosition="{Binding OutterCenterPercentPosition}"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
PercentPosition="{Binding OutterStartPercentPosition}"
Value="55" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Change progress value position for StepsProgressBar"
Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
<desktop:ShowCaseItem Title="Change progress value position for StepsProgressBar" Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="Start"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center"/>
<atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center" SizeType="Middle"/>
<atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center" SizeType="Small"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="End"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="8" PercentPosition="End" Status="Exception"/>
<atom:StepsProgressBar Value="99" Minimum="0" Maximum="100" Steps="8" PercentPosition="Start"/>
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="Start"
Steps="8"
Value="100" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="Center"
Steps="8"
Value="100" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="Center"
SizeType="Middle"
Steps="8"
Value="60" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="Center"
SizeType="Small"
Steps="8"
Value="60" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="Center"
Steps="8"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="End"
Steps="8"
Value="100" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="End"
Status="Exception"
Steps="8"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
PercentPosition="Start"
Steps="8"
Value="99" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical progress bar"
Description="Ordinary linear progress bar, supports position specification of additional areas">
<StackPanel Orientation="Horizontal" Spacing="10" Height="300">
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" SizeType="Small"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterStartPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterCenterPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterStartPercentPosition}"/>
<desktop:ShowCaseItem Title="Vertical progress bar" Description="Ordinary linear progress bar, supports position specification of additional areas">
<StackPanel Height="300"
Orientation="Horizontal"
Spacing="10">
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
Value="55" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
SizeType="Small"
Value="55" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding OutterStartPercentPosition}"
Value="55" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding OutterCenterPercentPosition}"
Value="55" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding OutterStartPercentPosition}"
Value="100" />
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerStartPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerCenterPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerStartPercentPosition}"/>
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerEndPercentPosition}"/>
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding InnerStartPercentPosition}"
Value="55" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding InnerCenterPercentPosition}"
Value="55" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding InnerStartPercentPosition}"
Value="100" />
<atom:ProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="{Binding InnerEndPercentPosition}"
Value="70" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical progress bar"
Description="Ordinary step progress bar, supports position specification of additional areas">
<StackPanel Orientation="Horizontal" Spacing="10" Height="300">
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" PercentPosition="End"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="5" Orientation="Vertical"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" SizeType="Small"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Center"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
<desktop:ShowCaseItem Title="Vertical progress bar" Description="Ordinary step progress bar, supports position specification of additional areas">
<StackPanel Height="300"
Orientation="Horizontal"
Spacing="10">
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="End"
Steps="10"
Value="100" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
Steps="5"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
SizeType="Small"
Steps="10"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="Start"
Steps="6"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="Center"
Steps="6"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="Start"
Steps="6"
Value="100" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical progress bar"
Description="Ordinary step progress bar, supports position specification of additional areas">
<StackPanel Orientation="Horizontal" Spacing="10" Height="300">
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" PercentPosition="End"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="5" Orientation="Vertical"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" SizeType="Small"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Center"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
<desktop:ShowCaseItem Title="Vertical progress bar" Description="Ordinary step progress bar, supports position specification of additional areas">
<StackPanel Height="300"
Orientation="Horizontal"
Spacing="10">
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="End"
Steps="10"
Value="100" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
Steps="5"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
SizeType="Small"
Steps="10"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="Start"
Steps="6"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="Center"
Steps="6"
Value="55" />
<atom:StepsProgressBar Maximum="100"
Minimum="0"
Orientation="Vertical"
PercentPosition="Start"
Steps="6"
Value="100" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="toggle disabled status"
Description="The progress bar is in the disabled state and uses the disabled style.">
<desktop:ShowCaseItem Title="toggle disabled status" Description="The progress bar is in the disabled state and uses the disabled style.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Value="30" />
<atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Value="50" />
<atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Status="Exception"
Value="70" />
<atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Value="100" />
<atom:StepsProgressBar Value="30" Minimum="0" Maximum="100" Steps="10" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="10" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="70" Minimum="0" Maximum="100" Steps="10" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Steps="10"
Value="30" />
<atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Steps="10"
Value="50" />
<atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Status="Exception"
Steps="10"
Value="70" />
<atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
Steps="10"
Value="100" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
<atom:CircleProgress Value="70" Minimum="0" Maximum="100" SizeType="Middle" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
<atom:CircleProgress IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
SizeType="Middle"
Value="75" />
<atom:CircleProgress IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
SizeType="Middle"
Status="Exception"
Value="70" />
<atom:CircleProgress IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
SizeType="Middle"
Value="100" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
<atom:DashboardProgress Value="70" Minimum="0" Maximum="100" SizeType="Middle" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:DashboardProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
<atom:DashboardProgress IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
SizeType="Middle"
Value="75" />
<atom:DashboardProgress IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
SizeType="Middle"
Status="Exception"
Value="70" />
<atom:DashboardProgress IsEnabled="{Binding ToggleStatus}"
Maximum="100"
Minimum="0"
SizeType="Middle"
Value="100" />
</WrapPanel>
<atom:Button Margin="0, 10, 0, 0"
Text="{Binding ToggleDisabledText}"
Command="{Binding ToggleEnabledStatus}"/>
<atom:Button Margin="0,10,0,0"
Command="{Binding ToggleEnabledStatus}"
Text="{Binding ToggleDisabledText}" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

1
samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml.cs
View File

@ -2,7 +2,6 @@ using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel;
namespace AtomUI.Demo.Desktop.ShowCase;

86
samples/AtomUI.Demo.Desktop/ShowCase/RadioButtonShowCase.axaml
View File

@ -1,82 +1,76 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.RadioButtonShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.RadioButtonShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|RadioButton">
<Setter Property="Margin" Value="0, 0, 5, 10"></Setter>
<Setter Property="Margin" Value="0, 0, 5, 10" />
</Style>
</showcase:ShowCasePanel.Styles>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest use.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem Title="Basic" Description="The simplest use.">
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="10">
<atom:RadioButton>Radio</atom:RadioButton>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled state of RadioButton.">
<desktop:ShowCaseItem Title="Disabled" Description="Disabled state of RadioButton.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<atom:RadioButton x:Name="ToggleDisabledRadioUnChecked">Radio1</atom:RadioButton>
<atom:RadioButton x:Name="ToggleDisabledRadioChecked" IsChecked="True">Radio2</atom:RadioButton>
</StackPanel>
<atom:Button ButtonType="Primary"
x:Name="ToggleDisabledButton"
Margin="0, 20, 0, 0"
<atom:Button x:Name="ToggleDisabledButton"
Margin="0,20,0,0"
ButtonType="Primary"
Command="{Binding $parent[showcase:RadioButtonShowCase].ToggleDisabledStatus}"
CommandParameter="{Binding ElementName=ToggleDisabledButton}">
toggle disabled
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Radio Group"
Description="A group of radio components.">
<desktop:ShowCaseItem Title="Radio Group" Description="A group of radio components.">
<WrapPanel Orientation="Horizontal">
<atom:RadioButton>A</atom:RadioButton>
<atom:RadioButton>B</atom:RadioButton>
<atom:RadioButton>C</atom:RadioButton>
<atom:RadioButton>D</atom:RadioButton>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical Radio Group"
Description="Vertical Radio Group.">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<desktop:ShowCaseItem Title="Vertical Radio Group" Description="Vertical Radio Group.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical">
<atom:RadioButton>Option A</atom:RadioButton>
<atom:RadioButton>Option B</atom:RadioButton>
<atom:RadioButton>Option C</atom:RadioButton>
<atom:RadioButton>Option D</atom:RadioButton>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Option Button"
Description="OptionButton Group.">
<desktop:ShowCaseItem Title="Option Button" Description="OptionButton Group.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
<atom:RadioButton>Pear</atom:RadioButton>
<atom:RadioButton>Orange</atom:RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
<atom:RadioButton>Pear</atom:RadioButton>
<atom:RadioButton IsEnabled="False">Orange</atom:RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Spacing="10">
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="10">
<atom:OptionButtonGroup ButtonStyle="Solid">
<atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
<atom:OptionButton>Pear</atom:OptionButton>
@ -89,11 +83,9 @@
<atom:OptionButton IsEnabled="False">Orange</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="option style"
Description="The combination of option button style.">
<desktop:ShowCaseItem Title="option style" Description="The combination of option button style.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:OptionButtonGroup>
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
@ -118,11 +110,9 @@
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Solid option button"
Description="Solid option button style.">
<desktop:ShowCaseItem Title="Solid option button" Description="Solid option button style.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:OptionButtonGroup ButtonStyle="Solid">
@ -148,11 +138,9 @@
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size type"
Description="There are three sizes available: large, medium, and small. It can coordinate with input box.">
<desktop:ShowCaseItem Title="Size type" Description="There are three sizes available: large, medium, and small. It can coordinate with input box.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:OptionButtonGroup SizeType="Large">
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
@ -177,7 +165,7 @@
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

86
samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml
View File

@ -1,17 +1,17 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.SegmentedShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SegmentedShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The most basic usage.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:Segmented>
<atom:SegmentedItem>Daily</atom:SegmentedItem>
<atom:SegmentedItem>Weekly</atom:SegmentedItem>
@ -20,11 +20,9 @@
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Block Segmented"
Description="block property will make the Segmented fit to its parent width.">
<desktop:ShowCaseItem Title="Block Segmented" Description="block property will make the Segmented fit to its parent width.">
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical">
<atom:Segmented IsExpanding="True">
<atom:SegmentedItem>123</atom:SegmentedItem>
@ -32,12 +30,12 @@
<atom:SegmentedItem>longtext-longtext-longtext-longtext</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled Segmented.">
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Spacing="10">
<desktop:ShowCaseItem Title="Disabled" Description="Disabled Segmented.">
<StackPanel HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<atom:Segmented>
<atom:SegmentedItem IsEnabled="False">Map</atom:SegmentedItem>
<atom:SegmentedItem IsEnabled="False">Transit</atom:SegmentedItem>
@ -51,12 +49,12 @@
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three sizes of Segmented"
Description="There are three sizes of an Segmented: large (40px), default (32px) and small (24px).">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
<desktop:ShowCaseItem Title="Three sizes of Segmented" Description="There are three sizes of an Segmented: large (40px), default (32px) and small (24px).">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:Segmented SizeType="Large">
<atom:SegmentedItem>Daily</atom:SegmentedItem>
<atom:SegmentedItem>Weekly</atom:SegmentedItem>
@ -81,39 +79,37 @@
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="With Icon only"
Description="Set icon without label for Segmented Item.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
<desktop:ShowCaseItem Title="With Icon only" Description="Set icon without label for Segmented Item.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:Segmented>
<atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}"/>
<atom:SegmentedItem Icon="{atom:IconProvider Kind=AppstoreOutlined}"/>
<atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}" />
<atom:SegmentedItem Icon="{atom:IconProvider Kind=AppstoreOutlined}" />
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="With Icon"
Description="Set icon for Segmented Item.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
<desktop:ShowCaseItem Title="With Icon" Description="Set icon for Segmented Item.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:Segmented>
<atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
List
</atom:SegmentedItem>
<atom:SegmentedItem Content="Kanban" Icon="{atom:IconProvider Kind=AppstoreOutlined}"/>
<atom:SegmentedItem Content="Kanban" Icon="{atom:IconProvider Kind=AppstoreOutlined}" />
</atom:Segmented>
<atom:Segmented>
<atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
Ava 牛逼
</atom:SegmentedItem>
<atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}"/>
<atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />
<atom:SegmentedItem Content="微软牛逼"
Icon="{atom:IconProvider Kind=WindowsOutlined}">
</atom:SegmentedItem>
<atom:SegmentedItem Content="微软牛逼" Icon="{atom:IconProvider Kind=WindowsOutlined}" />
</atom:Segmented>
@ -121,15 +117,13 @@
<atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
Ava 牛逼
</atom:SegmentedItem>
<atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}"/>
<atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />
<atom:SegmentedItem Content="微软牛逼"
Icon="{atom:IconProvider Kind=WindowsOutlined}">
</atom:SegmentedItem>
<atom:SegmentedItem Content="微软牛逼" Icon="{atom:IconProvider Kind=WindowsOutlined}" />
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

73
samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml
View File

@ -1,101 +1,104 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.SeparatorShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SeparatorShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Horizontal"
Description="A Separator is horizontal by default. You can add text within Separator.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Horizontal" Description="A Separator is horizontal by default. You can add text within Separator.">
<StackPanel Orientation="Vertical" Spacing="10">
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Title text"/>
<atom:Separator Title="Title text" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Title text"/>
<atom:Separator Title="Title text" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Divider with title"
Description="Divider with inner title, set orientation='left/right' to align it.">
<desktop:ShowCaseItem Title="Divider with title" Description="Divider with inner title, set orientation='left/right' to align it.">
<StackPanel Orientation="Vertical" Spacing="10">
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Text" FontStyle="Italic"/>
<atom:Separator Title="Text" FontStyle="Italic" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Left text" TitlePosition="Left" FontWeight="Bold"/>
<atom:Separator Title="Left text"
FontWeight="Bold"
TitlePosition="Left" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Right text" TitlePosition="Right" FontStyle="Oblique"/>
<atom:Separator Title="Right text"
FontStyle="Oblique"
TitlePosition="Right" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Left Text with 0 orientationMargin" TitlePosition="Left" FontStyle="Oblique" FontWeight="Medium" OrientationMargin="0"/>
<atom:Separator Title="Left Text with 0 orientationMargin"
FontStyle="Oblique"
FontWeight="Medium"
OrientationMargin="0"
TitlePosition="Left" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Right Text with 50px orientationMargin" TitlePosition="Right" TitleColor="Coral" FontWeight="Medium"
OrientationMargin="50"/>
<atom:Separator Title="Right Text with 50px orientationMargin"
FontWeight="Medium"
OrientationMargin="50"
TitleColor="Coral"
TitlePosition="Right" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Text without heading style"
Description="You can use non-heading style of divider text by setting the plain property.">
<desktop:ShowCaseItem Title="Text without heading style" Description="You can use non-heading style of divider text by setting the plain property.">
<StackPanel Orientation="Vertical" Spacing="10">
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Text"/>
<atom:Separator Title="Text" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Left Text" TitlePosition="Left"/>
<atom:Separator Title="Left Text" TitlePosition="Left" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
<atom:Separator Title="Right Text" TitlePosition="Right"/>
<atom:Separator Title="Right Text" TitlePosition="Right" />
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</TextBlock>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical"
Description="Use type='vertical' to make the divider vertical.">
<desktop:ShowCaseItem Title="Vertical" Description="Use type='vertical' to make the divider vertical.">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock>
Item1
</TextBlock>
<atom:VerticalSeparator Title="Right text"/>
<atom:VerticalSeparator Title="Right text" />
<TextBlock>
Item2
</TextBlock>
<atom:VerticalSeparator/>
<atom:VerticalSeparator />
<TextBlock>
Item3
</TextBlock>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

139
samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml
View File

@ -1,141 +1,122 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.SliderShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SliderShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Slider
<atom:Slider IsEnabled="{Binding NormalEnabled}"
Maximum="100"
Minimum="0"
TickFrequency="5"
IsEnabled="{Binding NormalEnabled}"
Value="50"/>
Value="50" />
<atom:Slider
<atom:Slider IsEnabled="{Binding NormalEnabled}"
IsRangeMode="True"
Maximum="100"
Minimum="0"
RangeValue="20, 80"
TickFrequency="5" />
<atom:Slider IsEnabled="{Binding NormalEnabled}"
IsRangeMode="True"
TickFrequency="5"
IsEnabled="{Binding NormalEnabled}"
RangeValue="20, 80"/>
<atom:Slider
Maximum="100"
Minimum="0"
IsEnabled="{Binding NormalEnabled}"
IsRangeMode="True"
TickFrequency="5"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
Maximum="100"
Minimum="0"
RangeValue="20, 80"
TickFrequency="5" />
<StackPanel Orientation="Horizontal" Spacing="2">
<TextBlock>Disabled:</TextBlock>
<atom:ToggleSwitch SizeType="Small" IsChecked="{Binding NormalEnabled}"/>
<atom:ToggleSwitch IsChecked="{Binding NormalEnabled}" SizeType="Small" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customize tooltip"
Description="Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.">
<desktop:ShowCaseItem Title="Customize tooltip" Description="Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Slider
<atom:Slider IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
TickFrequency="1"
IsSnapToTickEnabled="True"
ValueFormatTemplate="\{0\}%"
Value="20"/>
Value="20" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical"
Description="The vertical Slider.">
<StackPanel Orientation="Horizontal" Spacing="20" Height="300">
<atom:Slider
Maximum="100"
<desktop:ShowCaseItem Title="Vertical" Description="The vertical Slider.">
<StackPanel Height="300"
Orientation="Horizontal"
Spacing="20">
<atom:Slider Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="1"
Value="20"/>
<atom:Slider
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="5"
IsRangeMode="True"
RangeValue="20, 80"
Value="20" />
<atom:Slider IsRangeMode="True"
IsSnapToTickEnabled="True"
Value="20"/>
Maximum="100"
Minimum="0"
Orientation="Vertical"
RangeValue="20, 80"
TickFrequency="5"
Value="20" />
<atom:Slider
<atom:Slider Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="1"
Marks="{Binding SliderMarks}"
Value="20"/>
Value="20" />
<atom:Slider
<atom:Slider IsRangeMode="True"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
IsRangeMode="True"
Orientation="Vertical"
TickFrequency="5"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
RangeValue="20, 80"
TickFrequency="5" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Graduated slider"
Description="Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb.
When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.">
<desktop:ShowCaseItem Title="Graduated slider" Description="Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.">
<StackPanel Orientation="Vertical" Spacing="20">
<TextBlock FontWeight="Bold">included=true</TextBlock>
<atom:Slider
<atom:Slider Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
TickFrequency="1"
Marks="{Binding SliderMarks}"
Value="20"/>
Value="20" />
<atom:Slider
<atom:Slider IsRangeMode="True"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
IsRangeMode="True"
TickFrequency="5"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
RangeValue="20, 80"
TickFrequency="5" />
<TextBlock FontWeight="Bold">included=false</TextBlock>
<atom:Slider
<atom:Slider Included="False"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
TickFrequency="1"
Marks="{Binding SliderMarks}"
Included="False"
Value="20"/>
Value="20" />
<atom:Slider
<atom:Slider Included="False"
IsRangeMode="True"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
IsRangeMode="True"
TickFrequency="5"
Included="False"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
RangeValue="20, 80"
TickFrequency="5" />
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

259
samples/AtomUI.Demo.Desktop/ShowCase/SplitButtonShowCase.axaml
View File

@ -1,50 +1,54 @@
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SplitButtonShowCase"
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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase" mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The most basic SplitButton.">
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic SplitButton.">
<atom:SplitButton TriggerType="Hover">
Hover me
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="AtomUI supports three sizes of buttons: small, default and large.
If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Size" Description="AtomUI supports three sizes of buttons: small, default and large. If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|SplitButton">
<Setter Property="Margin" Value="5" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<StackPanel Orientation="Vertical" Spacing="10">
<WrapPanel>
<atom:SplitButton SizeType="Large">
Large
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
@ -52,12 +56,15 @@ If a large or small button is desired, set the size property to either large or
Middle
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
@ -65,80 +72,93 @@ If a large or small button is desired, set the size property to either large or
Small
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
<WrapPanel>
<atom:SplitButton SizeType="Large" IsPrimaryButtonType="True">
<atom:SplitButton IsPrimaryButtonType="True" SizeType="Large">
Large
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton SizeType="Middle" IsPrimaryButtonType="True">
<atom:SplitButton IsPrimaryButtonType="True" SizeType="Middle">
Middle
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton SizeType="Small" IsPrimaryButtonType="True">
<atom:SplitButton IsPrimaryButtonType="True" SizeType="Small">
Small
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Danger Buttons"
Description="danger is a property of button after antd 4.0.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Danger Buttons" Description="danger is a property of button after antd 4.0.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|SplitButton">
<Setter Property="Margin" Value="5" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:SplitButton IsDanger="true">
Default
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
@ -147,38 +167,42 @@ If a large or small button is desired, set the size property to either large or
Primary
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom Icon"
Description="Custom flyout button icon.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Custom Icon" Description="Custom flyout button icon.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|SplitButton">
<Setter Property="Margin" Value="5" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:SplitButton>
Default
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
@ -187,38 +211,42 @@ If a large or small button is desired, set the size property to either large or
Primary
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Flyout trigger type"
Description="Support two kind of Trigger type.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Flyout trigger type" Description="Support two kind of Trigger type.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|SplitButton">
<Setter Property="Margin" Value="5" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:SplitButton TriggerType="Hover">
Hover Me
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
@ -227,16 +255,19 @@ If a large or small button is desired, set the size property to either large or
Click Me
<atom:SplitButton.Flyout>
<atom:MenuFlyout>
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
Icon="{atom:IconProvider Kind=ScissorOutlined}" />
<atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
Icon="{atom:IconProvider Kind=CopyOutlined}" />
<atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
Icon="{atom:IconProvider Kind=DeleteOutlined}" />
<atom:MenuItem Header="Cut"
Icon="{atom:IconProvider Kind=ScissorOutlined}"
InputGesture="Ctrl+X" />
<atom:MenuItem Header="Copy"
Icon="{atom:IconProvider Kind=CopyOutlined}"
InputGesture="Ctrl+C" />
<atom:MenuItem Header="Delete"
Icon="{atom:IconProvider Kind=DeleteOutlined}"
InputGesture="Ctrl+D" />
</atom:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

91
samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml
View File

@ -1,25 +1,25 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.SwitchShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SwitchShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The most basic usage.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="10">
<atom:ToggleSwitch />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled state of Switch.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<desktop:ShowCaseItem Title="Disabled" Description="Disabled state of Switch.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:ToggleSwitch x:Name="ToggleDisabledSwitch" />
<atom:Button ButtonType="Primary"
Command="{Binding $parent[showcase:SwitchShowCase].ToggleDisabledStatus}"
@ -27,60 +27,61 @@
toggle disabled
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Text and icon"
Description="With text and icon.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<atom:ToggleSwitch
OnContent="On"
<desktop:ShowCaseItem Title="Text and icon" Description="With text and icon.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:ToggleSwitch IsChecked="True"
OffContent="Off"
IsChecked="True" />
<atom:ToggleSwitch
OnContent="开"
OffContent="关" />
OnContent="On" />
<atom:ToggleSwitch OffContent="关" OnContent="开" />
<atom:ToggleSwitch>
<atom:ToggleSwitch.OnContent>
<atom:PathIcon Kind="TwitterOutlined"/>
<atom:PathIcon Kind="TwitterOutlined" />
</atom:ToggleSwitch.OnContent>
<atom:ToggleSwitch.OffContent>
<atom:PathIcon Kind="WechatOutlined"/>
<atom:PathIcon Kind="WechatOutlined" />
</atom:ToggleSwitch.OffContent>
</atom:ToggleSwitch>
<atom:ToggleSwitch SizeType="Small">
<atom:ToggleSwitch.OnContent>
<atom:PathIcon Kind="CheckOutlined"/>
<atom:PathIcon Kind="CheckOutlined" />
</atom:ToggleSwitch.OnContent>
<atom:ToggleSwitch.OffContent>
<atom:PathIcon Kind="CloseOutlined"/>
<atom:PathIcon Kind="CloseOutlined" />
</atom:ToggleSwitch.OffContent>
</atom:ToggleSwitch>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Two sizes"
Description="size=Small represents a small sized switch.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<desktop:ShowCaseItem Title="Two sizes" Description="size=Small represents a small sized switch.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:ToggleSwitch />
<atom:ToggleSwitch SizeType="Small" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Loading"
Description="Mark a pending state of switch.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<atom:ToggleSwitch IsLoading="True" IsChecked="true" x:Name="ToggleSwitchDefault" />
<atom:ToggleSwitch SizeType="Small" IsLoading="True" x:Name="ToggleSwitchSmall" />
<atom:Button ButtonType="Primary"
x:Name="ToggleLoadingStatusBtn"
<desktop:ShowCaseItem Title="Loading" Description="Mark a pending state of switch.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:ToggleSwitch x:Name="ToggleSwitchDefault"
IsChecked="true"
IsLoading="True" />
<atom:ToggleSwitch x:Name="ToggleSwitchSmall"
IsLoading="True"
SizeType="Small" />
<atom:Button x:Name="ToggleLoadingStatusBtn"
ButtonType="Primary"
Command="{Binding $parent[showcase:SwitchShowCase].ToggleLoadingStatus}"
CommandParameter="{Binding ElementName=ToggleLoadingStatusBtn}">
toggle loading
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

192
samples/AtomUI.Demo.Desktop/ShowCase/TabControlShowCase.axaml
View File

@ -1,18 +1,16 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TabControlShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TabControlShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<TabControl>
<TabItem Header="TabControl">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Default activate first tab.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Default activate first tab.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabControl>
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
@ -20,11 +18,9 @@
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:TabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled a tab.">
<desktop:ShowCaseItem Title="Disabled" Description="Disabled a tab.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabControl>
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
@ -38,11 +34,9 @@
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:TabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Centered"
Description="Centered tabs.">
<desktop:ShowCaseItem Title="Centered" Description="Centered tabs.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabControl TabAlignmentCenter="True">
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
@ -57,11 +51,9 @@
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon"
Description="The Tab with Icon.">
<desktop:ShowCaseItem Title="Icon" Description="The Tab with Icon.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabControl>
<atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
@ -70,11 +62,9 @@
</atom:TabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Slide"
Description="In order to fit in more tabs, they can slide left and right (or up and down).">
<desktop:ShowCaseItem Title="Slide" Description="In order to fit in more tabs, they can slide left and right (or up and down).">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabControl>
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
@ -122,11 +112,9 @@
<atom:TabItem Header="Tab 20">Content of Tab Pane 20</atom:TabItem>
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Card type tab"
Description="Another type of Tabs, which doesn't support vertical mode.">
<desktop:ShowCaseItem Title="Card type tab" Description="Another type of Tabs, which doesn't support vertical mode.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabControl>
@ -136,15 +124,13 @@
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Position"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
<desktop:ShowCaseItem Title="Position" Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionTabControlOptionGroup">
<atom:OptionButtonGroup Name="PositionTabControlOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
@ -153,12 +139,12 @@
</StackPanel>
<atom:TabControl Name="PositionTabControl"
DockPanel.Dock="{Binding PositionTabControlPlacement}"
TabStripPlacement="{Binding PositionTabControlPlacement}"
Height="300"
Width="400"
Height="300"
HorizontalAlignment="Left"
VerticalAlignment="Top">
VerticalAlignment="Top"
DockPanel.Dock="{Binding PositionTabControlPlacement}"
TabStripPlacement="{Binding PositionTabControlPlacement}">
<atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
<atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
@ -170,16 +156,15 @@
</atom:TabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Card Shape Position"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile."
Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Card Shape Position"
Margin="0,0,10,0"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionCardTabControlOptionGroup">
<atom:OptionButtonGroup Name="PositionCardTabControlOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
@ -188,13 +173,13 @@
</StackPanel>
<atom:CardTabControl Name="PositionCardTabControl"
DockPanel.Dock="{Binding PositionCardTabControlPlacement}"
TabStripPlacement="{Binding PositionCardTabControlPlacement}"
IsShowAddTabButton="True"
Height="300"
Width="500"
Height="300"
HorizontalAlignment="Left"
VerticalAlignment="Top">
VerticalAlignment="Top"
DockPanel.Dock="{Binding PositionCardTabControlPlacement}"
IsShowAddTabButton="True"
TabStripPlacement="{Binding PositionCardTabControlPlacement}">
<atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
<atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
@ -210,15 +195,13 @@
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
<desktop:ShowCaseItem Title="Size" Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="SizeTypeTabControlOptionGroup">
<atom:OptionButtonGroup Name="SizeTypeTabControlOptionGroup" ButtonStyle="Outline">
<atom:OptionButton>Small</atom:OptionButton>
<atom:OptionButton IsChecked="True">Middle</atom:OptionButton>
<atom:OptionButton>Large</atom:OptionButton>
@ -240,27 +223,25 @@
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Add and close tab"
Description="Hide default plus icon, and bind event for customized trigger." Margin="0, 0, 30, 0">
<atom:CardTabControl IsShowAddTabButton="True" Name="AddTabDemoTabControl">
<desktop:ShowCaseItem Title="Add and close tab"
Margin="0,0,30,0"
Description="Hide default plus icon, and bind event for customized trigger.">
<atom:CardTabControl Name="AddTabDemoTabControl" IsShowAddTabButton="True">
<atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
<atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
<atom:TabItem Header="Tab 4" Icon="{atom:IconProvider Kind=WechatOutlined}">Content of Tab Pane 4</atom:TabItem>
</atom:CardTabControl>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</TabItem>
<TabItem Header="TabStrip">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Default activate first tab.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Default activate first tab.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabStrip>
<atom:TabStripItem>Tab 1</atom:TabStripItem>
@ -268,15 +249,13 @@
<atom:TabStripItem>Tab 3</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled a tab.">
<desktop:ShowCaseItem Title="Disabled" Description="Disabled a tab.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabStrip>
<atom:TabStripItem>Tab 1</atom:TabStripItem>
<atom:TabStripItem IsEnabled="False" IsClosable="True">Tab 2</atom:TabStripItem>
<atom:TabStripItem IsClosable="True" IsEnabled="False">Tab 2</atom:TabStripItem>
<atom:TabStripItem>Tab 3</atom:TabStripItem>
</atom:CardTabStrip>
@ -286,11 +265,9 @@
<atom:TabStripItem>Tab 3</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Centered"
Description="Centered tabs.">
<desktop:ShowCaseItem Title="Centered" Description="Centered tabs.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabStrip TabAlignmentCenter="True">
<atom:TabStripItem>Tab 1</atom:TabStripItem>
@ -305,11 +282,9 @@
</atom:CardTabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon"
Description="The Tab with Icon.">
<desktop:ShowCaseItem Title="Icon" Description="The Tab with Icon.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabStrip>
<atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
@ -317,11 +292,9 @@
<atom:TabStripItem Icon="{atom:IconProvider Kind=WechatOutlined}">Tab 3</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Slide"
Description="In order to fit in more tabs, they can slide left and right (or up and down).">
<desktop:ShowCaseItem Title="Slide" Description="In order to fit in more tabs, they can slide left and right (or up and down).">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabStrip>
<atom:TabStripItem>Tab 1</atom:TabStripItem>
@ -349,11 +322,9 @@
<atom:TabStripItem>Tab 23</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Card type tab"
Description="Another type of Tabs, which doesn't support vertical mode.">
<desktop:ShowCaseItem Title="Card type tab" Description="Another type of Tabs, which doesn't support vertical mode.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabStrip>
<atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
@ -363,15 +334,13 @@
</atom:CardTabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Position"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
<desktop:ShowCaseItem Title="Position" Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionTabStripOptionGroup">
<atom:OptionButtonGroup Name="PositionTabStripOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
@ -388,23 +357,23 @@
<atom:TabStripItem>Tab 3</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
</atom:TabStrip>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
<Border HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="rgb(241, 243, 246)">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab Content</TextBlock>
</Border>
</DockPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Card Shape Position"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile."
Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="Card Shape Position"
Margin="0,0,10,0"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionCardTabStripOptionGroup">
<atom:OptionButtonGroup Name="PositionCardTabStripOptionGroup" ButtonStyle="Outline">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
@ -415,29 +384,28 @@
<DockPanel Height="300">
<atom:CardTabStrip Name="PositionCardTabStrip"
DockPanel.Dock="{Binding PositionCardTabStripPlacement}"
TabStripPlacement="{Binding PositionCardTabStripPlacement}"
IsShowAddTabButton="True">
IsShowAddTabButton="True"
TabStripPlacement="{Binding PositionCardTabStripPlacement}">
<atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=AndroidOutlined}">Tab 2</atom:TabStripItem>
<atom:TabStripItem>Tab 3</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
</atom:CardTabStrip>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
<Border HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="rgb(241, 243, 246)">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab Content</TextBlock>
</Border>
</DockPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size"
Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
<desktop:ShowCaseItem Title="Size" Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="SizeTypeTabStripOptionGroup">
<atom:OptionButtonGroup Name="SizeTypeTabStripOptionGroup" ButtonStyle="Outline">
<atom:OptionButton>Small</atom:OptionButton>
<atom:OptionButton IsChecked="True">Middle</atom:OptionButton>
<atom:OptionButton>Large</atom:OptionButton>
@ -459,22 +427,22 @@
</atom:CardTabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Add and close tab"
Description="Hide default plus icon, and bind event for customized trigger." Margin="0, 0, 30, 0">
<desktop:ShowCaseItem Title="Add and close tab"
Margin="0,0,30,0"
Description="Hide default plus icon, and bind event for customized trigger.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabStrip IsShowAddTabButton="True" Name="AddTabDemoStrip">
<atom:CardTabStrip Name="AddTabDemoStrip" IsShowAddTabButton="True">
<atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=AndroidOutlined}">Tab 2</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=WechatOutlined}">Tab 3</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
</atom:CardTabStrip>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</TabItem>
</TabControl>
</UserControl>

107
samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml
View File

@ -1,21 +1,19 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TagShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TagShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|Tag">
<Setter Property="Margin" Value="5" />
</Style>
</showcase:ShowCasePanel.Styles>
<showcase:ShowCaseItem
Title="Basic"
Description="Usage of basic Tag, and it could be IsClosable and customize close button by set closeIcon property,will display default close button when closeIcon is setting to true. IsClosable Tag supports onClose events.">
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem Title="Basic" Description="Usage of basic Tag, and it could be IsClosable and customize close button by set closeIcon property,will display default close button when closeIcon is setting to true. IsClosable Tag supports onClose events.">
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:Tag>Tag 1</atom:Tag>
<atom:Tag>Link</atom:Tag>
@ -27,13 +25,15 @@
Tag 2
</atom:Tag>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Colorful Tag"
Description="We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.">
<desktop:ShowCaseItem Title="Colorful Tag" Description="We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 0, 0, 10">Presets</TextBlock>
<TextBlock Margin="0,0,0,10"
FontSize="14"
FontWeight="Bold">
Presets
</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="magenta">magenta</atom:Tag>
<atom:Tag TagColor="red">red</atom:Tag>
@ -48,22 +48,28 @@
<atom:Tag TagColor="purple">purple</atom:Tag>
</WrapPanel>
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
<TextBlock Margin="0,20,0,10"
FontSize="14"
FontWeight="Bold">
Custom
</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="#f50">#f50</atom:Tag>
<atom:Tag TagColor="#2db7f5" IsClosable="True">#2db7f5</atom:Tag>
<atom:Tag IsClosable="True" TagColor="#2db7f5">#2db7f5</atom:Tag>
<atom:Tag TagColor="#87d068">#87d068</atom:Tag>
<atom:Tag TagColor="#108ee9">#108ee9</atom:Tag>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status Tag"
Description="We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.">
<desktop:ShowCaseItem Title="Status Tag" Description="We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.">
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 0, 0, 10">Without icon</TextBlock>
<TextBlock Margin="0,0,0,10"
FontSize="14"
FontWeight="Bold">
Without icon
</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="success">success</atom:Tag>
<atom:Tag TagColor="info">processing</atom:Tag>
@ -72,7 +78,11 @@
<atom:Tag TagColor="default">default</atom:Tag>
</WrapPanel>
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
<TextBlock Margin="0,20,0,10"
FontSize="14"
FontWeight="Bold">
Custom
</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="success">
<atom:Tag.Icon>
@ -113,12 +123,9 @@
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon"
Description="Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.">
<desktop:ShowCaseItem Title="Icon" Description="Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag. If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.">
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:Tag TagColor="#55acee">
<atom:Tag.Icon>
@ -145,11 +152,9 @@ If you want specific control over the positioning and placement of the Icon, the
Linkedin
</atom:Tag>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="borderless"
Description="borderless">
<desktop:ShowCaseItem Title="borderless" Description="borderless">
<StackPanel Orientation="Vertical">
<WrapPanel HorizontalAlignment="Left">
<atom:Tag Bordered="False">Tag1</atom:Tag>
@ -158,28 +163,30 @@ If you want specific control over the positioning and placement of the Icon, the
<atom:Tag Bordered="False" IsClosable="True">Tag4</atom:Tag>
</WrapPanel>
<atom:Separator FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 20"/>
<atom:Separator Margin="0,20,0,20"
FontSize="14"
FontWeight="Bold" />
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="magenta" Bordered="False">magenta</atom:Tag>
<atom:Tag TagColor="red" Bordered="False">red</atom:Tag>
<atom:Tag TagColor="volcano" Bordered="False">volcano</atom:Tag>
<atom:Tag TagColor="orange" Bordered="False">orange</atom:Tag>
<atom:Tag TagColor="gold" Bordered="False">gold</atom:Tag>
<atom:Tag TagColor="lime" Bordered="False">lime</atom:Tag>
<atom:Tag TagColor="green" Bordered="False">green</atom:Tag>
<atom:Tag TagColor="cyan" Bordered="False">cyan</atom:Tag>
<atom:Tag TagColor="blue" Bordered="False">blue</atom:Tag>
<atom:Tag TagColor="geekblue" Bordered="False">geekblue</atom:Tag>
<atom:Tag TagColor="purple" Bordered="False">purple</atom:Tag>
<atom:Tag Bordered="False" TagColor="magenta">magenta</atom:Tag>
<atom:Tag Bordered="False" TagColor="red">red</atom:Tag>
<atom:Tag Bordered="False" TagColor="volcano">volcano</atom:Tag>
<atom:Tag Bordered="False" TagColor="orange">orange</atom:Tag>
<atom:Tag Bordered="False" TagColor="gold">gold</atom:Tag>
<atom:Tag Bordered="False" TagColor="lime">lime</atom:Tag>
<atom:Tag Bordered="False" TagColor="green">green</atom:Tag>
<atom:Tag Bordered="False" TagColor="cyan">cyan</atom:Tag>
<atom:Tag Bordered="False" TagColor="blue">blue</atom:Tag>
<atom:Tag Bordered="False" TagColor="geekblue">geekblue</atom:Tag>
<atom:Tag Bordered="False" TagColor="purple">purple</atom:Tag>
<atom:Tag TagColor="success" Bordered="False">success</atom:Tag>
<atom:Tag TagColor="info" Bordered="False">processing</atom:Tag>
<atom:Tag TagColor="error" Bordered="False">error</atom:Tag>
<atom:Tag TagColor="warning" Bordered="False">warning</atom:Tag>
<atom:Tag Bordered="False" TagColor="success">success</atom:Tag>
<atom:Tag Bordered="False" TagColor="info">processing</atom:Tag>
<atom:Tag Bordered="False" TagColor="error">error</atom:Tag>
<atom:Tag Bordered="False" TagColor="warning">warning</atom:Tag>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

150
samples/AtomUI.Demo.Desktop/ShowCase/TimePickerShowCase.axaml
View File

@ -1,145 +1,137 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TimePickerShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TimePickerShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Click TimePicker, and then we could select or input a time in panel.">
<atom:TimePicker Watermark="Select time" Width="200" />
</showcase:ShowCaseItem>
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Click TimePicker, and then we could select or input a time in panel.">
<atom:TimePicker Width="200" Watermark="Select time" />
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Three Sizes"
Description="The input box comes in three sizes: large, middle and small. Large is used in the form, while the medium size is the default.">
<desktop:ShowCaseItem Title="Three Sizes" Description="The input box comes in three sizes: large, middle and small. Large is used in the form, while the medium size is the default.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Watermark="Select time" Width="160" SizeType="Large" DefaultTime="12:08:23"/>
<atom:TimePicker Watermark="Select time" Width="160" SizeType="Middle" DefaultTime="12:08:23"/>
<atom:TimePicker Watermark="Select time" Width="160" SizeType="Small" DefaultTime="12:08:23"/>
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
SizeType="Large"
Watermark="Select time" />
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
SizeType="Middle"
Watermark="Select time" />
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
SizeType="Small"
Watermark="Select time" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="A disabled state of the TimePicker.">
<desktop:ShowCaseItem Title="Disabled" Description="A disabled state of the TimePicker.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Watermark="Select time" Width="160" IsEnabled="False" DefaultTime="12:08:23"/>
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
IsEnabled="False"
Watermark="Select time" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Interval option"
Description="Show stepped options by MinuteIncrement SecondIncrement.">
<desktop:ShowCaseItem Title="Interval option" Description="Show stepped options by MinuteIncrement SecondIncrement.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Watermark="Select time"
Width="160"
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
MinuteIncrement="15"
SecondIncrement="10"
/>
Watermark="Select time" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="12 hours"
Description="TimePicker of 12 hours format, with default format h:mm:ss a.">
<desktop:ShowCaseItem Title="12 hours" Description="TimePicker of 12 hours format, with default format h:mm:ss a.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Watermark="Select time"
Width="160"
DefaultTime="12:08:23"
<atom:TimePicker Width="160"
ClockIdentifier="HourClock12"
/>
<atom:TimePicker Watermark="Select time"
Width="160"
DefaultTime="12:08:23"
Watermark="Select time" />
<atom:TimePicker Width="160"
ClockIdentifier="HourClock24"
/>
DefaultTime="12:08:23"
Watermark="Select time" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Variants"
Description="Bordered-less style component.">
<desktop:ShowCaseItem Title="Variants" Description="Bordered-less style component.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Watermark="Outline"
Width="160"
<atom:TimePicker Width="160"
StyleVariant="Outline"
/>
Watermark="Outline" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
RangeStartWatermark="Outline"/>
RangeStartWatermark="Outline"
StyleVariant="Outline" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Watermark="Filled"
Width="160"
StyleVariant="Filled" />
<atom:TimePicker Width="160"
StyleVariant="Filled"
Watermark="Filled" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
RangeStartWatermark="Filled"/>
RangeStartWatermark="Filled"
StyleVariant="Outline" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Watermark="Borderless"
Width="160"
StyleVariant="Borderless" />
<atom:RangeTimePicker Width="320"
<atom:TimePicker Width="160"
StyleVariant="Borderless"
RangeStartWatermark="Borderless"/>
Watermark="Borderless" />
<atom:RangeTimePicker Width="320"
RangeStartWatermark="Borderless"
StyleVariant="Borderless" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Status"
Description="Add status to TimePicker with status, which could be error or warning.">
<desktop:ShowCaseItem Title="Status" Description="Add status to TimePicker with status, which could be error or warning.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Width="160"
Status="Default"
Watermark="Select time" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
RangeEndWatermark="End time"
RangeStartWatermark="Start time"
Status="Default"
RangeStartWatermark="Start time"
RangeEndWatermark="End time" />
StyleVariant="Outline" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Width="160"
Status="Warning"
Watermark="Select time" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
Status="Warning"
RangeEndWatermark="End time"
RangeStartWatermark="Start time"
RangeEndWatermark="End time" />
Status="Warning"
StyleVariant="Outline" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Width="160"
Status="Error"
Watermark="Select time" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
Status="Error"
RangeEndWatermark="End time"
RangeStartWatermark="Start time"
RangeEndWatermark="End time"/>
Status="Error"
StyleVariant="Outline" />
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Time Range Picker"
Description="Use time range picker with RangeTimePicker.">
<desktop:ShowCaseItem Title="Time Range Picker" Description="Use time range picker with RangeTimePicker.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:RangeTimePicker Width="320"
Status="Default"
RangeEndWatermark="End time"
RangeStartWatermark="Start time"
RangeEndWatermark="End time"/>
Status="Default" />
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

12
samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TimelineShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TimelineShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

12
samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TitleBarShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TitleBarShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

12
samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml
View File

@ -1,13 +1,11 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ToolBarShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ToolBarShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<desktop:ShowCasePanel />
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

250
samples/AtomUI.Demo.Desktop/ShowCase/TooltipShowCase.axaml
View File

@ -1,27 +1,23 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TooltipShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TooltipShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest usage.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The simplest usage.">
<StackPanel Orientation="Vertical" Spacing="10">
<TextBlock atom:ToolTip.Placement="Top" HorizontalAlignment="Left">
<TextBlock HorizontalAlignment="Left" atom:ToolTip.Placement="Top">
Tooltip will show on mouse enter.
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
</TextBlock>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
<desktop:ShowCaseItem Title="Placement" Description="There are 12 placement options available.">
<Grid>
<Grid.Styles>
<Style Selector="atom|Button">
@ -30,78 +26,100 @@
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<atom:Button Grid.Row="1" Grid.Column="0" Text="LT">
<atom:Button Grid.Row="1"
Grid.Column="0"
Text="LT">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>LeftEdgeAlignedTop</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="2" Grid.Column="0" Text="Left">
<atom:Button Grid.Row="2"
Grid.Column="0"
Text="Left">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Left</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="3" Grid.Column="0" Text="LB">
<atom:Button Grid.Row="3"
Grid.Column="0"
Text="LB">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>LeftEdgeAlignedBottom</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="0" Grid.Column="1" Text="TL">
<atom:Button Grid.Row="0"
Grid.Column="1"
Text="TL">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>TopEdgeAlignedLeft</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="0" Grid.Column="2" Text="Top">
<atom:Button Grid.Row="0"
Grid.Column="2"
Text="Top">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="0" Grid.Column="3" Text="TR">
<atom:Button Grid.Row="0"
Grid.Column="3"
Text="TR">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>TopEdgeAlignedRight</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="1" Grid.Column="4" Text="RT">
<atom:Button Grid.Row="1"
Grid.Column="4"
Text="RT">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>RightEdgeAlignedTop</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="2" Grid.Column="4" Text="Right">
<atom:Button Grid.Row="2"
Grid.Column="4"
Text="Right">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Right</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="3" Grid.Column="4" Text="RB">
<atom:Button Grid.Row="3"
Grid.Column="4"
Text="RB">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>RightEdgeAlignedBottom</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="4" Grid.Column="1" Text="BL">
<atom:Button Grid.Row="4"
Grid.Column="1"
Text="BL">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>BottomEdgeAlignedLeft</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="4" Grid.Column="2" Text="Bottom">
<atom:Button Grid.Row="4"
Grid.Column="2"
Text="Bottom">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Bottom</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="4" Grid.Column="3" Text="BR">
<atom:Button Grid.Row="4"
Grid.Column="3"
Text="BR">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>BottomEdgeAlignedRight</atom:ToolTip.Placement>
</atom:Button>
</Grid>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Arrow"
Description="Support show, hide or keep arrow in the center.">
<desktop:ShowCaseItem Title="Arrow" Description="Support show, hide or keep arrow in the center.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Segmented x:Name="ArrowSegmented">
<atom:SegmentedItem>Show</atom:SegmentedItem>
@ -116,208 +134,238 @@
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<atom:Button Grid.Row="1" Grid.Column="0" Text="LT"
<atom:Button Grid.Row="1"
Grid.Column="0"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="LT">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>LeftEdgeAlignedTop</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="2" Grid.Column="0" Text="Left"
<atom:Button Grid.Row="2"
Grid.Column="0"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="Left">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Left</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="3" Grid.Column="0" Text="LB"
<atom:Button Grid.Row="3"
Grid.Column="0"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="LB">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>LeftEdgeAlignedBottom</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="0" Grid.Column="1" Text="TL"
<atom:Button Grid.Row="0"
Grid.Column="1"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="TL">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>TopEdgeAlignedLeft</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="0" Grid.Column="2" Text="Top"
<atom:Button Grid.Row="0"
Grid.Column="2"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="Top">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="0" Grid.Column="3" Text="TR"
<atom:Button Grid.Row="0"
Grid.Column="3"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="TR">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>TopEdgeAlignedRight</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="1" Grid.Column="4" Text="RT"
<atom:Button Grid.Row="1"
Grid.Column="4"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="RT">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>RightEdgeAlignedTop</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="2" Grid.Column="4" Text="Right"
<atom:Button Grid.Row="2"
Grid.Column="4"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="Right">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Right</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="3" Grid.Column="4" Text="RB"
<atom:Button Grid.Row="3"
Grid.Column="4"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="RB">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>RightEdgeAlignedBottom</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="4" Grid.Column="1" Text="BL"
<atom:Button Grid.Row="4"
Grid.Column="1"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="BL">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>BottomEdgeAlignedLeft</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="4" Grid.Column="2" Text="Bottom"
<atom:Button Grid.Row="4"
Grid.Column="2"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="Bottom">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Bottom</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Grid.Row="4" Grid.Column="3" Text="BR"
<atom:Button Grid.Row="4"
Grid.Column="3"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
Text="BR">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>BottomEdgeAlignedRight</atom:ToolTip.Placement>
</atom:Button>
</Grid>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Colorful Tooltip"
Description="We preset a series of colorful Tooltip styles for use in different situations.">
<showcase:ShowCaseItem.Styles>
<desktop:ShowCaseItem Title="Colorful Tooltip" Description="We preset a series of colorful Tooltip styles for use in different situations.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|Button">
<Setter Property="Margin" Value="5" />
</Style>
</showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem.Styles>
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 0, 0, 10">Presets</TextBlock>
<TextBlock Margin="0,0,0,10"
FontSize="14"
FontWeight="Bold">
Presets
</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Button Text="Blue" atom:ToolTip.PresetColor="Blue">
<atom:Button atom:ToolTip.PresetColor="Blue" Text="Blue">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Red" atom:ToolTip.PresetColor="Red">
<atom:Button atom:ToolTip.PresetColor="Red" Text="Red">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Volcano" atom:ToolTip.PresetColor="Volcano">
<atom:Button atom:ToolTip.PresetColor="Volcano" Text="Volcano">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Orange" atom:ToolTip.PresetColor="Orange">
<atom:Button atom:ToolTip.PresetColor="Orange" Text="Orange">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Gold" atom:ToolTip.PresetColor="Gold">
<atom:Button atom:ToolTip.PresetColor="Gold" Text="Gold">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Yellow" atom:ToolTip.PresetColor="Yellow">
<atom:Button atom:ToolTip.PresetColor="Yellow" Text="Yellow">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Lime" atom:ToolTip.PresetColor="Lime">
<atom:Button atom:ToolTip.PresetColor="Lime" Text="Lime">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Green" atom:ToolTip.PresetColor="Green">
<atom:Button atom:ToolTip.PresetColor="Green" Text="Green">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Cyan" atom:ToolTip.PresetColor="Cyan">
<atom:Button atom:ToolTip.PresetColor="Cyan" Text="Cyan">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="GeekBlue" atom:ToolTip.PresetColor="GeekBlue">
<atom:Button atom:ToolTip.PresetColor="GeekBlue" Text="GeekBlue">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Purple" atom:ToolTip.PresetColor="Purple">
<atom:Button atom:ToolTip.PresetColor="Purple" Text="Purple">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Pink" atom:ToolTip.PresetColor="Pink">
<atom:Button atom:ToolTip.PresetColor="Pink" Text="Pink">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Magenta" atom:ToolTip.PresetColor="Magenta">
<atom:Button atom:ToolTip.PresetColor="Magenta" Text="Magenta">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="Grey" atom:ToolTip.PresetColor="Grey">
<atom:Button atom:ToolTip.PresetColor="Grey" Text="Grey">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
</WrapPanel>
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
<TextBlock Margin="0,20,0,10"
FontSize="14"
FontWeight="Bold">
Custom
</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Button Text="#f50" atom:ToolTip.Color="#f50">
<atom:Button atom:ToolTip.Color="#f50" Text="#f50">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="#2db7f5" atom:ToolTip.Color="#2db7f5">
<atom:Button atom:ToolTip.Color="#2db7f5" Text="#2db7f5">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="#87d068" atom:ToolTip.Color="#87d068">
<atom:Button atom:ToolTip.Color="#87d068" Text="#87d068">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
<atom:Button Text="#108ee9" atom:ToolTip.Color="#108ee9">
<atom:Button atom:ToolTip.Color="#108ee9" Text="#108ee9">
<atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
<atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
</atom:Button>
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

97
samples/AtomUI.Demo.Desktop/ShowCase/TreeViewShowCase.axaml
View File

@ -1,20 +1,20 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.TreeViewShowCase"
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TreeViewShowCase"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.">
<atom:TreeView IsCheckable="True" IsDefaultExpandAll="True">
<atom:TreeViewItem Header="parent 1">
<atom:TreeViewItem Header="parent 1-0">
<atom:TreeViewItem Header="leaf" IsCheckable="False" IsChecked="True" />
<atom:TreeViewItem Header="leaf"
IsCheckable="False"
IsChecked="True" />
<atom:TreeViewItem Header="leaf" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="parent 1-1" IsChecked="True">
@ -22,43 +22,45 @@
</atom:TreeViewItem>
</atom:TreeViewItem>
</atom:TreeView>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Block Node"
Description="Block Node.">
<atom:TreeView IsCheckable="True" IsDefaultExpandAll="True" NodeHoverMode="Block">
<desktop:ShowCaseItem Title="Block Node" Description="Block Node.">
<atom:TreeView IsCheckable="True"
IsDefaultExpandAll="True"
NodeHoverMode="Block">
<atom:TreeViewItem Header="parent">
<atom:TreeViewItem Header="child 1" IsEnabled="False" />
<atom:TreeViewItem Header="child 2" IsCheckable="False" />
</atom:TreeViewItem>
</atom:TreeView>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Tree with line"
Description="Tree with connected line between nodes, turn on by showLine, customize the preset icon by switcherIcon.">
<desktop:ShowCaseItem Title="Tree with line" Description="Tree with connected line between nodes, turn on by showLine, customize the preset icon by switcherIcon.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock>showLine:</TextBlock>
<atom:ToggleSwitch IsChecked="{Binding ShowLineSwitchChecked,Mode=TwoWay}"/>
<atom:ToggleSwitch IsChecked="{Binding ShowLineSwitchChecked, Mode=TwoWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock>showIcon:</TextBlock>
<atom:ToggleSwitch IsChecked="{Binding ShowIconSwitchChecked,Mode=TwoWay}" />
<atom:ToggleSwitch IsChecked="{Binding ShowIconSwitchChecked, Mode=TwoWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock>ShowLeafSwitcher:</TextBlock>
<atom:ToggleSwitch IsChecked="{Binding ShowLeafSwitcherSwitchChecked,Mode=TwoWay}" />
<atom:ToggleSwitch IsChecked="{Binding ShowLeafSwitcherSwitchChecked, Mode=TwoWay}" />
</StackPanel>
<atom:TreeView IsShowLine="{Binding ShowLineSwitchChecked}"
IsShowIcon="{Binding ShowIconSwitchChecked}"
IsShowLeafSwitcher="{Binding ShowLeafSwitcherSwitchChecked}">
<atom:TreeViewItem Header="parent 1" Icon="{atom:IconProvider Kind=CarryOutOutlined}" IsExpanded="True">
<atom:TreeViewItem Header="parent 1-0" Icon="{atom:IconProvider Kind=CarryOutOutlined}" IsExpanded="True">
<atom:TreeView IsShowIcon="{Binding ShowIconSwitchChecked}"
IsShowLeafSwitcher="{Binding ShowLeafSwitcherSwitchChecked}"
IsShowLine="{Binding ShowLineSwitchChecked}">
<atom:TreeViewItem Header="parent 1"
Icon="{atom:IconProvider Kind=CarryOutOutlined}"
IsExpanded="True">
<atom:TreeViewItem Header="parent 1-0"
Icon="{atom:IconProvider Kind=CarryOutOutlined}"
IsExpanded="True">
<atom:TreeViewItem Header="leaf 1" Icon="{atom:IconProvider Kind=CarryOutOutlined}" />
<atom:TreeViewItem Header="leaf 2" Icon="{atom:IconProvider Kind=CarryOutOutlined}" />
</atom:TreeViewItem>
@ -78,42 +80,41 @@
</atom:TreeViewItem>
</atom:TreeView>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="draggable"
Description="Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode."
Margin="0, 0, 10, 0">
<desktop:ShowCaseItem Title="draggable"
Margin="0,0,10,0"
Description="Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.">
<atom:TreeView IsDraggable="True" NodeHoverMode="Block">
<atom:TreeViewItem Header="0-0">
<atom:TreeViewItem Header="0-0-0">
<atom:TreeViewItem Header="0-0-0-0"/>
<atom:TreeViewItem Header="0-0-0-1"/>
<atom:TreeViewItem Header="0-0-0-2"/>
<atom:TreeViewItem Header="0-0-0-0" />
<atom:TreeViewItem Header="0-0-0-1" />
<atom:TreeViewItem Header="0-0-0-2" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="0-0-1">
<atom:TreeViewItem Header="0-0-1-0"/>
<atom:TreeViewItem Header="0-0-1-1"/>
<atom:TreeViewItem Header="0-0-1-2"/>
<atom:TreeViewItem Header="0-0-1-0" />
<atom:TreeViewItem Header="0-0-1-1" />
<atom:TreeViewItem Header="0-0-1-2" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="0-0-2"/>
<atom:TreeViewItem Header="0-0-2" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="0-1">
<atom:TreeViewItem Header="0-1-0">
<atom:TreeViewItem Header="0-1-0-0"/>
<atom:TreeViewItem Header="0-1-0-1"/>
<atom:TreeViewItem Header="0-1-0-2"/>
<atom:TreeViewItem Header="0-1-0-0" />
<atom:TreeViewItem Header="0-1-0-1" />
<atom:TreeViewItem Header="0-1-0-2" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="0-1-1">
<atom:TreeViewItem Header="0-1-1-0"/>
<atom:TreeViewItem Header="0-1-1-1"/>
<atom:TreeViewItem Header="0-1-1-2"/>
<atom:TreeViewItem Header="0-1-1-0" />
<atom:TreeViewItem Header="0-1-1-1" />
<atom:TreeViewItem Header="0-1-1-2" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="0-1-2"/>
<atom:TreeViewItem Header="0-1-2" />
</atom:TreeViewItem>
<atom:TreeViewItem Header="0-2"/>
<atom:TreeViewItem Header="0-2" />
</atom:TreeView>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

32
samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml
View File

@ -3,40 +3,38 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:atom="https://atomui.net"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<desktop:ShowCasePanel>
<showcase:ShowCaseItem Title="Basic" Description="The most basic usage.">
<desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
<Border Height="300" atom:Watermark.Glyph="{atom:TextGlyph 'AtomUI'}" />
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Multi-line watermark" Description="Use line-break to specify multi-line text watermark content.">
<desktop:ShowCaseItem Title="Multi-line watermark" Description="Use line-break to specify multi-line text watermark content.">
<Border Height="200" atom:Watermark.Glyph="{atom:TextGlyph 'AtomUI&#x000A;Happy Working', FontSize=18, Foreground=Gray}" />
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Image watermark" Description="Specify the image address via image. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.">
<desktop:ShowCaseItem Title="Image watermark" Description="Specify the image address via image. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.">
<Border Height="400">
<atom:Watermark.Glyph>
<atom:ImageGlyph Source="/Assets/ATOMUI-LOGO.png"/>
<atom:ImageGlyph Source="/Assets/ATOMUI-LOGO.png" />
<!-- <atom:ImageGlyph Source="/Assets/avalonia-logo.ico"/> -->
</atom:Watermark.Glyph>
</Border>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem Title="Custom configuration" Description="Preview the watermark effect by configuring custom parameters.">
<desktop:ShowCaseItem Title="Custom configuration" Description="Preview the watermark effect by configuring custom parameters.">
<StackPanel atom:Watermark.Glyph="{atom:TextGlyph 'AtomUI'}">
<TextBlock TextWrapping="Wrap">
The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.
<LineBreak /><LineBreak />
Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
<LineBreak /><LineBreak />
Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
</TextBlock>
The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.<LineBreak /><LineBreak />
Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.<LineBreak /><LineBreak />
Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.</TextBlock>
<Image Source="/Assets/watermark-sample.png" />
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

2
samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml.cs
View File

@ -1,6 +1,4 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;

6
samples/AtomUI.Demo.Desktop/Themes/TabMenu.axaml
View File

@ -4,8 +4,7 @@
<Setter Property="TabControl.Template">
<!-- -->
<ControlTemplate TargetType="TabControl">
<Border
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
<Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
@ -24,8 +23,7 @@
<Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
</ScrollViewer>
<ContentPresenter
Name="PART_SelectedContentHost"
<ContentPresenter Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

6
samples/AtomUI.Demo.Desktop/Themes/ToggleButton.axaml
View File

@ -3,13 +3,11 @@
<ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
<Setter Property="ToggleButton.Template">
<ControlTemplate TargetType="ToggleButton">
<Border
Name="Background"
<Border Name="Background"
Padding="8"
Background="{TemplateBinding Background}"
CornerRadius="3">
<PathIcon
Name="Icon"
<PathIcon Name="Icon"
Width="16"
Height="16"
Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z"

2
samples/AtomUI.Demo.Desktop/Utils/EnumExtension.cs
View File

@ -1,6 +1,6 @@
using Avalonia.Markup.Xaml;
namespace AtomUI.Demo.Desktop
namespace AtomUI.Demo.Desktop.Utils
{
/// <summary>
/// Xaml markup to get the enum values.

1
samples/AtomUI.Demo.Desktop/ViewModels/CheckBoxShowCaseModel.cs
View File

@ -1,4 +1,3 @@
using AtomUI.Controls;
using CommunityToolkit.Mvvm.ComponentModel;
namespace AtomUI.Demo.Desktop.ViewModels;

3
samples/AtomUI.Demo.Desktop/ViewModels/DataGridDemoViewModel.cs
View File

@ -1,7 +1,4 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using Avalonia.Collections;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

1
samples/AtomUI.Demo.Desktop/ViewModels/TabControlDemoViewModel.cs
View File

@ -1,5 +1,4 @@
using System.Collections.ObjectModel;
using System.Linq;
using CommunityToolkit.Mvvm.ComponentModel;
namespace AtomUI.Demo.Desktop.ViewModels;

26
samples/AtomUI.Demo.Desktop/Views/MainView.axaml
View File

@ -1,13 +1,13 @@
<UserControl
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d"
x:Class="AtomUI.Demo.Desktop.Views.MainView"
<UserControl x:Class="AtomUI.Demo.Desktop.Views.MainView"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:base="clr-namespace:AtomUI.Demo.Desktop"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:showcases="using:AtomUI.Demo.Desktop.ShowCase"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
@ -18,26 +18,24 @@
</UserControl.Resources>
<UserControl.Styles>
<Style Selector="showcases|ShowCasePanel">
<Style Selector="base|ShowCasePanel">
<Setter Property="Margin" Value="0, 30, 0, 0" />
</Style>
<Style Selector="showcases|ShowCaseItem">
<Style Selector="base|ShowCaseItem">
<Setter Property="Margin" Value="0, 0, 0, 0" />
</Style>
</UserControl.Styles>
<Grid RowDefinitions="Auto, *">
<TabControl
<TabControl x:Name="ShowCaseNav" Name="Tab"
Grid.Row="1"
HorizontalAlignment="Stretch"
Margin="8"
Name="Tab"
Padding="20,0,0,0"
TabStripPlacement="Left"
HorizontalAlignment="Stretch"
FontSize="13"
x:Name="ShowCaseNav"
TabStripPlacement="Left"
Theme="{DynamicResource NavigationTab}">
<TabControl.Styles>
<Style Selector="#ShowCaseNav > TabItem">
<Style Selector="#ShowCaseNav &gt; TabItem">
<Setter Property="FontSize" Value="18" />
<Setter Property="Width" Value="230" />
</Style>

5
samples/AtomUI.Demo.Desktop/Views/MainWindow.axaml
View File

@ -1,16 +1,15 @@
<Window
x:Class="AtomUI.Demo.Desktop.Views.MainWindow"
<Window x:Class="AtomUI.Demo.Desktop.Views.MainWindow"
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:views="clr-namespace:AtomUI.Demo.Desktop.Views"
Title="AtomUI Demo"
MinWidth="800"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
Icon="/Assets/avalonia-logo.ico"
MinWidth="800"
mc:Ignorable="d">
<views:MainView />
</Window>

1
src/AtomUI.Base/AtomUI.Base.csproj
View File

@ -3,6 +3,7 @@
<Import Project="$(MSBuildThisFileDirectory)..\..\build\Nuget.props" />
<PropertyGroup>
<RootNamespace>AtomUI</RootNamespace>
<AllowUnsafeBlocks>True</AllowUnsafeBlocks>
</PropertyGroup>

1
src/AtomUI.Base/MotionScene/MotionActor.cs
View File

@ -1,5 +1,4 @@
using System.Reflection;
using AtomUI.Data;
using AtomUI.Media;
using AtomUI.Utils;
using Avalonia;

1
src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBox.cs
View File

@ -1,7 +1,6 @@
using AtomUI.Data;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Presenters;

2
src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBoxTheme.cs
View File

@ -1,6 +1,6 @@
using AtomUI.Theme;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia.Controls;
using Avalonia.Controls.Presenters;
using Avalonia.Controls.Templates;

2
src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBox.cs
View File

@ -1,7 +1,7 @@
using AtomUI.Controls.Utils;
using AtomUI.Data;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;

2
src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBoxTheme.cs
View File

@ -1,8 +1,8 @@
using AtomUI.Media;
using AtomUI.Theme;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Theme.Utils;
using AtomUI.Utils;
using Avalonia.Animation;
using Avalonia.Controls;
using Avalonia.Controls.Presenters;

1
src/AtomUI.Controls/Alert/Alert.cs
View File

@ -1,6 +1,5 @@
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;

2
src/AtomUI.Controls/Alert/AlertTheme.cs
View File

@ -1,7 +1,7 @@
using AtomUI.Data;
using AtomUI.Theme;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Presenters;

1
src/AtomUI.Controls/AtomUI.Controls.csproj
View File

@ -3,7 +3,6 @@
<Import Project="$(MSBuildThisFileDirectory)..\..\build\Nuget.props" />
<PropertyGroup>
<RootNamespace>AtomUI.Controls</RootNamespace>
<EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
<CompilerGeneratedFilesOutputPath>GeneratedFiles</CompilerGeneratedFilesOutputPath>
</PropertyGroup>

47
src/AtomUI.Controls/AtomUI.Controls.csproj.DotSettings
View File

@ -1,5 +1,50 @@
<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=addondecoratedbox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=alert/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=arrowdecoratedbox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=badge/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=buttons/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=buttonspinner/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=checkbox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=collapse/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=combobox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=datepicker/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=drawer/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=emptyindicator/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=expander/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=flyouts/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=groupbox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=input/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=listbox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=loading/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=localization/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=marqueelabel/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=menu/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=message/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=notifications/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=numericupdown/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=optionbuttonbox/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=pathicon/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=popup/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=popupconfirm/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=popupconfirm_005Clocalization/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=primitives/@EntryIndexedValue">False</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=primitives_005Catomlayer/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=progressbar/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=radiobutton/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=segmented/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=separator/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=slider/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=switch/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tabcontrol/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tabcontrol_005Ctabstrip/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tag/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=timepicker/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=timepicker_005Clocalization/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tooltip/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=treeview/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils/@EntryIndexedValue">False</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils_005Cmotion/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermark/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermark_005Cglyphs/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermark_005Cglyphs/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=window/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>

5
src/AtomUI.Controls/Badge/CountBadge.cs
View File

@ -1,10 +1,9 @@
using AtomUI.Controls.Badge;
using AtomUI.Controls.MotionScene;
using AtomUI.Controls.MotionScene;
using AtomUI.Data;
using AtomUI.MotionScene;
using AtomUI.Theme.Data;
using AtomUI.Theme.Palette;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;

34
src/AtomUI.Controls/Badge/CountBadgeMotion.cs
View File

@ -3,12 +3,12 @@ using Avalonia;
using Avalonia.Animation.Easings;
using Avalonia.Controls;
namespace AtomUI.Controls.Badge;
namespace AtomUI.Controls;
internal class CountBadgeZoomBadgeIn : AbstractMotion
{
public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public CountBadgeZoomBadgeIn()
{
@ -18,7 +18,7 @@ internal class CountBadgeZoomBadgeIn : AbstractMotion
public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
{
easing ??= new ExponentialEaseOut();
var config = new MotionConfig(MotionOpacityProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
{
TransitionKind = TransitionKind.Double,
StartValue = 0d,
@ -33,7 +33,7 @@ internal class CountBadgeZoomBadgeIn : AbstractMotion
{
easing ??= new BackEaseOut();
var config = new MotionConfig(MotionRenderTransformProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
{
TransitionKind = TransitionKind.TransformOperations,
StartValue = BuildScaleTransform(0),
@ -53,8 +53,8 @@ internal class CountBadgeZoomBadgeIn : AbstractMotion
internal class CountBadgeZoomBadgeOut : AbstractMotion
{
public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public CountBadgeZoomBadgeOut()
{
@ -64,7 +64,7 @@ internal class CountBadgeZoomBadgeOut : AbstractMotion
public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
{
easing ??= new ExponentialEaseIn();
var config = new MotionConfig(MotionOpacityProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
{
TransitionKind = TransitionKind.Double,
StartValue = 1d,
@ -79,7 +79,7 @@ internal class CountBadgeZoomBadgeOut : AbstractMotion
{
easing ??= new ExponentialEaseIn();
var config = new MotionConfig(MotionRenderTransformProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
{
TransitionKind = TransitionKind.TransformOperations,
StartValue = BuildScaleTransform(1),
@ -100,13 +100,13 @@ internal class CountBadgeZoomBadgeOut : AbstractMotion
internal class CountBadgeNoWrapperZoomBadgeIn : AbstractMotion
{
public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
{
easing ??= new QuarticEaseOut();
var config = new MotionConfig(MotionOpacityProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
{
TransitionKind = TransitionKind.Double,
StartValue = 0d,
@ -121,7 +121,7 @@ internal class CountBadgeNoWrapperZoomBadgeIn : AbstractMotion
{
easing ??= new QuarticEaseOut();
var config = new MotionConfig(MotionRenderTransformProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
{
TransitionKind = TransitionKind.TransformOperations,
StartValue = BuildScaleTransform(0),
@ -135,13 +135,13 @@ internal class CountBadgeNoWrapperZoomBadgeIn : AbstractMotion
internal class CountBadgeNoWrapperZoomBadgeOut : AbstractMotion
{
public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
{
easing ??= new CircularEaseIn();
var config = new MotionConfig(MotionOpacityProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
{
TransitionKind = TransitionKind.Double,
StartValue = 1d,
@ -156,7 +156,7 @@ internal class CountBadgeNoWrapperZoomBadgeOut : AbstractMotion
{
easing ??= new CircularEaseIn();
var config = new MotionConfig(MotionRenderTransformProperty)
var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
{
TransitionKind = TransitionKind.TransformOperations,
StartValue = BuildScaleTransform(1),

5
src/AtomUI.Controls/Badge/DotBadge.cs
View File

@ -1,10 +1,9 @@
using AtomUI.Controls.Badge;
using AtomUI.Controls.MotionScene;
using AtomUI.Controls.MotionScene;
using AtomUI.Data;
using AtomUI.MotionScene;
using AtomUI.Theme.Data;
using AtomUI.Theme.Palette;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;

1
src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerInnerBox.cs
View File

@ -1,6 +1,5 @@
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;

2
src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerTheme.cs
View File

@ -1,8 +1,8 @@
using AtomUI.Media;
using AtomUI.Theme;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Theme.Utils;
using AtomUI.Utils;
using Avalonia.Animation;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;

1
src/AtomUI.Controls/Buttons/Button.cs
View File

@ -6,7 +6,6 @@ using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Theme.TokenSystem;
using AtomUI.Theme.Utils;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Animation;
using Avalonia.Controls;

2
src/AtomUI.Controls/Buttons/DropdownButton.cs
View File

@ -1,8 +1,8 @@
using AtomUI.Data;
using AtomUI.Icon;
using AtomUI.Theme.Data;
using AtomUI.Theme.Styling;
using AtomUI.Theme.TokenSystem;
using AtomUI.Utils;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Diagnostics;

1
src/AtomUI.Controls/Buttons/IconButton.cs
View File

@ -5,7 +5,6 @@ using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Layout;
using Avalonia.Rendering;
namespace AtomUI.Controls;

1
src/AtomUI.Controls/Buttons/IconButtonTheme.cs
View File

@ -2,7 +2,6 @@
using AtomUI.Theme;
using AtomUI.Theme.Styling;
using AtomUI.Theme.Utils;
using Avalonia;
using Avalonia.Animation;
using Avalonia.Controls;
using Avalonia.Controls.Presenters;

Some files were not shown because too many files have changed in this diff Show More