* 格式化代码;

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

View File

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

View File

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

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>

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
{

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
{

View File

@ -1,10 +1,9 @@
<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"
x:CompileBindings="True"
x:DataType="viewModels:ColorItemViewModel">
<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"
x:CompileBindings="True"
x:DataType="viewModels:ColorItemViewModel">
<Design.PreviewWith>
<controls:ColorItemControl />
</Design.PreviewWith>
@ -13,28 +12,25 @@
<Setter Property="controls:ColorItemControl.Height" Value="35" />
<Setter Property="controls:ColorItemControl.Template">
<ControlTemplate TargetType="controls:ColorItemControl">
<Border
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<Panel>
<TextBlock
Padding="8"
FontSize="12"
FontWeight="600"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding ColorName}" />
<TextBlock
Name="PART_HexTextBlock"
Padding="8"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontWeight="600"
FontSize="10"
Foreground="{TemplateBinding Foreground}"
IsVisible="False"
Opacity="0.8"
Text="{TemplateBinding Hex}" />
<TextBlock Padding="8"
FontSize="12"
FontWeight="600"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding ColorName}" />
<TextBlock Name="PART_HexTextBlock"
Padding="8"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="10"
FontWeight="600"
Foreground="{TemplateBinding Foreground}"
IsVisible="False"
Opacity="0.8"
Text="{TemplateBinding Hex}" />
</Panel>
</Border>
</ControlTemplate>

View File

@ -1,15 +1,14 @@
<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"
x:CompileBindings="True"
x:DataType="viewModels:ColorListViewModel">
<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"
x:CompileBindings="True"
x:DataType="viewModels:ColorListViewModel">
<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,11 +16,10 @@
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorItemViewModel">
<controls:ColorItemControl
ColorName="{Binding ColorDisplayName}"
Background="{Binding Brush}"
Foreground="{Binding TextBrush}"
Hex="{Binding Hex}" />
<controls:ColorItemControl Background="{Binding Brush}"
ColorName="{Binding ColorDisplayName}"
Foreground="{Binding TextBrush}"
Hex="{Binding Hex}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

View File

@ -1,29 +1,27 @@
<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"
x:CompileBindings="True"
x:DataType="viewModels:ColorGroupViewModel">
<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"
x:CompileBindings="True"
x:DataType="viewModels:ColorGroupViewModel">
<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>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

View File

@ -1,10 +1,9 @@
<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"
x:CompileBindings="True"
x:DataType="viewModels:IconGalleryModel">
<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"
x:CompileBindings="True"
x:DataType="viewModels:IconGalleryModel">
<ControlTheme x:Key="{x:Type controls:IconGallery}" TargetType="controls:IconGallery">
<Setter Property="controls:IconGallery.Template">
@ -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>

View File

@ -1,11 +1,10 @@
<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"
xmlns:atom="https://atomui.net"
x:CompileBindings="True"
x:DataType="viewModels:IconInfoItemModel">
<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"
x:CompileBindings="True"
x:DataType="viewModels:IconInfoItemModel">
<ControlTheme x:Key="{x:Type controls:IconInfoItem}" TargetType="controls:IconInfoItem">
<Setter Property="Height" Value="150" />
@ -13,24 +12,20 @@
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<ControlTemplate TargetType="controls:IconInfoItem">
<Border
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<StackPanel Orientation="Vertical">
<atom:PathIcon
HorizontalAlignment="Center"
Kind="{Binding IconKind}"
Width="48"
Height="48">
</atom:PathIcon>
<TextBlock
Margin="0,20, 0, 0"
Padding="8"
FontSize="13"
HorizontalAlignment="Center"
Foreground="{TemplateBinding Foreground}"
Text="{Binding IconName}" />
<atom:PathIcon Width="48"
Height="48"
HorizontalAlignment="Center"
Kind="{Binding IconKind}" />
<TextBlock Margin="0,20,0,0"
Padding="8"
HorizontalAlignment="Center"
FontSize="13"
Foreground="{TemplateBinding Foreground}"
Text="{Binding IconName}" />
</StackPanel>
</Border>
</ControlTemplate>

View File

@ -1,161 +1,158 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest usage for short messages.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.AlertShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel>
<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>
<showcase:ShowCaseItem
Title="More types"
Description="There are 4 types of Alert: success, info, warning, error.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Closable"
Description="To show close button.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Description"
Description="Additional description for alert message.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Description"
Description="Additional description for alert message.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Description" Description="Additional description for alert message.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success"
Message="Success Tips"
IsShowIcon="True"/>
<atom:Alert Type="Info"
Message="Informational Notes"
IsShowIcon="True"/>
<atom:Alert Type="Warning"
Message="Warning"
IsShowIcon="True"
IsClosable="True"/>
<atom:Alert Type="Error"
Message="Error"
IsShowIcon="True"/>
<atom:Alert Type="Success"
Message="Success Tips"
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"
IsClosable="True"
IsShowIcon="True"
Description="This is a warning notice about copywriting."/>
<atom:Alert Type="Error"
Message="Error"
IsShowIcon="True"
Description="This is an error message about copywriting."/>
<atom:Alert IsShowIcon="True"
Message="Success Tips"
Type="Success" />
<atom:Alert IsShowIcon="True"
Message="Informational Notes"
Type="Info" />
<atom:Alert IsClosable="True"
IsShowIcon="True"
Message="Warning"
Type="Warning" />
<atom:Alert IsShowIcon="True"
Message="Error"
Type="Error" />
<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"
Message="Informational Notes"
Type="Info" />
<atom:Alert Description="This is a warning notice about copywriting."
IsClosable="True"
IsShowIcon="True"
Message="Warning"
Type="Warning" />
<atom:Alert Description="This is an error message about copywriting."
IsShowIcon="True"
Message="Error"
Type="Error" />
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom action"
Description="Custom action.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Custom action" Description="Custom action.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success"
IsShowIcon="True"
IsClosable="true">
<atom:Alert IsClosable="true"
IsShowIcon="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"
IsShowIcon="True"
Description="Error Description Error Description Error Description Error Description">
<atom:Alert Description="Error Description Error Description Error Description Error Description"
IsShowIcon="True"
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"
IsClosable="true"
Description="Info Description Info Description Info Description Info Description">
<atom:Alert Description="Info Description Info Description Info Description Info Description"
IsClosable="true"
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>
<showcase:ShowCaseItem
Title="Loop Banner"
Description="Show a loop banner.">
<atom:Alert Type="Warning" IsShowIcon="True" IsMessageMarqueEnabled="True">
</desktop:ShowCaseItem>
<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>

View File

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

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.AvatarShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

View File

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

View File

@ -1,107 +1,129 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.BadgeShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>

View File

@ -1,46 +1,49 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<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">
</StackPanel>
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Danger Buttons"
Description="danger is a property of button after antd 4.0.">
</desktop:ShowCaseItem>
<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,56 +234,65 @@ If a large or small button is desired, set the size property to either large or
Link
</atom:Button>
</WrapPanel>
</showcase: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">
<StackPanel Orientation="Vertical">
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:Button ButtonType="Primary" IsGhost="True">
Primary
</atom:Button>
<atom:Button ButtonType="Default" IsGhost="True">
Default
</atom:Button>
<atom:Button ButtonType="Text" IsGhost="True">
Text
</atom:Button>
<atom:Button ButtonType="Link" IsGhost="True">
Link
</atom:Button>
<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}">
Primary
</atom:Button>
<atom:Button ButtonType="Default" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
Default
</atom:Button>
<atom:Button ButtonType="Text" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
Text
</atom:Button>
<atom:Button ButtonType="Link" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
Link
</atom:Button>
<atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
Danger
</atom:Button>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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">
Primary
</atom:Button>
<atom:Button ButtonType="Default" IsGhost="True">
Default
</atom:Button>
<atom:Button ButtonType="Text" IsGhost="True">
Text
</atom:Button>
<atom:Button ButtonType="Link" IsGhost="True">
Link
</atom:Button>
<atom:Button ButtonType="Primary"
IsDanger="True"
IsGhost="True">
Danger
</atom:Button>
</WrapPanel>
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Primary
</atom:Button>
<atom:Button ButtonType="Default"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Default
</atom:Button>
<atom:Button ButtonType="Text"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Text
</atom:Button>
<atom:Button ButtonType="Link"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsGhost="True">
Link
</atom:Button>
<atom:Button ButtonType="Primary"
Icon="{atom:IconProvider Kind=SearchOutlined}"
IsDanger="True"
IsGhost="True">
Danger
</atom:Button>
</WrapPanel>
</StackPanel>
</Border>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="To mark a button as disabled, add the disabled property to the Button.">
</desktop:ShowCaseItem>
<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">
@ -264,12 +326,14 @@ If a large or small button is desired, set the size property to either large or
Link(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<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>

View File

@ -1,247 +1,222 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonSpinnerShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
<atom:ButtonSpinner Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</showcase: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>
<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"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner SizeType="Middle" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner SizeType="Small" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Variants"
Description="Variants of Input.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Outline">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ButtonSpinner Spin="HandleSpin"
LeftAddOn="http://"
RightAddOn=".com"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
LeftAddOn="http://"
Width="400"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerRightContent=".com">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
<showcase: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
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
InnerLeftContent="¥"
InnerRightContent="RMB"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
InnerLeftContent="¥" InnerRightContent="RMB" IsEnabled="False"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
</StackPanel>
</showcase: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
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Error"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
LeftAddOn="http://"
RightAddOn=".com"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Error"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
InnerRightContent=".com"
LeftAddOn="http://"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Error"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left"
StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left"
StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光"/>
</atom:ButtonSpinner>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<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="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="¥"
InnerRightContent="RMB"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="¥"
InnerRightContent="RMB"
IsEnabled="False"
Spin="HandleSpin">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</desktop:ShowCaseItem>
<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="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
Spin="HandleSpin"
Status="Warning">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Error">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Warning">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Error"
StyleVariant="Filled">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Warning"
StyleVariant="Filled">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Error"
StyleVariant="Borderless">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Width="400"
HorizontalAlignment="Left"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
Spin="HandleSpin"
Status="Warning"
StyleVariant="Borderless">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CardShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

View File

@ -1,125 +1,126 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CheckBoxShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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}"
<atom:CheckBox x:Name="PearCheckBox"
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}"
<atom:CheckBox x:Name="OrangeCheckBox"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=OrangeCheckBox}">
CommandParameter="{Binding ElementName=OrangeCheckBox}"
IsChecked="{Binding OrangeCheckedStatus}">
Orange
</atom:CheckBox>
</WrapPanel>
</StackPanel>
</showcase: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>
<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>

View File

@ -1,16 +1,14 @@
<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: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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CollapseShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Borderless"
Description="A borderless style of Collapse." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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>
<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>
<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>
<showcase:ShowCaseItem
Title="Extra node"
Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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:Collapse ExpandIconPosition="{Binding CollapseExpandIconPosition}">
<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>
<showcase:ShowCaseItem
Title="Ghost Collapse"
Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Collapsible"
Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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">
@ -225,7 +223,7 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Collapse IsEnabled="False">
<atom:CollapseItem Header="This panel can't be collapsed">
<TextBlock TextWrapping="Wrap">
@ -233,7 +231,7 @@ If a large or small collapse is desired, set the size property to either large o
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Collapse IsEnabled="False">
<atom:CollapseItem Header="This panel can't be collapsed" IsSelected="True">
<TextBlock TextWrapping="Wrap">
@ -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>

View File

@ -1,231 +1,241 @@
<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: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">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ComboBoxShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<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>
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Variants"
Description="Variants of Input.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
</desktop:ShowCaseItem>
<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>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<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>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
</desktop:ShowCaseItem>
<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"
InnerLeftContent="¥"
InnerRightContent="RMB" IsEnabled="False">
<atom:ComboBox Width="300"
InnerLeftContent="¥"
InnerRightContent="RMB"
IsEnabled="False"
PlaceholderText="Please select">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</showcase: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>
<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>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<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>
<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">
<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}">
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"
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}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

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

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DatePickerShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

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>

View File

@ -1,248 +1,365 @@
<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: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">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DropdownButtonShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Button Types"
Description="Support centralized button type.">
</desktop:ShowCaseItem>
<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>
<atom:DropdownButton ButtonType="Default" 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="Text" 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>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Arrow"
Description="You could display an arrow.">
<showcase:ShowCaseItem.Styles>
<Style Selector="atom|DropdownButton">
<Setter Property="Margin" Value="5"/>
</Style>
</showcase:ShowCaseItem.Styles>
<WrapPanel>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="BottomEdgeAlignedLeft">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="Bottom">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="BottomEdgeAlignedRight">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="TopEdgeAlignedLeft">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="Top">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
Placement="TopEdgeAlignedRight">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</WrapPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Placement"
Description="Support 6 placements.">
<showcase:ShowCaseItem.Styles>
<Style Selector="atom|DropdownButton">
<Setter Property="Margin" Value="5"/>
</Style>
</showcase:ShowCaseItem.Styles>
<WrapPanel>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="BottomEdgeAlignedLeft">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="Bottom">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="BottomEdgeAlignedRight">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="TopEdgeAlignedLeft">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="Top">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<atom:DropdownButton ButtonType="Default" TriggerType="Hover"
Placement="TopEdgeAlignedRight">
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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</WrapPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
<desktop:ShowCaseItem Title="Arrow" Description="You could display an arrow.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|DropdownButton">
<Setter Property="Margin" Value="5" />
</Style>
</desktop:ShowCaseItem.Styles>
<WrapPanel>
<atom:DropdownButton ButtonType="Default"
IsShowArrow="True"
Placement="BottomEdgeAlignedLeft"
TriggerType="Hover">
BottomLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
IsShowArrow="True"
Placement="Bottom"
TriggerType="Hover">
Bottom
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
IsShowArrow="True"
Placement="BottomEdgeAlignedRight"
TriggerType="Hover">
BottomRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
IsShowArrow="True"
Placement="TopEdgeAlignedLeft"
TriggerType="Hover">
TopLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
IsShowArrow="True"
Placement="Top"
TriggerType="Hover">
Top
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
IsShowArrow="True"
Placement="TopEdgeAlignedRight"
TriggerType="Hover">
TopRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Placement" Description="Support 6 placements.">
<desktop:ShowCaseItem.Styles>
<Style Selector="atom|DropdownButton">
<Setter Property="Margin" Value="5" />
</Style>
</desktop:ShowCaseItem.Styles>
<WrapPanel>
<atom:DropdownButton ButtonType="Default"
Placement="BottomEdgeAlignedLeft"
TriggerType="Hover">
BottomLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
Placement="Bottom"
TriggerType="Hover">
Bottom
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
Placement="BottomEdgeAlignedRight"
TriggerType="Hover">
BottomRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
Placement="TopEdgeAlignedLeft"
TriggerType="Hover">
TopLeft
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
Placement="Top"
TriggerType="Hover">
Top
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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"
Placement="TopEdgeAlignedRight"
TriggerType="Hover">
TopRight
<atom:DropdownButton.DropdownFlyout>
<atom:MenuFlyout>
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

@ -1,45 +1,38 @@
<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: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>
<showcase:ShowCaseItem
Title="Size"
Description="AtomUI supports three sizes of buttons: small, default and large.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.EmptyShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="Simplest Usage.">
<atom:EmptyIndicator PresetImage="Default" />
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Customize"
Description="Customize image source, image size, description and extra content.">
</desktop:ShowCaseItem>
<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>

View File

@ -1,77 +1,81 @@
<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: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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ExpanderShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<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>
<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>
<atom:OptionButton>Right</atom:OptionButton>
</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>
<showcase:ShowCaseItem
Title="Nested panel"
Description="Expander is nested inside the Collapse." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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>
<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>
<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>
<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>
<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>
<showcase:ShowCaseItem
Title="Extra node"
Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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>
<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>
<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>
<showcase:ShowCaseItem
Title="Collapsible"
Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
</desktop:ShowCaseItem>
<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>

View File

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

View File

@ -1,16 +1,14 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Basic usage of the GroupBox control.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.GroupBoxShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Header title Position"
Description="GroupBox Header supports three position types: Left, Center and Right.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Header title style"
Description="GroupBox Header supports customizing some properties of color and font.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Header Icon"
Description="GroupBox Header supports specifying Icon.">
<atom:GroupBox HeaderTitle="Title Info" HeaderIcon="{atom:IconProvider Kind=GithubOutlined}">
</desktop:ShowCaseItem>
<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>

View File

@ -1,15 +1,14 @@
<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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
mc:Ignorable="d">
<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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
mc:Ignorable="d">
<Design.DataContext>
<viewModels:PaletteDemoViewModel />
</Design.DataContext>
@ -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>

View File

@ -1,36 +1,40 @@
<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: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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.InfoFlyoutShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Arrow"
Description="Support show, hide or keep arrow in the center.">
</desktop:ShowCaseItem>
<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"
Placement="LeftEdgeAlignedTop"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LT"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2" Grid.Column="0"
Trigger="Hover"
Placement="Left"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Left"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3" Grid.Column="0"
Trigger="Hover"
Placement="LeftEdgeAlignedBottom"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LB"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="1"
Trigger="Hover"
Placement="TopEdgeAlignedLeft"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TL"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="2"
Trigger="Hover"
Placement="Top"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Top"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0" Grid.Column="3"
Trigger="Hover"
Placement="TopEdgeAlignedRight"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TR"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="1" Grid.Column="4"
Trigger="Hover"
Placement="RightEdgeAlignedTop"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RT"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2" Grid.Column="4"
Trigger="Hover"
Placement="Right"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Right"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3" Grid.Column="4"
Trigger="Hover"
Placement="RightEdgeAlignedBottom"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RB"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="1"
Trigger="Hover"
Placement="BottomEdgeAlignedLeft"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BL"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="2"
Trigger="Hover"
Placement="Bottom"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Bottom"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4" Grid.Column="3"
Trigger="Hover"
Placement="BottomEdgeAlignedRight"
IsShowArrow="{Binding ShowArrow}"
IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BR"/>
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="1"
Grid.Column="0"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="LeftEdgeAlignedTop"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LT" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2"
Grid.Column="0"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Left"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Left" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3"
Grid.Column="0"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="LeftEdgeAlignedBottom"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="LB" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0"
Grid.Column="1"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="TopEdgeAlignedLeft"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TL" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0"
Grid.Column="2"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Top"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Top" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="0"
Grid.Column="3"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="TopEdgeAlignedRight"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="TR" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="1"
Grid.Column="4"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="RightEdgeAlignedTop"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RT" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="2"
Grid.Column="4"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Right"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Right" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="3"
Grid.Column="4"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="RightEdgeAlignedBottom"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="RB" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4"
Grid.Column="1"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="BottomEdgeAlignedLeft"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BL" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4"
Grid.Column="2"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="Bottom"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="Bottom" />
</atom:FlyoutHost>
<atom:FlyoutHost Grid.Row="4"
Grid.Column="3"
IsPointAtCenter="{Binding IsPointAtCenter}"
IsShowArrow="{Binding ShowArrow}"
Placement="BottomEdgeAlignedRight"
Trigger="Hover">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<TextBlock Width="200"
Height="100"
Padding="20">
The most basic example.
</TextBlock>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button Text="BR" />
</atom:FlyoutHost>
</Grid>
</StackPanel>
</showcase:ShowCaseItem>
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCasePanel>
</UserControl>

View File

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

View File

@ -1,137 +1,174 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic usage"
Description="Basic usage example.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.LineEditShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
</desktop:ShowCaseItem>
<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>
<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"/>
<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 Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
</desktop:ShowCaseItem>
<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 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 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>
<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"/>
<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"
</desktop:ShowCaseItem>
<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 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>

View File

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

View File

@ -1,44 +1,38 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic usage"
Description="Basic usage example.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ListBoxShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Hover effect"
Description="Disabled item hover effect.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Item disabled"
Description="Disabled item.">
</desktop:ShowCaseItem>
<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>

View File

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

View File

@ -1,92 +1,94 @@
<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: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>
<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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.LoadingIndicatorShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic Usage" Description="A simple loading status.">
<atom:LoadingIndicator />
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Custom spinning indicator"
Description="Use custom loading indicator.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Customized description"
Description="Customized description">
</desktop:ShowCaseItem>
<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"
<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>
<showcase:ShowCaseItem
Title="Customized description"
Description="Customized description">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Customized description" Description="Customized description">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LoadingMaskHost IsLoading="{Binding IsLoadingSwitchChecked}"
<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>

View File

@ -1,16 +1,14 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="Simplest Usage.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.MenuShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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,67 +134,77 @@
<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>
<showcase:ShowCaseItem
Title="Menu Flyout"
Description="Right Click to show Context Flyout">
<showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem>
<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>
</Border.ContextFlyout>
<TextBlock Text="Right Click to show Context Flyout" />
</Border>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

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

View File

@ -1,61 +1,46 @@
<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: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">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.MessageShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Other types of message"
Description="Messages of success, error and warning types.">
</desktop:ShowCaseItem>
<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>
<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>
<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>
<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>
<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>

View File

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

View File

@ -1,116 +1,90 @@
<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: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">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.NotificationShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>

View File

@ -1,86 +1,107 @@
<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: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>
<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"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase: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"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase: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"/>
</StackPanel>
</showcase: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>
<showcase: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"/>
</StackPanel>
</showcase: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"/>
<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 Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:NumericUpDown Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
</StackPanel>
</showcase:ShowCaseItem>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.NumberUpDownShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic usage" Description="Numeric-only NumberUpDown.">
<atom:NumericUpDown Value="3" />
</desktop:ShowCaseItem>
</showcase:ShowCasePanel>
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Variants" Description="Variants of NumberUpDown.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown StyleVariant="Outline" Value="3" />
<atom:NumericUpDown StyleVariant="Filled" Value="3" />
<atom:NumericUpDown StyleVariant="Borderless" Value="3" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<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>
</desktop: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>
<desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<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>
</desktop:ShowCaseItem>
<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 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 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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

@ -1,14 +1,13 @@
<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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="1000"
d:DesignWidth="1920"
mc:Ignorable="d">
<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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="1000"
d:DesignWidth="1920"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
@ -23,117 +22,116 @@
</Style>
</UserControl.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<TextBlock
Margin="12,0"
FontWeight="600"
Text="Welcome AtomUI for Avalonia/.NET" />
<TextBlock Margin="12,0"
FontWeight="600"
Text="Welcome AtomUI for Avalonia/.NET" />
<!-- <StackPanel Margin="20"> -->
<!-- <StackPanel -->
<!-- Margin="20" -->
<!-- HorizontalAlignment="Center" -->
<!-- Orientation="Horizontal"> -->
<!-- <PathIcon -->
<!-- Width="32" -->
<!-- Height="32" -->
<!-- Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" /> -->
<!-- <PathIcon -->
<!-- Width="10" -->
<!-- Height="10" -->
<!-- Margin="20,0" -->
<!-- Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" /> -->
<!-- <StackPanel -->
<!-- Margin="20" -->
<!-- HorizontalAlignment="Center" -->
<!-- Orientation="Horizontal"> -->
<!-- <PathIcon -->
<!-- Width="32" -->
<!-- Height="32" -->
<!-- Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" /> -->
<!-- <PathIcon -->
<!-- Width="10" -->
<!-- Height="10" -->
<!-- Margin="20,0" -->
<!-- Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" /> -->
<!-- <Image Width="32" Height="32"> -->
<!-- <Image.Source> -->
<!-- <DrawingImage> -->
<!-- <DrawingGroup> -->
<!-- <GeometryDrawing Brush="#8B44AC" -->
<!-- Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" /> -->
<!-- <GeometryDrawing Brush="#F9F9FB" -->
<!-- Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" /> -->
<!-- <GeometryDrawing Brush="#F9F9FB" -->
<!-- Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" /> -->
<!-- <GeometryDrawing Brush="#8B44AC" -->
<!-- Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" /> -->
<!-- <GeometryDrawing Brush="#F9F9FB" -->
<!-- Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" /> -->
<!-- <GeometryDrawing Brush="#F9F9FB" -->
<!-- Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" /> -->
<!-- </DrawingGroup> -->
<!-- </DrawingImage> -->
<!-- </Image.Source> -->
<!-- </Image> -->
<!-- </StackPanel> -->
<!-- <TextBlock -->
<!-- HorizontalAlignment="Center" -->
<!-- Classes="H1" -->
<!-- Text="Semi Avalonia" -->
<!-- Theme="{DynamicResource TitleTextBlock}" /> -->
<!-- <TextBlock -->
<!-- MaxWidth="600" -->
<!-- Margin="0,20,0,0" -->
<!-- HorizontalAlignment="Center" -->
<!-- Classes="Secondary" -->
<!-- Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products." -->
<!-- TextWrapping="Wrap" /> -->
<!-- <StackPanel -->
<!-- Margin="0,10,0,0" -->
<!-- HorizontalAlignment="Center" -->
<!-- Orientation="Horizontal"> -->
<!-- <TextBlock -->
<!-- Margin="12,0" -->
<!-- FontWeight="600" -->
<!-- Text="Modern" /> -->
<!-- <TextBlock -->
<!-- Margin="12,0" -->
<!-- FontWeight="600" -->
<!-- Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}" -->
<!-- Text="Flexible" /> -->
<!-- <TextBlock -->
<!-- Margin="12,0" -->
<!-- FontWeight="600" -->
<!-- Text="Simple" /> -->
<!-- <TextBlock -->
<!-- HorizontalAlignment="Center" -->
<!-- Classes="H1" -->
<!-- Text="Semi Avalonia" -->
<!-- Theme="{DynamicResource TitleTextBlock}" /> -->
<!-- <TextBlock -->
<!-- MaxWidth="600" -->
<!-- Margin="0,20,0,0" -->
<!-- HorizontalAlignment="Center" -->
<!-- Classes="Secondary" -->
<!-- Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products." -->
<!-- TextWrapping="Wrap" /> -->
<!-- <StackPanel -->
<!-- Margin="0,10,0,0" -->
<!-- HorizontalAlignment="Center" -->
<!-- Orientation="Horizontal"> -->
<!-- <TextBlock -->
<!-- Margin="12,0" -->
<!-- FontWeight="600" -->
<!-- Text="Modern" /> -->
<!-- <TextBlock -->
<!-- Margin="12,0" -->
<!-- FontWeight="600" -->
<!-- Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}" -->
<!-- Text="Flexible" /> -->
<!-- <TextBlock -->
<!-- Margin="12,0" -->
<!-- FontWeight="600" -->
<!-- Text="Simple" /> -->
<!-- </StackPanel> -->
<!-- <StackPanel HorizontalAlignment="Center"> -->
<!-- <StackPanel> -->
<!-- <StackPanel Orientation="Horizontal"> -->
<!-- <StackPanel Margin="16,0"> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Primary" -->
<!-- Content="Primary" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Secondary" -->
<!-- Content="Secondary" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Tertiary" -->
<!-- Content="Tertiary" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Success" -->
<!-- Content="Success" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Warning" -->
<!-- Content="Warning" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Danger" -->
<!-- Content="Danger" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Primary" -->
<!-- Content="Primary" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Secondary" -->
<!-- Content="Secondary" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Tertiary" -->
<!-- Content="Tertiary" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Success" -->
<!-- Content="Success" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Warning" -->
<!-- Content="Warning" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- Classes="Danger" -->
<!-- Content="Danger" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Theme="{DynamicResource SolidButton}" /> -->
<!-- </StackPanel> -->
<!-- <Calendar Margin="16,0" /> -->
<!-- <StackPanel Margin="16,0"> -->
<!-- <TextBox -->
<!-- Width="300" -->
<!-- Margin="0,12" -->
<!-- InnerLeftContent="https://" -->
<!-- InnerRightContent=".com" /> -->
<!-- <TextBox -->
<!-- Width="300" -->
<!-- Margin="0,12" -->
<!-- InnerLeftContent="https://" -->
<!-- InnerRightContent=".com" /> -->
<!-- <DatePicker Width="300" Margin="0,12" /> -->
<!-- <CalendarDatePicker Width="300" Margin="0,12" /> -->
<!-- <NumericUpDown Width="300" Margin="0,12" /> -->
@ -153,18 +151,18 @@
<!-- <CheckBox Content="Windows" IsChecked="True" /> -->
<!-- <CheckBox Content="macOS" IsChecked="True" /> -->
<!-- <CheckBox Content="Linux" IsChecked="True" /> -->
<!-- <CheckBox -->
<!-- Content="iOS" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" /> -->
<!-- <CheckBox -->
<!-- Content="Android" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" /> -->
<!-- <CheckBox -->
<!-- Content="Wasm" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" /> -->
<!-- <CheckBox -->
<!-- Content="iOS" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" /> -->
<!-- <CheckBox -->
<!-- Content="Android" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" /> -->
<!-- <CheckBox -->
<!-- Content="Wasm" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" /> -->
<!-- </UniformGrid> -->
<!-- <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
<!-- <UniformGrid.Styles> -->
@ -172,101 +170,101 @@
<!-- <Setter Property="Margin" Value="4" /> -->
<!-- </Style> -->
<!-- </UniformGrid.Styles> -->
<!-- <CheckBox -->
<!-- Content="Windows" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="macOS" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Linux" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="iOS" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Android" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Wasm" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Windows" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="macOS" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Linux" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="iOS" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Android" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- <CheckBox -->
<!-- Content="Wasm" -->
<!-- IsChecked="{x:Null}" -->
<!-- IsThreeState="True" -->
<!-- Theme="{DynamicResource CardCheckBox}" /> -->
<!-- </UniformGrid> -->
<!-- </StackPanel> -->
<!-- -->
<!-- -->
<!-- </StackPanel> -->
<!-- <StackPanel Orientation="Horizontal"> -->
<!-- <StackPanel Margin="16,0"> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Primary" -->
<!-- Content="Primary" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Secondary" -->
<!-- Content="Secondary" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Tertiary" -->
<!-- Content="Tertiary" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Success" -->
<!-- Content="Success" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Warning" -->
<!-- Content="Warning" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Danger" -->
<!-- Content="Danger" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Primary" -->
<!-- Content="Primary" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Secondary" -->
<!-- Content="Secondary" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Tertiary" -->
<!-- Content="Tertiary" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Success" -->
<!-- Content="Success" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Warning" -->
<!-- Content="Warning" /> -->
<!-- <Button -->
<!-- Margin="0,8" -->
<!-- HorizontalAlignment="Stretch" -->
<!-- Classes="Danger" -->
<!-- Content="Danger" /> -->
<!-- </StackPanel> -->
<!-- <ColorView -->
<!-- Name="color" -->
<!-- VerticalAlignment="Top" -->
<!-- Palette="{DynamicResource SemiColorPalette}" -->
<!-- SelectedIndex="2" -->
<!-- Color="#8B44AC" /> -->
<!-- <ColorView -->
<!-- Name="color" -->
<!-- VerticalAlignment="Top" -->
<!-- Palette="{DynamicResource SemiColorPalette}" -->
<!-- SelectedIndex="2" -->
<!-- Color="#8B44AC" /> -->
<!-- <StackPanel Width="300" Margin="8"> -->
<!-- <StackPanel Orientation="Horizontal"> -->
<!-- <Slider -->
<!-- Name="slider" -->
<!-- Width="200" -->
<!-- Margin="16" -->
<!-- Maximum="100" -->
<!-- Minimum="0" /> -->
<!-- <Slider -->
<!-- Name="slider" -->
<!-- Width="200" -->
<!-- Margin="16" -->
<!-- Maximum="100" -->
<!-- Minimum="0" /> -->
<!-- <ToggleSwitch Name="three" IsChecked="True" /> -->
<!-- </StackPanel> -->
<!-- <UniformGrid Columns="2"> -->
<!-- <ProgressBar -->
<!-- Width="100" -->
<!-- MinWidth="100" -->
<!-- Margin="0,16" -->
<!-- IsIndeterminate="{Binding #three.IsChecked}" -->
<!-- ShowProgressText="True" -->
<!-- Value="{Binding #slider.Value}" /> -->
<!-- <ProgressBar -->
<!-- Width="100" -->
<!-- Height="100" -->
<!-- IsIndeterminate="{Binding #three.IsChecked}" -->
<!-- ShowProgressText="True" -->
<!-- Theme="{DynamicResource ProgressRing}" -->
<!-- Value="{Binding #slider.Value}" /> -->
<!-- <ProgressBar -->
<!-- Width="100" -->
<!-- MinWidth="100" -->
<!-- Margin="0,16" -->
<!-- IsIndeterminate="{Binding #three.IsChecked}" -->
<!-- ShowProgressText="True" -->
<!-- Value="{Binding #slider.Value}" /> -->
<!-- <ProgressBar -->
<!-- Width="100" -->
<!-- Height="100" -->
<!-- IsIndeterminate="{Binding #three.IsChecked}" -->
<!-- ShowProgressText="True" -->
<!-- Theme="{DynamicResource ProgressRing}" -->
<!-- Value="{Binding #slider.Value}" /> -->
<!-- </UniformGrid> -->
<!-- <TabStrip Margin="0,8"> -->
<!-- <TabStripItem Content="Tab 1" /> -->
@ -291,10 +289,10 @@
<!-- </MenuItem> -->
<!-- <MenuItem Header="Menu 3" /> -->
<!-- </Menu> -->
<!-- -->
<!-- -->
<!-- </StackPanel> -->
<!-- <StackPanel Margin="8"> -->
<!-- -->
<!-- -->
<!-- <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
<!-- <UniformGrid.Styles> -->
<!-- <Style Selector="RadioButton"> -->
@ -313,10 +311,10 @@
<!-- <Setter Property="HorizontalAlignment" Value="Center" /> -->
<!-- </Style> -->
<!-- </UniformGrid.Styles> -->
<!-- <RadioButton -->
<!-- Content="Avalonia" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardRadioButton}" /> -->
<!-- <RadioButton -->
<!-- Content="Avalonia" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardRadioButton}" /> -->
<!-- <RadioButton Content="WPF" Theme="{DynamicResource CardRadioButton}" /> -->
<!-- <RadioButton Content="Xamarin" Theme="{DynamicResource CardRadioButton}" /> -->
<!-- </UniformGrid> -->
@ -350,25 +348,25 @@
<!-- </StackPanel> -->
<!-- </StackPanel> -->
<!-- </StackPanel> -->
<!-- <TextBlock -->
<!-- Margin="0,32,0,16" -->
<!-- Classes="H5" -->
<!-- Text="Start to install" -->
<!-- Theme="{DynamicResource TitleTextBlock}" /> -->
<!-- <TextBlock -->
<!-- Margin="0,32,0,16" -->
<!-- Classes="H5" -->
<!-- Text="Start to install" -->
<!-- Theme="{DynamicResource TitleTextBlock}" /> -->
<!-- <TabControl Padding="8"> -->
<!-- <TabItem Header="Main"> -->
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].MainInstall}" /> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].MainInstall}" /> -->
<!-- </Border> -->
<!-- <TextBlock Text="Reference styles: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].MainStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].MainStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
@ -376,15 +374,15 @@
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].ColorPickerInstall}" /> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].ColorPickerInstall}" /> -->
<!-- </Border> -->
<!-- <TextBlock Text="Reference styles: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].ColorPickerStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].ColorPickerStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
@ -392,15 +390,15 @@
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].DataGridInstall}" /> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].DataGridInstall}" /> -->
<!-- </Border> -->
<!-- <TextBlock Text="Reference styles: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].DataGridStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].DataGridStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
@ -408,15 +406,15 @@
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].TreeDataGridInstall}" /> -->
<!-- <SelectableTextBlock FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].TreeDataGridInstall}" /> -->
<!-- </Border> -->
<!-- <TextBlock Text="Reference styles: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].TreeDataGridStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].TreeDataGridStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->

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;

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PaginationShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

View File

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

View File

@ -1,16 +1,15 @@
<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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="viewModels:PaletteDemoViewModel"
mc:Ignorable="d">
<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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="viewModels:PaletteDemoViewModel"
mc:Ignorable="d">
<Design.DataContext>
<viewModels:PaletteDemoViewModel />
</Design.DataContext>
@ -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>

View File

@ -1,38 +1,29 @@
<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: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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PopupConfirmShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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">
<atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
</atom:PopupConfirm>
</showcase: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>
<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>
<showcase:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
</desktop:ShowCaseItem>
<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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="1"
Grid.Column="0"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="2"
Grid.Column="0"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="3"
Grid.Column="0"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="0"
Grid.Column="1"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="0"
Grid.Column="2"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="0"
Grid.Column="3"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="1"
Grid.Column="4"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="2"
Grid.Column="4"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="3"
Grid.Column="4"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="4"
Grid.Column="1"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="4"
Grid.Column="2"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:PopupConfirm Title="Delete the task"
Grid.Row="4"
Grid.Column="3"
CancelText="Cancel"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
Placement="BottomEdgeAlignedRight"
Trigger="Click">
<atom:Button ButtonType="Default">BR</atom:Button>
</atom:PopupConfirm>
</Grid>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Customize icon"
Description="Set icon props to customize the icon.">
<atom:PopupConfirm
Title="Delete the task"
ConfirmContent="Are you sure to delete this task?"
Icon="{atom:IconProvider Kind=QuestionCircleOutlined}"
ConfirmStatus="Error"
OkText="Ok"
CancelText="Cancel">
</desktop:ShowCaseItem>
<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?"
ConfirmStatus="Error"
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>

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;

View File

@ -1,82 +1,76 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.RadioButtonShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled state of RadioButton.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Radio Group"
Description="A group of radio components.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Vertical Radio Group"
Description="Vertical Radio Group.">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="option style"
Description="The combination of option button style.">
</desktop:ShowCaseItem>
<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>
@ -101,58 +93,54 @@
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:OptionButtonGroup>
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:OptionButtonGroup>
<atom:OptionButton IsChecked="True" IsEnabled="False">Hangzhou</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Beijing</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Solid option button"
Description="Solid option button style.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Solid option button" Description="Solid option button style.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:OptionButtonGroup ButtonStyle="Solid">
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
<atom:OptionButton>Shanghai</atom:OptionButton>
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:OptionButtonGroup ButtonStyle="Solid">
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:OptionButtonGroup ButtonStyle="Solid">
<atom:OptionButton IsChecked="True" IsEnabled="False">Hangzhou</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Beijing</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Size type"
Description="There are three sizes available: large, medium, and small. It can coordinate with input box.">
</desktop:ShowCaseItem>
<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>
@ -160,24 +148,24 @@
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:OptionButtonGroup SizeType="Middle">
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
<atom:OptionButton>Shanghai</atom:OptionButton>
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
<atom:OptionButtonGroup SizeType="Small">
<atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
<atom:OptionButton>Shanghai</atom:OptionButton>
<atom:OptionButton>Beijing</atom:OptionButton>
<atom:OptionButton>Chengdu</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

@ -1,17 +1,17 @@
<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: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">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SegmentedShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled Segmented.">
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Spacing="10">
</desktop:ShowCaseItem>
<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>
<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>
<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>
@ -64,7 +62,7 @@
<atom:SegmentedItem>Quarterly</atom:SegmentedItem>
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
<atom:Segmented>
<atom:SegmentedItem>Daily</atom:SegmentedItem>
<atom:SegmentedItem>Weekly</atom:SegmentedItem>
@ -72,7 +70,7 @@
<atom:SegmentedItem>Quarterly</atom:SegmentedItem>
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
<atom:Segmented SizeType="Small">
<atom:SegmentedItem>Daily</atom:SegmentedItem>
<atom:SegmentedItem>Weekly</atom:SegmentedItem>
@ -81,55 +79,51 @@
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="With Icon only"
Description="Set icon without label for Segmented Item.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="With Icon"
Description="Set icon for Segmented Item.">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
</desktop:ShowCaseItem>
<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=WindowsOutlined}">
</atom:SegmentedItem>
<atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />
<atom:SegmentedItem Content="微软牛逼" Icon="{atom:IconProvider Kind=WindowsOutlined}" />
</atom:Segmented>
<atom:Segmented SizeType="Large">
<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=WindowsOutlined}">
</atom:SegmentedItem>
<atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />
<atom:SegmentedItem Content="微软牛逼" Icon="{atom:IconProvider Kind=WindowsOutlined}" />
</atom:Segmented>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

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

View File

@ -1,101 +1,104 @@
<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: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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SeparatorShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Divider with title"
Description="Divider with inner title, set orientation='left/right' to align it.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Text without heading style"
Description="You can use non-heading style of divider text by setting the plain property.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Vertical"
Description="Use type='vertical' to make the divider vertical.">
</desktop:ShowCaseItem>
<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>

View File

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

View File

@ -1,141 +1,122 @@
<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: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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SliderShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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
Maximum="100"
Minimum="0"
TickFrequency="5"
IsEnabled="{Binding NormalEnabled}"
Value="50"/>
<atom:Slider
Maximum="100"
Minimum="0"
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" />
<atom:Slider IsEnabled="{Binding NormalEnabled}"
Maximum="100"
Minimum="0"
TickFrequency="5"
Value="50" />
<atom:Slider IsEnabled="{Binding NormalEnabled}"
IsRangeMode="True"
Maximum="100"
Minimum="0"
RangeValue="20, 80"
TickFrequency="5" />
<atom:Slider IsEnabled="{Binding NormalEnabled}"
IsRangeMode="True"
Marks="{Binding SliderMarks}"
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>
<showcase:ShowCaseItem
Title="Customize tooltip"
Description="Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.">
</desktop:ShowCaseItem>
<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
Maximum="100"
Minimum="0"
TickFrequency="1"
IsSnapToTickEnabled="True"
ValueFormatTemplate="\{0\}%"
Value="20"/>
<atom:Slider IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
TickFrequency="1"
ValueFormatTemplate="\{0\}%"
Value="20" />
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical"
Description="The vertical Slider.">
<StackPanel Orientation="Horizontal" Spacing="20" Height="300">
<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"
IsSnapToTickEnabled="True"
Value="20"/>
<atom:Slider
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="1"
Marks="{Binding SliderMarks}"
Value="20"/>
<atom:Slider
Maximum="100"
Minimum="0"
IsRangeMode="True"
Orientation="Vertical"
TickFrequency="5"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
</desktop:ShowCaseItem>
<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 IsRangeMode="True"
IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
RangeValue="20, 80"
TickFrequency="5"
Value="20" />
<atom:Slider Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="1"
Value="20" />
<atom:Slider IsRangeMode="True"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
Orientation="Vertical"
RangeValue="20, 80"
TickFrequency="5" />
</StackPanel>
</showcase: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>
<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
Maximum="100"
Minimum="0"
TickFrequency="1"
Marks="{Binding SliderMarks}"
Value="20"/>
<atom:Slider
Maximum="100"
Minimum="0"
IsRangeMode="True"
TickFrequency="5"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
<atom:Slider Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
TickFrequency="1"
Value="20" />
<atom:Slider IsRangeMode="True"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
RangeValue="20, 80"
TickFrequency="5" />
<TextBlock FontWeight="Bold">included=false</TextBlock>
<atom:Slider
Maximum="100"
Minimum="0"
TickFrequency="1"
Marks="{Binding SliderMarks}"
Included="False"
Value="20"/>
<atom:Slider
Maximum="100"
Minimum="0"
IsRangeMode="True"
TickFrequency="5"
Included="False"
Marks="{Binding SliderMarks}"
RangeValue="20, 80" />
<atom:Slider Included="False"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
TickFrequency="1"
Value="20" />
<atom:Slider Included="False"
IsRangeMode="True"
Marks="{Binding SliderMarks}"
Maximum="100"
Minimum="0"
RangeValue="20, 80"
TickFrequency="5" />
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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>
<showcase:ShowCaseItem
Title="Flyout trigger type"
Description="Support two kind of Trigger type.">
<showcase:ShowCaseItem.Styles>
</desktop:ShowCaseItem>
<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>

View File

@ -1,86 +1,87 @@
<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: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">
<atom:ToggleSwitch />
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled state of Switch.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<atom:ToggleSwitch x:Name="ToggleDisabledSwitch" />
<atom:Button ButtonType="Primary"
Command="{Binding $parent[showcase:SwitchShowCase].ToggleDisabledStatus}"
CommandParameter="{Binding ElementName=ToggleDisabledSwitch}">
toggle disabled
</atom:Button>
</StackPanel>
</showcase:ShowCaseItem>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SwitchShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="10">
<atom:ToggleSwitch />
</StackPanel>
</desktop:ShowCaseItem>
<showcase:ShowCaseItem
Title="Text and icon"
Description="With text and icon.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<atom:ToggleSwitch
OnContent="On"
OffContent="Off"
IsChecked="True" />
<atom:ToggleSwitch
OnContent="开"
OffContent="关" />
<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}"
CommandParameter="{Binding ElementName=ToggleDisabledSwitch}">
toggle disabled
</atom:Button>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Text and icon" Description="With text and icon.">
<StackPanel HorizontalAlignment="Left"
Orientation="Vertical"
Spacing="10">
<atom:ToggleSwitch IsChecked="True"
OffContent="Off"
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>
<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>
<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>

View File

@ -1,18 +1,16 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TabControlShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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,61 +18,53 @@
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:TabControl>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="Disabled a tab.">
</desktop:ShowCaseItem>
<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>
<atom:TabItem Header="Tab 2" IsEnabled="False">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:CardTabControl>
<atom:TabControl>
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
<atom:TabItem Header="Tab 2" IsEnabled="False">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:TabControl>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Centered"
Description="Centered tabs.">
</desktop:ShowCaseItem>
<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>
<atom:TabItem Header="Tab 2">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:TabControl>
<atom:CardTabControl TabAlignmentCenter="True">
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
<atom:TabItem Header="Tab 2">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon"
Description="The Tab with Icon.">
</desktop:ShowCaseItem>
<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>
<atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
<atom:TabItem Header="Tab 3" Icon="{atom:IconProvider Kind=WechatOutlined}">Content of Tab Pane 3</atom:TabItem>
</atom:TabControl>
</StackPanel>
</showcase: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>
<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>
@ -98,7 +88,7 @@
<atom:TabItem Header="Tab 19">Content of Tab Pane 19</atom:TabItem>
<atom:TabItem Header="Tab 20">Content of Tab Pane 20</atom:TabItem>
</atom:TabControl>
<atom:CardTabControl>
<atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
<atom:TabItem Header="Tab 2">Content of Tab Pane 2</atom:TabItem>
@ -122,13 +112,11 @@
<atom:TabItem Header="Tab 20">Content of Tab Pane 20</atom:TabItem>
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Card type tab"
Description="Another type of Tabs, which doesn't support vertical mode.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Card type tab" Description="Another type of Tabs, which doesn't support vertical mode.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabControl>
<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>
@ -136,15 +124,13 @@
</atom:CardTabControl>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Position"
Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
</desktop:ShowCaseItem>
<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>
<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>
<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"
HorizontalAlignment="Left"
VerticalAlignment="Top">
Width="500"
Height="300"
HorizontalAlignment="Left"
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>
<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>
<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>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</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,48 +249,42 @@
<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>
<atom:TabStrip>
<atom:TabStripItem>Tab 1</atom:TabStripItem>
<atom:TabStripItem IsEnabled="False">Tab 2</atom:TabStripItem>
<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>
<atom:TabStripItem>Tab 2</atom:TabStripItem>
<atom:TabStripItem>Tab 3</atom:TabStripItem>
</atom:TabStrip>
<atom:CardTabStrip TabAlignmentCenter="True">
<atom:TabStripItem>Tab 1</atom:TabStripItem>
<atom:TabStripItem>Tab 2</atom:TabStripItem>
<atom:TabStripItem>Tab 3</atom:TabStripItem>
</atom:CardTabStrip>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Icon"
Description="The Tab with Icon.">
</StackPanel>
</desktop:ShowCaseItem>
<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>

View File

@ -1,21 +1,19 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TagShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>

View File

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

View File

@ -1,145 +1,137 @@
<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: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>
<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.">
<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"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Disabled"
Description="A disabled state of the TimePicker.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TimePickerShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<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" IsEnabled="False" 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>
<showcase:ShowCaseItem
Title="Interval option"
Description="Show stepped options by MinuteIncrement SecondIncrement.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Disabled" Description="A disabled state of the TimePicker.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Watermark="Select time"
Width="160"
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
IsEnabled="False"
Watermark="Select time" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Interval option" Description="Show stepped options by MinuteIncrement SecondIncrement.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Width="160"
DefaultTime="12:08:23"
MinuteIncrement="15"
SecondIncrement="10"
/>
Watermark="Select time" />
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="12 hours"
Description="TimePicker of 12 hours format, with default format h:mm:ss a.">
</desktop:ShowCaseItem>
<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>
<showcase:ShowCaseItem
Title="Variants"
Description="Bordered-less style component.">
</desktop:ShowCaseItem>
<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:TimePicker Width="160"
StyleVariant="Borderless"
Watermark="Borderless" />
<atom:RangeTimePicker Width="320"
StyleVariant="Borderless"
RangeStartWatermark="Borderless"/>
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"
Status="Default"
RangeEndWatermark="End time"
RangeStartWatermark="Start time"
RangeEndWatermark="End time" />
Status="Default"
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>
<showcase:ShowCaseItem
Title="Time Range Picker"
Description="Use time range picker with RangeTimePicker.">
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Time Range Picker" Description="Use time range picker with RangeTimePicker.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:RangeTimePicker Width="320"
Status="Default"
RangeStartWatermark="Start time"
RangeEndWatermark="End time"/>
RangeEndWatermark="End time"
RangeStartWatermark="Start time"
Status="Default" />
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TimelineShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

View File

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

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TitleBarShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

View File

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

View File

@ -1,13 +1,11 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
</showcase:ShowCasePanel>
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ToolBarShowCase"
xmlns="https://github.com/avaloniaui"
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">
<desktop:ShowCasePanel />
</UserControl>

View File

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

View File

@ -1,27 +1,23 @@
<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCaseItem
Title="Basic"
Description="The simplest usage.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TooltipShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="1"
Grid.Column="0"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="2"
Grid.Column="0"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="3"
Grid.Column="0"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="0"
Grid.Column="1"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="0"
Grid.Column="2"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="0"
Grid.Column="3"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="1"
Grid.Column="4"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="2"
Grid.Column="4"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="3"
Grid.Column="4"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="4"
Grid.Column="1"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="4"
Grid.Column="2"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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:ToolTip.IsShowArrow="{Binding ShowArrow}"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}">
<atom:Button Grid.Row="4"
Grid.Column="3"
atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
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>

View File

@ -1,20 +1,20 @@
<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: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.">
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TreeViewShowCase"
xmlns="https://github.com/avaloniaui"
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">
<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>
<showcase:ShowCaseItem
Title="Block Node"
Description="Block Node.">
<atom:TreeView IsCheckable="True" IsDefaultExpandAll="True" NodeHoverMode="Block">
</desktop:ShowCaseItem>
<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>
<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>
<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>

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>

View File

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

View File

@ -1,16 +1,15 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<!-- Add Resources Here -->
<ControlTheme x:Key="NavigationTab" TargetType="TabControl">
<Setter Property="TabControl.Template">
<!-- -->
<!-- -->
<ControlTemplate TargetType="TabControl">
<Border
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<DockPanel>
<ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
<Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
@ -24,13 +23,12 @@
<Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
</ScrollViewer>
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
<ContentPresenter Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
</DockPanel>
</Border>
</ControlTemplate>

View File

@ -1,19 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<!-- Add Resources Here -->
<ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
<Setter Property="ToggleButton.Template">
<ControlTemplate TargetType="ToggleButton">
<Border
Name="Background"
Padding="8"
Background="{TemplateBinding Background}"
CornerRadius="3">
<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"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
<Border Name="Background"
Padding="8"
Background="{TemplateBinding Background}"
CornerRadius="3">
<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"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Border>
</ControlTemplate>
</Setter>

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.

View File

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

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;

View File

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

View File

@ -1,13 +1,13 @@
<UserControl
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d"
x:Class="AtomUI.Demo.Desktop.Views.MainView"
xmlns="https://github.com/avaloniaui"
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">
<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"
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
Grid.Row="1"
HorizontalAlignment="Stretch"
Margin="8"
Name="Tab"
Padding="20,0,0,0"
TabStripPlacement="Left"
FontSize="13"
x:Name="ShowCaseNav"
Theme="{DynamicResource NavigationTab}">
<TabControl x:Name="ShowCaseNav" Name="Tab"
Grid.Row="1"
Margin="8"
Padding="20,0,0,0"
HorizontalAlignment="Stretch"
FontSize="13"
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>

View File

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

View File

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

View File

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

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;

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;

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;

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;

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;

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;

View File

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

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>

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;

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),

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;

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;

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;

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;

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;

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;

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