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

Remove Samples

Browse Source
This commit is contained in:
polarboy 2024-09-29 09:38:01 +08:00
parent c8caabbde8
commit 70e3492642
126 changed files with 7 additions and 10859 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +0,0 @@
<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>
</Application>

29
samples/AtomUI.Demo.Desktop/App.axaml.cs
View File

@ -1,29 +0,0 @@
using AtomUI.Demo.Desktop.Views;
using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
namespace AtomUI.Demo.Desktop;
public class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
public override void OnFrameworkInitializationCompleted()
{
switch (ApplicationLifetime)
{
case IClassicDesktopStyleApplicationLifetime desktop:
desktop.MainWindow = new MainWindow();
break;
case ISingleViewApplicationLifetime singleView:
singleView.MainView = new MainView();
break;
}
base.OnFrameworkInitializationCompleted();
}
}

BIN
samples/AtomUI.Demo.Desktop/Assets/ATOMUI-LOGO.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

43
samples/AtomUI.Demo.Desktop/Assets/EmptyShowCase/empty.svg
View File

@ -1,43 +0,0 @@
<svg width="130" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="52.348%" y1="74.611%" x2="52.348%" y2="-17.635%" id="a">
<stop stop-color="#DEDEDE" stop-opacity="0" offset="0%"/>
<stop stop-color="#A9A9A9" stop-opacity=".3" offset="100%"/>
</linearGradient>
<linearGradient x1="44.79%" y1="100%" x2="44.79%" y2="0%" id="b">
<stop stop-color="#FFF" stop-opacity="0" offset="0%"/>
<stop stop-color="#96A1C5" stop-opacity=".373" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="100%" x2="50%" y2="-19.675%" id="c">
<stop stop-color="#FFF" stop-opacity="0" offset="0%"/>
<stop stop-color="#919191" stop-opacity=".15" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="44.95%" id="d">
<stop stop-color="#5389F5" offset="0%"/>
<stop stop-color="#416FDC" offset="100%"/>
</linearGradient>
<linearGradient x1="63.345%" y1="100%" x2="63.345%" y2="-5.316%" id="e">
<stop stop-color="#DCE9FF" offset="0%"/>
<stop stop-color="#B6CFFF" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="f">
<stop stop-color="#7CA5F7" offset="0%"/>
<stop stop-color="#C4D6FC" offset="100%"/>
</linearGradient>
</defs>
<g transform="translate(-1.866 .364)" fill="none" fill-rule="evenodd">
<path d="M27.94 14.864c1.326-4.192 2.56-6.802 3.7-7.831 3.157-2.848 7.522-1.298 8.45-1.076 3.26.782 2.2-4.364 4.997-5.41 1.864-.697 3.397.155 4.6 2.556C50.752.863 52.375-.163 54.556.02c3.272.277 4.417 11.328 8.913 8.909 4.497-2.42 10.01-2.973 12.365.623.509.778.704-.429 4.166-4.55C83.462.88 86.914-.936 93.996 1.464c3.22 1.09 5.868 4.045 7.947 8.864 0 6.878 5.06 10.95 15.178 12.213 15.179 1.895 3.397 18.214-15.178 22.993-18.576 4.78-61.343 7.36-84.551-4.716C1.92 32.769 5.436 24.117 27.939 14.864z"
fill="url(#a)" opacity=".8"/>
<ellipse fill="url(#b)" cx="66" cy="69.166" rx="27.987" ry="6.478"/>
<path d="M113.25 77.249c-21.043 5.278-92.87-.759-100.515-3.516-3.721-1.343-7.075-3.868-10.061-7.576a2.822 2.822 0 0 1 2.198-4.593h125.514c2.605 6.938-3.107 12.166-17.136 15.685z"
fill="url(#c)" opacity=".675"/>
<g fill-rule="nonzero">
<path d="M43.396 12.098L33.825.906a2.434 2.434 0 0 0-1.837-.86h-20.58c-.706 0-1.377.324-1.837.86L0 12.098v6.144h43.396v-6.144z"
fill="url(#d)" transform="translate(44.08 39.707)"/>
<path d="M40.684 18.468L32.307 8.72a2.136 2.136 0 0 0-1.622-.725H12.711c-.617 0-1.22.256-1.622.725l-8.377 9.748v5.354h37.972v-5.354z"
fill="url(#e)" transform="translate(44.08 39.707)"/>
<path d="M43.396 25.283c0 .853-.384 1.62-.99 2.134l-.123.1a2.758 2.758 0 0 1-1.67.56H2.784c-.342 0-.669-.062-.971-.176l-.15-.06A2.802 2.802 0 0 1 0 25.282V12.165h10.529c1.163 0 2.1.957 2.1 2.118v.015c0 1.162.948 2.099 2.111 2.099h13.916a2.113 2.113 0 0 0 2.111-2.107c0-1.166.938-2.125 2.1-2.125h10.53z"
fill="url(#f)" transform="translate(44.08 39.707)"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
samples/AtomUI.Demo.Desktop/Assets/avalonia-logo.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
samples/AtomUI.Demo.Desktop/Assets/watermark-sample.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 194 KiB

51
samples/AtomUI.Demo.Desktop/AtomUI.Demo.Desktop.csproj
View File

@ -1,51 +0,0 @@
<Project Sdk="Microsoft.NET.Sdk">
<Import Project="$(MSBuildThisFileDirectory)..\..\build\Common.props"/>
<Import Project="$(MSBuildThisFileDirectory)..\..\Build\Output.App.props"/>
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net8.0</TargetFramework>
<RootNamespace>AtomUI.Demo.Desktop</RootNamespace>
<BuiltInComInteropSupport>true</BuiltInComInteropSupport>
</PropertyGroup>
<ItemGroup>
<AvaloniaResource Include="Assets\**"/>
</ItemGroup>
<ItemGroup>
<TrimmerRootDescriptor Include="Roots.xml" />
</ItemGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
<IsTrimmable>true</IsTrimmable>
<PublishTrimmed>true</PublishTrimmed>
<PublishAot>true</PublishAot>
</PropertyGroup>
<PropertyGroup>
<BuiltInComInteropSupport>true</BuiltInComInteropSupport>
<ApplicationManifest>app.manifest</ApplicationManifest>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Avalonia"/>
<PackageReference Include="Avalonia.Desktop"/>
<PackageReference Include="Avalonia.Themes.Fluent"/>
<PackageReference Include="Avalonia.Controls.DataGrid"/>
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics"/>
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Nlnet.Avalonia.DevTools"/>
<PackageReference Include="CommunityToolkit.Mvvm"/>
</ItemGroup>
<ItemGroup Condition=" '$(Configuration)' == 'DEBUG' ">
<ProjectReference Include="..\..\packages\AtomUI\AtomUI.csproj" />
</ItemGroup>
<ItemGroup Condition=" '$(Configuration)' == 'RELEASE' ">
<PackageReference Include="AtomUI" />
</ItemGroup>
</Project>

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

@ -1,5 +0,0 @@
<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/=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>

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

@ -1,65 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.LogicalTree;
using Avalonia.Media;
using Separator = AtomUI.Controls.Separator;
namespace AtomUI.Demo.Desktop;
public class ShowCaseItem : ContentControl
{
private bool _initialized;
public string Title { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
private void SetupUi()
{
var mainLayout = new StackPanel();
var showCaseTitle = new Separator
{
Title = Title,
TitlePosition = SeparatorTitlePosition.Left,
FontWeight = FontWeight.Bold
};
if (Content is Control contentControl)
{
LogicalChildren.Remove(contentControl);
mainLayout.Children.Add(contentControl);
}
mainLayout.Children.Add(new Border
{
Height = 10,
Background = Brushes.Transparent
});
mainLayout.Children.Add(showCaseTitle);
mainLayout.Children.Add(new TextBlock
{
Text = Description,
TextWrapping = TextWrapping.Wrap,
Margin = new Thickness(0, 10, 0, 0)
});
var outerBorder = new Border
{
BorderBrush = new SolidColorBrush(new Color(10, 5, 5, 5)),
BorderThickness = new Thickness(1),
Padding = new Thickness(20),
Child = mainLayout,
CornerRadius = new CornerRadius(8)
};
Content = outerBorder;
}
protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
{
if (!_initialized)
{
SetupUi();
_initialized = true;
}
}
}

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

@ -1,94 +0,0 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Layout;
using Avalonia.LogicalTree;
using Avalonia.Metadata;
using AvaloniaControlList = Avalonia.Controls.Controls;
namespace AtomUI.Demo.Desktop;
public class ShowCasePanel : Control
{
public string? Id { get; protected set; }
private bool _initialized;
private StackPanel _leftContainer = default!;
private StackPanel _rightContainer = default!;
[Content] public AvaloniaControlList Children { get; } = new();
protected void SetupUi()
{
var mainLayout = new UniformGrid
{
Rows = 1,
Columns = 2,
Margin = new Thickness(0)
};
_leftContainer = new StackPanel
{
Orientation = Orientation.Vertical,
Spacing = 10,
Margin = new Thickness(0, 0, 10, 0)
};
_rightContainer = new StackPanel
{
Orientation = Orientation.Vertical,
Spacing = 10
};
mainLayout.Children.Add(_leftContainer);
mainLayout.Children.Add(_rightContainer);
for (var i = 0; i < Children.Count; ++i)
{
var control = Children[i];
if (i % 2 == 0)
{
_leftContainer.Children.Add(control);
}
else
{
_rightContainer.Children.Add(control);
}
}
var scrollView = new ScrollViewer
{
Content = mainLayout
};
LogicalChildren.Add(scrollView);
VisualChildren.Add(scrollView);
}
protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
{
if (!_initialized)
{
SetupUi();
NotifyShowCaseLayoutReady();
_initialized = true;
}
base.OnAttachedToLogicalTree(e);
}
internal virtual void NotifyAboutToActive()
{
}
internal virtual void NotifyActivated()
{
}
internal virtual void NotifyAboutToDeactivated()
{
}
internal virtual void NotifyDeactivated()
{
}
protected virtual void NotifyShowCaseLayoutReady()
{
}
}

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

@ -1,42 +0,0 @@
<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>
<ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
<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}">
<Panel>
<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>
</Setter>
<Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
<Setter Property="TextBlock.IsVisible" Value="True" />
</Style>
</ControlTheme>
</ResourceDictionary>

38
samples/AtomUI.Demo.Desktop/Controls/Colors/ColorItemControl.cs
View File

@ -1,38 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using Avalonia;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using CommunityToolkit.Mvvm.Messaging;
namespace AtomUI.Demo.Desktop.Controls;
public class ColorItemControl : TemplatedControl
{
public static readonly StyledProperty<string?> ColorNameProperty =
AvaloniaProperty.Register<ColorItemControl, string?>(
nameof(ColorName));
public string? ColorName
{
get => GetValue(ColorNameProperty);
set => SetValue(ColorNameProperty, value);
}
public static readonly StyledProperty<string?> HexProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
nameof(Hex));
public string? Hex
{
get => GetValue(HexProperty);
set => SetValue(HexProperty, value);
}
protected override void OnPointerPressed(PointerPressedEventArgs e)
{
base.OnPointerPressed(e);
if (DataContext is ColorItemViewModel v)
{
WeakReferenceMessenger.Default.Send(v);
}
}
}

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

@ -1,31 +0,0 @@
<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.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorItemViewModel">
<controls:ColorItemControl Background="{Binding Brush}"
ColorName="{Binding ColorDisplayName}"
Foreground="{Binding TextBrush}"
Hex="{Binding Hex}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

18
samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListControl.cs
View File

@ -1,18 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using Avalonia;
using Avalonia.Controls.Primitives;
namespace AtomUI.Demo.Desktop.Controls;
public class ColorListControl : TemplatedControl
{
public static readonly StyledProperty<ColorListViewModel> ListDataProperty =
AvaloniaProperty.Register<ColorListGroupControl, ColorListViewModel>(
nameof(ListData), new ColorListViewModel());
public ColorListViewModel ListData
{
get => GetValue(ListDataProperty);
set => SetValue(ListDataProperty, value);
}
}

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

@ -1,29 +0,0 @@
<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.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorListViewModel">
<controls:ColorListControl ListData="{Binding}"
Margin="10" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

18
samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListGroupControl.cs
View File

@ -1,18 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using Avalonia;
using Avalonia.Controls.Primitives;
namespace AtomUI.Demo.Desktop.Controls;
public class ColorListGroupControl : TemplatedControl
{
public static readonly StyledProperty<ColorGroupViewModel> GroupDataProperty =
AvaloniaProperty.Register<ColorListGroupControl, ColorGroupViewModel>(
nameof(GroupData), new ColorGroupViewModel());
public ColorGroupViewModel GroupData
{
get => GetValue(GroupDataProperty);
set => SetValue(GroupDataProperty, value);
}
}

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

@ -1,29 +0,0 @@
<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">
<ControlTemplate TargetType="controls:IconGallery">
<ItemsControl ItemsSource="{Binding IconInfos}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:IconInfoItemModel">
<controls:IconInfoItem
IconName="{Binding IconName}"
IconKind="{Binding IconKind}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

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

@ -1,54 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using AtomUI.Icon;
using Avalonia;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.LogicalTree;
using CommunityToolkit.Mvvm.Messaging;
namespace AtomUI.Demo.Desktop.Controls;
public class IconGallery : TemplatedControl
{
private bool _initialized;
private readonly IconGalleryModel _galleryModel;
public static readonly StyledProperty<IconThemeType?> IconThemeTypeProperty =
AvaloniaProperty.Register<IconInfoItem, IconThemeType?>(
nameof(IconThemeType));
public IconThemeType? IconThemeType
{
get => GetValue(IconThemeTypeProperty);
set => SetValue(IconThemeTypeProperty, value);
}
public IconGallery()
{
_galleryModel = new IconGalleryModel();
DataContext = _galleryModel;
}
protected override void OnPointerPressed(PointerPressedEventArgs e)
{
base.OnPointerPressed(e);
if (DataContext is ColorItemViewModel v)
{
WeakReferenceMessenger.Default.Send(v);
}
}
protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
{
base.OnAttachedToLogicalTree(e);
if (!_initialized)
{
if (IconThemeType.HasValue)
{
_galleryModel.LoadThemeIcons(IconThemeType.Value);
}
_initialized = true;
}
}
}

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

@ -1,41 +0,0 @@
<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">
<ControlTheme x:Key="{x:Type controls:IconInfoItem}" TargetType="controls:IconInfoItem">
<Setter Property="Height" Value="150" />
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<ControlTemplate TargetType="controls:IconInfoItem">
<Border
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<StackPanel Orientation="Vertical">
<atom:PathIcon
HorizontalAlignment="Center"
Kind="{Binding IconKind}"
Width="48"
Height="48" />
<TextBlock
Margin="0,20, 0, 0"
Padding="8"
FontSize="13"
HorizontalAlignment="Center"
Foreground="{TemplateBinding Foreground}"
Text="{Binding IconName}" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter>
<!-- <Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock"> -->
<!-- <Setter Property="TextBlock.IsVisible" Value="True" /> -->
<!-- </Style> -->
</ControlTheme>
</ResourceDictionary>

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

@ -1,25 +0,0 @@
using Avalonia;
using Avalonia.Controls.Primitives;
namespace AtomUI.Demo.Desktop.Controls;
public class IconInfoItem : TemplatedControl
{
public static readonly StyledProperty<string> IconNameProperty = AvaloniaProperty.Register<IconInfoItem, string>(
nameof(IconName));
public string IconName
{
get => GetValue(IconNameProperty);
set => SetValue(IconNameProperty, value);
}
public static readonly StyledProperty<string> IconKindProperty = AvaloniaProperty.Register<IconInfoItem, string>(
nameof(IconKind));
public string IconKind
{
get => GetValue(IconKindProperty);
set => SetValue(IconKindProperty, value);
}
}

57
samples/AtomUI.Demo.Desktop/Program.cs
View File

@ -1,57 +0,0 @@
using AtomUI.Icon;
using AtomUI.Icon.AntDesign;
using AtomUI.Theme;
using Avalonia;
using Avalonia.Dialogs;
using Avalonia.Media;
#if DEBUG
using Nlnet.Avalonia.DevTools;
#endif
namespace AtomUI.Demo.Desktop;
internal class Program
{
// Initialization code. Don't use any Avalonia, third-party APIs or any
// SynchronizationContext-reliant code before AppMain is called: things aren't initialized
// yet and stuff might break.
[STAThread]
public static void Main(string[] args)
{
try
{
BuildAvaloniaApp()
.With(new FontManagerOptions
{
FontFallbacks = new[]
{
new FontFallback
{
FontFamily = new FontFamily("Microsoft YaHei")
}
}
})
.StartWithClassicDesktopLifetime(args);
}
catch (Exception ex)
{
File.WriteAllText("error.log", ex.ToString());
#if DEBUG
throw;
#endif
}
}
public static AppBuilder BuildAvaloniaApp()
=> AppBuilder.Configure<App>()
.ConfigureAtomUI()
.UseManagedSystemDialogs()
.UsePlatformDetect()
.UseAtomUI()
#if DEBUG
.UseDevToolsForAvalonia()
#endif
.UseIconPackage<AntDesignIconPackage>(true)
.With(new Win32PlatformOptions())
.LogToTrace();
}

9
samples/AtomUI.Demo.Desktop/Roots.xml
View File

@ -1,9 +0,0 @@
<linker>
<assembly fullname="AtomUI.Demo.Desktop" preserve="All"/>
<assembly fullname="AtomUI.Theme" preserve="All"/>
<assembly fullname="Avalonia.Base" preserve="All"/>
<assembly fullname="AtomUI.Controls" preserve="All"/>
<assembly fullname="AtomUI.Icon" preserve="All"/>
<assembly fullname="AtomUI.Icon.AntDesign" preserve="All"/>
<assembly fullname="Avalonia.Remote.Protocol" preserve="All"/>
</linker>

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

@ -1,161 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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>
</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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Closable"
Description="To show close button.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Warning" IsClosable="True">
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">
Error Text
</atom:Alert>
<atom:Alert Type="Error" IsClosable="True"
Description="Error Description Error Description Error Description Error Description Error Description Error Description"
CloseIcon="{atom:IconProvider CloseSquareFilled}">
Error Text
</atom:Alert>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Description"
Description="Additional description for alert message.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Alert Type="Success"
Message="Success Text"
Description="Success Description Success Description Success Description" />
<atom:Alert Type="Info"
Message="Info Text"
Description="Info Description Info Description Info Description Info Description" />
<atom:Alert Type="Warning"
Message="Warning Text"
Description="Warning Description Warning Description Warning Description Warning Description" />
<atom:Alert Type="Error"
Message="Error Text"
Description="Error Description Error Description Error Description Error Description" />
</StackPanel>
</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." />
</StackPanel>
</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.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.ExtraAction>
<atom:Button ButtonType="Default" SizeType="Small" IsDanger="True">Detail</atom:Button>
</atom:Alert.ExtraAction>
Error Text
</atom:Alert>
<atom:Alert Type="Warning"
IsClosable="true">
<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.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>
</StackPanel>
</atom:Alert.ExtraAction>
Info Text
</atom:Alert>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Loop Banner"
Description="Show a loop banner.">
<atom:Alert Type="Warning" IsShowIcon="True" IsMessageMarqueEnabled="True">
I can be a React component, multiple React components, or just some text, Info Description Info Description Info Description Info Description
</atom:Alert>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class AlertShowCase : UserControl
{
public AlertShowCase()
{
InitializeComponent();
}
}

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

@ -1,10 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel />
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class AvatarShowCase : UserControl
{
public AvatarShowCase()
{
InitializeComponent();
}
}

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

@ -1,334 +0,0 @@
<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"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="0">
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</desktop:ShowCaseItem>
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="100">
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<atom:CountBadge Count="1000" OverflowCount="999">
<Border Width="40"
Height="40"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</desktop:ShowCaseItem>
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Size" Description="Set size of numeral Badge.">
<StackPanel Orientation="Horizontal" Spacing="20">
<atom:CountBadge Count="5">
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Standalone" Description="Used in standalone when children is empty.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:ToggleSwitch IsChecked="{Binding StandaloneSwitchChecked}" />
<atom:CountBadge BadgeColor="#faad14"
Count="{Binding StandaloneBadgeCount1}"
ShowZero="True" />
<atom:CountBadge Count="{Binding StandaloneBadgeCount2}" />
<atom:CountBadge BadgeColor="#52c41a" Count="{Binding StandaloneBadgeCount3}" />
</StackPanel>
</desktop:ShowCaseItem>
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:CountBadge>
<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"
Background="rgb(191,191,191)"
CornerRadius="8" />
</atom:DotBadge>
<atom:ToggleSwitch VerticalAlignment="Center"
IsChecked="{Binding DynamicDotBadgeVisible, Mode=TwoWay}" />
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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">
<atom:Button ButtonType="Link" Icon="{atom:IconProvider Kind=NotificationOutlined}" />
</atom:DotBadge>
<atom:DotBadge Offset="15,12">
<atom:Button ButtonType="Link" Text="Link something" />
</atom:DotBadge>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem Title="Status" Description="Standalone badge with status.">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:DotBadge Status="Success" />
<atom:DotBadge Status="Error" />
<atom:DotBadge Status="Default" />
<atom:DotBadge Status="Processing" />
<atom:DotBadge Status="Warning" />
</StackPanel>
<StackPanel Orientation="Vertical" Spacing="10">
<atom:DotBadge Status="Success" Text="Success" />
<atom:DotBadge Status="Error" Text="Error" />
<atom:DotBadge Status="Default" Text="Default" />
<atom:DotBadge Status="Processing" Text="Processing" />
<atom:DotBadge Status="Warning" Text="Warning" />
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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 RibbonColor="Pink" Text="甲辰计划雄起">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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 RibbonColor="Cyan" Text="Avalonia 非常优秀">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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 RibbonColor="Green" Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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 Placement="Start"
RibbonColor="purple"
Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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 Placement="Start"
RibbonColor="volcano"
Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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 Placement="Start"
RibbonColor="magenta"
Text="Hippies">
<Border Height="80"
Padding="10,0,10,0"
BorderBrush="#d9d9d9"
BorderThickness="1"
CornerRadius="6">
<StackPanel Orientation="Vertical">
<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>
</desktop:ShowCaseItem>
<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" />
<StackPanel Orientation="Vertical" Spacing="10">
<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" />
<StackPanel Orientation="Vertical" Spacing="10">
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

107
samples/AtomUI.Demo.Desktop/ShowCase/BadgeShowCase.axaml.cs
View File

@ -1,107 +0,0 @@
using Avalonia;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class BadgeShowCase : UserControl
{
public static readonly StyledProperty<double> DynamicBadgeCountProperty =
AvaloniaProperty.Register<ProgressBarShowCase, double>(nameof(DynamicBadgeCount), 5);
public static readonly StyledProperty<bool> DynamicDotBadgeVisibleProperty =
AvaloniaProperty.Register<ProgressBarShowCase, bool>(nameof(DynamicDotBadgeVisible), true);
public static readonly StyledProperty<bool> StandaloneSwitchCheckedProperty =
AvaloniaProperty.Register<ProgressBarShowCase, bool>(nameof(StandaloneSwitchChecked), true);
public static readonly StyledProperty<double> StandaloneBadgeCount1Property =
AvaloniaProperty.Register<ProgressBarShowCase, double>(nameof(StandaloneBadgeCount1), 11);
public static readonly StyledProperty<double> StandaloneBadgeCount2Property =
AvaloniaProperty.Register<ProgressBarShowCase, double>(nameof(StandaloneBadgeCount2), 25);
public static readonly StyledProperty<double> StandaloneBadgeCount3Property =
AvaloniaProperty.Register<ProgressBarShowCase, double>(nameof(StandaloneBadgeCount3), 109);
public double DynamicBadgeCount
{
get => GetValue(DynamicBadgeCountProperty);
set => SetValue(DynamicBadgeCountProperty, value);
}
public bool DynamicDotBadgeVisible
{
get => GetValue(DynamicDotBadgeVisibleProperty);
set => SetValue(DynamicDotBadgeVisibleProperty, value);
}
public bool StandaloneSwitchChecked
{
get => GetValue(StandaloneSwitchCheckedProperty);
set => SetValue(StandaloneSwitchCheckedProperty, value);
}
public double StandaloneBadgeCount1
{
get => GetValue(StandaloneBadgeCount1Property);
set => SetValue(StandaloneBadgeCount1Property, value);
}
public double StandaloneBadgeCount2
{
get => GetValue(StandaloneBadgeCount2Property);
set => SetValue(StandaloneBadgeCount2Property, value);
}
public double StandaloneBadgeCount3
{
get => GetValue(StandaloneBadgeCount3Property);
set => SetValue(StandaloneBadgeCount3Property, value);
}
public BadgeShowCase()
{
DataContext = this;
InitializeComponent();
}
public void AddDynamicBadgeCount()
{
DynamicBadgeCount += 1;
}
public void SubDynamicBadgeCount()
{
var value = DynamicBadgeCount;
value -= 1;
value = Math.Max(value, 0);
DynamicBadgeCount = value;
}
public void RandomDynamicBadgeCount()
{
var random = new Random();
DynamicBadgeCount = random.Next(0, 110);
}
protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs args)
{
base.OnPropertyChanged(args);
if (args.Property == StandaloneSwitchCheckedProperty)
{
var isChecked = args.GetNewValue<bool>();
if (isChecked)
{
StandaloneBadgeCount1 = 11;
StandaloneBadgeCount2 = 25;
StandaloneBadgeCount3 = 109;
}
else
{
StandaloneBadgeCount1 = 0;
StandaloneBadgeCount2 = 0;
StandaloneBadgeCount3 = 0;
}
}
}
}

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

@ -1,325 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|Button">
<Setter Property="Margin" Value="5" />
</Style>
</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>
</desktop:ShowCaseItem>
<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">
<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">
<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">
<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>
<atom:Button ButtonType="Link" Shape="Circle">AA</atom:Button>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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 Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ButtonSizeTypeOptionGroup">
<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">
<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>
</WrapPanel>
</StackPanel>
</DockPanel>
</desktop:ShowCaseItem>
<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}">
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}">
Search
</atom:Button>
<atom:Button ButtonType="Text" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
Search
</atom:Button>
<atom:Button ButtonType="Link" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
Search
</atom:Button>
</WrapPanel>
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
<atom:Button ButtonType="Primary" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
Search
</atom:Button>
<atom:Button ButtonType="Default" Shape="Round" IsDanger="True"
Icon="{atom:IconProvider Kind=SearchOutlined}">
Search
</atom:Button>
<atom:Button ButtonType="Text" Shape="Default" IsDanger="True"
Icon="{atom:IconProvider Kind=SearchOutlined}">
Search
</atom:Button>
<atom:Button ButtonType="Link" Shape="Default" IsDanger="True"
Icon="{atom:IconProvider Kind=SearchOutlined}">
Search
</atom:Button>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
<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}" />
</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}" />
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
Primary
</atom:Button>
<atom:Button ButtonType="Default" HorizontalAlignment="Stretch">
Default
</atom:Button>
<atom:Button ButtonType="Text" HorizontalAlignment="Stretch">
Text
</atom:Button>
<atom:Button ButtonType="Link" HorizontalAlignment="Stretch">
Link
</atom:Button>
</StackPanel>
</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
</atom:Button>
<atom:Button ButtonType="Default" IsDanger="True">
Default
</atom:Button>
<atom:Button ButtonType="Text" IsDanger="True">
Text
</atom:Button>
<atom:Button ButtonType="Link" IsDanger="True">
Link
</atom:Button>
</WrapPanel>
</desktop:ShowCaseItem>
<desktop: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>
</Border>
</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">
Primary
</atom:Button>
<atom:Button ButtonType="Primary" IsEnabled="False">
Primary(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Default">
Default
</atom:Button>
<atom:Button ButtonType="Default" IsEnabled="False">
Default(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Text">
Text
</atom:Button>
<atom:Button ButtonType="Text" IsEnabled="False">
Text(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Link">
Link
</atom:Button>
<atom:Button ButtonType="Link" IsEnabled="False">
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">
Danger Primary(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Default" IsDanger="True">
Danger Default
</atom:Button>
<atom:Button ButtonType="Default" IsDanger="True" IsEnabled="False">
Danger Default(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Text" IsDanger="True">
Danger Text
</atom:Button>
<atom:Button ButtonType="Text" IsDanger="True" IsEnabled="False">
Danger Text(disabled)
</atom:Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<atom:Button ButtonType="Link" IsDanger="True">
Danger Link
</atom:Button>
<atom:Button ButtonType="Link" IsDanger="True" IsEnabled="False">
Danger Link(disabled)
</atom:Button>
</StackPanel>
</WrapPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

60
samples/AtomUI.Demo.Desktop/ShowCase/ButtonShowCase.axaml.cs
View File

@ -1,60 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Threading;
using Button = AtomUI.Controls.Button;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class ButtonShowCase : UserControl
{
public static readonly StyledProperty<SizeType> ButtonSizeTypeProperty =
AvaloniaProperty.Register<ButtonShowCase, SizeType>(nameof(ButtonSizeType));
public SizeType ButtonSizeType
{
get => GetValue(ButtonSizeTypeProperty);
set => SetValue(ButtonSizeTypeProperty, value);
}
public ButtonShowCase()
{
InitializeComponent();
DataContext = this;
ButtonSizeTypeOptionGroup.OptionCheckedChanged += HandleButtonSizeTypeOptionCheckedChanged;
LoadingBtn1.Click += HandleLoadingBtnClick;
LoadingBtn2.Click += HandleLoadingBtnClick;
LoadingBtn3.Click += HandleLoadingBtnClick;
}
private void HandleButtonSizeTypeOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
ButtonSizeType = SizeType.Large;
}
else if (args.Index == 1)
{
ButtonSizeType = SizeType.Middle;
}
else
{
ButtonSizeType = SizeType.Small;
}
}
private void HandleLoadingBtnClick(object? sender, RoutedEventArgs args)
{
if (sender is Button button)
{
button.IsLoading = true;
Dispatcher.UIThread.InvokeAsync(async () =>
{
await Task.Delay(TimeSpan.FromSeconds(3));
button.IsLoading = false;
});
}
}
}

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

@ -1,248 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<atom:ButtonSpinner Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</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 Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:ButtonSpinner SizeType="Large" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner SizeType="Middle" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner SizeType="Small" Spin="HandleSpin">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</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="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Borderless">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</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"
HorizontalAlignment="Left"
InnerRightContent=".com">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ButtonSpinner Spin="HandleSpin"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"
Width="400"
HorizontalAlignment="Left">
<TextBlock
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>
</desktop:ShowCaseItem>
<desktop: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="床前明月光" />
</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}"
HorizontalAlignment="Left"
StyleVariant="Filled">
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="床前明月光" />
</atom:ButtonSpinner>
<atom:ButtonSpinner Spin="HandleSpin"
Status="Warning"
Width="400"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
HorizontalAlignment="Left"
StyleVariant="Filled">
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

48
samples/AtomUI.Demo.Desktop/ShowCase/ButtonSpinnerShowCase.axaml.cs
View File

@ -1,48 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class ButtonSpinnerShowCase : UserControl
{
public ButtonSpinnerShowCase()
{
InitializeComponent();
}
public void HandleSpin(object sender, SpinEventArgs e)
{
var spinner = (ButtonSpinner)sender;
if (spinner.Content is TextBlock textBlock)
{
var value = Array.IndexOf(_spinnerItems, textBlock.Text);
if (e.Direction == SpinDirection.Increase)
{
value++;
}
else
{
value--;
}
if (value < 0)
{
value = _spinnerItems.Length - 1;
}
else if (value >= _spinnerItems.Length)
{
value = 0;
}
textBlock.Text = _spinnerItems[value];
}
}
private readonly string[] _spinnerItems =
{
"床前明月光",
"疑是地上霜",
"举头望明月",
"低头思故乡"
};
}

16
samples/AtomUI.Demo.Desktop/ShowCase/CalendarShowCase.axaml
View File

@ -1,16 +0,0 @@
<UserControl
mc:Ignorable="d"
x:Class="AtomUI.Demo.Desktop.ShowCase.CalendarShowCase"
xmlns="https://github.com/avaloniaui"
xmlns:atom="https://atomui.net"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem Description="The simplest usage for Calendar." Title="Basic">
<atom:Calendar />
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/CalendarShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class CalendarShowCase : UserControl
{
public CalendarShowCase()
{
InitializeComponent();
}
}

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

@ -1,10 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel />
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/CardShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class CardShowCase : UserControl
{
public CardShowCase()
{
InitializeComponent();
}
}

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

@ -1,125 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|CheckBox">
<Setter Property="Margin" Value="0, 0, 5, 5" />
</Style>
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem
Title="Basic"
Description="The simplest use.">
<StackPanel HorizontalAlignment="Left" Spacing="10">
<atom:CheckBox>Checkbox</atom:CheckBox>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Disabled"
Description="Disabled checkbox.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<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>
</desktop:ShowCaseItem>
<desktop: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"
Command="{Binding CheckStatusHandler}"
CommandParameter="{Binding ElementName=CheckStatusBtn}"
Text="{Binding CheckStatusBtnText}" />
<atom:Button SizeType="Small" ButtonType="Primary"
x:Name="EnableStatusBtn"
CommandParameter="{Binding ElementName=EnableStatusBtn}"
Command="{Binding EnableStatusHandler}"
Text="{Binding EnableStatusBtnText}" />
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
<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">
<atom:CheckBox>Apple</atom:CheckBox>
<atom:CheckBox IsChecked="True">Pear</atom:CheckBox>
<atom:CheckBox>Orange</atom:CheckBox>
</WrapPanel>
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Check all"
Description="The indeterminate property can help you to achieve a 'check all' effect.">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Spacing="10">
<StackPanel>
<atom:CheckBox IsChecked="{Binding CheckedAllStatus}"
Command="{Binding CheckedAllStatusHandler}">
Check all
</atom:CheckBox>
</StackPanel>
<WrapPanel Margin="0, 20, 0, 0">
<atom:CheckBox x:Name="AppleCheckBox"
IsChecked="{Binding AppleCheckedStatus}"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=AppleCheckBox}">
Apple
</atom:CheckBox>
<atom:CheckBox x:Name="PearCheckBox"
IsChecked="{Binding PearCheckedStatus}"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=PearCheckBox}">
Pear
</atom:CheckBox>
<atom:CheckBox x:Name="OrangeCheckBox"
IsChecked="{Binding OrangeCheckedStatus}"
Command="{Binding CheckedItemStatusHandler}"
CommandParameter="{Binding ElementName=OrangeCheckBox}">
Orange
</atom:CheckBox>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

13
samples/AtomUI.Demo.Desktop/ShowCase/CheckBoxShowCase.axaml.cs
View File

@ -1,13 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class CheckBoxShowCase : UserControl
{
public CheckBoxShowCase()
{
DataContext = new CheckBoxShowCaseModel();
InitializeComponent();
}
}

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

@ -1,250 +0,0 @@
<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.CollapseShowCase"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:atom="https://atomui.net"
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Collapse"
Description="By default, any number of panels can be expanded at a time. The first panel is expanded in this example.">
<atom:Collapse>
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 3">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Size"
Description="Ant Design supports a default collapse size as well as a large and small size.
If a large or small collapse is desired, set the size property to either large or small respectively. Omit the size property for a collapse with the default size.">
<StackPanel Orientation="Vertical" Spacing="20" Margin="0, 0, 10, 0">
<atom:Separator Title="Default Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Collapse SizeType="Middle">
<atom:CollapseItem Header="This is default size panel header">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Separator Title="Small Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Collapse SizeType="Small">
<atom:CollapseItem Header="This is small size panel header">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Separator Title="Large Size" TitlePosition="Left" FontWeight="Bold" />
<atom:Collapse SizeType="Large">
<atom:CollapseItem Header="This is large size panel header">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Accordion"
Description="In accordion mode, only one panel can be expanded at a time.">
<atom:Collapse IsAccordion="True">
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 3">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Nested panel"
Description="Collapse is nested inside the Collapse." Margin="0, 0, 10, 0">
<atom:Collapse>
<atom:CollapseItem Header="This is panel header 1">
<atom:Collapse>
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 3">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Borderless"
Description="A borderless style of Collapse." Margin="0, 0, 10, 0">
<atom:Collapse IsBorderless="True">
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 3">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="No Arrow"
Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component."
Margin="0, 0, 10, 0">
<atom:Collapse>
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2" IsShowExpandIcon="False">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Expand icon location"
Description="The expand icon can be placed in front or in the back." Margin="0, 0, 10, 0">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Collapse ExpandIconPosition="{Binding CollapseExpandIconPosition}">
<atom:CollapseItem Header="This is panel header 1"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 3"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
<atom:OptionButton IsChecked="True">Start</atom:OptionButton>
<atom:OptionButton>End</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Ghost Collapse"
Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
<atom:Collapse IsGhostStyle="True">
<atom:CollapseItem Header="This is panel header 1">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 2">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
<atom:CollapseItem Header="This is panel header 3">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Collapsible"
Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:Collapse>
<atom:CollapseItem Header="This panel can only be collapsed by clicking text">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Collapse TriggerType="Icon">
<atom:CollapseItem Header="This panel can only be collapsed by clicking icon">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Collapse IsEnabled="False">
<atom:CollapseItem Header="This panel can't be collapsed">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
<atom:Collapse IsEnabled="False">
<atom:CollapseItem Header="This panel can't be collapsed" IsSelected="True">
<TextBlock TextWrapping="Wrap">
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
</TextBlock>
</atom:CollapseItem>
</atom:Collapse>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

36
samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml.cs
View File

@ -1,36 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class CollapseShowCase : UserControl
{
public static readonly StyledProperty<CollapseExpandIconPosition> CollapseExpandIconPositionProperty =
AvaloniaProperty.Register<CollapseShowCase, CollapseExpandIconPosition>(nameof(CollapseExpandIconPosition));
public CollapseExpandIconPosition CollapseExpandIconPosition
{
get => GetValue(CollapseExpandIconPositionProperty);
set => SetValue(CollapseExpandIconPositionProperty, value);
}
public CollapseShowCase()
{
InitializeComponent();
DataContext = this;
ExpandButtonPosGroup.OptionCheckedChanged += HandleExpandButtonPosOptionCheckedChanged;
}
private void HandleExpandButtonPosOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
CollapseExpandIconPosition = CollapseExpandIconPosition.Start;
}
else if (args.Index == 1)
{
CollapseExpandIconPosition = CollapseExpandIconPosition.End;
}
}
}

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

@ -1,229 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<desktop:ShowCaseItem
Title="Basic"
Description="Basic button spinner.">
<atom:ComboBox PlaceholderText="Please select" Width="300">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</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 Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:ComboBox SizeType="Large" PlaceholderText="Please select">
<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: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:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</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: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: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:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</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"
LeftAddOn="http://"
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: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://"
InnerRightContent=".com">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</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: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">
<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:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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"
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"
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"
Status="Error"
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"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
Status="Error"
StyleVariant="Filled"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
Status="Warning"
StyleVariant="Filled"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
Status="Error"
StyleVariant="Borderless"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
<atom:ComboBox PlaceholderText="Please select" Width="300"
Status="Warning"
StyleVariant="Borderless"
InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
<atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
<atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
<atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
<atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
</atom:ComboBox>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class ComboBoxShowCase : UserControl
{
public ComboBoxShowCase()
{
InitializeComponent();
}
}

71
samples/AtomUI.Demo.Desktop/ShowCase/DatePickerShowCase.cs
View File

@ -1,71 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class DatePickerShowCase : UserControl
{
public static readonly StyledProperty<SizeType> PickerSizeTypeProperty =
AvaloniaProperty.Register<ButtonShowCase, SizeType>(nameof(PickerSizeType), SizeType.Middle);
public static readonly StyledProperty<PlacementMode> PickerPlacementProperty =
AvaloniaProperty.Register<ButtonShowCase, PlacementMode>(nameof(PickerPlacement), PlacementMode.BottomEdgeAlignedLeft);
public SizeType PickerSizeType
{
get => GetValue(PickerSizeTypeProperty);
set => SetValue(PickerSizeTypeProperty, value);
}
public PlacementMode PickerPlacement
{
get => GetValue(PickerPlacementProperty);
set => SetValue(PickerPlacementProperty, value);
}
public DatePickerShowCase()
{
InitializeComponent();
DataContext = this;
PickerSizeTypeOptionGroup.OptionCheckedChanged += HandlePickerSizeTypeOptionCheckedChanged;
PickerPlacementOptionGroup.OptionCheckedChanged += HandlePickerPlacementCheckedChanged;
}
private void HandlePickerSizeTypeOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
PickerSizeType = SizeType.Large;
}
else if (args.Index == 1)
{
PickerSizeType = SizeType.Middle;
}
else
{
PickerSizeType = SizeType.Small;
}
}
private void HandlePickerPlacementCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
PickerPlacement = PlacementMode.TopEdgeAlignedLeft;
}
else if (args.Index == 1)
{
PickerPlacement = PlacementMode.TopEdgeAlignedRight;
}
else if (args.Index == 2)
{
PickerPlacement = PlacementMode.BottomEdgeAlignedLeft;
}
else
{
PickerPlacement = PlacementMode.BottomEdgeAlignedRight;
}
}
}

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

@ -1,189 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
xmlns:atom="https://atomui.net"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic"
Description="Click DatePicker, and then we could select or input a date in panel.">
<atom:DatePicker Watermark="Select date"/>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Range Picker"
Description="Set range picker type by picker prop.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:RangeDatePicker IsShowTime="true" Watermark="Select date"/>
<atom:RangeDatePicker IsShowTime="False" Watermark="Select date"/>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Need Confirm"
Description="DatePicker will automatically determine whether to show a confirm button according to the picker property. You can also set the needConfirm property to determine whether to show a confirm button. When needConfirm is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or selects a date.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:DatePicker IsNeedConfirm="True" Watermark="Select date"/>
<atom:RangeDatePicker IsNeedConfirm="True" IsShowTime="False" Watermark="Select date"/>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Choose Time"
Description="This property provides an additional time selection. When showTime is an Object, its properties will be passed on to the built-in TimePicker.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:DatePicker IsNeedConfirm="True" IsShowTime ="True" Watermark="Select date"/>
<atom:RangeDatePicker IsNeedConfirm="True" IsShowTime="True" Watermark="Select date"/>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Disabled"
Description="A disabled state of the DatePicker. You can also set as array to disable one of input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:DatePicker IsNeedConfirm="True" Watermark="Select date" SelectedDateTime="2024-01-20" IsEnabled="False"/>
<atom:DatePicker IsNeedConfirm="True" Watermark="Select date" IsShowTime="True" SelectedDateTime="2024-01-20 12:22:23 AM" IsEnabled="False"/>
<atom:RangeDatePicker IsNeedConfirm="True" Watermark="Select date" RangeStartDefaultDate ="2024-01-20" RangeEndDefaultDate ="2024-03-20" IsEnabled="False"/>
<atom:RangeDatePicker IsNeedConfirm="True" Watermark="Select date" IsShowTime="True" RangeStartDefaultDate="2024-01-20 12:22:23 AM" RangeEndDefaultDate="2024-02-20 07:22:23 AM" IsEnabled="False"/>
<atom:RangeDatePicker IsNeedConfirm="True" Watermark="Select date" IsShowTime="True" RangeStartDefaultDate="2024-01-20 12:22:23 AM" RangeEndDefaultDate="2024-02-20 07:22:23 AM"/>
<atom:DatePicker IsNeedConfirm="True" Watermark="Select date" SelectedDateTime="2024-01-20"/>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Three Sizes"
Description="The input box comes in three sizes: small, middle and large. The middle size will be used if size is omitted.">
<DockPanel Margin="0, 0, 0, 0">
<StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PickerSizeTypeOptionGroup">
<atom:OptionButton>Large</atom:OptionButton>
<atom:OptionButton IsChecked="True">Default</atom:OptionButton>
<atom:OptionButton>Small</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0, 20, 0, 0" Spacing="10">
<atom:DatePicker IsNeedConfirm="True" Watermark="Select date" SelectedDateTime="2024-01-20" SizeType="{Binding PickerSizeType}"/>
<atom:RangeDatePicker IsNeedConfirm="True" Watermark="Select date" IsShowTime="True"
RangeStartDefaultDate="2024-01-20 12:22:23 AM"
RangeEndDefaultDate="2024-02-20 07:22:23 AM"
SizeType="{Binding PickerSizeType}"/>
</StackPanel>
</DockPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Status"
Description="Add status to DatePicker with status, which could be error or warning.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker Status="Default"
Watermark="Select time" />
<atom:RangeDatePicker StyleVariant="Outline"
Status="Default"
Watermark="Start date"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker Status="Warning"
Watermark="Select time" />
<atom:RangeDatePicker StyleVariant="Outline"
Status="Warning"
Watermark="Start date"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker Status="Error"
Watermark="Select time" />
<atom:RangeDatePicker StyleVariant="Outline"
Status="Error"
Watermark="Start date"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"/>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Variants"
Description="Bordered-less style component.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker StyleVariant="Outline"
Watermark="Outline" />
<atom:RangeDatePicker StyleVariant="Outline"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"
Watermark="Outline"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker StyleVariant="Filled"
Watermark="Filled" />
<atom:RangeDatePicker StyleVariant="Filled"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"
Watermark="Filled"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker StyleVariant="Filled"
Status="Error"
Watermark="Filled" />
<atom:RangeDatePicker StyleVariant="Filled"
Status="Error"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"
Watermark="Filled"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:DatePicker StyleVariant="Borderless"
Watermark="Borderless" />
<atom:RangeDatePicker StyleVariant="Borderless"
SecondaryWatermark="End date"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"
Watermark="Borderless"/>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Placement"
Description="You can manually specify the position of the popup via placement.">
<DockPanel Margin="0, 0, 0, 0">
<StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PickerPlacementOptionGroup">
<atom:OptionButton>TopLeft</atom:OptionButton>
<atom:OptionButton>TopRight</atom:OptionButton>
<atom:OptionButton IsChecked="true">BottomLeft</atom:OptionButton>
<atom:OptionButton>BottomRight</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0, 20, 0, 0" Spacing="10">
<atom:DatePicker IsNeedConfirm="True" Watermark="Select date" SelectedDateTime="2024-01-20" PickerPlacement="{Binding PickerPlacement}"/>
<atom:RangeDatePicker IsNeedConfirm="True" Watermark="Select date" IsShowTime="True"
RangeStartDefaultDate="2024-01-20 12:22:23 AM"
RangeEndDefaultDate="2024-02-20 07:22:23 AM"
PickerPlacement="{Binding PickerPlacement}"/>
</StackPanel>
</DockPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,286 +0,0 @@
<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DrawerShowCase"
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">
<UserControl.Styles>
<!-- ListBox -->
<Style Selector="ListBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter>
</Style>
<!-- ListBoxItem -->
<Style Selector="ListBoxItem">
<Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Background="Transparent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</ControlTemplate>
</Setter>
</Style>
<!-- ListBox.PlacementList -->
<Style Selector="ListBox.PlacementList">
<Setter Property="ItemTemplate">
<DataTemplate DataType="atom:DrawerPlacement">
<atom:RadioButton Content="{Binding}" IsChecked="{Binding $parent[ListBoxItem].IsSelected}" />
</DataTemplate>
</Setter>
</Style>
<!-- StackPanel.ControllerPanel -->
<Style Selector="StackPanel.ControllerPanel">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Spacing" Value="8" />
<Style Selector="^&gt;:is(Control)">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style>
</UserControl.Styles>
<desktop:ShowCasePanel>
<!-- Basic -->
<desktop:ShowCaseItem Title="Basic" Description="Basic drawer.">
<Panel>
<atom:ToggleSwitch Content="Open" />
<atom:Drawer IsOpen="{Binding $parent[Panel].((atom:ToggleSwitch)Children[0]).IsChecked}" OpenOn="{atom:TopLevel}">
<TextBlock Margin="50" Text="Some contents..." />
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- No Mask -->
<desktop:ShowCaseItem Title="No Mask" Description="Without a mask.">
<Panel>
<atom:ToggleSwitch Content="Open" />
<atom:Drawer IsOpen="{Binding $parent[Panel].((atom:ToggleSwitch)Children[0]).IsChecked}"
OpenOn="{atom:TopLevel}"
ShowMask="False">
<StackPanel Margin="50" Spacing="8">
<TextBlock Text="Some contents..." />
<atom:Button Command="{atom:CloseDrawer}" Text="Close" />
</StackPanel>
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- Custom Placement -->
<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}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open" />
</StackPanel>
<atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[1]).IsChecked}"
OpenOn="{atom:TopLevel}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<TextBlock Margin="50" Text="Some contents..." />
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- Extra Actions -->
<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}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open Confirm Drawer" />
<atom:ToggleSwitch Content="Open Submit Drawer" />
</StackPanel>
<atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[1]).IsChecked}"
OpenOn="{atom:TopLevel}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<atom:ConfirmDrawerFrame ConfirmCommand="{atom:Toast Text=Drawer Confirmed!, Header=Tips}" Header="Drawer with extra actions">
<TextBlock Margin="50" Text="Some contents..." />
</atom:ConfirmDrawerFrame>
</atom:Drawer>
<atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[2]).IsChecked}"
OpenOn="{atom:TopLevel}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<atom:SubmitDrawerFrame ConfirmCommand="{atom:Toast Text=Drawer Confirmed!, Header=Tips}" Header="Drawer with extra actions">
<TextBlock Margin="50" Text="Some contents..." />
</atom:SubmitDrawerFrame>
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- Render in current area -->
<desktop:ShowCaseItem Title="Render in current area" Description="Render in current area.">
<Panel>
<StackPanel Height="120" Classes="ControllerPanel">
<ListBox Classes="PlacementList"
ItemsSource="{desktop: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[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<TextBlock Margin="50" Text=" Some contents... " />
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- Multi-level drawer - Overlay -->
<desktop:ShowCaseItem Title="Multi-level drawer - Overlay" Description="Open a new drawer on top of an existing drawer to handle multi branch tasks.">
<Panel>
<StackPanel Height="120" Classes="ControllerPanel">
<ListBox Classes="PlacementList"
ItemsSource="{desktop:Enum atom:DrawerPlacement}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open #1" />
</StackPanel>
<atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[1]).IsChecked}"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<StackPanel MinWidth="220" Margin="50">
<TextBlock Foreground="Green" Text=" Some contents #1... " />
<atom:ToggleSwitch x:Name="ToggleSwitchOpenDrawer2" Content="Open #2" />
</StackPanel>
</atom:Drawer>
<atom:Drawer IsOpen="{Binding #ToggleSwitchOpenDrawer2.IsChecked}"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<StackPanel MinWidth="160" Margin="50">
<TextBlock Foreground="Yellow" Text=" Some contents #2... " />
<atom:ToggleSwitch x:Name="ToggleSwitchOpenDrawer3" Content="Open #3" />
</StackPanel>
</atom:Drawer>
<atom:Drawer IsOpen="{Binding #ToggleSwitchOpenDrawer3.IsChecked}"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<TextBlock MinWidth="300"
Margin="50"
Foreground="DodgerBlue"
Text=" Some contents #3... " />
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- Multi-level drawer - Push -->
<desktop:ShowCaseItem Title="Multi-level drawer - Push" Description="Open a new drawer on top of an existing drawer to handle multi branch tasks.">
<Panel>
<StackPanel Height="120" Classes="ControllerPanel">
<ListBox Classes="PlacementList"
ItemsSource="{desktop:Enum atom:DrawerPlacement}"
SelectedIndex="2" />
<atom:ToggleSwitch Content="Open #1" />
</StackPanel>
<atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[1]).IsChecked}"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<StackPanel Margin="50">
<TextBlock Foreground="Green" Text="Drawer with Overlay OpenMode #1... " />
<atom:ToggleSwitch x:Name="ToggleSwitchOpenDrawer4" Content="Open #2" />
</StackPanel>
</atom:Drawer>
<atom:Drawer IsOpen="{Binding #ToggleSwitchOpenDrawer4.IsChecked}"
OpenMode="Push"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<StackPanel Margin="50">
<TextBlock Foreground="Red" Text="Drawer with Push OpenMode #2... " />
<atom:ToggleSwitch x:Name="ToggleSwitchOpenDrawer5" Content="Open #3" />
</StackPanel>
</atom:Drawer>
<atom:Drawer IsOpen="{Binding #ToggleSwitchOpenDrawer5.IsChecked}"
OpenMode="Overlay"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<StackPanel Margin="50">
<TextBlock Foreground="DeepPink" Text="Drawer with Overlay OpenMode #2... " />
<atom:ToggleSwitch x:Name="ToggleSwitchOpenDrawer6" Content="Open #3" />
</StackPanel>
</atom:Drawer>
<atom:Drawer IsOpen="{Binding #ToggleSwitchOpenDrawer6.IsChecked}"
OpenMode="Push"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
<TextBlock Margin="50"
Foreground="DodgerBlue"
Text="Drawer with Push Push #4... " />
</atom:Drawer>
</Panel>
</desktop:ShowCaseItem>
<!-- Open on a target element -->
<desktop:ShowCaseItem Title="Open on a target element" Description="Drawer can be opened on a special target element by property OpenOn.">
<Grid ColumnDefinitions="Auto,*">
<Border Grid.ColumnSpan="2" Height="300" />
<StackPanel Grid.Column="0" Spacing="8">
<atom:CheckBox x:Name="ToggleButton1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Content="Open Drawer #1" />
<atom:CheckBox x:Name="ToggleButton2"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Content="Open Drawer #2" />
<ListBox x:Name="CbxHorizontalAlignment"
Classes="PlacementList"
ItemsSource="{desktop:Enum atom:DrawerPlacement}"
SelectedIndex="2" />
<atom:Button Click="ButtonOpenOnCurrentParent_OnClick" Content="Open On Current's Parent" />
</StackPanel>
<atom:Drawer x:Name="Drawer1"
Grid.Column="1"
Background="Gray"
IsOpen="{Binding #ToggleButton1.IsChecked}"
OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
Placement="{Binding #CbxHorizontalAlignment.SelectedItem}"
ShowMask="True">
<atom:Button Margin="16"
HorizontalAlignment="Right"
VerticalAlignment="Top"
ButtonType="Primary"
Click="Button_OnClick"
Text="Button #1" />
</atom:Drawer>
<atom:Drawer x:Name="Drawer2"
Grid.Column="1"
Background="Gray"
IsOpen="{Binding #ToggleButton2.IsChecked}"
Placement="{Binding #CbxHorizontalAlignment.SelectedItem}"
ShowMask="True">
<atom:Button Margin="16"
HorizontalAlignment="Right"
VerticalAlignment="Top"
ButtonType="Text"
Click="Button_OnClick"
Text="Button #2" />
</atom:Drawer>
</Grid>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,35 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Button = AtomUI.Controls.Button;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class DrawerShowCase : UserControl
{
public DrawerShowCase()
{
InitializeComponent();
}
private void Button_OnClick(object? sender, RoutedEventArgs e)
{
if (sender is not Button button)
{
return;
}
if (Drawer.GetDrawer(button) is not { } drawer)
{
return;
}
drawer.IsOpen = false;
}
private void ButtonOpenOnCurrentParent_OnClick(object? sender, RoutedEventArgs e)
{
Drawer1.OpenOn = Drawer1.OpenOn?.Parent as Visual;
}
}

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

@ -1,299 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic"
Description="The most basic dropdown menu.">
<atom:DropdownButton ButtonType="Link" TriggerType="Hover" x:Name="Test">
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="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
</atom:MenuItem>
</atom:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
<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: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: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:MenuFlyout>
</atom:DropdownButton.DropdownFlyout>
</atom:DropdownButton>
</StackPanel>
</desktop:ShowCaseItem>
<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" 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>
</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" 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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/DropdownButtonShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class DropdownButtonShowCase : UserControl
{
public DropdownButtonShowCase()
{
InitializeComponent();
}
}

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

@ -1,47 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" />
</StackPanel>
</StackPanel>
</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:Button HorizontalAlignment="Center" ButtonType="Primary">Create Now</atom:Button>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="No description"
Description="Simplest Usage with no description.">
<atom:EmptyIndicator PresetImage="Default" IsShowDescription="False" />
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/EmptyShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class EmptyShowCase : UserControl
{
public EmptyShowCase()
{
InitializeComponent();
}
}

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

@ -1,168 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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>
</desktop:ShowCaseItem>
<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 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">
<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">
<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">
<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>
</desktop:ShowCaseItem>
<desktop: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">
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandDirectionOptionGroup">
<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">
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Nested panel"
Description="Expander is nested inside the Collapse." Margin="0, 0, 10, 0">
<atom:Expander Header="This is panel header 1">
<atom:Expander Header="This is nested 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>
</atom:Expander>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Borderless"
Description="A borderless style of Expander." Margin="0, 0, 10, 0">
<atom:Expander IsBorderless="True" 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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="No Arrow"
Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component."
Margin="0, 0, 10, 0">
<atom: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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Expand icon location"
Description="The expand icon can be placed in front or in the back." Margin="0, 0, 10, 0">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:Expander Header="This is panel header 1"
AddOnContent="{atom:IconProvider Kind=SettingOutlined}"
ExpandIconPosition="{Binding ToggleIconPosition}">
<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 Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
<atom:OptionButton IsChecked="True">Start</atom:OptionButton>
<atom:OptionButton>End</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Ghost Collapse"
Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
<atom:Expander IsGhostStyle="True" 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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Collapsible"
Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
<StackPanel Orientation="Vertical" Spacing="10">
<atom: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">
<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">
<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">
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,66 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class ExpanderShowCase : UserControl
{
public static readonly StyledProperty<ExpanderIconPosition> ToggleIconPositionProperty =
AvaloniaProperty.Register<ExpanderShowCase, ExpanderIconPosition>(nameof(ToggleIconPosition));
public ExpanderIconPosition ToggleIconPosition
{
get => GetValue(ToggleIconPositionProperty);
set => SetValue(ToggleIconPositionProperty, value);
}
public static readonly StyledProperty<ExpandDirection> ExpandDirectionProperty =
AvaloniaProperty.Register<ExpanderShowCase, ExpandDirection>(nameof(ExpandDirection));
public ExpandDirection ExpandDirection
{
get => GetValue(ExpandDirectionProperty);
set => SetValue(ExpandDirectionProperty, value);
}
public ExpanderShowCase()
{
InitializeComponent();
DataContext = this;
ExpandButtonPosGroup.OptionCheckedChanged += HandleExpandButtonPosOptionCheckedChanged;
ExpandDirectionOptionGroup.OptionCheckedChanged += HandleExpandDirectionOptionCheckedChanged;
}
private void HandleExpandButtonPosOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
ToggleIconPosition = ExpanderIconPosition.Start;
}
else if (args.Index == 1)
{
ToggleIconPosition = ExpanderIconPosition.End;
}
}
private void HandleExpandDirectionOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
ExpandDirection = ExpandDirection.Down;
}
else if (args.Index == 1)
{
ExpandDirection = ExpandDirection.Up;
}
else if (args.Index == 2)
{
ExpandDirection = ExpandDirection.Left;
}
else if (args.Index == 3)
{
ExpandDirection = ExpandDirection.Right;
}
}
}

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

@ -1,100 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
</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">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
<atom:GroupBox 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">
<Panel Height="40">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
</StackPanel>
</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">
<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">
<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">
<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">
<Panel Height="40">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Header Icon"
Description="GroupBox Header supports specifying Icon.">
<atom:GroupBox HeaderTitle="Title Info" HeaderIcon="{atom:IconProvider Kind=GithubOutlined}">
<Panel Height="100">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Content of group box
</TextBlock>
</Panel>
</atom:GroupBox>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/GroupBoxShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class GroupBoxShowCase : UserControl
{
public GroupBoxShowCase()
{
InitializeComponent();
}
}

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

@ -1,40 +0,0 @@
<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>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/PathIcon/IconInfoItem.axaml" />
<ResourceInclude Source="../Controls/PathIcon/IconGallery.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<TabControl>
<TabItem Header="Outlined">
<ScrollViewer>
<controls:IconGallery IconThemeType="Outlined" />
</ScrollViewer>
</TabItem>
<TabItem Header="Filled">
<ScrollViewer>
<controls:IconGallery IconThemeType="Filled" />
</ScrollViewer>
</TabItem>
<TabItem Header="Two Tone">
<ScrollViewer>
<controls:IconGallery IconThemeType="TwoTone" />
</ScrollViewer>
</TabItem>
</TabControl>
</UserControl>

22
samples/AtomUI.Demo.Desktop/ShowCase/IconShowCase.axaml.cs
View File

@ -1,22 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Threading;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class IconShowCase : UserControl
{
public IconShowCase()
{
InitializeComponent();
}
protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
var vm = new PaletteDemoViewModel();
await Dispatcher.UIThread.InvokeAsync(() => { vm.InitializeResources(); });
DataContext = vm;
}
}

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

@ -1,379 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button ButtonType="Primary">Hover me</atom:Button>
</atom:FlyoutHost>
</StackPanel>
</desktop:ShowCaseItem>
<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>
</atom:Flyout>
</atom:FlyoutHost.Flyout>
<atom:Button>Hover me</atom:Button>
</atom:FlyoutHost>
<atom:FlyoutHost Trigger="Click">
<atom:FlyoutHost.Flyout>
<atom:Flyout>
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
<Grid>
<Grid.Styles>
<Style Selector="atom|Button">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<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.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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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>
</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>
<atom:SegmentedItem>Hide</atom:SegmentedItem>
<atom:SegmentedItem>Center</atom:SegmentedItem>
</atom:Segmented>
<Grid>
<Grid.Styles>
<Style Selector="atom|Button">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<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>
</Grid>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,54 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class InfoFlyoutShowCase : UserControl
{
public static readonly StyledProperty<bool> ShowArrowProperty =
AvaloniaProperty.Register<TooltipShowCase, bool>(nameof(ShowArrow), true);
public static readonly StyledProperty<bool> IsPointAtCenterProperty =
AvaloniaProperty.Register<TooltipShowCase, bool>(nameof(IsPointAtCenter));
private readonly Segmented _segmented;
public bool ShowArrow
{
get => GetValue(ShowArrowProperty);
set => SetValue(ShowArrowProperty, value);
}
public bool IsPointAtCenter
{
get => GetValue(IsPointAtCenterProperty);
set => SetValue(IsPointAtCenterProperty, value);
}
public InfoFlyoutShowCase()
{
DataContext = this;
InitializeComponent();
var control = this as Control;
_segmented = control.FindControl<Segmented>("ArrowSegmented")!;
_segmented.SelectionChanged += (sender, args) =>
{
if (_segmented.SelectedIndex == 0)
{
ShowArrow = true;
IsPointAtCenter = false;
}
else if (_segmented.SelectedIndex == 1)
{
ShowArrow = false;
IsPointAtCenter = false;
}
else if (_segmented.SelectedIndex == 2)
{
IsPointAtCenter = true;
ShowArrow = true;
}
};
}
}

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

@ -1,150 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic usage"
Description="Basic usage example.">
<atom:LineEdit Watermark="Basic usage" />
</desktop:ShowCaseItem>
<desktop: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}" />
</StackPanel>
</desktop:ShowCaseItem>
<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" />
</StackPanel>
</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>
</desktop:ShowCaseItem>
<desktop: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" />
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Password box"
Description="Input type of password.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit Watermark="input password"
Width="400"
PasswordChar="*"
RevealPassword="False"
HorizontalAlignment="Left"
IsEnableRevealButton="True" />
<atom:LineEdit Watermark="input password"
Width="400"
PasswordChar="*"
RevealPassword="False"
HorizontalAlignment="Left"
IsEnableRevealButton="True"
IsEnableClearButton="True" />
</StackPanel>
</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" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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"
HorizontalAlignment="Left"
SearchButtonStyle="Primary"
SearchButtonText="Search"
IsEnableClearButton="True" />
<atom:SearchEdit Watermark="input search text"
Width="400"
HorizontalAlignment="Left"
SearchButtonStyle="Primary"
SearchButtonText="搜索一下"
InnerRightContent="{atom:IconProvider Kind=AudioOutlined, NormalFilledColor=#1677ff, Width=16, Height=16}"
IsEnableClearButton="True"
SizeType="Large" />
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class LineEditShowCase : UserControl
{
public LineEditShowCase()
{
InitializeComponent();
}
}

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

@ -1,45 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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>
</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>
</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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class ListBoxShowCase : UserControl
{
public ListBoxShowCase()
{
InitializeComponent();
}
}

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

@ -1,93 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" />
</StackPanel>
</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}" />
</StackPanel>
</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"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<Border Width="100" Height="100" Background="rgb(251, 251, 251)" />
</atom:LoadingMaskHost>
<atom:LoadingMaskHost IsLoading="True" SizeType="Middle"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<Border Width="100" Height="100" Background="rgb(251, 251, 251)" />
</atom:LoadingMaskHost>
<atom:LoadingMaskHost IsLoading="True" SizeType="Large"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<Border Width="100" Height="100" Background="rgb(251, 251, 251)" />
</atom:LoadingMaskHost>
</StackPanel>
<atom:LoadingMaskHost IsLoading="True"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<atom:Alert Message="Alert message title"
Description="Further details about the context of this alert."
Type="Info" />
</atom:LoadingMaskHost>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Customized description"
Description="Customized description">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:LoadingMaskHost IsLoading="{Binding IsLoadingSwitchChecked}"
IsShowLoadingMsg="True"
LoadingMsg="Loading...">
<atom:Alert Message="Alert message title"
Description="Further details about the context of this alert."
Type="Info" />
</atom:LoadingMaskHost>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock>Loading state：</TextBlock>
<atom:ToggleSwitch IsChecked="{Binding IsLoadingSwitchChecked}" />
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

22
samples/AtomUI.Demo.Desktop/ShowCase/LoadingIndicatorShowCase.axaml.cs
View File

@ -1,22 +0,0 @@
using Avalonia;
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class LoadingIndicatorShowCase : UserControl
{
public static readonly StyledProperty<bool> IsLoadingSwitchCheckedProperty =
AvaloniaProperty.Register<ProgressBarShowCase, bool>(nameof(IsLoadingSwitchChecked));
public bool IsLoadingSwitchChecked
{
get => GetValue(IsLoadingSwitchCheckedProperty);
set => SetValue(IsLoadingSwitchCheckedProperty, value);
}
public LoadingIndicatorShowCase()
{
DataContext = this;
InitializeComponent();
}
}

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

@ -1,285 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" />
<atom:MenuItem Header="New File" InputGesture="Ctrl+Alt+N" />
<atom:MenuItem Header="New Window" InputGesture="Ctrl+Shift+N" />
</atom:MenuItem>
<atom:MenuItem Header="_Edit">
<atom:MenuItem Header="Undo" InputGesture="Ctrl+Shift+Z" />
<atom:MenuSeparator />
<atom:MenuItem Header="Cut" InputGesture="Ctrl+X" />
</atom:MenuItem>
<atom:MenuItem Header="Disabled Item" IsEnabled="False" />
</atom:Menu>
</desktop:ShowCaseItem>
<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" />
<atom:MenuItem Header="New File" InputGesture="Ctrl+Alt+N" />
<atom:MenuItem Header="New Window" InputGesture="Ctrl+Shift+N" />
<atom:MenuSeparator />
<atom:MenuItem Header="Save" InputGesture="Ctrl+S" />
<atom:MenuItem Header="Save As..." InputGesture="Ctrl+Shift+S" />
<atom:MenuItem Header="Save All" InputGesture="Ctrl+K" />
<atom:MenuSeparator />
<atom:MenuItem Header="Exit" />
</atom:MenuItem>
<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="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
</atom:MenuItem>
</atom:MenuItem>
</atom:Menu>
</desktop:ShowCaseItem>
<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: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:MenuSeparator />
<atom:MenuItem Header="Exit" />
<atom:MenuItem Header="Disabled" IsEnabled="False" />
</atom:MenuItem>
</atom:Menu>
</desktop:ShowCaseItem>
<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" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
<atom:MenuItem Header="Menu Item" />
</atom:MenuItem>
</atom:Menu>
</desktop:ShowCaseItem>
<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" />
</Style>
</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="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<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>
</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" />
</Style>
</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="Paste">
<atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Top Navigation"
Description="Horizontal top navigation menu.">
<atom:NavMenu>
<atom:NavMenuItem Header="Navigation One" Icon="{atom:IconProvider Kind=MailOutlined}" />
<atom:NavMenuItem Header="Navigation Two" Icon="{atom:IconProvider Kind=AppstoreOutlined}" IsEnabled="False"/>
<atom:NavMenuItem Header="Navigation Three - Submenu" Icon="{atom:IconProvider Kind=SettingOutlined}">
<atom:NavMenuItem Header="Item 1">
<atom:NavMenuItem Header="Option 1" />
<atom:NavMenuItem Header="Option 2" />
</atom:NavMenuItem>
<atom:NavMenuItem Header="Item 2">
<atom:NavMenuItem Header="Option 3" />
<atom:NavMenuItem Header="Option 4" />
</atom:NavMenuItem>
</atom:NavMenuItem>
<atom:NavMenuItem Header="Navigation Four"/>
</atom:NavMenu>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Vertical menu"
Description="Submenus open as pop-ups.">
<atom:NavMenu Mode="Vertical" Width="256" Margin="0, 0, 0, 20">
<atom:NavMenuItem Header="Navigation One" Icon="{atom:IconProvider Kind=MailOutlined}" />
<atom:NavMenuItem Header="Navigation Two" Icon="{atom:IconProvider Kind=AppstoreOutlined}" IsEnabled="False"/>
<atom:NavMenuItem Header="Navigation Three - Submenu" Icon="{atom:IconProvider Kind=SettingOutlined}">
<atom:NavMenuItem Header="Item 1">
<atom:NavMenuItem Header="Option 1" />
<atom:NavMenuItem Header="Option 2" />
</atom:NavMenuItem>
<atom:NavMenuItem Header="Item 2">
<atom:NavMenuItem Header="Option 3" />
<atom:NavMenuItem Header="Option 4" />
</atom:NavMenuItem>
</atom:NavMenuItem>
<atom:NavMenuItem Header="Navigation Four"/>
</atom:NavMenu>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Inline menu"
Description="Vertical menu with inline submenus.">
<atom:NavMenu Mode="Inline" Width="256" Margin="0, 0, 0, 20">
<atom:NavMenuItem Header="Navigation One" Icon="{atom:IconProvider Kind=MailOutlined}" />
<atom:NavMenuItem Header="Navigation Two" Icon="{atom:IconProvider Kind=AppstoreOutlined}" IsEnabled="False"/>
<atom:NavMenuItem Header="Navigation Three - Submenu" Icon="{atom:IconProvider Kind=SettingOutlined}">
<atom:NavMenuItem Header="Item 1">
<atom:NavMenuItem Header="Option 1" />
<atom:NavMenuItem Header="Option 2" />
</atom:NavMenuItem>
<atom:NavMenuItem Header="Item 2">
<atom:NavMenuItem Header="Option 3" />
<atom:NavMenuItem Header="Option 4" />
</atom:NavMenuItem>
</atom:NavMenuItem>
<atom:NavMenuItem Header="Navigation Four"/>
</atom:NavMenu>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Switch the menu type"
Description="Show the dynamic switching mode (between inline and vertical).">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:ToggleSwitch Name="ChangeModeSwitch"/>
<TextBlock>Change Mode</TextBlock>
<atom:ToggleSwitch Margin="10, 0, 0, 0" Name="ChangeStyleSwitch"/>
<TextBlock>Change Style</TextBlock>
</StackPanel>
<atom:NavMenu Mode="{Binding Mode}" Width="256" Margin="0, 0, 0, 20" IsDarkStyle="{Binding IsDark}">
<atom:NavMenuItem Header="Navigation One" Icon="{atom:IconProvider Kind=MailOutlined}" />
<atom:NavMenuItem Header="Navigation Two" Icon="{atom:IconProvider Kind=AppstoreOutlined}" IsEnabled="False"/>
<atom:NavMenuItem Header="Navigation Three - Submenu" Icon="{atom:IconProvider Kind=SettingOutlined}">
<atom:NavMenuItem Header="Item 1">
<atom:NavMenuItem Header="Option 1" />
<atom:NavMenuItem Header="Option 2" />
</atom:NavMenuItem>
<atom:NavMenuItem Header="Item 2">
<atom:NavMenuItem Header="Option 3" />
<atom:NavMenuItem Header="Option 4" />
</atom:NavMenuItem>
</atom:NavMenuItem>
<atom:NavMenuItem Header="Navigation Four"/>
</atom:NavMenu>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,66 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class MenuShowCase : UserControl
{
public static readonly StyledProperty<bool> IsDarkProperty =
AvaloniaProperty.Register<ButtonShowCase, bool>(nameof(IsDark), false);
public static readonly StyledProperty<NavMenuMode> ModeProperty =
AvaloniaProperty.Register<ButtonShowCase, NavMenuMode>(nameof(Mode), NavMenuMode.Inline);
public bool IsDark
{
get => GetValue(IsDarkProperty);
set => SetValue(IsDarkProperty, value);
}
public NavMenuMode Mode
{
get => GetValue(ModeProperty);
set => SetValue(ModeProperty, value);
}
public MenuShowCase()
{
InitializeComponent();
DataContext = this;
ChangeModeSwitch.IsCheckedChanged += HandleChangeModeCheckChanged;
ChangeStyleSwitch.IsCheckedChanged += HandleChangeStyleCheckChanged;
}
private void HandleChangeModeCheckChanged(object? sender, RoutedEventArgs? args)
{
if (ChangeModeSwitch.IsChecked.HasValue)
{
if (ChangeModeSwitch.IsChecked.Value)
{
Mode = NavMenuMode.Vertical;
}
else
{
Mode = NavMenuMode.Inline;
}
}
else
{
Mode = NavMenuMode.Inline;
}
}
private void HandleChangeStyleCheckChanged(object? sender, RoutedEventArgs? args)
{
if (ChangeStyleSwitch.IsChecked.HasValue)
{
IsDark = ChangeStyleSwitch.IsChecked.Value;
}
else
{
IsDark = false;
}
}
}

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

@ -1,62 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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>
</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">
Success
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowInfoMessage">
Info
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowWarningMessage">
Warning
</atom:Button>
<atom:Button ButtonType="Default"
Click="ShowErrorMessage">
Error
</atom:Button>
</StackPanel>
</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>
</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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,98 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class MessageShowCase : UserControl
{
private WindowMessageManager? _messageManager;
public MessageShowCase()
{
InitializeComponent();
}
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
base.OnAttachedToVisualTree(e);
var topLevel = TopLevel.GetTopLevel(this);
_messageManager = new WindowMessageManager(topLevel)
{
MaxItems = 10
};
}
private void ShowSimpleMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
"Hello, AtomUI/Avalonia!"
));
}
private void ShowInfoMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
type: MessageType.Information,
content: "This is a information message."
));
}
private void ShowSuccessMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
type: MessageType.Success,
content: "This is a success message."
));
}
private void ShowWarningMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
type: MessageType.Warning,
content: "This is a warning message."
));
}
private void ShowErrorMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
type: MessageType.Error,
content: "This is a error message."
));
}
private void ShowLoadingMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
type: MessageType.Loading,
content: "Action in progress..."
));
}
private void ShowSequentialMessage(object? sender, RoutedEventArgs e)
{
_messageManager?.Show(new Message(
type: MessageType.Loading,
content: "Action in progress...",
expiration: TimeSpan.FromSeconds(2.5),
onClose: () =>
{
_messageManager?.Show(new Message(
type: MessageType.Success,
expiration: TimeSpan.FromSeconds(2.5),
content: "Loading finished",
onClose: () =>
{
_messageManager?.Show(new Message(
type: MessageType.Information,
expiration: TimeSpan.FromSeconds(2.5),
content: "Loading finished"
));
}
));
}
));
}
}

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

@ -1,92 +0,0 @@
<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"
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>
</desktop:ShowCaseItem>
<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>
</desktop:ShowCaseItem>
<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">
Success
</atom:Button>
<atom:Button ButtonType="Default" Click="ShowInfoNotification">
Info
</atom:Button>
<atom:Button ButtonType="Default" Click="ShowWarningNotification">
Warning
</atom:Button>
<atom:Button ButtonType="Default" Click="ShowErrorNotification">
Error
</atom:Button>
</StackPanel>
</desktop:ShowCaseItem>
<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">
Top
</atom:Button>
<atom:Button ButtonType="Primary" Click="ShowBottomNotification">
Bottom
</atom:Button>
</StackPanel>
<atom:Separator />
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Primary" Click="ShowTopLeftNotification">
TopLeft
</atom:Button>
<atom:Button ButtonType="Primary" Click="ShowTopRightNotification">
TopRight
</atom:Button>
</StackPanel>
<atom:Separator />
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button ButtonType="Primary" Click="ShowBottomLeftNotification">
BottomLeft
</atom:Button>
<atom:Button ButtonType="Primary" Click="ShowBottomRightNotification">
BottomRight
</atom:Button>
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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>
</desktop:ShowCaseItem>
<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">
Show Notification
</atom:Button>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

215
samples/AtomUI.Demo.Desktop/ShowCase/NotificationShowCase.axaml.cs
View File

@ -1,215 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using PathIcon = AtomUI.Controls.PathIcon;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class NotificationShowCase : UserControl
{
private WindowNotificationManager? _basicManager;
private WindowNotificationManager? _topLeftManager;
private WindowNotificationManager? _topManager;
private WindowNotificationManager? _topRightManager;
private WindowNotificationManager? _bottomLeftManager;
private WindowNotificationManager? _bottomManager;
private WindowNotificationManager? _bottomRightManager;
public NotificationShowCase()
{
InitializeComponent();
HoverOptionGroup.OptionCheckedChanged += HandleHoverOptionGroupCheckedChanged;
}
private void HandleHoverOptionGroupCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (_basicManager is not null)
{
if (args.Index == 0)
{
_basicManager.IsPauseOnHover = true;
}
else
{
_basicManager.IsPauseOnHover = false;
}
}
}
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
base.OnAttachedToVisualTree(e);
var topLevel = TopLevel.GetTopLevel(this);
_basicManager = new WindowNotificationManager(topLevel)
{
MaxItems = 3
};
_topLeftManager = new WindowNotificationManager(topLevel)
{
MaxItems = 3,
Position = NotificationPosition.TopLeft
};
_topManager = new WindowNotificationManager(topLevel)
{
Position = NotificationPosition.TopCenter,
MaxItems = 3
};
_topRightManager = new WindowNotificationManager(topLevel)
{
Position = NotificationPosition.TopRight,
MaxItems = 3
};
_bottomLeftManager = new WindowNotificationManager(topLevel)
{
Position = NotificationPosition.BottomLeft,
MaxItems = 3
};
_bottomManager = new WindowNotificationManager(topLevel)
{
Position = NotificationPosition.BottomCenter,
MaxItems = 3
};
_bottomRightManager = new WindowNotificationManager(topLevel)
{
Position = NotificationPosition.BottomRight,
MaxItems = 3
};
}
private void ShowSimpleNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
"Notification Title",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowNeverCloseNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
expiration: TimeSpan.Zero,
title: "Notification Title",
content:
"I will never close automatically. This is a purposely very very long description that has many many characters and words."
));
}
private void ShowSuccessNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
type: NotificationType.Success,
title: "Notification Title",
content:
"This is the content of the notification. This is the content of the notification. This is the content of the notification."
));
}
private void ShowInfoNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
type: NotificationType.Information,
title: "Notification Title",
content:
"This is the content of the notification. This is the content of the notification. This is the content of the notification."
));
}
private void ShowWarningNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
type: NotificationType.Warning,
title: "Notification Title",
content:
"This is the content of the notification. This is the content of the notification. This is the content of the notification."
));
}
private void ShowErrorNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
type: NotificationType.Error,
title: "Notification Title",
content:
"This is the content of the notification. This is the content of the notification. This is the content of the notification."
));
}
private void ShowTopNotification(object? sender, RoutedEventArgs e)
{
_topManager?.Show(new Notification(
"Notification Top",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowBottomNotification(object? sender, RoutedEventArgs e)
{
_bottomManager?.Show(new Notification(
"Notification Bottom",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowTopLeftNotification(object? sender, RoutedEventArgs e)
{
_topLeftManager?.Show(new Notification(
"Notification TopLeft",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowTopRightNotification(object? sender, RoutedEventArgs e)
{
_topRightManager?.Show(new Notification(
"Notification TopRight",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowBottomLeftNotification(object? sender, RoutedEventArgs e)
{
_bottomLeftManager?.Show(new Notification(
"Notification BottomLeft",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowBottomRightNotification(object? sender, RoutedEventArgs e)
{
_bottomRightManager?.Show(new Notification(
"Notification BottomRight",
"Hello, AtomUI/Avalonia!"
));
}
private void ShowCustomIconNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
"Notification Title",
"This is the content of the notification. This is the content of the notification. This is the content of the notification.",
icon: new PathIcon
{
Kind = "SettingOutlined"
}
));
}
private void ShowProgressNotification(object? sender, RoutedEventArgs e)
{
_basicManager?.Show(new Notification(
type: NotificationType.Information,
title: "Notification Title",
content:
"This is the content of the notification. This is the content of the notification. This is the content of the notification.",
showProgress: true
));
}
}

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

@ -1,99 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic usage"
Description="Numeric-only NumberUpDown.">
<atom:NumericUpDown Value="3" />
</desktop:ShowCaseItem>
<desktop: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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Variants"
Description="Variants of NumberUpDown.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown Value="3" StyleVariant="Outline" />
<atom:NumericUpDown Value="3" StyleVariant="Filled" />
<atom:NumericUpDown Value="3" StyleVariant="Borderless" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Pre / Post tab"
Description="Using pre and post tabs example.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
Value="3" />
<atom:NumericUpDown RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400"
HorizontalAlignment="Left"
Value="3" />
<atom:NumericUpDown LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
Value="3" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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" />
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="prefix and suffix"
Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:NumericUpDown Watermark="Enter your value"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}" />
<atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" />
<atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/NumberUpDownShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class NumberUpDownShowCase : UserControl
{
public NumberUpDownShowCase()
{
InitializeComponent();
}
}

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

@ -1,425 +0,0 @@
<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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="1000"
d:DesignWidth="1920"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Styles>
<Style Selector="Border.CodeBlock">
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
<Setter Property="Padding" Value="16" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
</Style>
</UserControl.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<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" /> -->
<!-- <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" /> -->
<!-- </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" /> -->
<!-- </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}" /> -->
<!-- </StackPanel> -->
<!-- <Calendar Margin="16,0" /> -->
<!-- <StackPanel Margin="16,0"> -->
<!-- <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" /> -->
<!-- <ComboBox Width="300" Margin="0,12"> -->
<!-- <ComboBoxItem>Avalonia</ComboBoxItem> -->
<!-- <ComboBoxItem>Semi Design</ComboBoxItem> -->
<!-- <ComboBoxItem>IRIHI Technology</ComboBoxItem> -->
<!-- </ComboBox> -->
<!-- </StackPanel> -->
<!-- <StackPanel> -->
<!-- <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
<!-- <UniformGrid.Styles> -->
<!-- <Style Selector="CheckBox"> -->
<!-- <Setter Property="Margin" Value="4" /> -->
<!-- </Style> -->
<!-- </UniformGrid.Styles> -->
<!-- <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" /> -->
<!-- </UniformGrid> -->
<!-- <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
<!-- <UniformGrid.Styles> -->
<!-- <Style Selector="CheckBox"> -->
<!-- <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}" /> -->
<!-- </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" /> -->
<!-- </StackPanel> -->
<!-- <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" /> -->
<!-- <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}" /> -->
<!-- </UniformGrid> -->
<!-- <TabStrip Margin="0,8"> -->
<!-- <TabStripItem Content="Tab 1" /> -->
<!-- <TabStripItem Content="Tab 2" /> -->
<!-- <TabStripItem Content="Tab 3" /> -->
<!-- </TabStrip> -->
<!-- <Menu Margin="0,8"> -->
<!-- <MenuItem Header="Menu 1"> -->
<!-- <MenuItem Header="SubMenu 1" /> -->
<!-- <MenuItem Header="SubMenu 2" /> -->
<!-- <MenuItem Header="SubMenu 3" /> -->
<!-- </MenuItem> -->
<!-- <MenuItem Header="Menu 2"> -->
<!-- <MenuItem Header="SubMenu 1" /> -->
<!-- <MenuItem Header="SubMenu 2" /> -->
<!-- <MenuItem Header="SubMenu 3" /> -->
<!-- <MenuItem Header="SubMenu 4"> -->
<!-- <MenuItem Header="SubMenu 1" /> -->
<!-- <MenuItem Header="SubMenu 2" /> -->
<!-- <MenuItem Header="SubMenu 3" /> -->
<!-- </MenuItem> -->
<!-- </MenuItem> -->
<!-- <MenuItem Header="Menu 3" /> -->
<!-- </Menu> -->
<!-- -->
<!-- </StackPanel> -->
<!-- <StackPanel Margin="8"> -->
<!-- -->
<!-- <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
<!-- <UniformGrid.Styles> -->
<!-- <Style Selector="RadioButton"> -->
<!-- <Setter Property="Margin" Value="4" /> -->
<!-- <Setter Property="HorizontalAlignment" Value="Center" /> -->
<!-- </Style> -->
<!-- </UniformGrid.Styles> -->
<!-- <RadioButton Content="Avalonia" IsChecked="True" /> -->
<!-- <RadioButton Content="WPF" /> -->
<!-- <RadioButton Content="Xamarin" /> -->
<!-- </UniformGrid> -->
<!-- <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
<!-- <UniformGrid.Styles> -->
<!-- <Style Selector="RadioButton"> -->
<!-- <Setter Property="Margin" Value="4" /> -->
<!-- <Setter Property="HorizontalAlignment" Value="Center" /> -->
<!-- </Style> -->
<!-- </UniformGrid.Styles> -->
<!-- <RadioButton -->
<!-- Content="Avalonia" -->
<!-- IsChecked="True" -->
<!-- Theme="{DynamicResource CardRadioButton}" /> -->
<!-- <RadioButton Content="WPF" Theme="{DynamicResource CardRadioButton}" /> -->
<!-- <RadioButton Content="Xamarin" Theme="{DynamicResource CardRadioButton}" /> -->
<!-- </UniformGrid> -->
<!-- <WrapPanel Width="300"> -->
<!-- <WrapPanel.Styles> -->
<!-- <Style Selector="Label"> -->
<!-- <Setter Property="Margin" Value="4" /> -->
<!-- <Setter Property="HorizontalContentAlignment" Value="Center" /> -->
<!-- </Style> -->
<!-- </WrapPanel.Styles> -->
<!-- <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label> -->
<!-- <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label> -->
<!-- <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label> -->
<!-- <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label> -->
<!-- <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label> -->
<!-- <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label> -->
<!-- <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label> -->
<!-- <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label> -->
<!-- <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label> -->
<!-- <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label> -->
<!-- <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label> -->
<!-- <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label> -->
<!-- <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label> -->
<!-- <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label> -->
<!-- <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label> -->
<!-- <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label> -->
<!-- <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label> -->
<!-- <Label Classes="Large" Theme="{StaticResource TagLabel}">Large</Label> -->
<!-- <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle</Label> -->
<!-- </WrapPanel> -->
<!-- </StackPanel> -->
<!-- </StackPanel> -->
<!-- </StackPanel> -->
<!-- <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}" /> -->
<!-- </Border> -->
<!-- <TextBlock Text="Reference styles: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <SelectableTextBlock -->
<!-- FontFamily="Consolas" -->
<!-- Text="{Binding $parent[local:Overview].MainStyle}" -->
<!-- TextWrapping="Wrap" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
<!-- <TabItem Header="ColorPicker"> -->
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <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" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
<!-- <TabItem Header="DataGrid"> -->
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <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" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
<!-- <TabItem Header="TreeDataGrid"> -->
<!-- <StackPanel> -->
<!-- <TextBlock Text="Install via nuget: " /> -->
<!-- <Border Margin="0,16" Classes="CodeBlock"> -->
<!-- <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" /> -->
<!-- </Border> -->
<!-- </StackPanel> -->
<!-- </TabItem> -->
<!-- </TabControl> -->
<!-- </StackPanel> -->
<!-- </StackPanel> -->
</ScrollViewer>
</UserControl>

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

@ -1,43 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class Overview : UserControl
{
public Overview()
{
InitializeComponent();
}
public string MainInstall { get; set; } = "dotnet add package AtomUI --version 11.0.7";
public string MainStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://AtomUI/Themes/Index.axaml" />
</Application.Styles>
""";
public string ColorPickerInstall { get; set; } = "dotnet add package AtomUI.ColorPicker --version 11.0.7";
public string ColorPickerStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://AtomUI.ColorPicker/Index.axaml" />
</Application.Styles>
""";
public string DataGridInstall { get; set; } = "dotnet add package AtomUI.DataGrid --version 11.0.7";
public string DataGridStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://AtomUI.DataGrid/Index.axaml" />
</Application.Styles>
""";
public string TreeDataGridInstall { get; set; } = "dotnet add package AtomUI.TreeDataGrid --version 11.0.7";
public string TreeDataGridStyle { get; set; } = """
<Application.Styles>
<StyleInclude Source="avares://AtomUI.TreeDataGrid/Index.axaml" />
</Application.Styles>
""";
}

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

@ -1,11 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel />
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class PaginationShowCase : UserControl
{
public PaginationShowCase()
{
InitializeComponent();
}
}

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

@ -1,62 +0,0 @@
<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>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Themes/ToggleButton.axaml" />
<ResourceInclude Source="../Controls/Colors/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/Colors/ColorListControl.axaml" />
<ResourceInclude Source="../Controls/Colors/ColorListGroupControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<TabControl>
<TabItem Header="Light">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding LightLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorGroupViewModel">
<controls:ColorListGroupControl Margin="0,0,0,10" GroupData="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</TabItem>
<TabItem Header="Dark">
<ScrollViewer>
<Border Background="Black">
<ItemsControl ItemsSource="{Binding DarkLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorGroupViewModel">
<controls:ColorListGroupControl Margin="0,0,0,10" GroupData="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</ScrollViewer>
</TabItem>
</TabControl>
</UserControl>

22
samples/AtomUI.Demo.Desktop/ShowCase/PaletteShowCase.axaml.cs
View File

@ -1,22 +0,0 @@
using AtomUI.Demo.Desktop.ViewModels;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Threading;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class PaletteShowCase : UserControl
{
public PaletteShowCase()
{
InitializeComponent();
}
protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
var vm = new PaletteDemoViewModel();
await Dispatcher.UIThread.InvokeAsync(() => { vm.InitializeResources(); });
DataContext = vm;
}
}

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

@ -1,184 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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"
ConfirmContent="Are you sure to delete this task?"
OkText="Ok"
CancelText="Cancel">
<atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
</atom:PopupConfirm>
</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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Placement"
Description="There are 12 placement options available.">
<Grid>
<Grid.Styles>
<Style Selector="atom|Button">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
</Style>
</Grid.Styles>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<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: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: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: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: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: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: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: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: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: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: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: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:Button ButtonType="Default">BR</atom:Button>
</atom:PopupConfirm>
</Grid>
</desktop:ShowCaseItem>
<desktop: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">
<atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
</atom:PopupConfirm>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/PopupConfirmShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class PopupConfirmShowCase : UserControl
{
public PopupConfirmShowCase()
{
InitializeComponent();
}
}

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

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

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

@ -1,139 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class ProgressBarShowCase : UserControl
{
public LinearGradientBrush TwoStopsGradientStrokeColor { get; set; }
public LinearGradientBrush ThreeStopsGradientStrokeColor { get; set; }
public List<IBrush> StepsChunkBrushes { get; set; }
public PercentPosition InnerStartPercentPosition { get; set; }
public PercentPosition InnerCenterPercentPosition { get; set; }
public PercentPosition InnerEndPercentPosition { get; set; }
public PercentPosition OutterStartPercentPosition { get; set; }
public PercentPosition OutterCenterPercentPosition { get; set; }
public PercentPosition OutterEndPercentPosition { get; set; }
public static readonly StyledProperty<double> ProgressValueProperty =
AvaloniaProperty.Register<ProgressBarShowCase, double>(nameof(ProgressValue), 30);
public static readonly StyledProperty<string> ToggleDisabledTextProperty =
AvaloniaProperty.Register<ProgressBarShowCase, string>(nameof(ToggleDisabledText), "Disable");
public static readonly StyledProperty<bool> ToggleStatusProperty =
AvaloniaProperty.Register<ProgressBarShowCase, bool>(nameof(ToggleStatus), true);
public double ProgressValue
{
get => GetValue(ProgressValueProperty);
set => SetValue(ProgressValueProperty, value);
}
public string ToggleDisabledText
{
get => GetValue(ToggleDisabledTextProperty);
set => SetValue(ToggleDisabledTextProperty, value);
}
public bool ToggleStatus
{
get => GetValue(ToggleStatusProperty);
set => SetValue(ToggleStatusProperty, value);
}
public ProgressBarShowCase()
{
InitializeComponent();
DataContext = this;
TwoStopsGradientStrokeColor = new LinearGradientBrush
{
GradientStops =
{
new GradientStop(Color.Parse("#108ee9"), 0),
new GradientStop(Color.Parse("#87d068"), 1)
}
};
ThreeStopsGradientStrokeColor = new LinearGradientBrush
{
GradientStops =
{
new GradientStop(Color.Parse("#87d068"), 0),
new GradientStop(Color.Parse("#ffe58f"), 0.5),
new GradientStop(Color.Parse("#ffccc7"), 1)
}
};
StepsChunkBrushes = new List<IBrush>
{
new SolidColorBrush(Colors.Green),
new SolidColorBrush(Colors.Green),
new SolidColorBrush(Colors.Red)
};
InnerStartPercentPosition = new PercentPosition
{
IsInner = true,
Alignment = LinePercentAlignment.Start
};
InnerCenterPercentPosition = new PercentPosition
{
IsInner = true,
Alignment = LinePercentAlignment.Center
};
InnerEndPercentPosition = new PercentPosition
{
IsInner = true,
Alignment = LinePercentAlignment.End
};
OutterStartPercentPosition = new PercentPosition
{
IsInner = false,
Alignment = LinePercentAlignment.Start
};
OutterCenterPercentPosition = new PercentPosition
{
IsInner = false,
Alignment = LinePercentAlignment.Center
};
OutterEndPercentPosition = new PercentPosition
{
IsInner = false,
Alignment = LinePercentAlignment.End
};
}
public void AddProgressValue()
{
var value = ProgressValue;
value += 10;
ProgressValue = Math.Min(value, 100);
}
public void SubProgressValue()
{
var value = ProgressValue;
value -= 10;
ProgressValue = Math.Max(value, 0);
}
public void ToggleEnabledStatus()
{
ToggleStatus = !ToggleStatus;
if (ToggleStatus)
{
ToggleDisabledText = "Disable";
}
else
{
ToggleDisabledText = "Enable";
}
}
}

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

@ -1,185 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" />
</Style>
</desktop:ShowCasePanel.Styles>
<desktop:ShowCaseItem
Title="Basic"
Description="The simplest use.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
<atom:RadioButton>Radio</atom:RadioButton>
</StackPanel>
</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"
Command="{Binding $parent[showCase:RadioButtonShowCase].ToggleDisabledStatus}"
CommandParameter="{Binding ElementName=ToggleDisabledButton}">
toggle disabled
</atom:Button>
</StackPanel>
</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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Vertical Radio Group"
Description="Vertical Radio Group.">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Option Button"
Description="OptionButton Group.">
<StackPanel Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
<atom:RadioButton>Pear</atom:RadioButton>
<atom:RadioButton>Orange</atom:RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<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">
<atom:OptionButtonGroup ButtonStyle="Solid">
<atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
<atom:OptionButton>Pear</atom:OptionButton>
<atom:OptionButton>Orange</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<atom:OptionButtonGroup ButtonStyle="Outline">
<atom:OptionButton>Apple</atom:OptionButton>
<atom:OptionButton IsChecked="True">Pear</atom:OptionButton>
<atom:OptionButton IsEnabled="False">Orange</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
</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>
<atom:OptionButton>Shanghai</atom:OptionButton>
<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>
</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>
</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>
<atom:OptionButton>Shanghai</atom:OptionButton>
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

35
samples/AtomUI.Demo.Desktop/ShowCase/RadioButtonShowCase.axaml.cs
View File

@ -1,35 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class RadioButtonShowCase : UserControl
{
protected List<string> CheckRadios { get; set; }
public RadioButtonShowCase()
{
CheckRadios = new List<string>
{
"ToggleDisabledRadioUnChecked",
"ToggleDisabledRadioChecked"
};
InitializeComponent();
}
public static void ToggleDisabledStatus(object arg)
{
var btn = (arg as Button)!;
var stackPanel = btn.Parent as StackPanel;
var radioBtn1 = stackPanel?.FindControl<RadioButton>("ToggleDisabledRadioUnChecked");
var radioBtn2 = stackPanel?.FindControl<RadioButton>("ToggleDisabledRadioChecked");
if (radioBtn1 != null)
{
radioBtn1.IsEnabled = !radioBtn1.IsEnabled;
}
if (radioBtn2 != null)
{
radioBtn2.IsEnabled = !radioBtn2.IsEnabled;
}
}
}

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

@ -1,134 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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>
<atom:SegmentedItem>Monthly</atom:SegmentedItem>
<atom:SegmentedItem>Quarterly</atom:SegmentedItem>
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</desktop:ShowCaseItem>
<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>
<atom:SegmentedItem>456</atom:SegmentedItem>
<atom:SegmentedItem>longtext-longtext-longtext-longtext</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</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>
<atom:SegmentedItem IsEnabled="False">Satellite</atom:SegmentedItem>
</atom:Segmented>
<atom:Segmented>
<atom:SegmentedItem>Daily</atom:SegmentedItem>
<atom:SegmentedItem IsEnabled="False">Weekly</atom:SegmentedItem>
<atom:SegmentedItem>Monthly</atom:SegmentedItem>
<atom:SegmentedItem IsEnabled="False">Quarterly</atom:SegmentedItem>
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</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>
<atom:SegmentedItem>Monthly</atom:SegmentedItem>
<atom:SegmentedItem>Quarterly</atom:SegmentedItem>
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
<atom:Segmented>
<atom:SegmentedItem>Daily</atom:SegmentedItem>
<atom:SegmentedItem>Weekly</atom:SegmentedItem>
<atom:SegmentedItem>Monthly</atom:SegmentedItem>
<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>
<atom:SegmentedItem>Monthly</atom:SegmentedItem>
<atom:SegmentedItem>Quarterly</atom:SegmentedItem>
<atom:SegmentedItem>Yearly</atom:SegmentedItem>
</atom:Segmented>
</StackPanel>
</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:Segmented>
</StackPanel>
</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: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: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:Segmented>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class SegmentedShowCase : UserControl
{
public SegmentedShowCase()
{
InitializeComponent();
}
}

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

@ -1,104 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" />
<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" />
<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>
</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" />
<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" />
<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" />
<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" />
<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" />
<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>
</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" />
<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" />
<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" />
<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>
</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" />
<TextBlock>
Item2
</TextBlock>
<atom:VerticalSeparator />
<TextBlock>
Item3
</TextBlock>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class SeparatorShowCase : UserControl
{
public SeparatorShowCase()
{
InitializeComponent();
}
}

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

@ -1,142 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" />
<StackPanel Orientation="Horizontal" Spacing="2">
<TextBlock>Disabled:</TextBlock>
<atom:ToggleSwitch SizeType="Small" IsChecked="{Binding NormalEnabled}" />
</StackPanel>
</StackPanel>
</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" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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" />
</StackPanel>
</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" />
<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" />
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

43
samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml.cs
View File

@ -1,43 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Collections;
using Avalonia.Controls;
using Avalonia.Media;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class SliderShowCase : UserControl
{
public static readonly StyledProperty<AvaloniaList<SliderMark>?> SliderMarksProperty =
AvaloniaProperty.Register<SliderShowCase, AvaloniaList<SliderMark>?>(nameof(SliderMarks));
public static readonly StyledProperty<bool> NormalDisabledProperty =
AvaloniaProperty.Register<SliderShowCase, bool>(nameof(NormalEnabled), true);
public AvaloniaList<SliderMark>? SliderMarks
{
get => GetValue(SliderMarksProperty);
set => SetValue(SliderMarksProperty, value);
}
public bool NormalEnabled
{
get => GetValue(NormalDisabledProperty);
set => SetValue(NormalDisabledProperty, value);
}
public SliderShowCase()
{
InitializeComponent();
SliderMarks = new AvaloniaList<SliderMark>();
SliderMarks.Add(new SliderMark("0°C", 0));
SliderMarks.Add(new SliderMark("26°C", 26));
SliderMarks.Add(new SliderMark("37°C", 37));
SliderMarks.Add(new SliderMark("100°C", 100)
{
LabelFontWeight = FontWeight.Bold,
LabelBrush = new SolidColorBrush(Colors.Red)
});
DataContext = this;
}
}

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

@ -1,243 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</desktop:ShowCaseItem>
<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>
</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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton 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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton 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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
<WrapPanel>
<atom:SplitButton SizeType="Large" IsPrimaryButtonType="True">
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton SizeType="Middle" IsPrimaryButtonType="True">
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton SizeType="Small" IsPrimaryButtonType="True">
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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>
</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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton IsDanger="true" IsPrimaryButtonType="True">
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</desktop:ShowCaseItem>
<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>
</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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton FlyoutButtonIcon="{atom:IconProvider Kind=UserOutlined}">
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</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>
</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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
<atom:SplitButton FlyoutButtonIcon="{atom:IconProvider Kind=UserOutlined}" TriggerType="Click">
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:MenuFlyout>
</atom:SplitButton.Flyout>
</atom:SplitButton>
</WrapPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/SplitButtonShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class SplitButtonShowCase : UserControl
{
public SplitButtonShowCase()
{
InitializeComponent();
}
}

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

@ -1,88 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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" Spacing="10" Orientation="Horizontal">
<atom:ToggleSwitch />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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>
</desktop:ShowCaseItem>
<desktop: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="关" />
<atom:ToggleSwitch>
<atom:ToggleSwitch.OnContent>
<atom:PathIcon Kind="TwitterOutlined" />
</atom:ToggleSwitch.OnContent>
<atom:ToggleSwitch.OffContent>
<atom:PathIcon Kind="WechatOutlined" />
</atom:ToggleSwitch.OffContent>
</atom:ToggleSwitch>
<atom:ToggleSwitch SizeType="Small">
<atom:ToggleSwitch.OnContent>
<atom:PathIcon Kind="CheckOutlined" />
</atom:ToggleSwitch.OnContent>
<atom:ToggleSwitch.OffContent>
<atom:PathIcon Kind="CloseOutlined" />
</atom:ToggleSwitch.OffContent>
</atom:ToggleSwitch>
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Two sizes"
Description="size=Small represents a small sized switch.">
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
<atom:ToggleSwitch />
<atom:ToggleSwitch SizeType="Small" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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"
Command="{Binding $parent[showCase:SwitchShowCase].ToggleLoadingStatus}"
CommandParameter="{Binding ElementName=ToggleLoadingStatusBtn}">
toggle loading
</atom:Button>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

36
samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml.cs
View File

@ -1,36 +0,0 @@
using Avalonia.Controls;
using Button = AtomUI.Controls.Button;
using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class SwitchShowCase : UserControl
{
public SwitchShowCase()
{
InitializeComponent();
}
public static void ToggleDisabledStatus(object arg)
{
var switchBtn = (arg as ToggleSwitch)!;
switchBtn.IsEnabled = !switchBtn.IsEnabled;
}
public static void ToggleLoadingStatus(object arg)
{
var btn = (arg as Button)!;
var stackPanel = btn.Parent as StackPanel;
var toggleSwitchDefault = stackPanel?.Children[0] as ToggleSwitch;
var toggleSwitchSmall = stackPanel?.Children[1] as ToggleSwitch;
if (toggleSwitchDefault is not null)
{
toggleSwitchDefault.IsLoading = !toggleSwitchDefault.IsLoading;
}
if (toggleSwitchSmall is not null)
{
toggleSwitchSmall.IsLoading = !toggleSwitchSmall.IsLoading;
}
}
}

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

@ -1,481 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<TabControl>
<TabItem Header="TabControl">
<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>
<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>
</StackPanel>
</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>
</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>
</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>
</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>
<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:TabItem Header="Tab 4">Content of Tab Pane 4</atom:TabItem>
<atom:TabItem Header="Tab 5">Content of Tab Pane 5</atom:TabItem>
<atom:TabItem Header="Tab 6">Content of Tab Pane 6</atom:TabItem>
<atom:TabItem Header="Tab 7">Content of Tab Pane 7</atom:TabItem>
<atom:TabItem Header="Tab 8">Content of Tab Pane 8</atom:TabItem>
<atom:TabItem Header="Tab 9">Content of Tab Pane 9</atom:TabItem>
<atom:TabItem Header="Tab 10">Content of Tab Pane 10</atom:TabItem>
<atom:TabItem Header="Tab 11">Content of Tab Pane 11</atom:TabItem>
<atom:TabItem Header="Tab 12">Content of Tab Pane 12</atom:TabItem>
<atom:TabItem Header="Tab 13">Content of Tab Pane 13</atom:TabItem>
<atom:TabItem Header="Tab 14">Content of Tab Pane 14</atom:TabItem>
<atom:TabItem Header="Tab 15">Content of Tab Pane 15</atom:TabItem>
<atom:TabItem Header="Tab 16">Content of Tab Pane 16</atom:TabItem>
<atom:TabItem Header="Tab 17">Content of Tab Pane 17</atom:TabItem>
<atom:TabItem Header="Tab 18">Content of Tab Pane 18</atom:TabItem>
<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>
<atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
<atom:TabItem Header="Tab 4">Content of Tab Pane 4</atom:TabItem>
<atom:TabItem Header="Tab 5">Content of Tab Pane 5</atom:TabItem>
<atom:TabItem Header="Tab 6">Content of Tab Pane 6</atom:TabItem>
<atom:TabItem Header="Tab 7">Content of Tab Pane 7</atom:TabItem>
<atom:TabItem Header="Tab 8">Content of Tab Pane 8</atom:TabItem>
<atom:TabItem Header="Tab 9">Content of Tab Pane 9</atom:TabItem>
<atom:TabItem Header="Tab 10">Content of Tab Pane 10</atom:TabItem>
<atom:TabItem Header="Tab 11">Content of Tab Pane 11</atom:TabItem>
<atom:TabItem Header="Tab 12">Content of Tab Pane 12</atom:TabItem>
<atom:TabItem Header="Tab 13">Content of Tab Pane 13</atom:TabItem>
<atom:TabItem Header="Tab 14">Content of Tab Pane 14</atom:TabItem>
<atom:TabItem Header="Tab 15">Content of Tab Pane 15</atom:TabItem>
<atom:TabItem Header="Tab 16">Content of Tab Pane 16</atom:TabItem>
<atom:TabItem Header="Tab 17">Content of Tab Pane 17</atom:TabItem>
<atom:TabItem Header="Tab 18">Content of Tab Pane 18</atom:TabItem>
<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:CardTabControl>
</StackPanel>
</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>
<atom:TabItem Header="Tab 3" Icon="{atom:IconProvider Kind=WechatOutlined}">Content of Tab Pane 3</atom:TabItem>
</atom:CardTabControl>
</StackPanel>
</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:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
<atom:OptionButton>Right</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<atom:TabControl Name="PositionTabControl"
DockPanel.Dock="{Binding PositionTabControlPlacement}"
TabStripPlacement="{Binding PositionTabControlPlacement}"
Height="300"
Width="400"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<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:TabItem Header="Tab 5">Content of Tab Pane 5</atom:TabItem>
<atom:TabItem Header="Tab 6">Content of Tab Pane 6</atom:TabItem>
<atom:TabItem Header="Tab 7">Content of Tab Pane 7</atom:TabItem>
<atom:TabItem Header="Tab 8">Content of Tab Pane 8</atom:TabItem>
</atom:TabControl>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionCardTabControlOptionGroup">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
<atom:OptionButton>Right</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<atom:CardTabControl Name="PositionCardTabControl"
DockPanel.Dock="{Binding PositionCardTabControlPlacement}"
TabStripPlacement="{Binding PositionCardTabControlPlacement}"
IsShowAddTabButton="True"
Height="300"
Width="500"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<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:TabItem Header="Tab 5">Content of Tab Pane 5</atom:TabItem>
<atom:TabItem Header="Tab 6">Content of Tab Pane 6</atom:TabItem>
<atom:TabItem Header="Tab 7">Content of Tab Pane 7</atom:TabItem>
<atom:TabItem Header="Tab 8">Content of Tab Pane 8</atom:TabItem>
<atom:TabItem Header="Tab 9">Content of Tab Pane 9</atom:TabItem>
<atom:TabItem Header="Tab 10">Content of Tab Pane 10</atom:TabItem>
<atom:TabItem Header="Tab 11">Content of Tab Pane 11</atom:TabItem>
<atom:TabItem Header="Tab 12">Content of Tab Pane 12</atom:TabItem>
</atom:CardTabControl>
</StackPanel>
</desktop:ShowCaseItem>
<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:OptionButton>Small</atom:OptionButton>
<atom:OptionButton IsChecked="True">Middle</atom:OptionButton>
<atom:OptionButton>Large</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<atom:TabControl SizeType="{Binding SizeTypeTabControl}">
<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:TabControl>
<atom:CardTabControl SizeType="{Binding SizeTypeTabControl}">
<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>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</TabItem>
<TabItem Header="TabStrip">
<desktop:ShowCasePanel>
<desktop:ShowCaseItem
Title="Basic"
Description="Default activate first tab.">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:TabStrip>
<atom:TabStripItem>Tab 1</atom:TabStripItem>
<atom:TabStripItem>Tab 2</atom:TabStripItem>
<atom:TabStripItem>Tab 3</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</desktop:ShowCaseItem>
<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>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>
</desktop:ShowCaseItem>
<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>
</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>
<atom:TabStripItem Icon="{atom:IconProvider Kind=AndroidOutlined}">Tab 2</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=WechatOutlined}">Tab 3</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</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:TabStrip>
<atom:TabStripItem>Tab 1</atom:TabStripItem>
<atom:TabStripItem>Tab 2</atom:TabStripItem>
<atom:TabStripItem>Tab 3</atom:TabStripItem>
<atom:TabStripItem>Tab 4</atom:TabStripItem>
<atom:TabStripItem>Tab 5</atom:TabStripItem>
<atom:TabStripItem>Tab 6</atom:TabStripItem>
<atom:TabStripItem>Tab 7</atom:TabStripItem>
<atom:TabStripItem>Tab 8</atom:TabStripItem>
<atom:TabStripItem>Tab 9</atom:TabStripItem>
<atom:TabStripItem>Tab 10</atom:TabStripItem>
<atom:TabStripItem>Tab 11</atom:TabStripItem>
<atom:TabStripItem>Tab 12</atom:TabStripItem>
<atom:TabStripItem>Tab 13</atom:TabStripItem>
<atom:TabStripItem>Tab 14</atom:TabStripItem>
<atom:TabStripItem>Tab 15</atom:TabStripItem>
<atom:TabStripItem>Tab 16</atom:TabStripItem>
<atom:TabStripItem>Tab 17</atom:TabStripItem>
<atom:TabStripItem>Tab 18</atom:TabStripItem>
<atom:TabStripItem>Tab 19</atom:TabStripItem>
<atom:TabStripItem>Tab 20</atom:TabStripItem>
<atom:TabStripItem>Tab 21</atom:TabStripItem>
<atom:TabStripItem>Tab 22</atom:TabStripItem>
<atom:TabStripItem>Tab 23</atom:TabStripItem>
</atom:TabStrip>
</StackPanel>
</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:CardTabStrip>
<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>
</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="PositionTabStripOptionGroup">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
<atom:OptionButton>Right</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<DockPanel Height="300">
<atom:TabStrip Name="PositionTabStrip"
DockPanel.Dock="{Binding PositionTabStripPlacement}"
TabStripPlacement="{Binding PositionTabStripPlacement}">
<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:TabStrip>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="rgb(241, 243, 246)">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab Content</TextBlock>
</Border>
</DockPanel>
</StackPanel>
</desktop:ShowCaseItem>
<desktop: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">
<StackPanel Orientation="Vertical" Spacing="20">
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
<atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionCardTabStripOptionGroup">
<atom:OptionButton IsChecked="True">Top</atom:OptionButton>
<atom:OptionButton>Bottom</atom:OptionButton>
<atom:OptionButton>Left</atom:OptionButton>
<atom:OptionButton>Right</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<DockPanel Height="300">
<atom:CardTabStrip Name="PositionCardTabStrip"
DockPanel.Dock="{Binding PositionCardTabStripPlacement}"
TabStripPlacement="{Binding PositionCardTabStripPlacement}"
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>Tab 3</atom:TabStripItem>
<atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
</atom:CardTabStrip>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="rgb(241, 243, 246)">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab Content</TextBlock>
</Border>
</DockPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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:OptionButton>Small</atom:OptionButton>
<atom:OptionButton IsChecked="True">Middle</atom:OptionButton>
<atom:OptionButton>Large</atom:OptionButton>
</atom:OptionButtonGroup>
</StackPanel>
<atom:TabStrip SizeType="{Binding SizeTypeTabStrip}">
<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:TabStrip>
<atom:CardTabStrip SizeType="{Binding SizeTypeTabStrip}">
<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>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Add and close tab"
Description="Hide default plus icon, and bind event for customized trigger." Margin="0, 0, 30, 0">
<StackPanel Orientation="Vertical" Spacing="20">
<atom:CardTabStrip IsShowAddTabButton="True" Name="AddTabDemoStrip">
<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>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</TabItem>
</TabControl>
</UserControl>

228
samples/AtomUI.Demo.Desktop/ShowCase/TabControlShowCase.axaml.cs
View File

@ -1,228 +0,0 @@
using AtomUI.Controls;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using TabItem = AtomUI.Controls.TabItem;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class TabControlShowCase : UserControl
{
#region TabStrip
public static readonly StyledProperty<Dock> PositionTabStripPlacementProperty =
AvaloniaProperty.Register<TabControlShowCase, Dock>(nameof(PositionTabStripPlacement), Dock.Top);
public static readonly StyledProperty<Dock> PositionCardTabStripPlacementProperty =
AvaloniaProperty.Register<TabControlShowCase, Dock>(nameof(PositionCardTabStripPlacement), Dock.Top);
public static readonly StyledProperty<SizeType> SizeTypeTabStripProperty =
AvaloniaProperty.Register<TabControlShowCase, SizeType>(nameof(SizeTypeTabStrip), SizeType.Middle);
public Dock PositionTabStripPlacement
{
get => GetValue(PositionTabStripPlacementProperty);
set => SetValue(PositionTabStripPlacementProperty, value);
}
public Dock PositionCardTabStripPlacement
{
get => GetValue(PositionCardTabStripPlacementProperty);
set => SetValue(PositionCardTabStripPlacementProperty, value);
}
public SizeType SizeTypeTabStrip
{
get => GetValue(SizeTypeTabStripProperty);
set => SetValue(SizeTypeTabStripProperty, value);
}
#endregion
#region TabControl
public static readonly StyledProperty<Dock> PositionTabControlPlacementProperty =
AvaloniaProperty.Register<TabControlShowCase, Dock>(nameof(PositionTabControlPlacement), Dock.Top);
public static readonly StyledProperty<Dock> PositionCardTabControlPlacementProperty =
AvaloniaProperty.Register<TabControlShowCase, Dock>(nameof(PositionCardTabControlPlacement), Dock.Top);
public static readonly StyledProperty<SizeType> SizeTypeTabControlProperty =
AvaloniaProperty.Register<TabControlShowCase, SizeType>(nameof(SizeTypeTabControl), SizeType.Middle);
public Dock PositionTabControlPlacement
{
get => GetValue(PositionTabControlPlacementProperty);
set => SetValue(PositionTabControlPlacementProperty, value);
}
public Dock PositionCardTabControlPlacement
{
get => GetValue(PositionCardTabControlPlacementProperty);
set => SetValue(PositionCardTabControlPlacementProperty, value);
}
public SizeType SizeTypeTabControl
{
get => GetValue(SizeTypeTabControlProperty);
set => SetValue(SizeTypeTabControlProperty, value);
}
#endregion
public TabControlShowCase()
{
InitializeComponent();
DataContext = this;
PositionTabStripOptionGroup.OptionCheckedChanged += HandleTabStripPlacementOptionCheckedChanged;
PositionCardTabStripOptionGroup.OptionCheckedChanged += HandleCardTabStripPlacementOptionCheckedChanged;
SizeTypeTabStripOptionGroup.OptionCheckedChanged += HandleTabStripSizeTypeOptionCheckedChanged;
AddTabDemoStrip.AddTabRequest += HandleTabStripAddTabRequest;
PositionTabControlOptionGroup.OptionCheckedChanged += HandleTabControlPlacementOptionCheckedChanged;
PositionCardTabControlOptionGroup.OptionCheckedChanged += HandleCardTabControlPlacementOptionCheckedChanged;
SizeTypeTabControlOptionGroup.OptionCheckedChanged += HandleTabControlSizeTypeOptionCheckedChanged;
AddTabDemoTabControl.AddTabRequest += HandleTabControlAddTabRequest;
}
#region TabStrip
private void HandleTabStripPlacementOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
PositionTabStripPlacement = Dock.Top;
}
else if (args.Index == 1)
{
PositionTabStripPlacement = Dock.Bottom;
}
else if (args.Index == 2)
{
PositionTabStripPlacement = Dock.Left;
}
else
{
PositionTabStripPlacement = Dock.Right;
}
}
private void HandleCardTabStripPlacementOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
PositionCardTabStripPlacement = Dock.Top;
}
else if (args.Index == 1)
{
PositionCardTabStripPlacement = Dock.Bottom;
}
else if (args.Index == 2)
{
PositionCardTabStripPlacement = Dock.Left;
}
else
{
PositionCardTabStripPlacement = Dock.Right;
}
}
private void HandleTabStripSizeTypeOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
SizeTypeTabStrip = SizeType.Small;
}
else if (args.Index == 1)
{
SizeTypeTabStrip = SizeType.Middle;
}
else
{
SizeTypeTabStrip = SizeType.Large;
}
}
private void HandleTabStripAddTabRequest(object? sender, RoutedEventArgs args)
{
var index = AddTabDemoStrip.ItemCount;
AddTabDemoStrip.Items.Add(new TabStripItem
{
Content = $"new tab {index}",
IsClosable = true
});
}
#endregion
#region TabControl
private void HandleTabControlPlacementOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
PositionTabControlPlacement = Dock.Top;
}
else if (args.Index == 1)
{
PositionTabControlPlacement = Dock.Bottom;
}
else if (args.Index == 2)
{
PositionTabControlPlacement = Dock.Left;
}
else
{
PositionTabControlPlacement = Dock.Right;
}
}
private void HandleCardTabControlPlacementOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
PositionCardTabControlPlacement = Dock.Top;
}
else if (args.Index == 1)
{
PositionCardTabControlPlacement = Dock.Bottom;
}
else if (args.Index == 2)
{
PositionCardTabControlPlacement = Dock.Left;
}
else
{
PositionCardTabControlPlacement = Dock.Right;
}
}
private void HandleTabControlSizeTypeOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args)
{
if (args.Index == 0)
{
SizeTypeTabControl = SizeType.Small;
}
else if (args.Index == 1)
{
SizeTypeTabControl = SizeType.Middle;
}
else
{
SizeTypeTabControl = SizeType.Large;
}
}
private void HandleTabControlAddTabRequest(object? sender, RoutedEventArgs args)
{
var index = AddTabDemoTabControl.ItemCount;
AddTabDemoTabControl.Items.Add(new TabItem
{
Header = $"new tab {index}",
Content = $"new tab content {index}",
IsClosable = true
});
}
#endregion
}

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

@ -1,186 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
mc:Ignorable="d">
<desktop:ShowCasePanel>
<desktop:ShowCasePanel.Styles>
<Style Selector="atom|Tag">
<Setter Property="Margin" Value="5" />
</Style>
</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>
<atom:Tag IsClosable="true">Prevent Default</atom:Tag>
<atom:Tag IsClosable="True">
<atom:Tag.CloseIcon>
<atom:PathIcon Kind="CloseCircleOutlined " />
</atom:Tag.CloseIcon>
Tag 2
</atom:Tag>
</WrapPanel>
</desktop:ShowCaseItem>
<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>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="magenta">magenta</atom:Tag>
<atom:Tag TagColor="red">red</atom:Tag>
<atom:Tag TagColor="volcano">volcano</atom:Tag>
<atom:Tag TagColor="orange">orange</atom:Tag>
<atom:Tag TagColor="gold">gold</atom:Tag>
<atom:Tag TagColor="lime">lime</atom:Tag>
<atom:Tag TagColor="green">green</atom:Tag>
<atom:Tag TagColor="cyan">cyan</atom:Tag>
<atom:Tag TagColor="blue">blue</atom:Tag>
<atom:Tag TagColor="geekblue">geekblue</atom:Tag>
<atom:Tag TagColor="purple">purple</atom:Tag>
</WrapPanel>
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="#f50">#f50</atom:Tag>
<atom:Tag TagColor="#2db7f5" IsClosable="True">#2db7f5</atom:Tag>
<atom:Tag TagColor="#87d068">#87d068</atom:Tag>
<atom:Tag TagColor="#108ee9">#108ee9</atom:Tag>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="success">success</atom:Tag>
<atom:Tag TagColor="info">processing</atom:Tag>
<atom:Tag TagColor="error">error</atom:Tag>
<atom:Tag TagColor="warning">warning</atom:Tag>
<atom:Tag TagColor="default">default</atom:Tag>
</WrapPanel>
<TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
<WrapPanel HorizontalAlignment="Left">
<atom:Tag TagColor="success">
<atom:Tag.Icon>
<atom:PathIcon Kind="CheckCircleOutlined" />
</atom:Tag.Icon>
success
</atom:Tag>
<atom:Tag TagColor="info">
<atom:Tag.Icon>
<atom:PathIcon Kind="SyncOutlined" />
</atom:Tag.Icon>
processing
</atom:Tag>
<atom:Tag TagColor="error">
<atom:Tag.Icon>
<atom:PathIcon Kind="CloseCircleOutlined" />
</atom:Tag.Icon>
error
</atom:Tag>
<atom:Tag TagColor="warning">
<atom:Tag.Icon>
<atom:PathIcon Kind="ExclamationCircleOutlined" />
</atom:Tag.Icon>
warning
</atom:Tag>
<atom:Tag TagColor="default">
<atom:Tag.Icon>
<atom:PathIcon Kind="ClockCircleOutlined" />
</atom:Tag.Icon>
default
</atom:Tag>
<atom:Tag TagColor="default">
<atom:Tag.Icon>
<atom:PathIcon Kind="MinusCircleOutlined" />
</atom:Tag.Icon>
default
</atom:Tag>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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>
<atom:PathIcon Kind="TwitterOutlined" />
</atom:Tag.Icon>
Twitter
</atom:Tag>
<atom:Tag TagColor="#cd201f">
<atom:Tag.Icon>
<atom:PathIcon Kind="YoutubeOutlined" />
</atom:Tag.Icon>
Youtube
</atom:Tag>
<atom:Tag TagColor="#3b5999">
<atom:Tag.Icon>
<atom:PathIcon Kind="FacebookOutlined" />
</atom:Tag.Icon>
Facebook
</atom:Tag>
<atom:Tag TagColor="#55acee">
<atom:Tag.Icon>
<atom:PathIcon Kind="LinkedinOutlined" />
</atom:Tag.Icon>
Linkedin
</atom:Tag>
</WrapPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="borderless"
Description="borderless">
<StackPanel Orientation="Vertical">
<WrapPanel HorizontalAlignment="Left">
<atom:Tag Bordered="False">Tag1</atom:Tag>
<atom:Tag Bordered="False">Tag2</atom:Tag>
<atom:Tag Bordered="False" IsClosable="True">Tag3</atom:Tag>
<atom:Tag Bordered="False" IsClosable="True">Tag4</atom:Tag>
</WrapPanel>
<atom:Separator FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 20" />
<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 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>
</WrapPanel>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

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

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class TagShowCase : UserControl
{
public TagShowCase()
{
InitializeComponent();
}
}

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

@ -1,156 +0,0 @@
<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:desktop="clr-namespace:AtomUI.Demo.Desktop"
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 Watermark="Select time" Width="200" IsNeedConfirm="False" IsShowNow="True"/>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="12-hour and 24-hour formats"
Description="TimePicker supports two time types, 12-hour and 24-hour.">
<atom:TimePicker Watermark="Select time" IsNeedConfirm="True" IsShowNow="True" ClockIdentifier="HourClock24"/>
</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" 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>
</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" IsEnabled="False" DefaultTime="12:08:23" />
</StackPanel>
</desktop:ShowCaseItem>
<desktop:ShowCaseItem
Title="Interval option"
Description="Show stepped options by MinuteIncrement SecondIncrement.">
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:TimePicker Watermark="Select time"
Width="160"
DefaultTime="12:08:23"
MinuteIncrement="15"
SecondIncrement="10" />
</StackPanel>
</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"
ClockIdentifier="HourClock12" />
<atom:TimePicker Watermark="Select time"
Width="160"
DefaultTime="12:08:23"
ClockIdentifier="HourClock24" />
</StackPanel>
</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"
StyleVariant="Outline" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
Watermark="Outline" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Watermark="Filled"
Width="160"
StyleVariant="Filled" />
<atom:RangeTimePicker Width="320"
StyleVariant="Filled"
Watermark="Filled" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Watermark="Borderless"
Width="160"
StyleVariant="Borderless" />
<atom:RangeTimePicker Width="320"
StyleVariant="Borderless"
Watermark="Borderless" />
</StackPanel>
</StackPanel>
</desktop:ShowCaseItem>
<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"
Watermark="Start time"
SecondaryWatermark="End time"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Width="160"
Status="Warning"
Watermark="Select time" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
Status="Warning"
Watermark="Start time"
SecondaryWatermark="End time"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="5">
<atom:TimePicker Width="160"
Status="Error"
Watermark="Select time" />
<atom:RangeTimePicker Width="320"
StyleVariant="Outline"
Status="Error"
Watermark="Start time"
SecondaryWatermark="End time"
IsNeedConfirm="True"
ClockIdentifier="HourClock24"/>
</StackPanel>
</StackPanel>
</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"
Watermark="Start time"
SecondaryWatermark="End time"
RangeStartDefaultTime="10:09:20"
RangeEndDefaultTime="12:12:20"/>
</StackPanel>
</desktop:ShowCaseItem>
</desktop:ShowCasePanel>
</UserControl>

11
samples/AtomUI.Demo.Desktop/ShowCase/TimePickerShowCase.axaml.cs
View File

@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace AtomUI.Demo.Desktop.ShowCase;
public partial class TimePickerShowCase : UserControl
{
public TimePickerShowCase()
{
InitializeComponent();
}
}

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