From 480a9be15c00f6fe22e17628a00e03b199930bdc Mon Sep 17 00:00:00 2001
From: zeroone <zeroone@chinware.com>
Date: Mon, 9 Sep 2024 23:54:25 +0800
Subject: [PATCH] =?UTF-8?q?*=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Directory.Build.props                         |   1 -
 samples/AtomUI.Demo.Desktop/App.axaml         |  11 +-
 .../AtomUI.Demo.Desktop.csproj.DotSettings    |   5 +-
 .../AtomUI.Demo.Desktop/Base/ShowCaseItem.cs  |   3 +-
 .../AtomUI.Demo.Desktop/Base/ShowCasePanel.cs |   2 +-
 .../Controls/Colors/ColorItemControl.axaml    |  52 +-
 .../Controls/Colors/ColorListControl.axaml    |  24 +-
 .../Colors/ColorListGroupControl.axaml        |  22 +-
 .../Controls/PathIcon/IconGallery.axaml       |  19 +-
 .../Controls/PathIcon/IconInfoItem.axaml      |  45 +-
 .../ShowCase/AlertShowCase.axaml              | 215 ++--
 .../ShowCase/AlertShowCase.axaml.cs           |   2 -
 .../ShowCase/AvatarShowCase.axaml             |  22 +-
 .../ShowCase/AvatarShowCase.axaml.cs          |   2 -
 .../ShowCase/BadgeShowCase.axaml              | 339 ++++---
 .../ShowCase/ButtonShowCase.axaml             | 338 ++++---
 .../ShowCase/ButtonSpinnerShowCase.axaml      | 415 ++++----
 .../ShowCase/CardShowCase.axaml               |  22 +-
 .../ShowCase/CheckBoxShowCase.axaml           | 137 +--
 .../ShowCase/CollapseShowCase.axaml           | 134 ++-
 .../ShowCase/ComboBoxShowCase.axaml           | 244 ++---
 .../ShowCase/ComboBoxShowCase.axaml.cs        |   2 -
 .../ShowCase/DatePickerShowCase.cs.axaml      |  22 +-
 .../ShowCase/DrawerShowCase.axaml             |  35 +-
 .../ShowCase/DropdownButtonShowCase.axaml     | 533 ++++++----
 .../ShowCase/EmptyShowCase.axaml              |  65 +-
 .../ShowCase/ExpanderShowCase.axaml           | 168 +--
 .../ShowCase/ExpanderShowCase.axaml.cs        |   1 -
 .../ShowCase/GroupBoxShowCase.axaml           |  70 +-
 .../ShowCase/IconShowCase.axaml               |  29 +-
 .../ShowCase/InfoFlyoutShowCase.axaml         | 666 +++++++-----
 .../ShowCase/InfoFlyoutShowCase.axaml.cs      |   1 -
 .../ShowCase/LineEditShowCase.axaml           | 269 ++---
 .../ShowCase/LineEditShowCase.axaml.cs        |   2 -
 .../ShowCase/ListBoxShowCase.axaml            |  44 +-
 .../ShowCase/ListBoxShowCase.axaml.cs         |   2 -
 .../ShowCase/LoadingIndicatorShowCase.axaml   | 134 +--
 .../ShowCase/MenuShowCase.axaml               | 177 ++--
 .../ShowCase/MenuShowCase.axaml.cs            |   2 -
 .../ShowCase/MessageShowCase.axaml            |  73 +-
 .../ShowCase/MessageShowCase.axaml.cs         |   2 +-
 .../ShowCase/NotificationShowCase.axaml       | 104 +-
 .../ShowCase/NumberUpDownShowCase.axaml       | 189 ++--
 .../ShowCase/Overview.axaml                   | 468 +++++----
 .../ShowCase/Overview.axaml.cs                |   4 -
 .../ShowCase/PaginationShowCase.axaml         |  22 +-
 .../ShowCase/PaginationShowCase.axaml.cs      |   2 -
 .../ShowCase/PaletteShowCase.axaml            |  35 +-
 .../ShowCase/PopupConfirmShowCase.axaml       | 292 +++---
 .../ShowCase/ProgressBarShowCase.axaml        | 955 +++++++++++++-----
 .../ShowCase/ProgressBarShowCase.axaml.cs     |   1 -
 .../ShowCase/RadioButtonShowCase.axaml        | 136 ++-
 .../ShowCase/SegmentedShowCase.axaml          | 122 ++-
 .../ShowCase/SegmentedShowCase.axaml.cs       |   2 -
 .../ShowCase/SeparatorShowCase.axaml          |  91 +-
 .../ShowCase/SeparatorShowCase.axaml.cs       |   2 -
 .../ShowCase/SliderShowCase.axaml             | 237 ++---
 .../ShowCase/SplitButtonShowCase.axaml        | 261 ++---
 .../ShowCase/SwitchShowCase.axaml             | 125 +--
 .../ShowCase/TabControlShowCase.axaml         | 246 ++---
 .../ShowCase/TagShowCase.axaml                | 117 ++-
 .../ShowCase/TagShowCase.axaml.cs             |   2 -
 .../ShowCase/TimePickerShowCase.axaml         | 178 ++--
 .../ShowCase/TimelineShowCase.axaml           |  22 +-
 .../ShowCase/TimelineShowCase.axaml.cs        |   2 -
 .../ShowCase/TitleBarShowCase.axaml           |  22 +-
 .../ShowCase/TitleBarShowCase.axaml.cs        |   2 -
 .../ShowCase/ToolBarShowCase.axaml            |  22 +-
 .../ShowCase/ToolBarShowCase.axaml.cs         |   2 -
 .../ShowCase/TooltipShowCase.axaml            | 292 +++---
 .../ShowCase/TreeViewShowCase.axaml           | 117 +--
 .../ShowCase/WatermarkShowCase.axaml          |  32 +-
 .../ShowCase/WatermarkShowCase.axaml.cs       |   2 -
 .../AtomUI.Demo.Desktop/Themes/TabMenu.axaml  |  30 +-
 .../Themes/ToggleButton.axaml                 |  22 +-
 .../Utils/EnumExtension.cs                    |   2 +-
 .../ViewModels/CheckBoxShowCaseModel.cs       |   1 -
 .../ViewModels/DataGridDemoViewModel.cs       |   3 -
 .../ViewModels/TabControlDemoViewModel.cs     |   1 -
 .../AtomUI.Demo.Desktop/Views/MainView.axaml  |  44 +-
 .../Views/MainWindow.axaml                    |  27 +-
 src/AtomUI.Base/AtomUI.Base.csproj            |   1 +
 src/AtomUI.Base/MotionScene/MotionActor.cs    |   1 -
 .../AddOnDecoratedBox/AddOnDecoratedBox.cs    |   1 -
 .../AddOnDecoratedBoxTheme.cs                 |   2 +-
 .../AddOnDecoratedInnerBox.cs                 |   2 +-
 .../AddOnDecoratedInnerBoxTheme.cs            |   2 +-
 src/AtomUI.Controls/Alert/Alert.cs            |   1 -
 src/AtomUI.Controls/Alert/AlertTheme.cs       |   2 +-
 src/AtomUI.Controls/AtomUI.Controls.csproj    |   1 -
 .../AtomUI.Controls.csproj.DotSettings        |  47 +-
 src/AtomUI.Controls/Badge/CountBadge.cs       |   5 +-
 src/AtomUI.Controls/Badge/CountBadgeMotion.cs |  34 +-
 src/AtomUI.Controls/Badge/DotBadge.cs         |   5 +-
 .../ButtonSpinner/ButtonSpinnerInnerBox.cs    |   1 -
 .../ButtonSpinner/ButtonSpinnerTheme.cs       |   2 +-
 src/AtomUI.Controls/Buttons/Button.cs         |   1 -
 src/AtomUI.Controls/Buttons/DropdownButton.cs |   2 +-
 src/AtomUI.Controls/Buttons/IconButton.cs     |   1 -
 .../Buttons/IconButtonTheme.cs                |   1 -
 src/AtomUI.Controls/Buttons/SplitButton.cs    |   6 +-
 .../Buttons/SplitButtonTheme.cs               |   4 -
 .../Buttons/ToggleIconButtonTheme.cs          |   2 -
 src/AtomUI.Controls/CheckBox/CheckBox.cs      |   1 -
 src/AtomUI.Controls/Collapse/Collapse.cs      |   1 -
 src/AtomUI.Controls/Collapse/CollapseItem.cs  |   2 +-
 .../Collapse/CollapseItemTheme.cs             |   4 +-
 .../ComboBox/ComboBoxSpinnerInnerBox.cs       |   1 -
 src/AtomUI.Controls/ComboBox/ComboBoxTheme.cs |   2 +-
 .../DatePicker/DatePickerToken.cs             |   2 +-
 .../EmptyIndicator/EmptyIndicator.cs          |   2 +-
 .../EmptyIndicator/EmptyIndicatorTheme.cs     |   2 +-
 src/AtomUI.Controls/Expander/Expander.cs      |   8 +-
 src/AtomUI.Controls/Expander/ExpanderTheme.cs |   1 +
 src/AtomUI.Controls/Flyouts/Flyout.cs         |   3 +-
 src/AtomUI.Controls/Flyouts/FlyoutHost.cs     |   2 +-
 .../Flyouts/MenuFlyoutPresenter.cs            |   1 -
 .../Flyouts/MenuFlyoutPresenterTheme.cs       |   5 +-
 src/AtomUI.Controls/GroupBox/GroupBox.cs      |   2 -
 src/AtomUI.Controls/Input/SearchEdit.cs       |   1 -
 src/AtomUI.Controls/ListBox/ListBox.cs        |   1 -
 .../ListBox/ListBoxItemTheme.cs               |   1 -
 src/AtomUI.Controls/Loading/LoadingMask.cs    |   1 -
 src/AtomUI.Controls/Localization/en_US.cs     |   2 +
 src/AtomUI.Controls/Localization/zh_CN.cs     |   2 +
 .../MarqueeLabel/MarqueeLabel.cs              |   1 +
 src/AtomUI.Controls/Menu/ContextMenu.cs       |   3 -
 src/AtomUI.Controls/Menu/ContextMenuTheme.cs  |   2 +-
 src/AtomUI.Controls/Menu/Menu.cs              |   2 +-
 src/AtomUI.Controls/Menu/MenuItem.cs          |   2 +-
 src/AtomUI.Controls/Menu/MenuItemTheme.cs     |   2 +-
 .../Menu/MenuScrollViewerTheme.cs             |   2 +-
 src/AtomUI.Controls/Menu/MenuSeparator.cs     |   1 -
 src/AtomUI.Controls/Menu/MenuTheme.cs         |   1 -
 .../Menu/TopLevelMenuItemTheme.cs             |   2 +-
 src/AtomUI.Controls/Message/IMessage.cs       |   2 +-
 .../Message/IMessageManager.cs                |   2 +-
 src/AtomUI.Controls/Message/Message.cs        |   2 +-
 src/AtomUI.Controls/Message/MessageCard.cs    |   5 +-
 .../Message/MessageCardTheme.cs               |   4 +-
 src/AtomUI.Controls/Message/MessageToken.cs   |   2 +-
 src/AtomUI.Controls/Message/MessageType.cs    |   2 +-
 .../Message/WindowMessageManager.cs           |   2 +-
 .../Message/WindowMessageManagerTheme.cs      |   2 +-
 .../Notifications/NotificationCard.cs         |   6 +-
 .../Notifications/NotificationCardTheme.cs    |   2 +-
 .../Notifications/NotificationProgressBar.cs  |   3 +-
 .../PathIcon/IconProviderMarkupExtension.cs   |   1 -
 src/AtomUI.Controls/Popup/Popup.cs            |   2 +-
 .../PopupConfirm/Localization/en_US.cs        |   2 +
 .../PopupConfirm/Localization/zh_CN.cs        |   2 +
 .../PopupConfirm/PopupConfirm.cs              |   2 +-
 .../PopupConfirmContainerTheme.cs             |   2 +-
 .../Primitives/MotionGhostControl.cs          |   3 +-
 .../Primitives/ShadowRenderer.cs              |   2 -
 .../ProgressBar/AbstractCircleProgress.cs     |   1 -
 .../AbstractCircleProgressTheme.cs            |   4 +-
 .../ProgressBar/AbstractLineProgress.cs       |   1 -
 .../ProgressBar/AbstractLineProgressTheme.cs  |   4 +-
 .../ProgressBar/AbstractProgressBar.cs        |   1 +
 .../RadioButton/RadioButton.cs                |   1 -
 .../Segmented/SegmentedItem.cs                |   2 +-
 src/AtomUI.Controls/Separator/Separator.cs    |   2 -
 src/AtomUI.Controls/Slider/SliderTrack.cs     |   1 +
 src/AtomUI.Controls/Switch/SwitchKnob.cs      |   3 +-
 src/AtomUI.Controls/Switch/ToggleSwitch.cs    |   1 -
 .../Switch/ToggleSwitchTheme.cs               |   2 +-
 .../Switch/ToggleSwitchToken.cs               |   2 +-
 .../TabControl/BaseOverflowMenuItem.cs        |   1 -
 .../TabControl/BaseOverflowMenuItemTheme.cs   |   2 +-
 .../TabControl/BaseTabControl.cs              |   1 -
 .../TabControl/BaseTabItemTheme.cs            |   2 +-
 .../TabControl/BaseTabScrollViewer.cs         |   2 +-
 .../TabControl/BaseTabScrollViewerTheme.cs    |   2 +-
 .../TabControl/CardTabControl.cs              |   1 -
 .../TabControl/CardTabControlTheme.cs         |   4 +-
 src/AtomUI.Controls/TabControl/TabControl.cs  |   4 +-
 .../TabControl/TabControlTheme.cs             |   4 +-
 src/AtomUI.Controls/TabControl/TabItem.cs     |   2 +-
 .../TabControl/TabStrip/BaseTabStrip.cs       |   1 -
 .../TabStrip/BaseTabStripItemTheme.cs         |   2 +-
 .../TabControl/TabStrip/CardTabStrip.cs       |   1 -
 .../TabControl/TabStrip/CardTabStripTheme.cs  |   4 +-
 .../TabControl/TabStrip/TabStrip.cs           |   4 +-
 .../TabControl/TabStrip/TabStripItem.cs       |   2 +-
 .../TabControl/TabStrip/TabStripTheme.cs      |   4 +-
 src/AtomUI.Controls/Tag/Tag.cs                |   1 -
 src/AtomUI.Controls/Tag/TagTheme.cs           |   2 +-
 .../TimePicker/DateTimePickerPanel.cs         |   3 +-
 .../TimePicker/Localization/en_US.cs          |   2 +
 .../TimePicker/Localization/zh_CN.cs          |   2 +
 .../TimePicker/PickerClearUpButtonTheme.cs    |   2 +-
 .../RangeTimePickerFlyoutPresenterTheme.cs    |   2 +-
 .../TimePicker/RangeTimePickerTheme.cs        |   2 +-
 src/AtomUI.Controls/TimePicker/TimePicker.cs  |   2 +-
 .../TimePickerFlyoutPresenterTheme.cs         |   2 +-
 .../TimePicker/TimePickerPresenter.cs         |   1 -
 .../TimePicker/TimePickerPresenterTheme.cs    |   2 +-
 src/AtomUI.Controls/Tooltip/ToolTip.cs        |   2 +-
 .../TreeView/DragPreviewAdorner.cs            |   4 +-
 .../TreeView/NodeSwitcherButton.cs            |   2 +-
 src/AtomUI.Controls/TreeView/TreeView.cs      |   1 +
 src/AtomUI.Controls/TreeView/TreeViewItem.cs  |   1 -
 .../TreeView/TreeViewItemTheme.cs             |   3 +-
 src/AtomUI.Controls/Utils/DateTimeUtils.cs    |   2 +-
 .../Utils/RoundRectGeometryBuilder.cs         |   1 -
 .../Watermark/Glyphs/ImageGlyph.cs            |   1 -
 src/AtomUI.Controls/Window/CaptionButton.cs   |   5 +-
 .../Window/CaptionButtonBox.cs                |   2 +-
 .../Window/CaptionButtonThemeProvider.cs      |   4 +-
 .../Window/CaptionButtonToken.cs              |   2 +-
 src/AtomUI.Controls/Window/TitleBar.cs        |   2 +-
 src/AtomUI.Controls/Window/Window.cs          |   4 +-
 src/AtomUI.Controls/Window/WindowToken.cs     |   2 +-
 ...nguageProviderRegisterClassSourceWriter.cs |   3 +-
 src/AtomUI.Theme/AbstractLanguageProvider.cs  |   1 -
 .../Data/LanguageResourceBinder.cs            |   5 +-
 src/AtomUI.Theme/Data/TokenResourceBinder.cs  |   2 +-
 218 files changed, 4867 insertions(+), 4099 deletions(-)

diff --git a/Directory.Build.props b/Directory.Build.props
index ad1163d..107eabd 100644
--- a/Directory.Build.props
+++ b/Directory.Build.props
@@ -1,7 +1,6 @@
 <Project>
     
     <PropertyGroup>
-        <RootNamespace>AtomUI</RootNamespace>
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
         <LangVersion>latest</LangVersion>
diff --git a/samples/AtomUI.Demo.Desktop/App.axaml b/samples/AtomUI.Demo.Desktop/App.axaml
index 9be0c68..fdafaeb 100644
--- a/samples/AtomUI.Demo.Desktop/App.axaml
+++ b/samples/AtomUI.Demo.Desktop/App.axaml
@@ -1,9 +1,8 @@
-<Application
-    x:Class="AtomUI.Demo.Desktop.App"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    RequestedThemeVariant="Light"
-    ><!--强制使用默认主题，因目前未适配暗黑主题，如果系统为暗黑主题时，演示demo会展示不正常 -->
+<Application x:Class="AtomUI.Demo.Desktop.App"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             RequestedThemeVariant="Light">
+    <!-- 强制使用默认主题，因目前未适配暗黑主题，如果系统为暗黑主题时，演示demo会展示不正常 -->
     <Application.Styles>
         <FluentTheme />
     </Application.Styles>
diff --git a/samples/AtomUI.Demo.Desktop/AtomUI.Demo.Desktop.csproj.DotSettings b/samples/AtomUI.Demo.Desktop/AtomUI.Demo.Desktop.csproj.DotSettings
index a74a2d7..204af06 100644
--- a/samples/AtomUI.Demo.Desktop/AtomUI.Demo.Desktop.csproj.DotSettings
+++ b/samples/AtomUI.Demo.Desktop/AtomUI.Demo.Desktop.csproj.DotSettings
@@ -1,2 +1,5 @@
 <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
-	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
\ No newline at end of file
+	<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>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/Base/ShowCaseItem.cs b/samples/AtomUI.Demo.Desktop/Base/ShowCaseItem.cs
index c07cdb0..96a5c4c 100644
--- a/samples/AtomUI.Demo.Desktop/Base/ShowCaseItem.cs
+++ b/samples/AtomUI.Demo.Desktop/Base/ShowCaseItem.cs
@@ -1,10 +1,9 @@
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Layout;
 using Avalonia.LogicalTree;
 using Avalonia.Media;
 
-namespace AtomUI.Demo.Desktop.ShowCase;
+namespace AtomUI.Demo.Desktop;
 
 public class ShowCaseItem : ContentControl
 {
diff --git a/samples/AtomUI.Demo.Desktop/Base/ShowCasePanel.cs b/samples/AtomUI.Demo.Desktop/Base/ShowCasePanel.cs
index 650f33f..f6ffea4 100644
--- a/samples/AtomUI.Demo.Desktop/Base/ShowCasePanel.cs
+++ b/samples/AtomUI.Demo.Desktop/Base/ShowCasePanel.cs
@@ -6,7 +6,7 @@ using Avalonia.LogicalTree;
 using Avalonia.Metadata;
 using AvaloniaControlList = Avalonia.Controls.Controls;
 
-namespace AtomUI.Demo.Desktop.ShowCase;
+namespace AtomUI.Demo.Desktop;
 
 public class ShowCasePanel : Control
 {
diff --git a/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorItemControl.axaml b/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorItemControl.axaml
index 1df7e2d..93ac497 100644
--- a/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorItemControl.axaml
+++ b/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorItemControl.axaml
@@ -1,10 +1,9 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ColorItemViewModel">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
+                    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+                    x:CompileBindings="True"
+                    x:DataType="viewModels:ColorItemViewModel">
     <Design.PreviewWith>
         <controls:ColorItemControl />
     </Design.PreviewWith>
@@ -13,28 +12,25 @@
         <Setter Property="controls:ColorItemControl.Height" Value="35" />
         <Setter Property="controls:ColorItemControl.Template">
             <ControlTemplate TargetType="controls:ColorItemControl">
-                <Border
-                    Width="{TemplateBinding Width}"
-                    Height="{TemplateBinding Height}"
-                    Background="{TemplateBinding Background}">
+                <Border Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        Background="{TemplateBinding Background}">
                     <Panel>
-                        <TextBlock
-                            Padding="8"
-                            FontSize="12"
-                            FontWeight="600"
-                            Foreground="{TemplateBinding Foreground}"
-                            Text="{TemplateBinding ColorName}" />
-                        <TextBlock
-                            Name="PART_HexTextBlock"
-                            Padding="8"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Center"
-                            FontWeight="600"
-                            FontSize="10"
-                            Foreground="{TemplateBinding Foreground}"
-                            IsVisible="False"
-                            Opacity="0.8"
-                            Text="{TemplateBinding Hex}" />
+                        <TextBlock Padding="8"
+                                   FontSize="12"
+                                   FontWeight="600"
+                                   Foreground="{TemplateBinding Foreground}"
+                                   Text="{TemplateBinding ColorName}" />
+                        <TextBlock Name="PART_HexTextBlock"
+                                   Padding="8"
+                                   HorizontalAlignment="Right"
+                                   VerticalAlignment="Center"
+                                   FontSize="10"
+                                   FontWeight="600"
+                                   Foreground="{TemplateBinding Foreground}"
+                                   IsVisible="False"
+                                   Opacity="0.8"
+                                   Text="{TemplateBinding Hex}" />
                     </Panel>
                 </Border>
             </ControlTemplate>
diff --git a/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListControl.axaml b/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListControl.axaml
index d45f10d..ce5fb48 100644
--- a/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListControl.axaml
+++ b/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListControl.axaml
@@ -1,15 +1,14 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ColorListViewModel">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
+                    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+                    x:CompileBindings="True"
+                    x:DataType="viewModels:ColorListViewModel">
 
     <ControlTheme x:Key="{x:Type controls:ColorListControl}" TargetType="controls:ColorListControl">
         <Setter Property="controls:ColorListControl.Template">
             <ControlTemplate TargetType="controls:ColorListControl">
-                <ItemsControl ItemsSource="{Binding Colors }">
+                <ItemsControl ItemsSource="{Binding Colors}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
                             <StackPanel />
@@ -17,11 +16,10 @@
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate x:DataType="viewModels:ColorItemViewModel">
-                            <controls:ColorItemControl
-                                ColorName="{Binding ColorDisplayName}"
-                                Background="{Binding Brush}"
-                                Foreground="{Binding TextBrush}"
-                                Hex="{Binding Hex}" />
+                            <controls:ColorItemControl Background="{Binding Brush}"
+                                                       ColorName="{Binding ColorDisplayName}"
+                                                       Foreground="{Binding TextBrush}"
+                                                       Hex="{Binding Hex}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
diff --git a/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListGroupControl.axaml b/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListGroupControl.axaml
index a0f9d7b..a93c83e 100644
--- a/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListGroupControl.axaml
+++ b/samples/AtomUI.Demo.Desktop/Controls/Colors/ColorListGroupControl.axaml
@@ -1,29 +1,27 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    x:CompileBindings="True"
-    x:DataType="viewModels:ColorGroupViewModel">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
+                    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+                    x:CompileBindings="True"
+                    x:DataType="viewModels:ColorGroupViewModel">
 
     <ControlTheme x:Key="{x:Type controls:ColorListGroupControl}" TargetType="controls:ColorListGroupControl">
         <Setter Property="controls:ColorListGroupControl.Template">
             <ControlTemplate TargetType="controls:ColorListGroupControl">
-                <ItemsControl ItemsSource="{Binding ColorList }">
+                <ItemsControl ItemsSource="{Binding ColorList}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <UniformGrid Rows="1" Columns="2"/>
+                            <UniformGrid Columns="2" Rows="1" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate x:DataType="viewModels:ColorListViewModel">
-                            <controls:ColorListControl ListData="{Binding}"
-                                                       Margin="10"/>
+                            <controls:ColorListControl Margin="10" ListData="{Binding}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
             </ControlTemplate>
         </Setter>
-        
+
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconGallery.axaml b/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconGallery.axaml
index 35bc613..08fcba8 100644
--- a/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconGallery.axaml
+++ b/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconGallery.axaml
@@ -1,10 +1,9 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    x:CompileBindings="True"
-    x:DataType="viewModels:IconGalleryModel">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
+                    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+                    x:CompileBindings="True"
+                    x:DataType="viewModels:IconGalleryModel">
 
     <ControlTheme x:Key="{x:Type controls:IconGallery}" TargetType="controls:IconGallery">
         <Setter Property="controls:IconGallery.Template">
@@ -12,14 +11,12 @@
                 <ItemsControl ItemsSource="{Binding IconInfos}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <WrapPanel/>
+                            <WrapPanel />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate x:DataType="viewModels:IconInfoItemModel">
-                            <controls:IconInfoItem
-                                IconName ="{Binding IconName}"
-                                IconKind="{Binding IconKind}"/>
+                            <controls:IconInfoItem IconKind="{Binding IconKind}" IconName="{Binding IconName}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
diff --git a/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconInfoItem.axaml b/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconInfoItem.axaml
index be338b0..91b4501 100644
--- a/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconInfoItem.axaml
+++ b/samples/AtomUI.Demo.Desktop/Controls/PathIcon/IconInfoItem.axaml
@@ -1,11 +1,10 @@
-<ResourceDictionary
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    xmlns:atom="https://atomui.net"
-    x:CompileBindings="True"
-    x:DataType="viewModels:IconInfoItemModel">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:atom="https://atomui.net"
+                    xmlns:controls="using:AtomUI.Demo.Desktop.Controls"
+                    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+                    x:CompileBindings="True"
+                    x:DataType="viewModels:IconInfoItemModel">
 
     <ControlTheme x:Key="{x:Type controls:IconInfoItem}" TargetType="controls:IconInfoItem">
         <Setter Property="Height" Value="150" />
@@ -13,24 +12,20 @@
         <Setter Property="Margin" Value="10" />
         <Setter Property="Template">
             <ControlTemplate TargetType="controls:IconInfoItem">
-                <Border
-                    Width="{TemplateBinding Width}"
-                    Height="{TemplateBinding Height}"
-                    Background="{TemplateBinding Background}">
+                <Border Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        Background="{TemplateBinding Background}">
                     <StackPanel Orientation="Vertical">
-                        <atom:PathIcon
-                            HorizontalAlignment="Center"
-                            Kind="{Binding IconKind}"
-                            Width="48"
-                            Height="48">
-                        </atom:PathIcon>
-                        <TextBlock
-                            Margin="0,20, 0, 0"
-                            Padding="8"
-                            FontSize="13"
-                            HorizontalAlignment="Center"
-                            Foreground="{TemplateBinding Foreground}"
-                            Text="{Binding IconName}" />
+                        <atom:PathIcon Width="48"
+                                       Height="48"
+                                       HorizontalAlignment="Center"
+                                       Kind="{Binding IconKind}" />
+                        <TextBlock Margin="0,20,0,0"
+                                   Padding="8"
+                                   HorizontalAlignment="Center"
+                                   FontSize="13"
+                                   Foreground="{TemplateBinding Foreground}"
+                                   Text="{Binding IconName}" />
                     </StackPanel>
                 </Border>
             </ControlTemplate>
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml
index 3dd9a1c..0aefa7d 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml
@@ -1,161 +1,158 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.AlertShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The simplest usage for short messages.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.AlertShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+
+        <desktop:ShowCaseItem Title="Basic" Description="The simplest usage for short messages.">
             <StackPanel Orientation="Vertical">
                 <atom:Alert Classes="test" Type="Success">Success Text</atom:Alert>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="More types"
-            Description="There are 4 types of Alert: success, info, warning, error.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="More types" Description="There are 4 types of Alert: success, info, warning, error.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:Alert Type="Success">Success Text</atom:Alert>
                 <atom:Alert Type="Info">Info Text</atom:Alert>
                 <atom:Alert Type="Warning">Warning Text</atom:Alert>
                 <atom:Alert Type="Error">Error Text</atom:Alert>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Closable"
-            Description="To show close button.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Closable" Description="To show close button.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:Alert Type="Warning" IsClosable="True">
+                <atom:Alert IsClosable="True" Type="Warning">
                     Warning Text Warning Text Warning Text Warning Text Warning Text Warning TextWarning Text
                 </atom:Alert>
-                <atom:Alert Type="Error" IsClosable="True"
-                            Description="Error Description Error Description Error Description Error Description Error Description Error Description">
+                <atom:Alert Description="Error Description Error Description Error Description Error Description Error Description Error Description"
+                            IsClosable="True"
+                            Type="Error">
                     Error Text
                 </atom:Alert>
-                <atom:Alert Type="Error" IsClosable="True"
+                <atom:Alert CloseIcon="{atom:IconProvider CloseSquareFilled}"
                             Description="Error Description Error Description Error Description Error Description Error Description Error Description"
-                            CloseIcon="{atom:IconProvider CloseSquareFilled}">
+                            IsClosable="True"
+                            Type="Error">
                     Error Text
                 </atom:Alert>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Description"
-            Description="Additional description for alert message.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Description" Description="Additional description for alert message.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:Alert Type="Success"
+                <atom:Alert Description="Success Description Success Description Success Description"
                             Message="Success Text"
-                            Description="Success Description Success Description Success Description"/>
-                <atom:Alert Type="Info"
+                            Type="Success" />
+                <atom:Alert Description="Info Description Info Description Info Description Info Description"
                             Message="Info Text"
-                            Description="Info Description Info Description Info Description Info Description"/>
-                <atom:Alert Type="Warning"
+                            Type="Info" />
+                <atom:Alert Description="Warning Description Warning Description Warning Description Warning Description"
                             Message="Warning Text"
-                            Description="Warning Description Warning Description Warning Description Warning Description"/>
-                <atom:Alert Type="Error"
+                            Type="Warning" />
+                <atom:Alert Description="Error Description Error Description Error Description Error Description"
                             Message="Error Text"
-                            Description="Error Description Error Description Error Description Error Description"/>
+                            Type="Error" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        
-        <showcase:ShowCaseItem
-            Title="Description"
-            Description="Additional description for alert message.">
+        </desktop:ShowCaseItem>
+
+
+        <desktop:ShowCaseItem Title="Description" Description="Additional description for alert message.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:Alert Type="Success"
-                                     Message="Success Tips"
-                                     IsShowIcon="True"/>
-                <atom:Alert Type="Info"
-                                     Message="Informational Notes"
-                                     IsShowIcon="True"/>
-                <atom:Alert Type="Warning"
-                                     Message="Warning"
-                                     IsShowIcon="True"
-                                     IsClosable="True"/>
-                <atom:Alert Type="Error"
-                                     Message="Error"
-                                     IsShowIcon="True"/>
-        
-                <atom:Alert Type="Success"
-                                     Message="Success Tips"
-                                     IsShowIcon="True"
-                                     Description="Detailed description and advice about successful copywriting."/>
-                <atom:Alert Type="Info"
-                                     Message="Informational Notes"
-                                     IsShowIcon="True"
-                                     Description="Additional description and information about copywriting."/>
-                <atom:Alert Type="Warning"
-                                     Message="Warning"
-                                     IsClosable="True"
-                                     IsShowIcon="True"
-                                     Description="This is a warning notice about copywriting."/>
-                <atom:Alert Type="Error"
-                                     Message="Error"
-                                     IsShowIcon="True"
-                                     Description="This is an error message about copywriting."/>
+                <atom:Alert IsShowIcon="True"
+                            Message="Success Tips"
+                            Type="Success" />
+                <atom:Alert IsShowIcon="True"
+                            Message="Informational Notes"
+                            Type="Info" />
+                <atom:Alert IsClosable="True"
+                            IsShowIcon="True"
+                            Message="Warning"
+                            Type="Warning" />
+                <atom:Alert IsShowIcon="True"
+                            Message="Error"
+                            Type="Error" />
+
+                <atom:Alert Description="Detailed description and advice about successful copywriting."
+                            IsShowIcon="True"
+                            Message="Success Tips"
+                            Type="Success" />
+                <atom:Alert Description="Additional description and information about copywriting."
+                            IsShowIcon="True"
+                            Message="Informational Notes"
+                            Type="Info" />
+                <atom:Alert Description="This is a warning notice about copywriting."
+                            IsClosable="True"
+                            IsShowIcon="True"
+                            Message="Warning"
+                            Type="Warning" />
+                <atom:Alert Description="This is an error message about copywriting."
+                            IsShowIcon="True"
+                            Message="Error"
+                            Type="Error" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Custom action"
-            Description="Custom action.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Custom action" Description="Custom action.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:Alert Type="Success"
-                                     IsShowIcon="True"
-                                     IsClosable="true">
+                <atom:Alert IsClosable="true"
+                            IsShowIcon="True"
+                            Type="Success">
                     <atom:Alert.ExtraAction>
                         <atom:Button ButtonType="Text" SizeType="Small">UNDO</atom:Button>
                     </atom:Alert.ExtraAction>
                     Success Tips
                 </atom:Alert>
-        
-                <atom:Alert Type="Error"
-                                     IsShowIcon="True"
-                                     Description="Error Description Error Description Error Description Error Description">
+
+                <atom:Alert Description="Error Description Error Description Error Description Error Description"
+                            IsShowIcon="True"
+                            Type="Error">
                     <atom:Alert.ExtraAction>
-                        <atom:Button ButtonType="Default" SizeType="Small" IsDanger="True">Detail</atom:Button>
+                        <atom:Button ButtonType="Default"
+                                     IsDanger="True"
+                                     SizeType="Small">
+                            Detail
+                        </atom:Button>
                     </atom:Alert.ExtraAction>
                     Error Text
                 </atom:Alert>
-        
-                <atom:Alert Type="Warning"
-                                     IsClosable="true">
+
+                <atom:Alert IsClosable="true" Type="Warning">
                     <atom:Alert.ExtraAction>
                         <atom:Button ButtonType="Text" SizeType="Small">Done</atom:Button>
                     </atom:Alert.ExtraAction>
                     Warning Text
                 </atom:Alert>
-        
-                <atom:Alert Type="Info"
-                                     IsShowIcon="False"
-                                     IsClosable="true"
-                                     Description="Info Description Info Description Info Description Info Description">
+
+                <atom:Alert Description="Info Description Info Description Info Description Info Description"
+                            IsClosable="true"
+                            IsShowIcon="False"
+                            Type="Info">
                     <atom:Alert.ExtraAction>
                         <StackPanel Orientation="Vertical" Spacing="5">
                             <atom:Button ButtonType="Primary" SizeType="Small">Accept</atom:Button>
-                            <atom:Button SizeType="Small" IsDanger="True" IsGhost="True">Decline</atom:Button>
+                            <atom:Button IsDanger="True"
+                                         IsGhost="True"
+                                         SizeType="Small">
+                                Decline
+                            </atom:Button>
                         </StackPanel>
                     </atom:Alert.ExtraAction>
                     Info Text
                 </atom:Alert>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Loop Banner"
-            Description="Show a loop banner.">
-            <atom:Alert Type="Warning" IsShowIcon="True" IsMessageMarqueEnabled="True">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Loop Banner" Description="Show a loop banner.">
+            <atom:Alert IsMessageMarqueEnabled="True"
+                        IsShowIcon="True"
+                        Type="Warning">
                 I can be a React component, multiple React components, or just some text, Info Description Info Description Info Description Info Description
             </atom:Alert>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml.cs
index bfbea50..8402940 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/AlertShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml
index 10155d4..400fa7d 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.AvatarShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-     
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.AvatarShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml.cs
index 2e47d7d..31dec67 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/AvatarShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/BadgeShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/BadgeShowCase.axaml
index cddf14e..41e1280 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/BadgeShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/BadgeShowCase.axaml
@@ -1,107 +1,129 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.BadgeShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.BadgeShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
 
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.">
+        <desktop:ShowCaseItem Title="Basic" Description="Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.">
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <atom:CountBadge Count="5">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
                 <atom:CountBadge Count="0">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Overflow Count"
-            Description="${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.">
+        <desktop:ShowCaseItem Title="Overflow Count" Description="${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.">
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <atom:CountBadge Count="99">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
                 <atom:CountBadge Count="100">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
                 <atom:CountBadge Count="99" OverflowCount="10">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
                 <atom:CountBadge Count="1000" OverflowCount="999">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Offset"
-            Description="Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.">
+        <desktop:ShowCaseItem Title="Offset" Description="Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.">
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <atom:CountBadge Count="5" Offset="10, 10">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="Set size of numeral Badge.">
+        <desktop:ShowCaseItem Title="Size" Description="Set size of numeral Badge.">
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <atom:CountBadge Count="5">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
                 <atom:CountBadge Count="5" Size="Small">
-                    <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                    <Border Width="40"
+                            Height="40"
+                            Background="rgb(191,191,191)"
+                            CornerRadius="8" />
                 </atom:CountBadge>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Standalone"
-            Description="Used in standalone when children is empty.">
+        <desktop:ShowCaseItem Title="Standalone" Description="Used in standalone when children is empty.">
             <StackPanel Orientation="Horizontal" Spacing="10">
                 <atom:ToggleSwitch IsChecked="{Binding StandaloneSwitchChecked}" />
-                <atom:CountBadge Count="{Binding StandaloneBadgeCount1}" BadgeColor="#faad14" ShowZero="True" />
+                <atom:CountBadge BadgeColor="#faad14"
+                                 Count="{Binding StandaloneBadgeCount1}"
+                                 ShowZero="True" />
                 <atom:CountBadge Count="{Binding StandaloneBadgeCount2}" />
-                <atom:CountBadge Count="{Binding StandaloneBadgeCount3}" BadgeColor="#52c41a" />
+                <atom:CountBadge BadgeColor="#52c41a" Count="{Binding StandaloneBadgeCount3}" />
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Dynamic"
-            Description="The count will be animated as it changes.">
+        <desktop:ShowCaseItem Title="Dynamic" Description="The count will be animated as it changes.">
             <StackPanel Orientation="Vertical" Spacing="20">
                 <StackPanel Orientation="Horizontal" Spacing="20">
                     <atom:CountBadge Count="{Binding DynamicBadgeCount}" OverflowCount="99">
-                        <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                        <Border Width="40"
+                                Height="40"
+                                Background="rgb(191,191,191)"
+                                CornerRadius="8" />
                     </atom:CountBadge>
-                    <StackPanel Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
-                        <atom:Button SizeType="Small" Command="{Binding AddDynamicBadgeCount}">Add</atom:Button>
-                        <atom:Button SizeType="Small" Command="{Binding SubDynamicBadgeCount}">Sub</atom:Button>
-                        <atom:Button SizeType="Small" Command="{Binding RandomDynamicBadgeCount}">Random</atom:Button>
+                    <StackPanel VerticalAlignment="Center"
+                                Orientation="Horizontal"
+                                Spacing="10">
+                        <atom:Button Command="{Binding AddDynamicBadgeCount}" SizeType="Small">Add</atom:Button>
+                        <atom:Button Command="{Binding SubDynamicBadgeCount}" SizeType="Small">Sub</atom:Button>
+                        <atom:Button Command="{Binding RandomDynamicBadgeCount}" SizeType="Small">Random</atom:Button>
                     </StackPanel>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Spacing="20">
                     <atom:DotBadge BadgeIsVisible="{Binding DynamicDotBadgeVisible}">
-                        <Border Width="40" Height="40" CornerRadius="8" Background="rgb(191,191,191)" />
+                        <Border Width="40"
+                                Height="40"
+                                Background="rgb(191,191,191)"
+                                CornerRadius="8" />
                     </atom:DotBadge>
-                    <atom:ToggleSwitch VerticalAlignment="Center"
-                                       IsChecked="{Binding DynamicDotBadgeVisible, Mode=TwoWay}" />
+                    <atom:ToggleSwitch VerticalAlignment="Center" IsChecked="{Binding DynamicDotBadgeVisible, Mode=TwoWay}" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Red badge"
-            Description="This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.">
+        <desktop:ShowCaseItem Title="Red badge" Description="This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.">
             <StackPanel Orientation="Vertical" Spacing="20">
                 <StackPanel Orientation="Horizontal">
                     <atom:DotBadge Offset="15,9">
@@ -112,11 +134,9 @@
                     </atom:DotBadge>
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Status"
-            Description="Standalone badge with status.">
+        <desktop:ShowCaseItem Title="Status" Description="Standalone badge with status.">
             <StackPanel Orientation="Vertical" Spacing="20">
                 <StackPanel Orientation="Horizontal" Spacing="10">
                     <atom:DotBadge Status="Success" />
@@ -133,120 +153,177 @@
                     <atom:DotBadge Status="Warning" Text="Warning" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Ribbon"
-            Description="Use ribbon badge.">
-            <StackPanel Orientation="Vertical" Spacing="20" Margin="20, 0, 20, 0">
+        <desktop:ShowCaseItem Title="Ribbon" Description="Use ribbon badge.">
+            <StackPanel Margin="20,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="20">
                 <atom:RibbonBadge Text="精益求精，打造体验优秀的 UISDK">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
-                <atom:RibbonBadge Text="甲辰计划雄起" RibbonColor="Pink">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                <atom:RibbonBadge RibbonColor="Pink" Text="甲辰计划雄起">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
-                <atom:RibbonBadge Text="Avalonia 非常优秀" RibbonColor="Cyan">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                <atom:RibbonBadge RibbonColor="Cyan" Text="Avalonia 非常优秀">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
-                <atom:RibbonBadge Text="Hippies" RibbonColor="Green">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                <atom:RibbonBadge RibbonColor="Green" Text="Hippies">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
-                <atom:RibbonBadge Text="Hippies" RibbonColor="purple" Placement="Start">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                <atom:RibbonBadge Placement="Start"
+                                  RibbonColor="purple"
+                                  Text="Hippies">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
-                <atom:RibbonBadge Text="Hippies" RibbonColor="volcano" Placement="Start">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                <atom:RibbonBadge Placement="Start"
+                                  RibbonColor="volcano"
+                                  Text="Hippies">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
-                <atom:RibbonBadge Text="Hippies" RibbonColor="magenta" Placement="Start">
-                    <Border Height="80" BorderBrush="#d9d9d9" BorderThickness="1" CornerRadius="6"
-                            Padding="10, 0, 10, 0">
+                <atom:RibbonBadge Placement="Start"
+                                  RibbonColor="magenta"
+                                  Text="Hippies">
+                    <Border Height="80"
+                            Padding="10,0,10,0"
+                            BorderBrush="#d9d9d9"
+                            BorderThickness="1"
+                            CornerRadius="6">
                         <StackPanel Orientation="Vertical">
-                            <TextBlock FontWeight="Bold" Height="38" LineHeight="38">Pushes open the window</TextBlock>
-                            <atom:Separator Orientation="Horizontal" LineColor="#d9d9d9" />
-                            <TextBlock Margin="0, 10, 0, 0">and raises the spyglass.</TextBlock>
+                            <TextBlock Height="38"
+                                       FontWeight="Bold"
+                                       LineHeight="38">
+                                Pushes open the window
+                            </TextBlock>
+                            <atom:Separator LineColor="#d9d9d9" Orientation="Horizontal" />
+                            <TextBlock Margin="0,10,0,0">and raises the spyglass.</TextBlock>
                         </StackPanel>
                     </Border>
                 </atom:RibbonBadge>
 
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Colorful Badge"
-            Description="We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.">
+        <desktop:ShowCaseItem Title="Colorful Badge" Description="We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.">
             <StackPanel Orientation="Vertical" Spacing="20">
-                <atom:Separator Title="Presets" FontWeight="SemiBold" TitlePosition="Left" />
+                <atom:Separator Title="Presets"
+                                FontWeight="SemiBold"
+                                TitlePosition="Left" />
                 <StackPanel Orientation="Vertical" Spacing="10">
-                    <atom:DotBadge Text="Pink" DotColor="Pink" />
-                    <atom:DotBadge Text="Red" DotColor="Red" />
-                    <atom:DotBadge Text="Yellow" DotColor="Yellow" />
-                    <atom:DotBadge Text="Orange" DotColor="Orange" />
-                    <atom:DotBadge Text="Cyan" DotColor="Cyan" />
-                    <atom:DotBadge Text="Green" DotColor="Green" />
-                    <atom:DotBadge Text="Blue" DotColor="Blue" />
-                    <atom:DotBadge Text="Purple" DotColor="Purple" />
-                    <atom:DotBadge Text="GeekBlue" DotColor="GeekBlue" />
-                    <atom:DotBadge Text="Magenta" DotColor="Magenta" />
-                    <atom:DotBadge Text="Volcano" DotColor="Volcano" />
-                    <atom:DotBadge Text="Gold" DotColor="Gold" />
-                    <atom:DotBadge Text="Lime" DotColor="Lime" />
+                    <atom:DotBadge DotColor="Pink" Text="Pink" />
+                    <atom:DotBadge DotColor="Red" Text="Red" />
+                    <atom:DotBadge DotColor="Yellow" Text="Yellow" />
+                    <atom:DotBadge DotColor="Orange" Text="Orange" />
+                    <atom:DotBadge DotColor="Cyan" Text="Cyan" />
+                    <atom:DotBadge DotColor="Green" Text="Green" />
+                    <atom:DotBadge DotColor="Blue" Text="Blue" />
+                    <atom:DotBadge DotColor="Purple" Text="Purple" />
+                    <atom:DotBadge DotColor="GeekBlue" Text="GeekBlue" />
+                    <atom:DotBadge DotColor="Magenta" Text="Magenta" />
+                    <atom:DotBadge DotColor="Volcano" Text="Volcano" />
+                    <atom:DotBadge DotColor="Gold" Text="Gold" />
+                    <atom:DotBadge DotColor="Lime" Text="Lime" />
                 </StackPanel>
-                <atom:Separator Title="Custom" FontWeight="SemiBold" TitlePosition="Left" />
+                <atom:Separator Title="Custom"
+                                FontWeight="SemiBold"
+                                TitlePosition="Left" />
                 <StackPanel Orientation="Vertical" Spacing="10">
-                    <atom:DotBadge Text="#f50" DotColor="#f50" />
-                    <atom:DotBadge Text="rgb(45, 183, 245)" DotColor="rgb(45, 183, 245)" />
-                    <atom:DotBadge Text="hsl(102, 53%, 61%)" DotColor="hsl(102, 53%, 61%)" />
-                    <atom:DotBadge Text="rgb(15, 141, 230)" DotColor="rgb(15, 141, 230)" />
+                    <atom:DotBadge DotColor="#f50" Text="#f50" />
+                    <atom:DotBadge DotColor="rgb(45, 183, 245)" Text="rgb(45, 183, 245)" />
+                    <atom:DotBadge DotColor="hsl(102, 53%, 61%)" Text="hsl(102, 53%, 61%)" />
+                    <atom:DotBadge DotColor="rgb(15, 141, 230)" Text="rgb(15, 141, 230)" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ButtonShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ButtonShowCase.axaml
index 34d5883..0ea635e 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ButtonShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ButtonShowCase.axaml
@@ -1,46 +1,49 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCasePanel.Styles>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCasePanel.Styles>
             <Style Selector="atom|Button">
-                <Setter Property="Margin" Value="5"></Setter>
+                <Setter Property="Margin" Value="5" />
             </Style>
-        </showcase:ShowCasePanel.Styles>
-        <showcase:ShowCaseItem
-            Title="Type"
-            Description="There are primary button, default button, dashed button, text button and link button in antd.">
+        </desktop:ShowCasePanel.Styles>
+        <desktop:ShowCaseItem Title="Type" Description="There are primary button, default button, dashed button, text button and link button in antd.">
             <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <atom:Button ButtonType="Primary">Primary Button</atom:Button>
                 <atom:Button>Default Button</atom:Button>
                 <atom:Button ButtonType="Text">Text Button</atom:Button>
                 <atom:Button ButtonType="Link">Link Button</atom:Button>
             </WrapPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Button Shape"
-            Description="Supported button shape display, such as primary, default, dashed and Text, etc.">
+        <desktop:ShowCaseItem Title="Button Shape" Description="Supported button shape display, such as primary, default, dashed and Text, etc.">
             <StackPanel Orientation="Vertical">
-                <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0, 0, 0, 20">
+                <WrapPanel Margin="0,0,0,20"
+                           HorizontalAlignment="Left"
+                           Orientation="Horizontal">
                     <atom:Button ButtonType="Primary">Primary</atom:Button>
                     <atom:Button>Default</atom:Button>
                     <atom:Button ButtonType="Text">Text</atom:Button>
                     <atom:Button ButtonType="Link">Link</atom:Button>
                 </WrapPanel>
-                <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0, 0, 0, 20">
+                <WrapPanel Margin="0,0,0,20"
+                           HorizontalAlignment="Left"
+                           Orientation="Horizontal">
                     <atom:Button ButtonType="Primary" Shape="Round">Primary</atom:Button>
                     <atom:Button Shape="Round">Default</atom:Button>
                     <atom:Button ButtonType="Text" Shape="Round">Text</atom:Button>
                     <atom:Button ButtonType="Link" Shape="Round">Link</atom:Button>
                 </WrapPanel>
-                <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal" Margin="0, 0, 0, 20">
+                <StackPanel Margin="0,0,0,20"
+                            HorizontalAlignment="Left"
+                            Orientation="Horizontal"
+                            Spacing="10">
                     <atom:Button ButtonType="Primary" Shape="Circle">AA</atom:Button>
                     <atom:Button Shape="Circle">AA</atom:Button>
                     <atom:Button ButtonType="Text" Shape="Circle">AA</atom:Button>
@@ -48,125 +51,175 @@
                 </StackPanel>
             </StackPanel>
 
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="AtomUI supports three sizes of buttons: small, default and large.
-If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
-            <DockPanel Margin="0, 0, 0, 0">
-                <StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
+        <desktop:ShowCaseItem Title="Size" Description="AtomUI supports three sizes of buttons: small, default and large. If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
+            <DockPanel Margin="0,0,0,0">
+                <StackPanel DockPanel.Dock="Top"
+                            Orientation="Horizontal"
+                            Spacing="5">
                     <TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
-                    <atom:OptionButtonGroup ButtonStyle="Outline" Name="ButtonSizeTypeOptionGroup">
+                    <atom:OptionButtonGroup Name="ButtonSizeTypeOptionGroup" ButtonStyle="Outline">
                         <atom:OptionButton IsChecked="True">Large</atom:OptionButton>
                         <atom:OptionButton>Default</atom:OptionButton>
                         <atom:OptionButton>Small</atom:OptionButton>
                     </atom:OptionButtonGroup>
                 </StackPanel>
 
-                <StackPanel Orientation="Vertical" Margin="0, 20, 0, 0" Spacing="10">
+                <StackPanel Margin="0,20,0,0"
+                            Orientation="Vertical"
+                            Spacing="10">
                     <WrapPanel>
                         <atom:Button ButtonType="Primary" SizeType="{Binding ButtonSizeType}">Primary</atom:Button>
                         <atom:Button ButtonType="Default" SizeType="{Binding ButtonSizeType}">Default</atom:Button>
                         <atom:Button ButtonType="Link" SizeType="{Binding ButtonSizeType}">Link</atom:Button>
                     </WrapPanel>
                     <WrapPanel>
-                        <atom:Button ButtonType="Primary" Shape="Default" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}"/>
-                        <atom:Button ButtonType="Primary" Shape="Circle" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}"/>
-                        <atom:Button ButtonType="Primary" Shape="Round" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}"/>
-                        <atom:Button ButtonType="Primary" Shape="Round" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}">Download</atom:Button>
-                        <atom:Button ButtonType="Primary" Shape="Default" Icon="{atom:IconProvider Kind=DownloadOutlined}" SizeType="{Binding ButtonSizeType}">Download</atom:Button>
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=DownloadOutlined}"
+                                     Shape="Default"
+                                     SizeType="{Binding ButtonSizeType}" />
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=DownloadOutlined}"
+                                     Shape="Circle"
+                                     SizeType="{Binding ButtonSizeType}" />
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=DownloadOutlined}"
+                                     Shape="Round"
+                                     SizeType="{Binding ButtonSizeType}" />
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=DownloadOutlined}"
+                                     Shape="Round"
+                                     SizeType="{Binding ButtonSizeType}">
+                            Download
+                        </atom:Button>
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=DownloadOutlined}"
+                                     Shape="Default"
+                                     SizeType="{Binding ButtonSizeType}">
+                            Download
+                        </atom:Button>
                     </WrapPanel>
                 </StackPanel>
             </DockPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Icon"
-            Description="You can add an icon through the icon property and adjust the position of the icon using iconPosition.">
+        <desktop:ShowCaseItem Title="Icon" Description="You can add an icon through the icon property and adjust the position of the icon using iconPosition.">
             <StackPanel Orientation="Vertical">
                 <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                    <atom:Button ButtonType="Primary" Shape="Circle" Icon="{atom:IconProvider Kind=SearchOutlined}"/>
-                    <atom:Button ButtonType="Primary" Shape="Round"
-                                 Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Primary"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 Shape="Circle" />
+                    <atom:Button ButtonType="Primary"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 Shape="Round">
                         Search
                     </atom:Button>
 
-                    <atom:Button ButtonType="Default" Shape="Circle" Icon="{atom:IconProvider Kind=SearchOutlined}"/>
-                    <atom:Button ButtonType="Default" Shape="Round" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Default"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 Shape="Circle" />
+                    <atom:Button ButtonType="Default"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 Shape="Round">
                         Search
                     </atom:Button>
 
-                    <atom:Button ButtonType="Text" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Text"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 Shape="Default">
                         Search
                     </atom:Button>
 
-                    <atom:Button ButtonType="Link" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Link"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 Shape="Default">
                         Search
                     </atom:Button>
 
                 </WrapPanel>
                 <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                    <atom:Button ButtonType="Primary" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Primary"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 IsDanger="True">
                         Search
                     </atom:Button>
 
-                    <atom:Button ButtonType="Default" Shape="Round" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Default"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 IsDanger="True"
+                                 Shape="Round">
                         Search
                     </atom:Button>
 
-                    <atom:Button ButtonType="Text" Shape="Default" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Text"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 IsDanger="True"
+                                 Shape="Default">
                         Search
                     </atom:Button>
 
-                    <atom:Button ButtonType="Link" Shape="Default" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
+                    <atom:Button ButtonType="Link"
+                                 Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                 IsDanger="True"
+                                 Shape="Default">
                         Search
                     </atom:Button>
                 </WrapPanel>
             </StackPanel>
 
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Loading"
-            Description="A loading indicator can be added to a button by setting the loading property on the Button.">
-            <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10">
+        <desktop:ShowCaseItem Title="Loading" Description="A loading indicator can be added to a button by setting the loading property on the Button.">
+            <StackPanel Margin="10"
+                        HorizontalAlignment="Stretch"
+                        Orientation="Vertical">
                 <WrapPanel>
                     <atom:Button ButtonType="Primary" IsLoading="True">Loading</atom:Button>
-                    <atom:Button ButtonType="Primary" SizeType="Small" IsLoading="True">Loading</atom:Button>
-                    <atom:Button ButtonType="Primary" IsLoading="True" Icon="{atom:IconProvider Kind=PoweroffOutlined}"/>
+                    <atom:Button ButtonType="Primary"
+                                 IsLoading="True"
+                                 SizeType="Small">
+                        Loading
+                    </atom:Button>
+                    <atom:Button ButtonType="Primary"
+                                 Icon="{atom:IconProvider Kind=PoweroffOutlined}"
+                                 IsLoading="True" />
                 </WrapPanel>
                 <WrapPanel>
-                    <atom:Button ButtonType="Primary" Name="LoadingBtn1">Click me!</atom:Button>
-                    <atom:Button ButtonType="Primary" Name="LoadingBtn2" Icon="{atom:IconProvider Kind=PoweroffOutlined}">Click me!</atom:Button>
-                    <atom:Button ButtonType="Primary" Name="LoadingBtn3" Icon="{atom:IconProvider Kind=PoweroffOutlined}"/>
+                    <atom:Button Name="LoadingBtn1" ButtonType="Primary">Click me!</atom:Button>
+                    <atom:Button Name="LoadingBtn2"
+                                 ButtonType="Primary"
+                                 Icon="{atom:IconProvider Kind=PoweroffOutlined}">
+                        Click me!
+                    </atom:Button>
+                    <atom:Button Name="LoadingBtn3"
+                                 ButtonType="Primary"
+                                 Icon="{atom:IconProvider Kind=PoweroffOutlined}" />
                 </WrapPanel>
-        
-            </StackPanel>
-        </showcase:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Block Button"
-            Description="block property will make the button fit to its parent width.">
-            <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10">
-                <atom:Button ButtonType="Primary" HorizontalAlignment="Stretch">
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Block Button" Description="block property will make the button fit to its parent width.">
+            <StackPanel Margin="10"
+                        HorizontalAlignment="Stretch"
+                        Orientation="Vertical">
+                <atom:Button HorizontalAlignment="Stretch" ButtonType="Primary">
                     Primary
                 </atom:Button>
-                <atom:Button ButtonType="Default" HorizontalAlignment="Stretch">
+                <atom:Button HorizontalAlignment="Stretch" ButtonType="Default">
                     Default
                 </atom:Button>
-                <atom:Button ButtonType="Text" HorizontalAlignment="Stretch">
+                <atom:Button HorizontalAlignment="Stretch" ButtonType="Text">
                     Text
                 </atom:Button>
-                <atom:Button ButtonType="Link" HorizontalAlignment="Stretch">
+                <atom:Button HorizontalAlignment="Stretch" ButtonType="Link">
                     Link
                 </atom:Button>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Danger Buttons"
-            Description="danger is a property of button after antd 4.0.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Danger Buttons" Description="danger is a property of button after antd 4.0.">
             <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                 <atom:Button ButtonType="Primary" IsDanger="True">
                     Primary
@@ -181,56 +234,65 @@ If a large or small button is desired, set the size property to either large or
                     Link
                 </atom:Button>
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Ghost Button"
-            Description="ghost property will make button's background transparent, it is commonly used in colored background.">
-            <Border Background="rgb(190, 200, 200)"
-                    Margin="10"
-                    Padding="10">
-               <StackPanel Orientation="Vertical">
-                   <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
-                       <atom:Button ButtonType="Primary" IsGhost="True">
-                           Primary
-                       </atom:Button>
-                       <atom:Button ButtonType="Default" IsGhost="True">
-                           Default
-                       </atom:Button>
-                       <atom:Button ButtonType="Text" IsGhost="True">
-                           Text
-                       </atom:Button>
-                       <atom:Button ButtonType="Link" IsGhost="True">
-                           Link
-                       </atom:Button>
-                       <atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True">
-                           Danger
-                       </atom:Button>
-                   </WrapPanel>
-                   <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
-                       <atom:Button ButtonType="Primary" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
-                           Primary
-                       </atom:Button>
-                       <atom:Button ButtonType="Default" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
-                           Default
-                       </atom:Button>
-                       <atom:Button ButtonType="Text" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
-                           Text
-                       </atom:Button>
-                       <atom:Button ButtonType="Link" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
-                           Link
-                       </atom:Button>
-                       <atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
-                           Danger
-                       </atom:Button>
-                   </WrapPanel>
-               </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Ghost Button" Description="ghost property will make button's background transparent, it is commonly used in colored background.">
+            <Border Margin="10"
+                    Padding="10"
+                    Background="rgb(190, 200, 200)">
+                <StackPanel Orientation="Vertical">
+                    <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
+                        <atom:Button ButtonType="Primary" IsGhost="True">
+                            Primary
+                        </atom:Button>
+                        <atom:Button ButtonType="Default" IsGhost="True">
+                            Default
+                        </atom:Button>
+                        <atom:Button ButtonType="Text" IsGhost="True">
+                            Text
+                        </atom:Button>
+                        <atom:Button ButtonType="Link" IsGhost="True">
+                            Link
+                        </atom:Button>
+                        <atom:Button ButtonType="Primary"
+                                     IsDanger="True"
+                                     IsGhost="True">
+                            Danger
+                        </atom:Button>
+                    </WrapPanel>
+                    <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                     IsGhost="True">
+                            Primary
+                        </atom:Button>
+                        <atom:Button ButtonType="Default"
+                                     Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                     IsGhost="True">
+                            Default
+                        </atom:Button>
+                        <atom:Button ButtonType="Text"
+                                     Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                     IsGhost="True">
+                            Text
+                        </atom:Button>
+                        <atom:Button ButtonType="Link"
+                                     Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                     IsGhost="True">
+                            Link
+                        </atom:Button>
+                        <atom:Button ButtonType="Primary"
+                                     Icon="{atom:IconProvider Kind=SearchOutlined}"
+                                     IsDanger="True"
+                                     IsGhost="True">
+                            Danger
+                        </atom:Button>
+                    </WrapPanel>
+                </StackPanel>
             </Border>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Disabled"
-            Description="To mark a button as disabled, add the disabled property to the Button.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Disabled" Description="To mark a button as disabled, add the disabled property to the Button.">
             <WrapPanel HorizontalAlignment="Stretch" Orientation="Vertical">
                 <StackPanel Orientation="Horizontal">
                     <atom:Button ButtonType="Primary">
@@ -264,12 +326,14 @@ If a large or small button is desired, set the size property to either large or
                         Link(disabled)
                     </atom:Button>
                 </StackPanel>
-        
+
                 <StackPanel Orientation="Horizontal">
                     <atom:Button ButtonType="Primary" IsDanger="True">
                         Danger Primary
                     </atom:Button>
-                    <atom:Button ButtonType="Primary" IsDanger="True" IsEnabled="False">
+                    <atom:Button ButtonType="Primary"
+                                 IsDanger="True"
+                                 IsEnabled="False">
                         Danger Primary(disabled)
                     </atom:Button>
                 </StackPanel>
@@ -277,7 +341,9 @@ If a large or small button is desired, set the size property to either large or
                     <atom:Button ButtonType="Default" IsDanger="True">
                         Danger Default
                     </atom:Button>
-                    <atom:Button ButtonType="Default" IsDanger="True" IsEnabled="False">
+                    <atom:Button ButtonType="Default"
+                                 IsDanger="True"
+                                 IsEnabled="False">
                         Danger Default(disabled)
                     </atom:Button>
                 </StackPanel>
@@ -285,7 +351,9 @@ If a large or small button is desired, set the size property to either large or
                     <atom:Button ButtonType="Text" IsDanger="True">
                         Danger Text
                     </atom:Button>
-                    <atom:Button ButtonType="Text" IsDanger="True" IsEnabled="False">
+                    <atom:Button ButtonType="Text"
+                                 IsDanger="True"
+                                 IsEnabled="False">
                         Danger Text(disabled)
                     </atom:Button>
                 </StackPanel>
@@ -293,11 +361,13 @@ If a large or small button is desired, set the size property to either large or
                     <atom:Button ButtonType="Link" IsDanger="True">
                         Danger Link
                     </atom:Button>
-                    <atom:Button ButtonType="Link" IsDanger="True" IsEnabled="False">
+                    <atom:Button ButtonType="Link"
+                                 IsDanger="True"
+                                 IsEnabled="False">
                         Danger Link(disabled)
                     </atom:Button>
                 </StackPanel>
             </WrapPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ButtonSpinnerShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ButtonSpinnerShowCase.axaml
index a7c5bca..687e057 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ButtonSpinnerShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ButtonSpinnerShowCase.axaml
@@ -1,247 +1,222 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonSpinnerShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Basic button spinner.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonSpinnerShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
             <atom:ButtonSpinner Spin="HandleSpin">
-                <TextBlock
-                    HorizontalAlignment="Left"
-                    VerticalAlignment="Center"
-                    Text="床前明月光"/>
+                <TextBlock HorizontalAlignment="Left"
+                           VerticalAlignment="Center"
+                           Text="床前明月光" />
             </atom:ButtonSpinner>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Three sizes of Input"
-            Description="There are three sizes of an button spinner: large (40px), default (32px) and small (24px).">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Three sizes of Input" Description="There are three sizes of an button spinner: large (40px), default (32px) and small (24px).">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:ButtonSpinner SizeType="Large" Spin="HandleSpin">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
                 <atom:ButtonSpinner SizeType="Middle" Spin="HandleSpin">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
                 <atom:ButtonSpinner SizeType="Small" Spin="HandleSpin">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Variants"
-            Description="Variants of Input.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Outline">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
                 <atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Filled">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
                 <atom:ButtonSpinner Spin="HandleSpin" StyleVariant="Borderless">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Pre / Post tab"
-            Description="Using pre and post tabs example.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    LeftAddOn="http://" 
-                                    RightAddOn=".com" 
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    LeftAddOn="http://"
-                                    Width="400"
+                <atom:ButtonSpinner Width="400"
                                     HorizontalAlignment="Left"
-                                    InnerRightContent=".com">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="prefix and suffix"
-            Description="Add a prefix or suffix icons inside input.">
-            <StackPanel Orientation="Vertical" Spacing="10">
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
-                                    InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    InnerLeftContent="￥" 
-                                    InnerRightContent="RMB"
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Status"
-            Description="Add status to Input with status, which could be error or warning.">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Error"
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Warning"
-                                    Width="400"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Error"
-                                    Width="400"
-                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                                    LeftAddOn="http://"
+                                    RightAddOn=".com"
+                                    Spin="HandleSpin">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
 
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Warning"
-                                    Width="400"
-                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
-                                    HorizontalAlignment="Left">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Error"
-                                    Width="400"
-                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                <atom:ButtonSpinner Width="400"
                                     HorizontalAlignment="Left"
-                                    StyleVariant="Filled">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                                    RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
+                                    Spin="HandleSpin">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Warning"
-                                    Width="400"
-                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+
+                <atom:ButtonSpinner Width="400"
                                     HorizontalAlignment="Left"
-                                    StyleVariant="Filled">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
+                                    InnerRightContent=".com"
+                                    LeftAddOn="http://"
+                                    Spin="HandleSpin">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
                 </atom:ButtonSpinner>
-                
-                        
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Error"
-                                    Width="400"
-                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
-                                    HorizontalAlignment="Left"
-                                    StyleVariant="Borderless">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
-                <atom:ButtonSpinner Spin="HandleSpin" 
-                                    Status="Warning"
-                                    Width="400"
-                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
-                                    HorizontalAlignment="Left"
-                                    StyleVariant="Borderless">
-                    <TextBlock
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        Text="床前明月光"/>
-                </atom:ButtonSpinner>
-                
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
+            <StackPanel Orientation="Vertical" Spacing="10">
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
+                                                                         NormalFilledColor=#D7D7D7}"
+                                    InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
+                                                                          NormalFilledColor=#8C8C8C}"
+                                    Spin="HandleSpin">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="￥"
+                                    InnerRightContent="RMB"
+                                    Spin="HandleSpin">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="￥"
+                                    InnerRightContent="RMB"
+                                    IsEnabled="False"
+                                    Spin="HandleSpin">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    Spin="HandleSpin"
+                                    Status="Error">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    Spin="HandleSpin"
+                                    Status="Warning">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Spin="HandleSpin"
+                                    Status="Error">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Spin="HandleSpin"
+                                    Status="Warning">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Spin="HandleSpin"
+                                    Status="Error"
+                                    StyleVariant="Filled">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Spin="HandleSpin"
+                                    Status="Warning"
+                                    StyleVariant="Filled">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Spin="HandleSpin"
+                                    Status="Error"
+                                    StyleVariant="Borderless">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+                <atom:ButtonSpinner Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Spin="HandleSpin"
+                                    Status="Warning"
+                                    StyleVariant="Borderless">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="床前明月光" />
+                </atom:ButtonSpinner>
+
+            </StackPanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/CardShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/CardShowCase.axaml
index 765bd07..1d89a62 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/CardShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/CardShowCase.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.CardShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-     
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CardShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/CheckBoxShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/CheckBoxShowCase.axaml
index 0c9530c..2065161 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/CheckBoxShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/CheckBoxShowCase.axaml
@@ -1,125 +1,126 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.CheckBoxShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCasePanel.Styles>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CheckBoxShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCasePanel.Styles>
             <Style Selector="atom|CheckBox">
-                <Setter Property="Margin" Value="0, 0, 5, 5"></Setter>
+                <Setter Property="Margin" Value="0, 0, 5, 5" />
             </Style>
-        </showcase:ShowCasePanel.Styles>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The simplest use.">
+        </desktop:ShowCasePanel.Styles>
+        <desktop:ShowCaseItem Title="Basic" Description="The simplest use.">
             <StackPanel HorizontalAlignment="Left" Spacing="10">
                 <atom:CheckBox>Checkbox</atom:CheckBox>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Disabled"
-            Description="Disabled checkbox.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
+        <desktop:ShowCaseItem Title="Disabled" Description="Disabled checkbox.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:CheckBox IsChecked="False" IsEnabled="False">UnChecked</atom:CheckBox>
                 <atom:CheckBox IsChecked="{x:Null}" IsEnabled="False">Indeterminate</atom:CheckBox>
                 <atom:CheckBox IsChecked="True" IsEnabled="False">Checked</atom:CheckBox>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Controlled Checkbox"
-            Description="Communicated with other components.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
-                <atom:CheckBox IsChecked="{Binding ControlledCheckBoxCheckedStatus}"
-                               IsEnabled="{Binding ControlledCheckBoxEnabledStatus}"
-                               Command="{Binding CheckBoxHandler}"
-                               Content="{Binding ControlledCheckBoxText}" />
-                <StackPanel Orientation="Horizontal" Spacing="10" Margin="0, 10, 0, 0">
-                    <atom:Button SizeType="Small" ButtonType="Primary"
-                                 x:Name="CheckStatusBtn"
+        <desktop:ShowCaseItem Title="Controlled Checkbox" Description="Communicated with other components.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:CheckBox Command="{Binding CheckBoxHandler}"
+                               Content="{Binding ControlledCheckBoxText}"
+                               IsChecked="{Binding ControlledCheckBoxCheckedStatus}"
+                               IsEnabled="{Binding ControlledCheckBoxEnabledStatus}" />
+                <StackPanel Margin="0,10,0,0"
+                            Orientation="Horizontal"
+                            Spacing="10">
+                    <atom:Button x:Name="CheckStatusBtn"
+                                 ButtonType="Primary"
                                  Command="{Binding CheckStatusHandler}"
                                  CommandParameter="{Binding ElementName=CheckStatusBtn}"
+                                 SizeType="Small"
                                  Text="{Binding CheckStatusBtnText}" />
-                    <atom:Button SizeType="Small" ButtonType="Primary"
-                                 x:Name="EnableStatusBtn"
-                                 CommandParameter="{Binding ElementName=EnableStatusBtn}"
+                    <atom:Button x:Name="EnableStatusBtn"
+                                 ButtonType="Primary"
                                  Command="{Binding EnableStatusHandler}"
+                                 CommandParameter="{Binding ElementName=EnableStatusBtn}"
+                                 SizeType="Small"
                                  Text="{Binding EnableStatusBtnText}" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Checkbox Group"
-            Description="Generate a group of checkboxes from an array.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
-                <WrapPanel Margin="0, 0, 0, 10">
+        <desktop:ShowCaseItem Title="Checkbox Group" Description="Generate a group of checkboxes from an array.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <WrapPanel Margin="0,0,0,10">
                     <atom:CheckBox IsChecked="True">Apple</atom:CheckBox>
                     <atom:CheckBox IsChecked="True">Pear</atom:CheckBox>
                     <atom:CheckBox IsChecked="True">Orange</atom:CheckBox>
                 </WrapPanel>
-                <WrapPanel Margin="0, 0, 0, 10">
+                <WrapPanel Margin="0,0,0,10">
                     <atom:CheckBox>Apple</atom:CheckBox>
                     <atom:CheckBox IsChecked="True">Pear</atom:CheckBox>
                     <atom:CheckBox>Orange</atom:CheckBox>
                 </WrapPanel>
-                <WrapPanel Margin="0, 0, 0, 10">
+                <WrapPanel Margin="0,0,0,10">
                     <atom:CheckBox IsChecked="True" IsEnabled="False">Apple</atom:CheckBox>
                     <atom:CheckBox IsEnabled="False">Pear</atom:CheckBox>
                     <atom:CheckBox IsEnabled="False">Orange</atom:CheckBox>
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
 
-        <showcase:ShowCaseItem
-            Title="Check all"
-            Description="The indeterminate property can help you to achieve a 'check all' effect.">
-            <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Spacing="10">
+        <desktop:ShowCaseItem Title="Check all" Description="The indeterminate property can help you to achieve a 'check all' effect.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <StackPanel>
-                    <atom:CheckBox IsChecked="{Binding CheckedAllStatus}"
-                                   Command="{Binding CheckedAllStatusHandler}">
+                    <atom:CheckBox Command="{Binding CheckedAllStatusHandler}" IsChecked="{Binding CheckedAllStatus}">
                         Check all
                     </atom:CheckBox>
                 </StackPanel>
-                <WrapPanel Margin="0, 20, 0, 0">
+                <WrapPanel Margin="0,20,0,0">
                     <atom:CheckBox x:Name="AppleCheckBox"
-                                   IsChecked="{Binding AppleCheckedStatus}"
                                    Command="{Binding CheckedItemStatusHandler}"
-                                   CommandParameter="{Binding ElementName=AppleCheckBox}">
+                                   CommandParameter="{Binding ElementName=AppleCheckBox}"
+                                   IsChecked="{Binding AppleCheckedStatus}">
                         Apple
                     </atom:CheckBox>
-                    <atom:CheckBox x:Name="PearCheckBox" 
-                                   IsChecked="{Binding PearCheckedStatus}"
+                    <atom:CheckBox x:Name="PearCheckBox"
                                    Command="{Binding CheckedItemStatusHandler}"
-                                   CommandParameter="{Binding ElementName=PearCheckBox}">
+                                   CommandParameter="{Binding ElementName=PearCheckBox}"
+                                   IsChecked="{Binding PearCheckedStatus}">
                         Pear
                     </atom:CheckBox>
-                    <atom:CheckBox x:Name="OrangeCheckBox" 
-                                   IsChecked="{Binding OrangeCheckedStatus}"
+                    <atom:CheckBox x:Name="OrangeCheckBox"
                                    Command="{Binding CheckedItemStatusHandler}"
-                                   CommandParameter="{Binding ElementName=OrangeCheckBox}">
+                                   CommandParameter="{Binding ElementName=OrangeCheckBox}"
+                                   IsChecked="{Binding OrangeCheckedStatus}">
                         Orange
                     </atom:CheckBox>
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Use with Grid"
-            Description="We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.">
-            <Grid ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto,Auto"  Margin="10">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Use with Grid" Description="We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.">
+            <Grid Margin="10"
+                  ColumnDefinitions="*,*,*"
+                  RowDefinitions="Auto,Auto,Auto">
                 <atom:CheckBox Grid.Row="0" Grid.Column="0">A</atom:CheckBox>
                 <atom:CheckBox Grid.Row="0" Grid.Column="1">B</atom:CheckBox>
                 <atom:CheckBox Grid.Row="0" Grid.Column="2">C</atom:CheckBox>
                 <atom:CheckBox Grid.Row="1" Grid.Column="0">D</atom:CheckBox>
                 <atom:CheckBox Grid.Row="1" Grid.Column="1">D</atom:CheckBox>
             </Grid>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml
index d775ad5..9605355 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/CollapseShowCase.axaml
@@ -1,16 +1,14 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.CollapseShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Collapse"
-            Description="By default, any number of panels can be expanded at a time. The first panel is expanded in this example.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.CollapseShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Collapse" Description="By default, any number of panels can be expanded at a time. The first panel is expanded in this example.">
             <atom:Collapse>
                 <atom:CollapseItem Header="This is panel header 1">
                     <TextBlock TextWrapping="Wrap">
@@ -28,14 +26,15 @@
                     </TextBlock>
                 </atom:CollapseItem>
             </atom:Collapse>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="Ant Design supports a default collapse size as well as a large and small size.
-If a large or small collapse is desired, set the size property to either large or small respectively. Omit the size property for a collapse with the default size.">
-            <StackPanel Orientation="Vertical" Spacing="20" Margin="0, 0, 10, 0">
-                <atom:Separator Title="Default Size" TitlePosition="Left" FontWeight="Bold" />
+        <desktop:ShowCaseItem Title="Size" Description="Ant Design supports a default collapse size as well as a large and small size. If a large or small collapse is desired, set the size property to either large or small respectively. Omit the size property for a collapse with the default size.">
+            <StackPanel Margin="0,0,10,0"
+                        Orientation="Vertical"
+                        Spacing="20">
+                <atom:Separator Title="Default Size"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
                 <atom:Collapse SizeType="Middle">
                     <atom:CollapseItem Header="This is default size panel header">
                         <TextBlock TextWrapping="Wrap">
@@ -43,7 +42,9 @@ If a large or small collapse is desired, set the size property to either large o
                         </TextBlock>
                     </atom:CollapseItem>
                 </atom:Collapse>
-                <atom:Separator Title="Small Size" TitlePosition="Left" FontWeight="Bold" />
+                <atom:Separator Title="Small Size"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
                 <atom:Collapse SizeType="Small">
                     <atom:CollapseItem Header="This is small size panel header">
                         <TextBlock TextWrapping="Wrap">
@@ -51,7 +52,9 @@ If a large or small collapse is desired, set the size property to either large o
                         </TextBlock>
                     </atom:CollapseItem>
                 </atom:Collapse>
-                <atom:Separator Title="Large Size" TitlePosition="Left" FontWeight="Bold" />
+                <atom:Separator Title="Large Size"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
                 <atom:Collapse SizeType="Large">
                     <atom:CollapseItem Header="This is large size panel header">
                         <TextBlock TextWrapping="Wrap">
@@ -60,11 +63,9 @@ If a large or small collapse is desired, set the size property to either large o
                     </atom:CollapseItem>
                 </atom:Collapse>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Accordion"
-            Description="In accordion mode, only one panel can be expanded at a time.">
+        <desktop:ShowCaseItem Title="Accordion" Description="In accordion mode, only one panel can be expanded at a time.">
             <atom:Collapse IsAccordion="True">
                 <atom:CollapseItem Header="This is panel header 1">
                     <TextBlock TextWrapping="Wrap">
@@ -82,11 +83,11 @@ If a large or small collapse is desired, set the size property to either large o
                     </TextBlock>
                 </atom:CollapseItem>
             </atom:Collapse>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Nested panel"
-            Description="Collapse is nested inside the Collapse." Margin="0, 0, 10, 0">
+        <desktop:ShowCaseItem Title="Nested panel"
+                              Margin="0,0,10,0"
+                              Description="Collapse is nested inside the Collapse.">
             <atom:Collapse>
                 <atom:CollapseItem Header="This is panel header 1">
                     <atom:Collapse>
@@ -108,11 +109,11 @@ If a large or small collapse is desired, set the size property to either large o
                     </TextBlock>
                 </atom:CollapseItem>
             </atom:Collapse>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Borderless"
-            Description="A borderless style of Collapse." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Borderless"
+                              Margin="0,0,10,0"
+                              Description="A borderless style of Collapse.">
             <atom:Collapse IsBorderless="True">
                 <atom:CollapseItem Header="This is panel header 1">
                     <TextBlock TextWrapping="Wrap">
@@ -130,11 +131,11 @@ If a large or small collapse is desired, set the size property to either large o
                     </TextBlock>
                 </atom:CollapseItem>
             </atom:Collapse>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="No Arrow"
-            Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="No Arrow"
+                              Margin="0,0,10,0"
+                              Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component.">
             <atom:Collapse>
                 <atom:CollapseItem Header="This is panel header 1">
                     <TextBlock TextWrapping="Wrap">
@@ -147,27 +148,24 @@ If a large or small collapse is desired, set the size property to either large o
                     </TextBlock>
                 </atom:CollapseItem>
             </atom:Collapse>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Extra node"
-            Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Extra node"
+                              Margin="0,0,10,0"
+                              Description="Render extra element in the top-right corner of each panel.">
             <StackPanel Orientation="Vertical" Spacing="20">
-                <atom:Collapse  ExpandIconPosition="{Binding CollapseExpandIconPosition}">
-                    <atom:CollapseItem Header="This is panel header 1"
-                                       AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
+                <atom:Collapse ExpandIconPosition="{Binding CollapseExpandIconPosition}">
+                    <atom:CollapseItem AddOnContent="{atom:IconProvider Kind=SettingOutlined}" Header="This is panel header 1">
                         <TextBlock TextWrapping="Wrap">
                             A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                         </TextBlock>
                     </atom:CollapseItem>
-                    <atom:CollapseItem Header="This is panel header 2"
-                                       AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
+                    <atom:CollapseItem AddOnContent="{atom:IconProvider Kind=SettingOutlined}" Header="This is panel header 2">
                         <TextBlock TextWrapping="Wrap">
                             A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                         </TextBlock>
                     </atom:CollapseItem>
-                    <atom:CollapseItem Header="This is panel header 3"
-                                       AddOnContent="{atom:IconProvider Kind=SettingOutlined}">
+                    <atom:CollapseItem AddOnContent="{atom:IconProvider Kind=SettingOutlined}" Header="This is panel header 3">
                         <TextBlock TextWrapping="Wrap">
                             A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                         </TextBlock>
@@ -176,18 +174,18 @@ If a large or small collapse is desired, set the size property to either large o
 
                 <StackPanel Orientation="Horizontal" Spacing="5">
                     <TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
-                    <atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
+                    <atom:OptionButtonGroup Name="ExpandButtonPosGroup" ButtonStyle="Outline">
                         <atom:OptionButton IsChecked="True">Start</atom:OptionButton>
                         <atom:OptionButton>End</atom:OptionButton>
                     </atom:OptionButtonGroup>
                 </StackPanel>
             </StackPanel>
-            
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Ghost Collapse"
-            Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
+
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Ghost Collapse"
+                              Margin="0,0,10,0"
+                              Description="Making collapse's background to transparent.">
             <atom:Collapse IsGhostStyle="True">
                 <atom:CollapseItem Header="This is panel header 1">
                     <TextBlock TextWrapping="Wrap">
@@ -205,11 +203,11 @@ If a large or small collapse is desired, set the size property to either large o
                     </TextBlock>
                 </atom:CollapseItem>
             </atom:Collapse>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Collapsible"
-            Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Collapsible"
+                              Margin="0,0,10,0"
+                              Description="Specify the trigger area of collapsible by collapsible.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:Collapse>
                     <atom:CollapseItem Header="This panel can only be collapsed by clicking text">
@@ -225,7 +223,7 @@ If a large or small collapse is desired, set the size property to either large o
                         </TextBlock>
                     </atom:CollapseItem>
                 </atom:Collapse>
-                
+
                 <atom:Collapse IsEnabled="False">
                     <atom:CollapseItem Header="This panel can't be collapsed">
                         <TextBlock TextWrapping="Wrap">
@@ -233,7 +231,7 @@ If a large or small collapse is desired, set the size property to either large o
                         </TextBlock>
                     </atom:CollapseItem>
                 </atom:Collapse>
-                
+
                 <atom:Collapse IsEnabled="False">
                     <atom:CollapseItem Header="This panel can't be collapsed" IsSelected="True">
                         <TextBlock TextWrapping="Wrap">
@@ -242,7 +240,7 @@ If a large or small collapse is desired, set the size property to either large o
                     </atom:CollapseItem>
                 </atom:Collapse>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml
index 3f58845..a8848fc 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml
@@ -1,231 +1,241 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.ComboBoxShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Basic button spinner.">
-            <showcase:ShowCaseItem
-                Title="Basic"
-                Description="Basic button spinner.">
-                <atom:ComboBox PlaceholderText="Please select" Width="300">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ComboBoxShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
+            <desktop:ShowCaseItem Title="Basic" Description="Basic button spinner.">
+                <atom:ComboBox Width="300" PlaceholderText="Please select">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-            </showcase:ShowCaseItem>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Three sizes of Input"
-            Description="There are three sizes of an ComboBox: large (40px), default (32px) and small (24px).">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:ComboBox SizeType="Large" PlaceholderText="Please select">
+            </desktop:ShowCaseItem>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Three sizes of Input" Description="There are three sizes of an ComboBox: large (40px), default (32px) and small (24px).">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:ComboBox PlaceholderText="Please select" SizeType="Large">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                <atom:ComboBox SizeType="Middle" PlaceholderText="Please select">
+                <atom:ComboBox PlaceholderText="Please select" SizeType="Middle">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                <atom:ComboBox SizeType="Small" PlaceholderText="Please select">
+                <atom:ComboBox PlaceholderText="Please select" SizeType="Small">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Variants"
-            Description="Variants of Input.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ComboBox StyleVariant="Outline" PlaceholderText="Please select" Width="300">
+                <atom:ComboBox Width="300"
+                               PlaceholderText="Please select"
+                               StyleVariant="Outline">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox StyleVariant="Filled" PlaceholderText="Please select" Width="300">
+
+                <atom:ComboBox Width="300"
+                               PlaceholderText="Please select"
+                               StyleVariant="Filled">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox StyleVariant="Borderless" PlaceholderText="Please select" Width="300">
+
+                <atom:ComboBox Width="300"
+                               PlaceholderText="Please select"
+                               StyleVariant="Borderless">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Pre / Post tab"
-            Description="Using pre and post tabs example.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+                <atom:ComboBox Width="300"
                                LeftAddOn="http://"
+                               PlaceholderText="Please select"
                                RightAddOn=".com">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
-                               RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
-                               >
+
+                <atom:ComboBox Width="300"
+                               PlaceholderText="Please select"
+                               RightAddOn="{atom:IconProvider Kind=SettingOutlined}">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
-                               LeftAddOn="http://"
+
+                <atom:ComboBox Width="300"
                                InnerRightContent=".com"
-                >
+                               LeftAddOn="http://"
+                               PlaceholderText="Please select">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        
-        <showcase:ShowCaseItem
-            Title="prefix and suffix"
-            Description="Add a prefix or suffix icons inside input.">
+        </desktop:ShowCaseItem>
+
+
+        <desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
-                               InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
-                               InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"
-                               >
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
+                                                                    NormalFilledColor=#D7D7D7}"
+                               InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
+                                                                     NormalFilledColor=#8C8C8C}"
+                               PlaceholderText="Please select">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+
+                <atom:ComboBox Width="300"
                                InnerLeftContent="￥"
-                               InnerRightContent="RMB">
+                               InnerRightContent="RMB"
+                               PlaceholderText="Please select">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
-                               InnerLeftContent="￥" 
-                               InnerRightContent="RMB" IsEnabled="False">
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="￥"
+                               InnerRightContent="RMB"
+                               IsEnabled="False"
+                               PlaceholderText="Please select">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-           <showcase:ShowCaseItem
-            Title="Status"
-            Description="Add status to Input with status, which could be error or warning.">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:ComboBox Width="300"
+                               PlaceholderText="Please select"
                                Status="Error">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+
+                <atom:ComboBox Width="300"
+                               PlaceholderText="Please select"
                                Status="Warning">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               PlaceholderText="Please select"
+                               Status="Error">
+                    <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
+                    <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
+                    <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
+                    <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
+                </atom:ComboBox>
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               PlaceholderText="Please select"
+                               Status="Warning">
+                    <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
+                    <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
+                    <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
+                    <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
+                </atom:ComboBox>
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               PlaceholderText="Please select"
                                Status="Error"
-                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
+                               StyleVariant="Filled">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               PlaceholderText="Please select"
                                Status="Warning"
-                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
+                               StyleVariant="Filled">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               PlaceholderText="Please select"
                                Status="Error"
-                               StyleVariant="Filled"
-                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
+                               StyleVariant="Borderless">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-           
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
+
+                <atom:ComboBox Width="300"
+                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               PlaceholderText="Please select"
                                Status="Warning"
-                               StyleVariant="Filled"
-                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
+                               StyleVariant="Borderless">
                     <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
                     <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
                     <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
                     <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
                 </atom:ComboBox>
-                
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
-                               Status="Error"
-                               StyleVariant="Borderless"
-                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
-                    <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
-                    <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
-                    <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
-                    <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
-                </atom:ComboBox>
-           
-                <atom:ComboBox PlaceholderText="Please select" Width="300"
-                               Status="Warning"
-                               StyleVariant="Borderless"
-                               InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}">
-                    <atom:ComboBoxItem>床前明月光</atom:ComboBoxItem>
-                    <atom:ComboBoxItem>疑是地上霜</atom:ComboBoxItem>
-                    <atom:ComboBoxItem>举头望明月</atom:ComboBoxItem>
-                    <atom:ComboBoxItem>低头思故乡</atom:ComboBoxItem>
-                </atom:ComboBox>
-                
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml.cs
index 1429f22..b0b4efd 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ComboBoxShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/DatePickerShowCase.cs.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/DatePickerShowCase.cs.axaml
index 779d54b..c136226 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/DatePickerShowCase.cs.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/DatePickerShowCase.cs.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.DatePickerShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DatePickerShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/DrawerShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/DrawerShowCase.axaml
index cecf2c5..2867976 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/DrawerShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/DrawerShowCase.axaml
@@ -6,6 +6,7 @@
              xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             xmlns:utils="clr-namespace:AtomUI.Demo.Desktop.Utils"
              mc:Ignorable="d">
 
     <UserControl.Styles>
@@ -45,22 +46,22 @@
         </Style>
     </UserControl.Styles>
 
-    <showcase:ShowCasePanel>
+    <desktop:ShowCasePanel>
 
-        <showcase:ShowCaseItem Title="Basic" Description="Basic drawer.">
+        <desktop:ShowCaseItem Title="Basic" Description="Basic drawer.">
             <Panel>
                 <atom:ToggleSwitch x:Name="OpenButton01" Content="Open" />
                 <atom:Drawer IsOpen="{Binding $parent[Panel].((atom:ToggleSwitch)Children[0]).IsChecked}" OpenOn="{Binding $parent[TopLevel]}">
                     <TextBlock Margin="50" Text="Some contents..." />
                 </atom:Drawer>
             </Panel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Custom Placement" Description="The Drawer can appear from any edge of the screen.">
+        <desktop:ShowCaseItem Title="Custom Placement" Description="The Drawer can appear from any edge of the screen.">
             <Panel>
                 <StackPanel Classes="ControllerPanel">
                     <ListBox Classes="PlacementList"
-                             ItemsSource="{desktop:Enum atom:DrawerPlacement}"
+                             ItemsSource="{utils:Enum atom:DrawerPlacement}"
                              SelectedIndex="2" />
                     <atom:ToggleSwitch Content="Open" />
                 </StackPanel>
@@ -71,13 +72,13 @@
                     <TextBlock Margin="50" Text="Some contents..." />
                 </atom:Drawer>
             </Panel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Extra Actions" Description="Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.">
+        <desktop:ShowCaseItem Title="Extra Actions" Description="Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.">
             <Panel>
                 <StackPanel Classes="ControllerPanel">
                     <ListBox Classes="PlacementList"
-                             ItemsSource="{desktop:Enum atom:DrawerPlacement}"
+                             ItemsSource="{utils:Enum atom:DrawerPlacement}"
                              SelectedIndex="2" />
                     <atom:ToggleSwitch Content="Open" />
                 </StackPanel>
@@ -88,28 +89,28 @@
                     <TextBlock Margin="50" Text=" TODO " />
                 </atom:Drawer>
             </Panel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Render in current area" Description="Render in current area.">
+        <desktop:ShowCaseItem Title="Render in current area" Description="Render in current area.">
             <Panel>
                 <StackPanel Height="120"
                             atom:Watermark.Glyph="{atom:TextGlyph AtomUI}"
                             Classes="ControllerPanel">
                     <ListBox Classes="PlacementList"
-                             ItemsSource="{desktop:Enum atom:DrawerPlacement}"
+                             ItemsSource="{utils:Enum atom:DrawerPlacement}"
                              SelectedIndex="2" />
                     <atom:ToggleSwitch Content="Open" />
                 </StackPanel>
 
                 <atom:Drawer IsOpen="{Binding $parent[Panel].((Panel)Children[0]).((atom:ToggleSwitch)Children[1]).IsChecked}"
-                             OpenOn="{Binding $parent[showcase:ShowCaseItem]}"
+                             OpenOn="{Binding $parent[desktop:ShowCaseItem]}"
                              Placement="{Binding $parent[Panel].((Panel)Children[0]).((ListBox)Children[0]).SelectedItem}">
                     <TextBlock Margin="50" Text=" Some contents... " />
                 </atom:Drawer>
             </Panel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Basic" Description="Basic drawer.">
+        <desktop:ShowCaseItem Title="Basic" Description="Basic drawer.">
             <Grid ColumnDefinitions="Auto,*">
                 <Border Grid.ColumnSpan="2"
                         Height="300"
@@ -123,7 +124,7 @@
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Content="Open Drawer #2" />
-                    <ComboBox x:Name="CbxHorizontalAlignment" ItemsSource="{desktop:Enum atom:DrawerPlacement}" />
+                    <ComboBox x:Name="CbxHorizontalAlignment" ItemsSource="{utils:Enum atom:DrawerPlacement}" />
                     <Button Click="ButtonOpenOnCurrentParent_OnClick" Content="Open On Current's Parent" />
                 </StackPanel>
 
@@ -163,7 +164,7 @@
                     </Border>
                 </atom:Drawer>
             </Grid>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/DropdownButtonShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/DropdownButtonShowCase.axaml
index 91a93fa..eca2815 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/DropdownButtonShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/DropdownButtonShowCase.axaml
@@ -1,248 +1,365 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.DropdownButtonShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The most basic dropdown menu.">
-            <atom:DropdownButton ButtonType="Link" TriggerType="Hover" x:Name="Test">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.DropdownButtonShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic dropdown menu.">
+            <atom:DropdownButton x:Name="Test"
+                                 ButtonType="Link"
+                                 TriggerType="Hover">
                 Hover me
                 <atom:DropdownButton.DropdownFlyout>
                     <atom:MenuFlyout>
-                        <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                        <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                        <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                        <atom:MenuItem Header="Cut"
+                                       Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                       InputGesture="Ctrl+X" />
+                        <atom:MenuItem Header="Copy"
+                                       Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                       InputGesture="Ctrl+C" />
+                        <atom:MenuItem Header="Delete"
+                                       Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                       InputGesture="Ctrl+D" />
                         <atom:MenuItem Header="Paste">
-                            <atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
-                                           Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
+                            <atom:MenuItem Header="Paste"
+                                           Icon="{atom:IconProvider Kind=FileDoneOutlined}"
+                                           InputGesture="Ctrl+P" />
                             <atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
                         </atom:MenuItem>
                     </atom:MenuFlyout>
                 </atom:DropdownButton.DropdownFlyout>
             </atom:DropdownButton>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Button Types"
-            Description="Support centralized button type.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Button Types" Description="Support centralized button type.">
             <StackPanel Orientation="Horizontal" Spacing="10">
                 <atom:DropdownButton ButtonType="Primary" TriggerType="Click">
                     Edit File
                     <atom:DropdownButton.DropdownFlyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:DropdownButton.DropdownFlyout>
                 </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Primary" Shape="Round" TriggerType="Click">
+
+                <atom:DropdownButton ButtonType="Primary"
+                                     Shape="Round"
+                                     TriggerType="Click">
                     Edit File
                     <atom:DropdownButton.DropdownFlyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:DropdownButton.DropdownFlyout>
                 </atom:DropdownButton>
-                
+
                 <atom:DropdownButton ButtonType="Default" TriggerType="Click">
                     Edit File
                     <atom:DropdownButton.DropdownFlyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:DropdownButton.DropdownFlyout>
                 </atom:DropdownButton>
-                
+
                 <atom:DropdownButton ButtonType="Text" TriggerType="Click">
                     Edit File
                     <atom:DropdownButton.DropdownFlyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:DropdownButton.DropdownFlyout>
                 </atom:DropdownButton>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Arrow"
-            Description="You could display an arrow.">
-            <showcase:ShowCaseItem.Styles>
-                <Style Selector="atom|DropdownButton">
-                    <Setter Property="Margin" Value="5"/>
-                </Style>
-            </showcase:ShowCaseItem.Styles>
-            <WrapPanel>
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
-                                     Placement="BottomEdgeAlignedLeft">
-                    BottomLeft
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
-                                     Placement="Bottom">
-                    Bottom
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
-                                     Placement="BottomEdgeAlignedRight">
-                    BottomRight
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
-                                     Placement="TopEdgeAlignedLeft">
-                    TopLeft
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
-                                     Placement="Top">
-                    Top
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover" IsShowArrow="True"
-                                     Placement="TopEdgeAlignedRight">
-                    TopRight
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-            </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Placement"
-            Description="Support 6 placements.">
-            <showcase:ShowCaseItem.Styles>
-                <Style Selector="atom|DropdownButton">
-                    <Setter Property="Margin" Value="5"/>
-                </Style>
-            </showcase:ShowCaseItem.Styles>
-            <WrapPanel>
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover"
-                                     Placement="BottomEdgeAlignedLeft">
-                    BottomLeft
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover"
-                                     Placement="Bottom">
-                    Bottom
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover"
-                                     Placement="BottomEdgeAlignedRight">
-                    BottomRight
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover"
-                                     Placement="TopEdgeAlignedLeft">
-                    TopLeft
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover"
-                                     Placement="Top">
-                    Top
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-                
-                <atom:DropdownButton ButtonType="Default" TriggerType="Hover"
-                                     Placement="TopEdgeAlignedRight">
-                    TopRight
-                    <atom:DropdownButton.DropdownFlyout>
-                        <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
-                        </atom:MenuFlyout>
-                    </atom:DropdownButton.DropdownFlyout>
-                </atom:DropdownButton>
-            </WrapPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Arrow" Description="You could display an arrow.">
+            <desktop:ShowCaseItem.Styles>
+                <Style Selector="atom|DropdownButton">
+                    <Setter Property="Margin" Value="5" />
+                </Style>
+            </desktop:ShowCaseItem.Styles>
+            <WrapPanel>
+                <atom:DropdownButton ButtonType="Default"
+                                     IsShowArrow="True"
+                                     Placement="BottomEdgeAlignedLeft"
+                                     TriggerType="Hover">
+                    BottomLeft
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     IsShowArrow="True"
+                                     Placement="Bottom"
+                                     TriggerType="Hover">
+                    Bottom
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     IsShowArrow="True"
+                                     Placement="BottomEdgeAlignedRight"
+                                     TriggerType="Hover">
+                    BottomRight
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     IsShowArrow="True"
+                                     Placement="TopEdgeAlignedLeft"
+                                     TriggerType="Hover">
+                    TopLeft
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     IsShowArrow="True"
+                                     Placement="Top"
+                                     TriggerType="Hover">
+                    Top
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     IsShowArrow="True"
+                                     Placement="TopEdgeAlignedRight"
+                                     TriggerType="Hover">
+                    TopRight
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+            </WrapPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Placement" Description="Support 6 placements.">
+            <desktop:ShowCaseItem.Styles>
+                <Style Selector="atom|DropdownButton">
+                    <Setter Property="Margin" Value="5" />
+                </Style>
+            </desktop:ShowCaseItem.Styles>
+            <WrapPanel>
+                <atom:DropdownButton ButtonType="Default"
+                                     Placement="BottomEdgeAlignedLeft"
+                                     TriggerType="Hover">
+                    BottomLeft
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     Placement="Bottom"
+                                     TriggerType="Hover">
+                    Bottom
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     Placement="BottomEdgeAlignedRight"
+                                     TriggerType="Hover">
+                    BottomRight
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     Placement="TopEdgeAlignedLeft"
+                                     TriggerType="Hover">
+                    TopLeft
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     Placement="Top"
+                                     TriggerType="Hover">
+                    Top
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+
+                <atom:DropdownButton ButtonType="Default"
+                                     Placement="TopEdgeAlignedRight"
+                                     TriggerType="Hover">
+                    TopRight
+                    <atom:DropdownButton.DropdownFlyout>
+                        <atom:MenuFlyout>
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
+                        </atom:MenuFlyout>
+                    </atom:DropdownButton.DropdownFlyout>
+                </atom:DropdownButton>
+            </WrapPanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/EmptyShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/EmptyShowCase.axaml
index f63c913..a2ced8e 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/EmptyShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/EmptyShowCase.axaml
@@ -1,45 +1,38 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.EmptyShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Simplest Usage.">
-            <atom:EmptyIndicator PresetImage="Default"/>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="AtomUI supports three sizes of buttons: small, default and large.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.EmptyShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Simplest Usage.">
+            <atom:EmptyIndicator PresetImage="Default" />
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Size" Description="AtomUI supports three sizes of buttons: small, default and large.">
             <StackPanel Orientation="Vertical">
                 <StackPanel Orientation="Horizontal">
-                    <atom:EmptyIndicator PresetImage="Simple" SizeType="Small"/>
-                    <atom:EmptyIndicator PresetImage="Simple" SizeType="Middle"/>
-                    <atom:EmptyIndicator PresetImage="Simple" SizeType="Large"/>
+                    <atom:EmptyIndicator PresetImage="Simple" SizeType="Small" />
+                    <atom:EmptyIndicator PresetImage="Simple" SizeType="Middle" />
+                    <atom:EmptyIndicator PresetImage="Simple" SizeType="Large" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Customize"
-            Description="Customize image source, image size, description and extra content.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Customize" Description="Customize image source, image size, description and extra content.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:EmptyIndicator ImagePath="avares://AtomUI.Demo.Desktop/Assets/EmptyShowCase/empty.svg" SizeType="Large"
-                                     Description="Customize Description"/>
+                <atom:EmptyIndicator Description="Customize Description"
+                                     ImagePath="avares://AtomUI.Demo.Desktop/Assets/EmptyShowCase/empty.svg"
+                                     SizeType="Large" />
                 <atom:Button HorizontalAlignment="Center" ButtonType="Primary">Create Now</atom:Button>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="No description"
-            Description="Simplest Usage with no description.">
-            <atom:EmptyIndicator PresetImage="Default" IsShowDescription="False"/>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        <desktop:ShowCaseItem Title="No description" Description="Simplest Usage with no description.">
+            <atom:EmptyIndicator IsShowDescription="False" PresetImage="Default" />
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml
index df06695..9ac3467 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml
@@ -1,77 +1,81 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.ExpanderShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Expander"
-            Description="By default, The simplest usage is to expand downward.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ExpanderShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Expander" Description="By default, The simplest usage is to expand downward.">
             <atom:Expander Header="This is panel header 1">
                 <TextBlock TextWrapping="Wrap">
                     A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                 </TextBlock>
             </atom:Expander>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="Ant Design supports a default Expander size as well as a large and small size.
-If a large or small Expander is desired, set the size property to either large or small respectively. Omit the size property for a Expander with the default size.">
-            <StackPanel Orientation="Vertical" Spacing="20" Margin="0, 0, 10, 0">
-                <atom:Separator Title="Default Size" TitlePosition="Left" FontWeight="Bold" />
-                <atom:Expander SizeType="Middle" Header="This is default size panel header">
+        <desktop:ShowCaseItem Title="Size" Description="Ant Design supports a default Expander size as well as a large and small size. If a large or small Expander is desired, set the size property to either large or small respectively. Omit the size property for a Expander with the default size.">
+            <StackPanel Margin="0,0,10,0"
+                        Orientation="Vertical"
+                        Spacing="20">
+                <atom:Separator Title="Default Size"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
+                <atom:Expander Header="This is default size panel header" SizeType="Middle">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
-                <atom:Separator Title="Small Size" TitlePosition="Left" FontWeight="Bold" />
-                <atom:Expander SizeType="Small" Header="This is small size panel header">
+                <atom:Separator Title="Small Size"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
+                <atom:Expander Header="This is small size panel header" SizeType="Small">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
-                <atom:Separator Title="Large Size" TitlePosition="Left" FontWeight="Bold" />
-                <atom:Expander SizeType="Large" Header="This is large size panel header">
+                <atom:Separator Title="Large Size"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
+                <atom:Expander Header="This is large size panel header" SizeType="Large">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Expanding Direction"
-            Description="The content area supports expansion in four directions.">
-            <DockPanel Margin="0, 0, 0, 0" Height="300">
-                <StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Expanding Direction" Description="The content area supports expansion in four directions.">
+            <DockPanel Height="300" Margin="0,0,0,0">
+                <StackPanel DockPanel.Dock="Top"
+                            Orientation="Horizontal"
+                            Spacing="5">
                     <TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
-                    <atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandDirectionOptionGroup">
+                    <atom:OptionButtonGroup Name="ExpandDirectionOptionGroup" ButtonStyle="Outline">
                         <atom:OptionButton IsChecked="True">Down</atom:OptionButton>
                         <atom:OptionButton>Up</atom:OptionButton>
                         <atom:OptionButton>Left</atom:OptionButton>
                         <atom:OptionButton>Right</atom:OptionButton>
                     </atom:OptionButtonGroup>
                 </StackPanel>
-                
-                <Panel Margin="0, 20, 0, 0">
-                    <atom:Expander Header="This is panel header" ExpandDirection="{Binding ExpandDirection}"
-                                   Name="DirectionDemoExpander">
+
+                <Panel Margin="0,20,0,0">
+                    <atom:Expander Name="DirectionDemoExpander"
+                                   ExpandDirection="{Binding ExpandDirection}"
+                                   Header="This is panel header">
                         <TextBlock TextWrapping="Wrap">
                             A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                         </TextBlock>
                     </atom:Expander>
                 </Panel>
             </DockPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Nested panel"
-            Description="Expander is nested inside the Collapse." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Nested panel"
+                              Margin="0,0,10,0"
+                              Description="Expander is nested inside the Collapse.">
             <atom:Expander Header="This is panel header 1">
                 <atom:Expander Header="This is nested panel header">
                     <TextBlock TextWrapping="Wrap">
@@ -79,35 +83,35 @@ If a large or small Expander is desired, set the size property to either large o
                     </TextBlock>
                 </atom:Expander>
             </atom:Expander>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Borderless"
-            Description="A borderless style of Expander." Margin="0, 0, 10, 0">
-            <atom:Expander IsBorderless="True" Header="This is panel header 1">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Borderless"
+                              Margin="0,0,10,0"
+                              Description="A borderless style of Expander.">
+            <atom:Expander Header="This is panel header 1" IsBorderless="True">
                 <TextBlock TextWrapping="Wrap">
                     A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                 </TextBlock>
             </atom:Expander>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="No Arrow"
-            Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="No Arrow"
+                              Margin="0,0,10,0"
+                              Description="You can hide the arrow icon by passing IsShowExpandIcon={False} to CollapsePanel component.">
             <atom:Expander Header="This is panel header 1" IsShowExpandIcon="False">
                 <TextBlock TextWrapping="Wrap">
                     A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                 </TextBlock>
             </atom:Expander>
-        </showcase:ShowCaseItem>
-        
-         <showcase:ShowCaseItem
-            Title="Extra node"
-            Description="Render extra element in the top-right corner of each panel." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Extra node"
+                              Margin="0,0,10,0"
+                              Description="Render extra element in the top-right corner of each panel.">
             <StackPanel Orientation="Vertical" Spacing="20">
-                <atom:Expander Header="This is panel header 1"
-                               AddOnContent="{atom:IconProvider Kind=SettingOutlined}"
-                               ExpandIconPosition="{Binding ToggleIconPosition}">
+                <atom:Expander AddOnContent="{atom:IconProvider Kind=SettingOutlined}"
+                               ExpandIconPosition="{Binding ToggleIconPosition}"
+                               Header="This is panel header 1">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
@@ -115,52 +119,54 @@ If a large or small Expander is desired, set the size property to either large o
 
                 <StackPanel Orientation="Horizontal" Spacing="5">
                     <TextBlock VerticalAlignment="Center">Expand Icon Position:</TextBlock>
-                    <atom:OptionButtonGroup ButtonStyle="Outline" Name="ExpandButtonPosGroup">
+                    <atom:OptionButtonGroup Name="ExpandButtonPosGroup" ButtonStyle="Outline">
                         <atom:OptionButton IsChecked="True">Start</atom:OptionButton>
                         <atom:OptionButton>End</atom:OptionButton>
                     </atom:OptionButtonGroup>
                 </StackPanel>
             </StackPanel>
-            
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Ghost Collapse"
-            Description="Making collapse's background to transparent." Margin="0, 0, 10, 0">
-            <atom:Expander IsGhostStyle="True" Header="This is panel header 1">
+
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Ghost Collapse"
+                              Margin="0,0,10,0"
+                              Description="Making collapse's background to transparent.">
+            <atom:Expander Header="This is panel header 1" IsGhostStyle="True">
                 <TextBlock TextWrapping="Wrap">
                     A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                 </TextBlock>
             </atom:Expander>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Collapsible"
-            Description="Specify the trigger area of collapsible by collapsible." Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Collapsible"
+                              Margin="0,0,10,0"
+                              Description="Specify the trigger area of collapsible by collapsible.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:Expander Header="This panel can only be collapsed by clicking text">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
-                <atom:Expander TriggerType="Icon" Header="This panel can only be collapsed by clicking icon">
+                <atom:Expander Header="This panel can only be collapsed by clicking icon" TriggerType="Icon">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
-                
-                <atom:Expander IsEnabled="False" Header="This panel can't be collapsed">
+
+                <atom:Expander Header="This panel can't be collapsed" IsEnabled="False">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
-                
-                <atom:Expander IsEnabled="False" Header="This panel can't be collapsed" IsExpanded="True">
+
+                <atom:Expander Header="This panel can't be collapsed"
+                               IsEnabled="False"
+                               IsExpanded="True">
                     <TextBlock TextWrapping="Wrap">
                         A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
                     </TextBlock>
                 </atom:Expander>
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml.cs
index f6ad9d4..b9fd460 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ExpanderShowCase.axaml.cs
@@ -1,7 +1,6 @@
 using AtomUI.Controls;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Layout;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/GroupBoxShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/GroupBoxShowCase.axaml
index e87d176..956de0a 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/GroupBoxShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/GroupBoxShowCase.axaml
@@ -1,16 +1,14 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.GroupBoxShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Basic usage of the GroupBox control.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.GroupBoxShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Basic usage of the GroupBox control.">
             <atom:GroupBox HeaderTitle="Title Info">
                 <Panel Height="100">
                     <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
@@ -18,11 +16,9 @@
                     </TextBlock>
                 </Panel>
             </atom:GroupBox>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Header title Position"
-            Description="GroupBox Header supports three position types: Left, Center and Right.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Header title Position" Description="GroupBox Header supports three position types: Left, Center and Right.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:GroupBox HeaderTitle="Title Info">
                     <Panel Height="40">
@@ -46,34 +42,40 @@
                     </Panel>
                 </atom:GroupBox>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Header title style"
-            Description="GroupBox Header supports customizing some properties of color and font.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Header title style" Description="GroupBox Header supports customizing some properties of color and font.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:GroupBox HeaderTitle="Title Info" HeaderFontStyle="Italic">
+                <atom:GroupBox HeaderFontStyle="Italic" HeaderTitle="Title Info">
                     <Panel Height="40">
                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                             Content of group box
                         </TextBlock>
                     </Panel>
                 </atom:GroupBox>
-                <atom:GroupBox HeaderTitle="Title Info" HeaderTitlePosition="Center" HeaderFontWeight="Bold">
+                <atom:GroupBox HeaderFontWeight="Bold"
+                               HeaderTitle="Title Info"
+                               HeaderTitlePosition="Center">
                     <Panel Height="40">
                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                             Content of group box
                         </TextBlock>
                     </Panel>
                 </atom:GroupBox>
-                <atom:GroupBox HeaderTitle="Title Info" HeaderTitlePosition="Right" HeaderFontStyle="Oblique">
+                <atom:GroupBox HeaderFontStyle="Oblique"
+                               HeaderTitle="Title Info"
+                               HeaderTitlePosition="Right">
                     <Panel Height="40">
                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                             Content of group box
                         </TextBlock>
                     </Panel>
                 </atom:GroupBox>
-                <atom:GroupBox HeaderTitle="Title Info" HeaderTitlePosition="Center" HeaderFontStyle="Oblique" HeaderTitleColor="Coral" HeaderFontWeight="Medium">
+                <atom:GroupBox HeaderFontStyle="Oblique"
+                               HeaderFontWeight="Medium"
+                               HeaderTitle="Title Info"
+                               HeaderTitleColor="Coral"
+                               HeaderTitlePosition="Center">
                     <Panel Height="40">
                         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                             Content of group box
@@ -81,18 +83,16 @@
                     </Panel>
                 </atom:GroupBox>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Header Icon"
-            Description="GroupBox Header supports specifying Icon.">
-            <atom:GroupBox HeaderTitle="Title Info" HeaderIcon="{atom:IconProvider Kind=GithubOutlined}">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Header Icon" Description="GroupBox Header supports specifying Icon.">
+            <atom:GroupBox HeaderIcon="{atom:IconProvider Kind=GithubOutlined}" HeaderTitle="Title Info">
                 <Panel Height="100">
                     <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                         Content of group box
                     </TextBlock>
                 </Panel>
             </atom:GroupBox>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/IconShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/IconShowCase.axaml
index 05bf8a0..8d20026 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/IconShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/IconShowCase.axaml
@@ -1,15 +1,14 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.IconShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:AtomUI.Demo.Desktop.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    x:CompileBindings="True"
-    mc:Ignorable="d">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.IconShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="clr-namespace:AtomUI.Demo.Desktop.Controls"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             x:CompileBindings="True"
+             mc:Ignorable="d">
     <Design.DataContext>
         <viewModels:PaletteDemoViewModel />
     </Design.DataContext>
@@ -24,17 +23,17 @@
     <TabControl>
         <TabItem Header="Outlined">
             <ScrollViewer>
-                <controls:IconGallery IconThemeType="Outlined"/>
+                <controls:IconGallery IconThemeType="Outlined" />
             </ScrollViewer>
         </TabItem>
         <TabItem Header="Filled">
             <ScrollViewer>
-                <controls:IconGallery IconThemeType="Filled"/>
+                <controls:IconGallery IconThemeType="Filled" />
             </ScrollViewer>
         </TabItem>
         <TabItem Header="Two Tone">
             <ScrollViewer>
-                <controls:IconGallery IconThemeType="TwoTone"/>
+                <controls:IconGallery IconThemeType="TwoTone" />
             </ScrollViewer>
         </TabItem>
     </TabControl>
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml
index 8ac25e8..c4064b1 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml
@@ -1,36 +1,40 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.InfoFlyoutShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The most basic example. The size of the floating layer depends on the contents region.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.InfoFlyoutShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic example. The size of the floating layer depends on the contents region.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:FlyoutHost Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
                     <atom:Button ButtonType="Primary">Hover me</atom:Button>
                 </atom:FlyoutHost>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Three ways to trigger"
-            Description="Mouse to click, focus and move in.">
+        <desktop:ShowCaseItem Title="Three ways to trigger" Description="Mouse to click, focus and move in.">
             <StackPanel Orientation="Horizontal" Spacing="10">
                 <atom:FlyoutHost Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
                     <atom:Button>Hover me</atom:Button>
@@ -38,17 +42,19 @@
                 <atom:FlyoutHost Trigger="Click">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
                     <atom:Button>Click me</atom:Button>
                 </atom:FlyoutHost>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Placement"
-            Description="There are 12 placement options available.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Placement" Description="There are 12 placement options available.">
             <Grid>
                 <Grid.Styles>
                     <Style Selector="atom|Button">
@@ -57,134 +63,216 @@
                     </Style>
                 </Grid.Styles>
                 <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-        
-                <atom:FlyoutHost Grid.Row="1" Grid.Column="0" Trigger="Hover" Placement="LeftEdgeAlignedTop">
+
+                <atom:FlyoutHost Grid.Row="1"
+                                 Grid.Column="0"
+                                 Placement="LeftEdgeAlignedTop"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="LT"/>
+                    <atom:Button Text="LT" />
                 </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="2" Grid.Column="0" Trigger="Hover" Placement="Left">
+
+                <atom:FlyoutHost Grid.Row="2"
+                                 Grid.Column="0"
+                                 Placement="Left"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Left"/>
+                    <atom:Button Text="Left" />
                 </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="3" Grid.Column="0" Trigger="Hover" Placement="LeftEdgeAlignedBottom">
+
+                <atom:FlyoutHost Grid.Row="3"
+                                 Grid.Column="0"
+                                 Placement="LeftEdgeAlignedBottom"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="LB"/>
+                    <atom:Button Text="LB" />
                 </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="0" Grid.Column="1" Trigger="Hover" Placement="TopEdgeAlignedLeft">
+
+                <atom:FlyoutHost Grid.Row="0"
+                                 Grid.Column="1"
+                                 Placement="TopEdgeAlignedLeft"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="TL"/>
+                    <atom:Button Text="TL" />
                 </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="0" Grid.Column="2" Trigger="Hover" Placement="Top">
+
+                <atom:FlyoutHost Grid.Row="0"
+                                 Grid.Column="2"
+                                 Placement="Top"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Top"/>
+                    <atom:Button Text="Top" />
                 </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="0" Grid.Column="3" Trigger="Hover" Placement="TopEdgeAlignedRight">
+
+                <atom:FlyoutHost Grid.Row="0"
+                                 Grid.Column="3"
+                                 Placement="TopEdgeAlignedRight"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="TR"/>
+                    <atom:Button Text="TR" />
                 </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="1" Grid.Column="4" Trigger="Hover" Placement="RightEdgeAlignedTop">
+
+                <atom:FlyoutHost Grid.Row="1"
+                                 Grid.Column="4"
+                                 Placement="RightEdgeAlignedTop"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="RT"/>
+                    <atom:Button Text="RT" />
                 </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="2" Grid.Column="4" Trigger="Hover" Placement="Right">
+
+                <atom:FlyoutHost Grid.Row="2"
+                                 Grid.Column="4"
+                                 Placement="Right"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Right"/>
+                    <atom:Button Text="Right" />
                 </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="3" Grid.Column="4" Trigger="Hover" Placement="RightEdgeAlignedBottom">
+
+                <atom:FlyoutHost Grid.Row="3"
+                                 Grid.Column="4"
+                                 Placement="RightEdgeAlignedBottom"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="RB"/>
+                    <atom:Button Text="RB" />
                 </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="4" Grid.Column="1" Trigger="Hover" Placement="BottomEdgeAlignedLeft">
+
+                <atom:FlyoutHost Grid.Row="4"
+                                 Grid.Column="1"
+                                 Placement="BottomEdgeAlignedLeft"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="BL"/>
+                    <atom:Button Text="BL" />
                 </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="4" Grid.Column="2" Trigger="Hover" Placement="Bottom">
+
+                <atom:FlyoutHost Grid.Row="4"
+                                 Grid.Column="2"
+                                 Placement="Bottom"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Bottom"/>
+                    <atom:Button Text="Bottom" />
                 </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="4" Grid.Column="3" Trigger="Hover" Placement="BottomEdgeAlignedRight">
+
+                <atom:FlyoutHost Grid.Row="4"
+                                 Grid.Column="3"
+                                 Placement="BottomEdgeAlignedRight"
+                                 Trigger="Hover">
                     <atom:FlyoutHost.Flyout>
                         <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
+                            <TextBlock Width="200"
+                                       Height="100"
+                                       Padding="20">
+                                The most basic example.
+                            </TextBlock>
                         </atom:Flyout>
                     </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="BR"/>
+                    <atom:Button Text="BR" />
                 </atom:FlyoutHost>
-        
+
             </Grid>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Arrow"
-            Description="Support show, hide or keep arrow in the center.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Arrow" Description="Support show, hide or keep arrow in the center.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:Segmented x:Name="ArrowSegmented">
                     <atom:SegmentedItem>Show</atom:SegmentedItem>
@@ -199,180 +287,240 @@
                         </Style>
                     </Grid.Styles>
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
-        
-        
-                  <atom:FlyoutHost Grid.Row="1" Grid.Column="0" 
-                                   Trigger="Hover" 
-                                   Placement="LeftEdgeAlignedTop"
-                                   IsShowArrow="{Binding  ShowArrow}"
-                                   IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="LT"/>
-                </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="2" Grid.Column="0"
-                                 Trigger="Hover"
-                                 Placement="Left"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Left"/>
-                </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="3" Grid.Column="0"
-                                 Trigger="Hover"
-                                 Placement="LeftEdgeAlignedBottom"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="LB"/>
-                </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="0" Grid.Column="1"
-                                 Trigger="Hover"
-                                 Placement="TopEdgeAlignedLeft"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="TL"/>
-                </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="0" Grid.Column="2"
-                                 Trigger="Hover"
-                                 Placement="Top"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Top"/>
-                </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="0" Grid.Column="3"
-                                 Trigger="Hover" 
-                                 Placement="TopEdgeAlignedRight"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="TR"/>
-                </atom:FlyoutHost>
-        
-                <atom:FlyoutHost Grid.Row="1" Grid.Column="4" 
-                                 Trigger="Hover"
-                                 Placement="RightEdgeAlignedTop"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="RT"/>
-                </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="2" Grid.Column="4" 
-                                 Trigger="Hover" 
-                                 Placement="Right"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Right"/>
-                </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="3" Grid.Column="4" 
-                                 Trigger="Hover" 
-                                 Placement="RightEdgeAlignedBottom"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="RB"/>
-                </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="4" Grid.Column="1"
-                                 Trigger="Hover" 
-                                 Placement="BottomEdgeAlignedLeft"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="BL"/>
-                </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="4" Grid.Column="2"
-                                 Trigger="Hover" 
-                                 Placement="Bottom"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="Bottom"/>
-                </atom:FlyoutHost>
-                
-                <atom:FlyoutHost Grid.Row="4" Grid.Column="3" 
-                                 Trigger="Hover" 
-                                 Placement="BottomEdgeAlignedRight"
-                                 IsShowArrow="{Binding  ShowArrow}"
-                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
-                    <atom:FlyoutHost.Flyout>
-                        <atom:Flyout>
-                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
-                        </atom:Flyout>
-                    </atom:FlyoutHost.Flyout>
-                    <atom:Button Text="BR"/>
-                </atom:FlyoutHost>
-        
+
+
+                    <atom:FlyoutHost Grid.Row="1"
+                                     Grid.Column="0"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="LeftEdgeAlignedTop"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="LT" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="2"
+                                     Grid.Column="0"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="Left"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="Left" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="3"
+                                     Grid.Column="0"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="LeftEdgeAlignedBottom"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="LB" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="0"
+                                     Grid.Column="1"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="TopEdgeAlignedLeft"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="TL" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="0"
+                                     Grid.Column="2"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="Top"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="Top" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="0"
+                                     Grid.Column="3"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="TopEdgeAlignedRight"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="TR" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="1"
+                                     Grid.Column="4"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="RightEdgeAlignedTop"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="RT" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="2"
+                                     Grid.Column="4"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="Right"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="Right" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="3"
+                                     Grid.Column="4"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="RightEdgeAlignedBottom"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="RB" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="4"
+                                     Grid.Column="1"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="BottomEdgeAlignedLeft"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="BL" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="4"
+                                     Grid.Column="2"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="Bottom"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="Bottom" />
+                    </atom:FlyoutHost>
+
+                    <atom:FlyoutHost Grid.Row="4"
+                                     Grid.Column="3"
+                                     IsPointAtCenter="{Binding IsPointAtCenter}"
+                                     IsShowArrow="{Binding ShowArrow}"
+                                     Placement="BottomEdgeAlignedRight"
+                                     Trigger="Hover">
+                        <atom:FlyoutHost.Flyout>
+                            <atom:Flyout>
+                                <TextBlock Width="200"
+                                           Height="100"
+                                           Padding="20">
+                                    The most basic example.
+                                </TextBlock>
+                            </atom:Flyout>
+                        </atom:FlyoutHost.Flyout>
+                        <atom:Button Text="BR" />
+                    </atom:FlyoutHost>
+
                 </Grid>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml.cs
index 90d503e..4ec0ddb 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml.cs
@@ -1,7 +1,6 @@
 using AtomUI.Controls;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Media;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml
index 524bb96..e843807 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml
@@ -1,137 +1,174 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.LineEditShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic usage"
-            Description="Basic usage example.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.LineEditShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic usage" Description="Basic usage example.">
             <atom:LineEdit Watermark="Basic usage" />
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Three sizes of Input"
-            Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:LineEdit Watermark="Large" SizeType="Large"
-                               InnerLeftContent="{atom:IconProvider Kind=UserOutlined}" />
-                <atom:LineEdit Watermark="Middle" SizeType="Middle"
-                               InnerLeftContent="{atom:IconProvider Kind=UserOutlined}" />
-                <atom:LineEdit Watermark="Small" SizeType="Small"
-                               InnerLeftContent="{atom:IconProvider Kind=UserOutlined}" />
+        <desktop:ShowCaseItem Title="Three sizes of Input" Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"
+                               SizeType="Large"
+                               Watermark="Large" />
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"
+                               SizeType="Middle"
+                               Watermark="Middle" />
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"
+                               SizeType="Small"
+                               Watermark="Small" />
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Variants"
-            Description="Variants of Input.">
+        <desktop:ShowCaseItem Title="Variants" Description="Variants of Input.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:LineEdit Watermark="Outlined" StyleVariant="Outline" />
-                <atom:LineEdit Watermark="Filled" StyleVariant="Filled" />
-                <atom:LineEdit Watermark="Borderless" StyleVariant="Borderless" />
+                <atom:LineEdit StyleVariant="Outline" Watermark="Outlined" />
+                <atom:LineEdit StyleVariant="Filled" Watermark="Filled" />
+                <atom:LineEdit StyleVariant="Borderless" Watermark="Borderless" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Pre / Post tab"
-            Description="Using pre and post tabs example.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:LineEdit LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
-                               Text="mysite"/>
-                <atom:LineEdit RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400" HorizontalAlignment="Left"
-                               Text="mysite"/>
-                <atom:LineEdit LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
-                               Text="mysite"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="With clear icon"
-            Description="Input box with the remove icon, click the icon to delete everything.">
-            <atom:LineEdit Watermark="input with clear icon" Width="400" HorizontalAlignment="Left" IsEnableClearButton="True"/>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Password box"
-            Description="Input type of password.">
-            <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:LineEdit Watermark="input password"
-                               Width="400"
-                               PasswordChar="*"
-                               RevealPassword="False"
+                <atom:LineEdit Width="400"
                                HorizontalAlignment="Left"
-                               IsEnableRevealButton="True"/>
-                <atom:LineEdit Watermark="input password"
-                               Width="400"
-                               PasswordChar="*"
-                               RevealPassword="False"
+                               LeftAddOn="http://"
+                               RightAddOn=".com"
+                               Text="mysite" />
+                <atom:LineEdit Width="400"
+                               HorizontalAlignment="Left"
+                               RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
+                               Text="mysite" />
+                <atom:LineEdit Width="400"
+                               HorizontalAlignment="Left"
+                               InnerRightContent=".com"
+                               LeftAddOn="http://"
+                               Text="mysite" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="With clear icon" Description="Input box with the remove icon, click the icon to delete everything.">
+            <atom:LineEdit Width="400"
+                           HorizontalAlignment="Left"
+                           IsEnableClearButton="True"
+                           Watermark="input with clear icon" />
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Password box" Description="Input type of password.">
+            <StackPanel Orientation="Vertical" Spacing="10">
+                <atom:LineEdit Width="400"
                                HorizontalAlignment="Left"
                                IsEnableRevealButton="True"
-                               IsEnableClearButton="True"/>
+                               PasswordChar="*"
+                               RevealPassword="False"
+                               Watermark="input password" />
+                <atom:LineEdit Width="400"
+                               HorizontalAlignment="Left"
+                               IsEnableClearButton="True"
+                               IsEnableRevealButton="True"
+                               PasswordChar="*"
+                               RevealPassword="False"
+                               Watermark="input password" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="prefix and suffix"
-            Description="Add a prefix or suffix icons inside input.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:LineEdit Watermark="Enter your username"
-                               InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
-                               InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"/>
-                <atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB"/>
-                <atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"/>
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
+                                                                    NormalFilledColor=#D7D7D7}"
+                               InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
+                                                                     NormalFilledColor=#8C8C8C}"
+                               Watermark="Enter your username" />
+                <atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB" />
+                <atom:LineEdit InnerLeftContent="￥"
+                               InnerRightContent="RMB"
+                               IsEnabled="False" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Status"
-            Description="Add status to Input with status, which could be error or warning.">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:LineEdit Watermark="Error" Status="Error"/>
-                <atom:LineEdit Watermark="Warning" Status="Warning"/>
-                <atom:LineEdit Watermark="Error with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Error"/>
-                <atom:LineEdit Watermark="Warning with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Warning"/>
-        
-                <atom:LineEdit Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
-                <atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
-        
-                <atom:LineEdit Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
-                <atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:LineEdit Status="Error" Watermark="Error" />
+                <atom:LineEdit Status="Warning" Watermark="Warning" />
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               Status="Error"
+                               Watermark="Error with prefix" />
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               Status="Warning"
+                               Watermark="Warning with prefix" />
+
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               Status="Error"
+                               StyleVariant="Filled"
+                               Watermark="Error" />
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               Status="Warning"
+                               StyleVariant="Filled"
+                               Watermark="Warning" />
+
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               Status="Error"
+                               StyleVariant="Borderless"
+                               Watermark="Error" />
+                <atom:LineEdit InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                               Status="Warning"
+                               StyleVariant="Borderless"
+                               Watermark="Warning" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Search box"
-            Description="Example of creating a search box by grouping a standard input with a search button.">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left"/>
-                <atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left" SearchButtonText="Search"/>
-        
-                <atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left" SearchButtonStyle="Primary" SearchButtonText="Search"/>
-                <atom:SearchEdit Watermark="input search text" Width="400" HorizontalAlignment="Left" SearchButtonStyle="Primary" SearchButtonText="Search"/>
-        
-                <atom:SearchEdit Watermark="input search text"
-                                 Width="400"
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Search box" Description="Example of creating a search box by grouping a standard input with a search button.">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:SearchEdit Width="400"
+                                 HorizontalAlignment="Left"
+                                 Watermark="input search text" />
+                <atom:SearchEdit Width="400"
+                                 HorizontalAlignment="Left"
+                                 SearchButtonText="Search"
+                                 Watermark="input search text" />
+
+                <atom:SearchEdit Width="400"
                                  HorizontalAlignment="Left"
                                  SearchButtonStyle="Primary"
                                  SearchButtonText="Search"
-                                 IsEnableClearButton="True"
-                                 />
-                <atom:SearchEdit Watermark="input search text"
-                                 Width="400"
+                                 Watermark="input search text" />
+                <atom:SearchEdit Width="400"
                                  HorizontalAlignment="Left"
                                  SearchButtonStyle="Primary"
-                                 SearchButtonText="搜索一下"
-                                 InnerRightContent="{atom:IconProvider Kind=AudioOutlined, NormalFilledColor=#1677ff, Width=16, Height=16}"
-                                 IsEnableClearButton="True"
-                                 SizeType="Large"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
+                                 SearchButtonText="Search"
+                                 Watermark="input search text" />
 
-    </showcase:ShowCasePanel>
+                <atom:SearchEdit Width="400"
+                                 HorizontalAlignment="Left"
+                                 IsEnableClearButton="True"
+                                 SearchButtonStyle="Primary"
+                                 SearchButtonText="Search"
+                                 Watermark="input search text" />
+                <atom:SearchEdit Width="400"
+                                 HorizontalAlignment="Left"
+                                 InnerRightContent="{atom:IconProvider Kind=AudioOutlined,
+                                                                       NormalFilledColor=#1677ff,
+                                                                       Width=16,
+                                                                       Height=16}"
+                                 IsEnableClearButton="True"
+                                 SearchButtonStyle="Primary"
+                                 SearchButtonText="搜索一下"
+                                 SizeType="Large"
+                                 Watermark="input search text" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml.cs
index 9667a72..0ff4537 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml
index 5e05b4e..22958d6 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml
@@ -1,44 +1,38 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.ListBoxShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic usage"
-            Description="Basic usage example.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ListBoxShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic usage" Description="Basic usage example.">
             <atom:ListBox>
                 <atom:ListBoxItem>Blue</atom:ListBoxItem>
                 <atom:ListBoxItem>Green</atom:ListBoxItem>
                 <atom:ListBoxItem>Red</atom:ListBoxItem>
                 <atom:ListBoxItem>Yellow</atom:ListBoxItem>
             </atom:ListBox>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Hover effect"
-            Description="Disabled item hover effect.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Hover effect" Description="Disabled item hover effect.">
             <atom:ListBox DisabledItemHoverEffect="True">
                 <atom:ListBoxItem>Blue</atom:ListBoxItem>
                 <atom:ListBoxItem>Green</atom:ListBoxItem>
                 <atom:ListBoxItem>Red</atom:ListBoxItem>
                 <atom:ListBoxItem>Yellow</atom:ListBoxItem>
             </atom:ListBox>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Item disabled"
-            Description="Disabled item.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Item disabled" Description="Disabled item.">
             <atom:ListBox>
                 <atom:ListBoxItem>Blue</atom:ListBoxItem>
                 <atom:ListBoxItem>Green</atom:ListBoxItem>
                 <atom:ListBoxItem IsEnabled="False">Red</atom:ListBoxItem>
                 <atom:ListBoxItem>Yellow</atom:ListBoxItem>
             </atom:ListBox>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml.cs
index 023215f..7c9b24e 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ListBoxShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/LoadingIndicatorShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/LoadingIndicatorShowCase.axaml
index 8824c25..816f7fa 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/LoadingIndicatorShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/LoadingIndicatorShowCase.axaml
@@ -1,92 +1,94 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.LoadingIndicatorShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic Usage"
-            Description="A simple loading status.">
-            <atom:LoadingIndicator/>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="A small LoadingIndicator is used for loading text, default sized LoadingIndicator for loading a card-level block, and large LoadingIndicator used for loading a page.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.LoadingIndicatorShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic Usage" Description="A simple loading status.">
+            <atom:LoadingIndicator />
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Size" Description="A small LoadingIndicator is used for loading text, default sized LoadingIndicator for loading a card-level block, and large LoadingIndicator used for loading a page.">
             <StackPanel Orientation="Horizontal">
-                <atom:LoadingIndicator SizeType="Small" VerticalAlignment="Center"/>
-                <atom:LoadingIndicator SizeType="Middle" VerticalAlignment="Center"/>
-                <atom:LoadingIndicator SizeType="Large" VerticalAlignment="Center"/>
+                <atom:LoadingIndicator VerticalAlignment="Center" SizeType="Small" />
+                <atom:LoadingIndicator VerticalAlignment="Center" SizeType="Middle" />
+                <atom:LoadingIndicator VerticalAlignment="Center" SizeType="Large" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Custom spinning indicator"
-            Description="Use custom loading indicator.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Custom spinning indicator" Description="Use custom loading indicator.">
             <StackPanel Orientation="Horizontal">
-                <atom:LoadingIndicator SizeType="Small"
-                                       VerticalAlignment="Center"
-                                       CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,NormalFilledColor=#1677ff}"/>
-                <atom:LoadingIndicator SizeType="Middle"
-                                       VerticalAlignment="Center"
-                                       CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,NormalFilledColor=#1677ff}"/>
-                <atom:LoadingIndicator SizeType="Large"
-                                       VerticalAlignment="Center"
-                                       CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,NormalFilledColor=#1677ff}"/>
+                <atom:LoadingIndicator VerticalAlignment="Center"
+                                       CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,
+                                                                               NormalFilledColor=#1677ff}"
+                                       SizeType="Small" />
+                <atom:LoadingIndicator VerticalAlignment="Center"
+                                       CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,
+                                                                               NormalFilledColor=#1677ff}"
+                                       SizeType="Middle" />
+                <atom:LoadingIndicator VerticalAlignment="Center"
+                                       CustomIndicatorIcon="{atom:IconProvider Kind=LoadingOutlined,
+                                                                               NormalFilledColor=#1677ff}"
+                                       SizeType="Large" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Customized description"
-            Description="Customized description">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Customized description" Description="Customized description">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <StackPanel Orientation="Horizontal" Spacing="10">
-                    <atom:LoadingMaskHost IsLoading="True" SizeType="Small"
+                    <atom:LoadingMaskHost IsLoading="True"
                                           IsShowLoadingMsg="True"
-                                          LoadingMsg="Loading...">
-                        <Border Width="100" Height="100" Background="rgb(251, 251, 251)" />
+                                          LoadingMsg="Loading..."
+                                          SizeType="Small">
+                        <Border Width="100"
+                                Height="100"
+                                Background="rgb(251, 251, 251)" />
                     </atom:LoadingMaskHost>
-                    <atom:LoadingMaskHost IsLoading="True" SizeType="Middle"
+                    <atom:LoadingMaskHost IsLoading="True"
                                           IsShowLoadingMsg="True"
-                                          LoadingMsg="Loading...">
-                        <Border Width="100" Height="100" Background="rgb(251, 251, 251)"/>
+                                          LoadingMsg="Loading..."
+                                          SizeType="Middle">
+                        <Border Width="100"
+                                Height="100"
+                                Background="rgb(251, 251, 251)" />
                     </atom:LoadingMaskHost>
-                    <atom:LoadingMaskHost IsLoading="True" SizeType="Large"
+                    <atom:LoadingMaskHost IsLoading="True"
                                           IsShowLoadingMsg="True"
-                                          LoadingMsg="Loading...">
-                        <Border Width="100" Height="100" Background="rgb(251, 251, 251)"/>
+                                          LoadingMsg="Loading..."
+                                          SizeType="Large">
+                        <Border Width="100"
+                                Height="100"
+                                Background="rgb(251, 251, 251)" />
                     </atom:LoadingMaskHost>
                 </StackPanel>
-                <atom:LoadingMaskHost IsLoading="True" 
+                <atom:LoadingMaskHost IsLoading="True"
                                       IsShowLoadingMsg="True"
                                       LoadingMsg="Loading...">
-                    <atom:Alert Message="Alert message title"
-                                Description="Further details about the context of this alert."
-                                Type="Info"/>
+                    <atom:Alert Description="Further details about the context of this alert."
+                                Message="Alert message title"
+                                Type="Info" />
                 </atom:LoadingMaskHost>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Customized description"
-            Description="Customized description">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Customized description" Description="Customized description">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:LoadingMaskHost IsLoading="{Binding IsLoadingSwitchChecked}" 
+                <atom:LoadingMaskHost IsLoading="{Binding IsLoadingSwitchChecked}"
                                       IsShowLoadingMsg="True"
                                       LoadingMsg="Loading...">
-                    <atom:Alert Message="Alert message title"
-                                Description="Further details about the context of this alert."
-                                Type="Info"/>
+                    <atom:Alert Description="Further details about the context of this alert."
+                                Message="Alert message title"
+                                Type="Info" />
                 </atom:LoadingMaskHost>
                 <StackPanel Orientation="Horizontal" Spacing="10">
                     <TextBlock>Loading state：</TextBlock>
-                    <atom:ToggleSwitch IsChecked="{Binding IsLoadingSwitchChecked}"/>
+                    <atom:ToggleSwitch IsChecked="{Binding IsLoadingSwitchChecked}" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml
index 44ba2f8..e776e0b 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml
@@ -1,16 +1,14 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.MenuShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Simplest Usage.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.MenuShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Simplest Usage.">
             <atom:Menu>
                 <atom:MenuItem Header="_File">
                     <atom:MenuItem Header="New Text File" InputGesture="Ctrl+N" />
@@ -24,11 +22,9 @@
                 </atom:MenuItem>
                 <atom:MenuItem Header="Disabled Item" IsEnabled="False" />
             </atom:Menu>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Icon and submenu"
-            Description="With icon and submenu.">
+        <desktop:ShowCaseItem Title="Icon and submenu" Description="With icon and submenu.">
             <atom:Menu>
                 <atom:MenuItem Header="_File">
                     <atom:MenuItem Header="New Text File" InputGesture="Ctrl+N" />
@@ -44,43 +40,60 @@
                 <atom:MenuItem Header="_Edit">
                     <atom:MenuItem Header="Undo" InputGesture="Ctrl+Shift+Z" />
                     <atom:MenuSeparator />
-                    <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                    <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                    <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                    <atom:MenuItem Header="Cut"
+                                   Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                   InputGesture="Ctrl+X" />
+                    <atom:MenuItem Header="Copy"
+                                   Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                   InputGesture="Ctrl+C" />
+                    <atom:MenuItem Header="Delete"
+                                   Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                   InputGesture="Ctrl+D" />
                     <atom:MenuItem Header="Paste">
-                        <atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
-                                       Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
+                        <atom:MenuItem Header="Paste"
+                                       Icon="{atom:IconProvider Kind=FileDoneOutlined}"
+                                       InputGesture="Ctrl+P" />
                         <atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
                     </atom:MenuItem>
                 </atom:MenuItem>
             </atom:Menu>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="menu item with ToggleType"
-            Description="Renders a checkbox or radio button on a menu.">
+        <desktop:ShowCaseItem Title="menu item with ToggleType" Description="Renders a checkbox or radio button on a menu.">
             <atom:Menu>
                 <atom:MenuItem Header="_Menu A">
-                    <atom:MenuItem Header="New Text File" InputGesture="Ctrl+N" ToggleType="Radio" GroupName="Group1" />
-                    <atom:MenuItem Header="New File" InputGesture="Ctrl+Alt+N" ToggleType="Radio" GroupName="Group1" />
-                    <atom:MenuItem Header="New Window" InputGesture="Ctrl+Shift+N" ToggleType="Radio"
-                                   GroupName="Group1" />
+                    <atom:MenuItem GroupName="Group1"
+                                   Header="New Text File"
+                                   InputGesture="Ctrl+N"
+                                   ToggleType="Radio" />
+                    <atom:MenuItem GroupName="Group1"
+                                   Header="New File"
+                                   InputGesture="Ctrl+Alt+N"
+                                   ToggleType="Radio" />
+                    <atom:MenuItem GroupName="Group1"
+                                   Header="New Window"
+                                   InputGesture="Ctrl+Shift+N"
+                                   ToggleType="Radio" />
                     <atom:MenuSeparator />
-                    <atom:MenuItem Header="Save" InputGesture="Ctrl+S" ToggleType="CheckBox" />
-                    <atom:MenuItem Header="Save As..." InputGesture="Ctrl+Shift+S" ToggleType="CheckBox"
-                                   Icon="{atom:IconProvider Kind=GithubOutlined}" />
-                    <atom:MenuItem Header="Save All" InputGesture="Ctrl+K" ToggleType="CheckBox"
-                                   Icon="{atom:IconProvider Kind=CheckOutlined}" />
+                    <atom:MenuItem Header="Save"
+                                   InputGesture="Ctrl+S"
+                                   ToggleType="CheckBox" />
+                    <atom:MenuItem Header="Save As..."
+                                   Icon="{atom:IconProvider Kind=GithubOutlined}"
+                                   InputGesture="Ctrl+Shift+S"
+                                   ToggleType="CheckBox" />
+                    <atom:MenuItem Header="Save All"
+                                   Icon="{atom:IconProvider Kind=CheckOutlined}"
+                                   InputGesture="Ctrl+K"
+                                   ToggleType="CheckBox" />
                     <atom:MenuSeparator />
                     <atom:MenuItem Header="Exit" />
-                    <atom:MenuItem Header="Disabled" IsEnabled="False"/>
+                    <atom:MenuItem Header="Disabled" IsEnabled="False" />
                 </atom:MenuItem>
             </atom:Menu>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Scrollable menu"
-            Description="When there are too many menu items, up and down scroll buttons will appear.">
+        <desktop:ShowCaseItem Title="Scrollable menu" Description="When there are too many menu items, up and down scroll buttons will appear.">
             <atom:Menu>
                 <atom:MenuItem Header="_Menu">
                     <atom:MenuItem Header="Menu Item" />
@@ -121,67 +134,77 @@
                     <atom:MenuItem Header="Menu Item" />
                 </atom:MenuItem>
             </atom:Menu>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Context menu"
-            Description="Right click to bring up the context menu.">
-            <showcase:ShowCaseItem.Styles>
+        <desktop:ShowCaseItem Title="Context menu" Description="Right click to bring up the context menu.">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="Border#contextMenuContainer">
-                    <Setter Property="BorderBrush" Value="Gray"/>
-                    <Setter Property="BorderThickness" Value="1"/>
-                    <Setter Property="CornerRadius" Value="6"/>
-                    <Setter Property="Padding" Value="10"/>
-                    <Setter Property="Margin" Value="10"/>
+                    <Setter Property="BorderBrush" Value="Gray" />
+                    <Setter Property="BorderThickness" Value="1" />
+                    <Setter Property="CornerRadius" Value="6" />
+                    <Setter Property="Padding" Value="10" />
+                    <Setter Property="Margin" Value="10" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
+            </desktop:ShowCaseItem.Styles>
             <Border Name="contextMenuContainer">
                 <Border.ContextMenu>
                     <atom:ContextMenu>
-                        <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                        <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                        <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                        <atom:MenuItem Header="Cut"
+                                       Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                       InputGesture="Ctrl+X" />
+                        <atom:MenuItem Header="Copy"
+                                       Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                       InputGesture="Ctrl+C" />
+                        <atom:MenuItem Header="Delete"
+                                       Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                       InputGesture="Ctrl+D" />
                         <atom:MenuItem Header="Paste">
-                            <atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
-                                           Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
+                            <atom:MenuItem Header="Paste"
+                                           Icon="{atom:IconProvider Kind=FileDoneOutlined}"
+                                           InputGesture="Ctrl+P" />
                             <atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
                         </atom:MenuItem>
                     </atom:ContextMenu>
                 </Border.ContextMenu>
                 <TextBlock Text="Right Click to show Context Menu" />
             </Border>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Menu Flyout"
-            Description="Right Click to show Context Flyout">
-            <showcase:ShowCaseItem.Styles>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Menu Flyout" Description="Right Click to show Context Flyout">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="Border#contextFlyoutContainer">
-                    <Setter Property="BorderBrush" Value="Gray"/>
-                    <Setter Property="BorderThickness" Value="1"/>
-                    <Setter Property="CornerRadius" Value="6"/>
-                    <Setter Property="Padding" Value="10"/>
-                    <Setter Property="Margin" Value="10"/>
+                    <Setter Property="BorderBrush" Value="Gray" />
+                    <Setter Property="BorderThickness" Value="1" />
+                    <Setter Property="CornerRadius" Value="6" />
+                    <Setter Property="Padding" Value="10" />
+                    <Setter Property="Margin" Value="10" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
-        
+            </desktop:ShowCaseItem.Styles>
+
             <Border Name="contextFlyoutContainer">
                 <Border.ContextFlyout>
                     <atom:MenuFlyout>
-                        <atom:MenuItem Header="Cut" InputGesture="Ctrl+X" Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                        <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                        <atom:MenuItem Header="Delete" InputGesture="Ctrl+D" Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                        <atom:MenuItem Header="Cut"
+                                       Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                       InputGesture="Ctrl+X" />
+                        <atom:MenuItem Header="Copy"
+                                       Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                       InputGesture="Ctrl+C" />
+                        <atom:MenuItem Header="Delete"
+                                       Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                       InputGesture="Ctrl+D" />
                         <atom:MenuItem Header="Paste">
-                            <atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
-                                           Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
+                            <atom:MenuItem Header="Paste"
+                                           Icon="{atom:IconProvider Kind=FileDoneOutlined}"
+                                           InputGesture="Ctrl+P" />
                             <atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
                         </atom:MenuItem>
                     </atom:MenuFlyout>
                 </Border.ContextFlyout>
                 <TextBlock Text="Right Click to show Context Flyout" />
             </Border>
-        
-        </showcase:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml.cs
index cddefe9..0efbe47 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/MenuShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml
index c447740..ae0fdb5 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml
@@ -1,61 +1,46 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.MessageShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The simplest usage for Message.">
-            <atom:Button ButtonType="Primary"
-                         Click="ShowSimpleMessage">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.MessageShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The simplest usage for Message.">
+            <atom:Button ButtonType="Primary" Click="ShowSimpleMessage">
                 Display normal message
             </atom:Button>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Other types of message"
-            Description="Messages of success, error and warning types.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Other types of message" Description="Messages of success, error and warning types.">
             <StackPanel Orientation="Horizontal" Spacing="10">
-                <atom:Button ButtonType="Default"
-                             Click="ShowSuccessMessage">
+                <atom:Button ButtonType="Default" Click="ShowSuccessMessage">
                     Success
                 </atom:Button>
-                <atom:Button ButtonType="Default"
-                             Click="ShowInfoMessage">
+                <atom:Button ButtonType="Default" Click="ShowInfoMessage">
                     Info
                 </atom:Button>
-                <atom:Button ButtonType="Default"
-                             Click="ShowWarningMessage">
+                <atom:Button ButtonType="Default" Click="ShowWarningMessage">
                     Warning
                 </atom:Button>
-                <atom:Button ButtonType="Default"
-                             Click="ShowErrorMessage">
+                <atom:Button ButtonType="Default" Click="ShowErrorMessage">
                     Error
                 </atom:Button>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Message with loading indicator"
-            Description="Display a global loading indicator, which is dismissed by itself asynchronously.">
-            <atom:Button ButtonType="Default"
-                         Click="ShowLoadingMessage">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Message with loading indicator" Description="Display a global loading indicator, which is dismissed by itself asynchronously.">
+            <atom:Button ButtonType="Default" Click="ShowLoadingMessage">
                 Display a loading indicator
             </atom:Button>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Callback"
-            Description="The above example will display a new message when the old message is about to close.">
-            <atom:Button ButtonType="Default"
-                         Click="ShowSequentialMessage">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Callback" Description="The above example will display a new message when the old message is about to close.">
+            <atom:Button ButtonType="Default" Click="ShowSequentialMessage">
                 Display a loading indicator
             </atom:Button>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml.cs
index f0c1c9f..a09e8e5 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/MessageShowCase.axaml.cs
@@ -1,4 +1,4 @@
-using AtomUI.Controls.Message;
+using AtomUI.Controls;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/NotificationShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/NotificationShowCase.axaml
index 1ae5ec1..a97fc41 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/NotificationShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/NotificationShowCase.axaml
@@ -1,116 +1,90 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.NotificationShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The simplest usage for Notification.">
-            <atom:Button ButtonType="Primary"
-                         Click="ShowSimpleNotification">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.NotificationShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The simplest usage for Notification.">
+            <atom:Button ButtonType="Primary" Click="ShowSimpleNotification">
                 Show Notification
             </atom:Button>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Duration after which the notification box is closed"
-            Description="Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to TimeSpan.Zero, the notification box will never close automatically.">
-            <atom:Button ButtonType="Primary"
-                         Click="ShowNeverCloseNotification">
+        <desktop:ShowCaseItem Title="Duration after which the notification box is closed" Description="Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to TimeSpan.Zero, the notification box will never close automatically.">
+            <atom:Button ButtonType="Primary" Click="ShowNeverCloseNotification">
                 Open the notification box
             </atom:Button>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Notification with icon"
-            Description="A notification box with a icon at the left side.">
+        <desktop:ShowCaseItem Title="Notification with icon" Description="A notification box with a icon at the left side.">
             <StackPanel Orientation="Horizontal" Spacing="10">
-                <atom:Button ButtonType="Default"
-                             Click="ShowSuccessNotification">
+                <atom:Button ButtonType="Default" Click="ShowSuccessNotification">
                     Success
                 </atom:Button>
-                <atom:Button ButtonType="Default"
-                             Click="ShowInfoNotification">
+                <atom:Button ButtonType="Default" Click="ShowInfoNotification">
                     Info
                 </atom:Button>
-                <atom:Button ButtonType="Default"
-                             Click="ShowWarningNotification">
+                <atom:Button ButtonType="Default" Click="ShowWarningNotification">
                     Warning
                 </atom:Button>
-                <atom:Button ButtonType="Default"
-                             Click="ShowErrorNotification">
+                <atom:Button ButtonType="Default" Click="ShowErrorNotification">
                     Error
                 </atom:Button>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Placement"
-            Description="A notification box can appear from the top bottom topLeft topRight bottomLeft or bottomRight of the viewport via placement.">
+        <desktop:ShowCaseItem Title="Placement" Description="A notification box can appear from the top bottom topLeft topRight bottomLeft or bottomRight of the viewport via placement.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <StackPanel Orientation="Horizontal" Spacing="10">
-                    <atom:Button ButtonType="Primary"
-                                 Click="ShowTopNotification">
+                    <atom:Button ButtonType="Primary" Click="ShowTopNotification">
                         Top
                     </atom:Button>
-                    <atom:Button ButtonType="Primary"
-                                 Click="ShowBottomNotification">
+                    <atom:Button ButtonType="Primary" Click="ShowBottomNotification">
                         Bottom
                     </atom:Button>
                 </StackPanel>
                 <atom:Separator />
                 <StackPanel Orientation="Horizontal" Spacing="10">
-                    <atom:Button ButtonType="Primary"
-                                 Click="ShowTopLeftNotification">
+                    <atom:Button ButtonType="Primary" Click="ShowTopLeftNotification">
                         TopLeft
                     </atom:Button>
-                    <atom:Button ButtonType="Primary"
-                                 Click="ShowTopRightNotification">
+                    <atom:Button ButtonType="Primary" Click="ShowTopRightNotification">
                         TopRight
                     </atom:Button>
                 </StackPanel>
                 <atom:Separator />
                 <StackPanel Orientation="Horizontal" Spacing="10">
-                    <atom:Button ButtonType="Primary"
-                                 Click="ShowBottomLeftNotification">
+                    <atom:Button ButtonType="Primary" Click="ShowBottomLeftNotification">
                         BottomLeft
                     </atom:Button>
-                    <atom:Button ButtonType="Primary"
-                                 Click="ShowBottomRightNotification">
+                    <atom:Button ButtonType="Primary" Click="ShowBottomRightNotification">
                         BottomRight
                     </atom:Button>
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Customized Icon"
-            Description="The icon can be customized to any icon node.">
-            <atom:Button ButtonType="Primary"
-                         Click="ShowCustomIconNotification">
+        <desktop:ShowCaseItem Title="Customized Icon" Description="The icon can be customized to any icon node.">
+            <atom:Button ButtonType="Primary" Click="ShowCustomIconNotification">
                 Open the notification box
             </atom:Button>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Show with progress"
-            Description="Show progress bar for auto-closing notification.">
-            <StackPanel Spacing="10" Orientation="Vertical">
-                <atom:OptionButtonGroup ButtonStyle="Outline" Name="HoverOptionGroup">
+        <desktop:ShowCaseItem Title="Show with progress" Description="Show progress bar for auto-closing notification.">
+            <StackPanel Orientation="Vertical" Spacing="10">
+                <atom:OptionButtonGroup Name="HoverOptionGroup" ButtonStyle="Outline">
                     <atom:OptionButton IsChecked="True">Pause on hover</atom:OptionButton>
                     <atom:OptionButton>Don&apos;t pause on hover</atom:OptionButton>
                 </atom:OptionButtonGroup>
-                <atom:Button ButtonType="Primary"
-                             Click="ShowProgressNotification">
+                <atom:Button ButtonType="Primary" Click="ShowProgressNotification">
                     Show Notification
                 </atom:Button>
             </StackPanel>
 
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/NumberUpDownShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/NumberUpDownShowCase.axaml
index b65960a..f255e07 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/NumberUpDownShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/NumberUpDownShowCase.axaml
@@ -1,86 +1,107 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.NumberUpDownShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic usage"
-            Description="Numeric-only NumberUpDown.">
-            <atom:NumericUpDown Value="3"/>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Three sizes of NumberUpDown"
-            Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:NumericUpDown SizeType="Large" Value="3"/>
-                <atom:NumericUpDown SizeType="Middle" Value="3"/>
-                <atom:NumericUpDown SizeType="Small" Value="3"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Variants"
-            Description="Variants of NumberUpDown.">
-            <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:NumericUpDown Value="3" StyleVariant="Outline"/>
-                <atom:NumericUpDown Value="3" StyleVariant="Filled"/>
-                <atom:NumericUpDown Value="3" StyleVariant="Borderless"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Pre / Post tab"
-            Description="Using pre and post tabs example.">
-            <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:NumericUpDown LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
-                                    Value="3"/>
-                <atom:NumericUpDown RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400" HorizontalAlignment="Left"
-                                    Value="3"/>
-                <atom:NumericUpDown LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
-                                    Value="3"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="With clear icon"
-            Description="Input box with the remove icon, click the icon to delete everything.">
-            <atom:NumericUpDown Watermark="input with clear icon" Width="400" HorizontalAlignment="Left" IsEnableClearButton="True" />
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="prefix and suffix"
-            Description="Add a prefix or suffix icons inside input.">
-            <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:NumericUpDown Watermark="Enter your value"
-                                    InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
-                                    InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"/>
-                <atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB"/>
-                <atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Status"
-            Description="Add status to Input with status, which could be error or warning.">
-            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
-                <atom:NumericUpDown Watermark="Error" Status="Error"/>
-                <atom:NumericUpDown Watermark="Warning" Status="Warning"/>
-                <atom:NumericUpDown Watermark="Error with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Error"/>
-                <atom:NumericUpDown Watermark="Warning with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Warning"/>
-        
-                <atom:NumericUpDown Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
-                <atom:NumericUpDown Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
-        
-                <atom:NumericUpDown Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
-                <atom:NumericUpDown Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
-            </StackPanel>
-        </showcase:ShowCaseItem>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.NumberUpDownShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic usage" Description="Numeric-only NumberUpDown.">
+            <atom:NumericUpDown Value="3" />
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Three sizes of NumberUpDown" Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:NumericUpDown SizeType="Large" Value="3" />
+                <atom:NumericUpDown SizeType="Middle" Value="3" />
+                <atom:NumericUpDown SizeType="Small" Value="3" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Variants" Description="Variants of NumberUpDown.">
+            <StackPanel Orientation="Vertical" Spacing="10">
+                <atom:NumericUpDown StyleVariant="Outline" Value="3" />
+                <atom:NumericUpDown StyleVariant="Filled" Value="3" />
+                <atom:NumericUpDown StyleVariant="Borderless" Value="3" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Pre / Post tab" Description="Using pre and post tabs example.">
+            <StackPanel Orientation="Vertical" Spacing="10">
+                <atom:NumericUpDown Width="400"
+                                    HorizontalAlignment="Left"
+                                    LeftAddOn="http://"
+                                    RightAddOn=".com"
+                                    Value="3" />
+                <atom:NumericUpDown Width="400"
+                                    HorizontalAlignment="Left"
+                                    RightAddOn="{atom:IconProvider Kind=SettingOutlined}"
+                                    Value="3" />
+                <atom:NumericUpDown Width="400"
+                                    HorizontalAlignment="Left"
+                                    InnerRightContent=".com"
+                                    LeftAddOn="http://"
+                                    Value="3" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="With clear icon" Description="Input box with the remove icon, click the icon to delete everything.">
+            <atom:NumericUpDown Width="400"
+                                HorizontalAlignment="Left"
+                                IsEnableClearButton="True"
+                                Watermark="input with clear icon" />
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="prefix and suffix" Description="Add a prefix or suffix icons inside input.">
+            <StackPanel Orientation="Vertical" Spacing="10">
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=UserOutlined,
+                                                                         NormalFilledColor=#D7D7D7}"
+                                    InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined,
+                                                                          NormalFilledColor=#8C8C8C}"
+                                    Watermark="Enter your value" />
+                <atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" />
+                <atom:NumericUpDown InnerLeftContent="￥"
+                                    InnerRightContent="RMB"
+                                    IsEnabled="False" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Status" Description="Add status to Input with status, which could be error or warning.">
+            <StackPanel Margin="0,0,20,0"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:NumericUpDown Status="Error" Watermark="Error" />
+                <atom:NumericUpDown Status="Warning" Watermark="Warning" />
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Status="Error"
+                                    Watermark="Error with prefix" />
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Status="Warning"
+                                    Watermark="Warning with prefix" />
+
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Status="Error"
+                                    StyleVariant="Filled"
+                                    Watermark="Error" />
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Status="Warning"
+                                    StyleVariant="Filled"
+                                    Watermark="Warning" />
+
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Status="Error"
+                                    StyleVariant="Borderless"
+                                    Watermark="Error" />
+                <atom:NumericUpDown InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
+                                    Status="Warning"
+                                    StyleVariant="Borderless"
+                                    Watermark="Warning" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml
index 8db7760..e3597ca 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml
@@ -1,14 +1,13 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.Overview"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="1000"
-    d:DesignWidth="1920"
-    mc:Ignorable="d">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.Overview"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             d:DesignHeight="1000"
+             d:DesignWidth="1920"
+             mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
             <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
@@ -23,117 +22,116 @@
         </Style>
     </UserControl.Styles>
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <TextBlock
-            Margin="12,0"
-            FontWeight="600"
-            Text="Welcome AtomUI for Avalonia/.NET" />
+        <TextBlock Margin="12,0"
+                   FontWeight="600"
+                   Text="Welcome AtomUI for Avalonia/.NET" />
         <!-- <StackPanel Margin="20"> -->
-        <!--     <StackPanel -->
-        <!--         Margin="20" -->
-        <!--         HorizontalAlignment="Center" -->
-        <!--         Orientation="Horizontal"> -->
-        <!--         <PathIcon -->
-        <!--             Width="32" -->
-        <!--             Height="32" -->
-        <!--             Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" /> -->
-        <!--         <PathIcon -->
-        <!--             Width="10" -->
-        <!--             Height="10" -->
-        <!--             Margin="20,0" -->
-        <!--             Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" /> -->
+        <!-- <StackPanel -->
+        <!-- Margin="20" -->
+        <!-- HorizontalAlignment="Center" -->
+        <!-- Orientation="Horizontal"> -->
+        <!-- <PathIcon -->
+        <!-- Width="32" -->
+        <!-- Height="32" -->
+        <!-- Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" /> -->
+        <!-- <PathIcon -->
+        <!-- Width="10" -->
+        <!-- Height="10" -->
+        <!-- Margin="20,0" -->
+        <!-- Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" /> -->
         <!--         <Image Width="32" Height="32"> -->
         <!--             <Image.Source> -->
         <!--                 <DrawingImage> -->
         <!--                     <DrawingGroup> -->
-        <!--                         <GeometryDrawing Brush="#8B44AC" -->
-        <!--                                          Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" /> -->
-        <!--                         <GeometryDrawing Brush="#F9F9FB" -->
-        <!--                                          Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" /> -->
-        <!--                         <GeometryDrawing Brush="#F9F9FB" -->
-        <!--                                          Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" /> -->
+        <!-- <GeometryDrawing Brush="#8B44AC" -->
+        <!-- Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" /> -->
+        <!-- <GeometryDrawing Brush="#F9F9FB" -->
+        <!-- Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" /> -->
+        <!-- <GeometryDrawing Brush="#F9F9FB" -->
+        <!-- Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" /> -->
         <!--                     </DrawingGroup> -->
         <!--                 </DrawingImage> -->
         <!--             </Image.Source> -->
         <!--         </Image> -->
         <!--     </StackPanel> -->
-        <!--     <TextBlock -->
-        <!--         HorizontalAlignment="Center" -->
-        <!--         Classes="H1" -->
-        <!--         Text="Semi Avalonia" -->
-        <!--         Theme="{DynamicResource TitleTextBlock}" /> -->
-        <!--     <TextBlock -->
-        <!--         MaxWidth="600" -->
-        <!--         Margin="0,20,0,0" -->
-        <!--         HorizontalAlignment="Center" -->
-        <!--         Classes="Secondary" -->
-        <!--         Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products." -->
-        <!--         TextWrapping="Wrap" /> -->
-        <!--     <StackPanel -->
-        <!--         Margin="0,10,0,0" -->
-        <!--         HorizontalAlignment="Center" -->
-        <!--         Orientation="Horizontal"> -->
-        <!--         <TextBlock -->
-        <!--             Margin="12,0" -->
-        <!--             FontWeight="600" -->
-        <!--             Text="Modern" /> -->
-        <!--         <TextBlock -->
-        <!--             Margin="12,0" -->
-        <!--             FontWeight="600" -->
-        <!--             Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}" -->
-        <!--             Text="Flexible" /> -->
-        <!--         <TextBlock -->
-        <!--             Margin="12,0" -->
-        <!--             FontWeight="600" -->
-        <!--             Text="Simple" /> -->
+        <!-- <TextBlock -->
+        <!-- HorizontalAlignment="Center" -->
+        <!-- Classes="H1" -->
+        <!-- Text="Semi Avalonia" -->
+        <!-- Theme="{DynamicResource TitleTextBlock}" /> -->
+        <!-- <TextBlock -->
+        <!-- MaxWidth="600" -->
+        <!-- Margin="0,20,0,0" -->
+        <!-- HorizontalAlignment="Center" -->
+        <!-- Classes="Secondary" -->
+        <!-- Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products." -->
+        <!-- TextWrapping="Wrap" /> -->
+        <!-- <StackPanel -->
+        <!-- Margin="0,10,0,0" -->
+        <!-- HorizontalAlignment="Center" -->
+        <!-- Orientation="Horizontal"> -->
+        <!-- <TextBlock -->
+        <!-- Margin="12,0" -->
+        <!-- FontWeight="600" -->
+        <!-- Text="Modern" /> -->
+        <!-- <TextBlock -->
+        <!-- Margin="12,0" -->
+        <!-- FontWeight="600" -->
+        <!-- Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}" -->
+        <!-- Text="Flexible" /> -->
+        <!-- <TextBlock -->
+        <!-- Margin="12,0" -->
+        <!-- FontWeight="600" -->
+        <!-- Text="Simple" /> -->
         <!--     </StackPanel> -->
         <!--     <StackPanel HorizontalAlignment="Center"> -->
         <!--         <StackPanel> -->
         <!--             <StackPanel Orientation="Horizontal"> -->
         <!--                 <StackPanel Margin="16,0"> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         Classes="Primary" -->
-        <!--                         Content="Primary" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Theme="{DynamicResource SolidButton}" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         Classes="Secondary" -->
-        <!--                         Content="Secondary" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Theme="{DynamicResource SolidButton}" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         Classes="Tertiary" -->
-        <!--                         Content="Tertiary" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Theme="{DynamicResource SolidButton}" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         Classes="Success" -->
-        <!--                         Content="Success" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Theme="{DynamicResource SolidButton}" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         Classes="Warning" -->
-        <!--                         Content="Warning" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Theme="{DynamicResource SolidButton}" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         Classes="Danger" -->
-        <!--                         Content="Danger" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Theme="{DynamicResource SolidButton}" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- Classes="Primary" -->
+        <!-- Content="Primary" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Theme="{DynamicResource SolidButton}" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- Classes="Secondary" -->
+        <!-- Content="Secondary" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Theme="{DynamicResource SolidButton}" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- Classes="Tertiary" -->
+        <!-- Content="Tertiary" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Theme="{DynamicResource SolidButton}" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- Classes="Success" -->
+        <!-- Content="Success" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Theme="{DynamicResource SolidButton}" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- Classes="Warning" -->
+        <!-- Content="Warning" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Theme="{DynamicResource SolidButton}" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- Classes="Danger" -->
+        <!-- Content="Danger" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Theme="{DynamicResource SolidButton}" /> -->
         <!--                 </StackPanel> -->
         <!--                 <Calendar Margin="16,0" /> -->
         <!--                 <StackPanel Margin="16,0"> -->
-        <!--                     <TextBox -->
-        <!--                         Width="300" -->
-        <!--                         Margin="0,12" -->
-        <!--                         InnerLeftContent="https://" -->
-        <!--                         InnerRightContent=".com" /> -->
+        <!-- <TextBox -->
+        <!-- Width="300" -->
+        <!-- Margin="0,12" -->
+        <!-- InnerLeftContent="https://" -->
+        <!-- InnerRightContent=".com" /> -->
         <!--                     <DatePicker Width="300" Margin="0,12" /> -->
         <!--                     <CalendarDatePicker Width="300" Margin="0,12" /> -->
         <!--                     <NumericUpDown Width="300" Margin="0,12" /> -->
@@ -153,18 +151,18 @@
         <!--                         <CheckBox Content="Windows" IsChecked="True" /> -->
         <!--                         <CheckBox Content="macOS" IsChecked="True" /> -->
         <!--                         <CheckBox Content="Linux" IsChecked="True" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="iOS" -->
-        <!--                             IsChecked="{x:Null}" -->
-        <!--                             IsThreeState="True" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="Android" -->
-        <!--                             IsChecked="{x:Null}" -->
-        <!--                             IsThreeState="True" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="Wasm" -->
-        <!--                             IsChecked="{x:Null}" -->
-        <!--                             IsThreeState="True" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="iOS" -->
+        <!-- IsChecked="{x:Null}" -->
+        <!-- IsThreeState="True" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="Android" -->
+        <!-- IsChecked="{x:Null}" -->
+        <!-- IsThreeState="True" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="Wasm" -->
+        <!-- IsChecked="{x:Null}" -->
+        <!-- IsThreeState="True" /> -->
         <!--                     </UniformGrid> -->
         <!--                     <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
         <!--                         <UniformGrid.Styles> -->
@@ -172,101 +170,101 @@
         <!--                                 <Setter Property="Margin" Value="4" /> -->
         <!--                             </Style> -->
         <!--                         </UniformGrid.Styles> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="Windows" -->
-        <!--                             IsChecked="True" -->
-        <!--                             Theme="{DynamicResource CardCheckBox}" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="macOS" -->
-        <!--                             IsChecked="True" -->
-        <!--                             Theme="{DynamicResource CardCheckBox}" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="Linux" -->
-        <!--                             IsChecked="True" -->
-        <!--                             Theme="{DynamicResource CardCheckBox}" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="iOS" -->
-        <!--                             IsChecked="{x:Null}" -->
-        <!--                             IsThreeState="True" -->
-        <!--                             Theme="{DynamicResource CardCheckBox}" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="Android" -->
-        <!--                             IsChecked="{x:Null}" -->
-        <!--                             IsThreeState="True" -->
-        <!--                             Theme="{DynamicResource CardCheckBox}" /> -->
-        <!--                         <CheckBox -->
-        <!--                             Content="Wasm" -->
-        <!--                             IsChecked="{x:Null}" -->
-        <!--                             IsThreeState="True" -->
-        <!--                             Theme="{DynamicResource CardCheckBox}" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="Windows" -->
+        <!-- IsChecked="True" -->
+        <!-- Theme="{DynamicResource CardCheckBox}" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="macOS" -->
+        <!-- IsChecked="True" -->
+        <!-- Theme="{DynamicResource CardCheckBox}" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="Linux" -->
+        <!-- IsChecked="True" -->
+        <!-- Theme="{DynamicResource CardCheckBox}" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="iOS" -->
+        <!-- IsChecked="{x:Null}" -->
+        <!-- IsThreeState="True" -->
+        <!-- Theme="{DynamicResource CardCheckBox}" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="Android" -->
+        <!-- IsChecked="{x:Null}" -->
+        <!-- IsThreeState="True" -->
+        <!-- Theme="{DynamicResource CardCheckBox}" /> -->
+        <!-- <CheckBox -->
+        <!-- Content="Wasm" -->
+        <!-- IsChecked="{x:Null}" -->
+        <!-- IsThreeState="True" -->
+        <!-- Theme="{DynamicResource CardCheckBox}" /> -->
         <!--                     </UniformGrid> -->
         <!--                 </StackPanel> -->
-        <!-- -->
+        <!--  -->
         <!--             </StackPanel> -->
         <!--             <StackPanel Orientation="Horizontal"> -->
         <!--                 <StackPanel Margin="16,0"> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Classes="Primary" -->
-        <!--                         Content="Primary" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Classes="Secondary" -->
-        <!--                         Content="Secondary" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Classes="Tertiary" -->
-        <!--                         Content="Tertiary" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Classes="Success" -->
-        <!--                         Content="Success" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Classes="Warning" -->
-        <!--                         Content="Warning" /> -->
-        <!--                     <Button -->
-        <!--                         Margin="0,8" -->
-        <!--                         HorizontalAlignment="Stretch" -->
-        <!--                         Classes="Danger" -->
-        <!--                         Content="Danger" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Classes="Primary" -->
+        <!-- Content="Primary" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Classes="Secondary" -->
+        <!-- Content="Secondary" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Classes="Tertiary" -->
+        <!-- Content="Tertiary" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Classes="Success" -->
+        <!-- Content="Success" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Classes="Warning" -->
+        <!-- Content="Warning" /> -->
+        <!-- <Button -->
+        <!-- Margin="0,8" -->
+        <!-- HorizontalAlignment="Stretch" -->
+        <!-- Classes="Danger" -->
+        <!-- Content="Danger" /> -->
         <!--                 </StackPanel> -->
-        <!--                 <ColorView -->
-        <!--                     Name="color" -->
-        <!--                     VerticalAlignment="Top" -->
-        <!--                     Palette="{DynamicResource SemiColorPalette}" -->
-        <!--                     SelectedIndex="2" -->
-        <!--                     Color="#8B44AC" /> -->
+        <!-- <ColorView -->
+        <!-- Name="color" -->
+        <!-- VerticalAlignment="Top" -->
+        <!-- Palette="{DynamicResource SemiColorPalette}" -->
+        <!-- SelectedIndex="2" -->
+        <!-- Color="#8B44AC" /> -->
         <!--                 <StackPanel Width="300" Margin="8"> -->
         <!--                     <StackPanel Orientation="Horizontal"> -->
-        <!--                         <Slider -->
-        <!--                             Name="slider" -->
-        <!--                             Width="200" -->
-        <!--                             Margin="16" -->
-        <!--                             Maximum="100" -->
-        <!--                             Minimum="0" /> -->
+        <!-- <Slider -->
+        <!-- Name="slider" -->
+        <!-- Width="200" -->
+        <!-- Margin="16" -->
+        <!-- Maximum="100" -->
+        <!-- Minimum="0" /> -->
         <!--                         <ToggleSwitch Name="three" IsChecked="True" /> -->
         <!--                     </StackPanel> -->
         <!--                     <UniformGrid Columns="2"> -->
-        <!--                         <ProgressBar -->
-        <!--                             Width="100" -->
-        <!--                             MinWidth="100" -->
-        <!--                             Margin="0,16" -->
-        <!--                             IsIndeterminate="{Binding #three.IsChecked}" -->
-        <!--                             ShowProgressText="True" -->
-        <!--                             Value="{Binding #slider.Value}" /> -->
-        <!--                         <ProgressBar -->
-        <!--                             Width="100" -->
-        <!--                             Height="100" -->
-        <!--                             IsIndeterminate="{Binding #three.IsChecked}" -->
-        <!--                             ShowProgressText="True" -->
-        <!--                             Theme="{DynamicResource ProgressRing}" -->
-        <!--                             Value="{Binding #slider.Value}" /> -->
+        <!-- <ProgressBar -->
+        <!-- Width="100" -->
+        <!-- MinWidth="100" -->
+        <!-- Margin="0,16" -->
+        <!-- IsIndeterminate="{Binding #three.IsChecked}" -->
+        <!-- ShowProgressText="True" -->
+        <!-- Value="{Binding #slider.Value}" /> -->
+        <!-- <ProgressBar -->
+        <!-- Width="100" -->
+        <!-- Height="100" -->
+        <!-- IsIndeterminate="{Binding #three.IsChecked}" -->
+        <!-- ShowProgressText="True" -->
+        <!-- Theme="{DynamicResource ProgressRing}" -->
+        <!-- Value="{Binding #slider.Value}" /> -->
         <!--                     </UniformGrid> -->
         <!--                     <TabStrip Margin="0,8"> -->
         <!--                         <TabStripItem Content="Tab 1" /> -->
@@ -291,10 +289,10 @@
         <!--                         </MenuItem> -->
         <!--                         <MenuItem Header="Menu 3" /> -->
         <!--                     </Menu> -->
-        <!-- -->
+        <!--  -->
         <!--                 </StackPanel> -->
         <!--                 <StackPanel Margin="8"> -->
-        <!-- -->
+        <!--  -->
         <!--                     <UniformGrid HorizontalAlignment="Center" Columns="3"> -->
         <!--                         <UniformGrid.Styles> -->
         <!--                             <Style Selector="RadioButton"> -->
@@ -313,10 +311,10 @@
         <!--                                 <Setter Property="HorizontalAlignment" Value="Center" /> -->
         <!--                             </Style> -->
         <!--                         </UniformGrid.Styles> -->
-        <!--                         <RadioButton -->
-        <!--                             Content="Avalonia" -->
-        <!--                             IsChecked="True" -->
-        <!--                             Theme="{DynamicResource CardRadioButton}" /> -->
+        <!-- <RadioButton -->
+        <!-- Content="Avalonia" -->
+        <!-- IsChecked="True" -->
+        <!-- Theme="{DynamicResource CardRadioButton}" /> -->
         <!--                         <RadioButton Content="WPF" Theme="{DynamicResource CardRadioButton}" /> -->
         <!--                         <RadioButton Content="Xamarin" Theme="{DynamicResource CardRadioButton}" /> -->
         <!--                     </UniformGrid> -->
@@ -350,25 +348,25 @@
         <!--                 </StackPanel> -->
         <!--             </StackPanel> -->
         <!--         </StackPanel> -->
-        <!--         <TextBlock -->
-        <!--             Margin="0,32,0,16" -->
-        <!--             Classes="H5" -->
-        <!--             Text="Start to install" -->
-        <!--             Theme="{DynamicResource TitleTextBlock}" /> -->
+        <!-- <TextBlock -->
+        <!-- Margin="0,32,0,16" -->
+        <!-- Classes="H5" -->
+        <!-- Text="Start to install" -->
+        <!-- Theme="{DynamicResource TitleTextBlock}" /> -->
         <!--         <TabControl Padding="8"> -->
         <!--             <TabItem Header="Main"> -->
         <!--                 <StackPanel> -->
         <!--                     <TextBlock Text="Install via nuget: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock FontFamily="Consolas" -->
-        <!--                                              Text="{Binding $parent[local:Overview].MainInstall}" /> -->
+        <!-- <SelectableTextBlock FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].MainInstall}" /> -->
         <!--                     </Border> -->
         <!--                     <TextBlock Text="Reference styles: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock -->
-        <!--                             FontFamily="Consolas" -->
-        <!--                             Text="{Binding $parent[local:Overview].MainStyle}" -->
-        <!--                             TextWrapping="Wrap" /> -->
+        <!-- <SelectableTextBlock -->
+        <!-- FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].MainStyle}" -->
+        <!-- TextWrapping="Wrap" /> -->
         <!--                     </Border> -->
         <!--                 </StackPanel> -->
         <!--             </TabItem> -->
@@ -376,15 +374,15 @@
         <!--                 <StackPanel> -->
         <!--                     <TextBlock Text="Install via nuget: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock FontFamily="Consolas" -->
-        <!--                                              Text="{Binding $parent[local:Overview].ColorPickerInstall}" /> -->
+        <!-- <SelectableTextBlock FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].ColorPickerInstall}" /> -->
         <!--                     </Border> -->
         <!--                     <TextBlock Text="Reference styles: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock -->
-        <!--                             FontFamily="Consolas" -->
-        <!--                             Text="{Binding $parent[local:Overview].ColorPickerStyle}" -->
-        <!--                             TextWrapping="Wrap" /> -->
+        <!-- <SelectableTextBlock -->
+        <!-- FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].ColorPickerStyle}" -->
+        <!-- TextWrapping="Wrap" /> -->
         <!--                     </Border> -->
         <!--                 </StackPanel> -->
         <!--             </TabItem> -->
@@ -392,15 +390,15 @@
         <!--                 <StackPanel> -->
         <!--                     <TextBlock Text="Install via nuget: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock FontFamily="Consolas" -->
-        <!--                                              Text="{Binding $parent[local:Overview].DataGridInstall}" /> -->
+        <!-- <SelectableTextBlock FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].DataGridInstall}" /> -->
         <!--                     </Border> -->
         <!--                     <TextBlock Text="Reference styles: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock -->
-        <!--                             FontFamily="Consolas" -->
-        <!--                             Text="{Binding $parent[local:Overview].DataGridStyle}" -->
-        <!--                             TextWrapping="Wrap" /> -->
+        <!-- <SelectableTextBlock -->
+        <!-- FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].DataGridStyle}" -->
+        <!-- TextWrapping="Wrap" /> -->
         <!--                     </Border> -->
         <!--                 </StackPanel> -->
         <!--             </TabItem> -->
@@ -408,15 +406,15 @@
         <!--                 <StackPanel> -->
         <!--                     <TextBlock Text="Install via nuget: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock FontFamily="Consolas" -->
-        <!--                                              Text="{Binding $parent[local:Overview].TreeDataGridInstall}" /> -->
+        <!-- <SelectableTextBlock FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].TreeDataGridInstall}" /> -->
         <!--                     </Border> -->
         <!--                     <TextBlock Text="Reference styles: " /> -->
         <!--                     <Border Margin="0,16" Classes="CodeBlock"> -->
-        <!--                         <SelectableTextBlock -->
-        <!--                             FontFamily="Consolas" -->
-        <!--                             Text="{Binding $parent[local:Overview].TreeDataGridStyle}" -->
-        <!--                             TextWrapping="Wrap" /> -->
+        <!-- <SelectableTextBlock -->
+        <!-- FontFamily="Consolas" -->
+        <!-- Text="{Binding $parent[local:Overview].TreeDataGridStyle}" -->
+        <!-- TextWrapping="Wrap" /> -->
         <!--                     </Border> -->
         <!--                 </StackPanel> -->
         <!--             </TabItem> -->
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml.cs
index af7f217..0acfd98 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/Overview.axaml.cs
@@ -1,8 +1,4 @@
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
-using Avalonia.Styling;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml
index c126bcc..1907056 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.PaginationShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-     
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PaginationShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml.cs
index a37dea7..5b324cc 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/PaginationShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/PaletteShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/PaletteShowCase.axaml
index 758e809..fe1ad49 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/PaletteShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/PaletteShowCase.axaml
@@ -1,16 +1,15 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.PaletteShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:AtomUI.Demo.Desktop.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    x:CompileBindings="True"
-    x:DataType="viewModels:PaletteDemoViewModel"
-    mc:Ignorable="d">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PaletteShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="clr-namespace:AtomUI.Demo.Desktop.Controls"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:viewModels="clr-namespace:AtomUI.Demo.Desktop.ViewModels"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             x:CompileBindings="True"
+             x:DataType="viewModels:PaletteDemoViewModel"
+             mc:Ignorable="d">
     <Design.DataContext>
         <viewModels:PaletteDemoViewModel />
     </Design.DataContext>
@@ -30,13 +29,12 @@
                 <ItemsControl ItemsSource="{Binding LightLists}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <StackPanel Orientation="Vertical"></StackPanel>
+                            <StackPanel Orientation="Vertical" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate x:DataType="viewModels:ColorGroupViewModel">
-                            <controls:ColorListGroupControl GroupData="{Binding}"
-                                                            Margin="0, 0, 0, 10" />
+                            <controls:ColorListGroupControl Margin="0,0,0,10" GroupData="{Binding}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
@@ -48,13 +46,12 @@
                     <ItemsControl ItemsSource="{Binding DarkLists}">
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                                <StackPanel Orientation="Vertical"></StackPanel>
+                                <StackPanel Orientation="Vertical" />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                         <ItemsControl.ItemTemplate>
                             <DataTemplate x:DataType="viewModels:ColorGroupViewModel">
-                                <controls:ColorListGroupControl GroupData="{Binding}"
-                                                                Margin="0, 0, 0, 10" />
+                                <controls:ColorListGroupControl Margin="0,0,0,10" GroupData="{Binding}" />
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/PopupConfirmShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/PopupConfirmShowCase.axaml
index e7e5c96..b9add2f 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/PopupConfirmShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/PopupConfirmShowCase.axaml
@@ -1,38 +1,29 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.PopupConfirmShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic usage"
-            Description="The basic example supports the title and description props of confirmation.">
-            <atom:PopupConfirm 
-                Title="Delete the task"
-                ConfirmContent="Are you sure to delete this task?"
-                OkText="Ok"
-                CancelText="Cancel">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.PopupConfirmShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic usage" Description="The basic example supports the title and description props of confirmation.">
+            <atom:PopupConfirm Title="Delete the task"
+                               CancelText="Cancel"
+                               ConfirmContent="Are you sure to delete this task?"
+                               OkText="Ok">
                 <atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
             </atom:PopupConfirm>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Locale text"
-            Description="Set okText and cancelText props to customize the button's labels.">
-            <atom:PopupConfirm 
-                Title="Delete the task"
-                ConfirmContent="Are you sure to delete this task?">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Locale text" Description="Set okText and cancelText props to customize the button's labels.">
+            <atom:PopupConfirm Title="Delete the task" ConfirmContent="Are you sure to delete this task?">
                 <atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
             </atom:PopupConfirm>
-        </showcase:ShowCaseItem>
-        
-         <showcase:ShowCaseItem
-            Title="Placement"
-            Description="There are 12 placement options available.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Placement" Description="There are 12 placement options available.">
             <Grid>
                 <Grid.Styles>
                     <Style Selector="atom|Button">
@@ -41,143 +32,164 @@
                     </Style>
                 </Grid.Styles>
                 <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="1" Grid.Column="0" Trigger="Click" Placement="LeftEdgeAlignedTop"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="1"
+                                   Grid.Column="0"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="LeftEdgeAlignedTop"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">LT</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="2" Grid.Column="0" Trigger="Click" Placement="Left"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="2"
+                                   Grid.Column="0"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="Left"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">Left</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="3" Grid.Column="0" Trigger="Click" Placement="LeftEdgeAlignedBottom"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="3"
+                                   Grid.Column="0"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="LeftEdgeAlignedBottom"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">LB</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="0" Grid.Column="1" Trigger="Click" Placement="TopEdgeAlignedLeft"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="0"
+                                   Grid.Column="1"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="TopEdgeAlignedLeft"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">TL</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="0" Grid.Column="2" Trigger="Click" Placement="Top"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="0"
+                                   Grid.Column="2"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="Top"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">Top</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="0" Grid.Column="3" Trigger="Click" Placement="TopEdgeAlignedRight"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="0"
+                                   Grid.Column="3"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="TopEdgeAlignedRight"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">TR</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="1" Grid.Column="4" Trigger="Click" Placement="RightEdgeAlignedTop"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="1"
+                                   Grid.Column="4"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="RightEdgeAlignedTop"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">RT</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="2" Grid.Column="4" Trigger="Click" Placement="Right"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="2"
+                                   Grid.Column="4"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="Right"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">Right</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="3" Grid.Column="4" Trigger="Click" Placement="RightEdgeAlignedBottom"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="3"
+                                   Grid.Column="4"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="RightEdgeAlignedBottom"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">RB</atom:Button>
                 </atom:PopupConfirm>
-                      
-                <atom:PopupConfirm 
-                    Grid.Row="4" Grid.Column="1" Trigger="Click" Placement="BottomEdgeAlignedLeft"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="4"
+                                   Grid.Column="1"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="BottomEdgeAlignedLeft"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">BL</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="4" Grid.Column="2" Trigger="Click" Placement="Bottom"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="4"
+                                   Grid.Column="2"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="Bottom"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">Bottom</atom:Button>
                 </atom:PopupConfirm>
-                
-                <atom:PopupConfirm 
-                    Grid.Row="4" Grid.Column="3" Trigger="Click" Placement="BottomEdgeAlignedRight"
-                    Title="Delete the task"
-                    ConfirmContent="Are you sure to delete this task?"
-                    OkText="Ok"
-                    CancelText="Cancel">
+
+                <atom:PopupConfirm Title="Delete the task"
+                                   Grid.Row="4"
+                                   Grid.Column="3"
+                                   CancelText="Cancel"
+                                   ConfirmContent="Are you sure to delete this task?"
+                                   OkText="Ok"
+                                   Placement="BottomEdgeAlignedRight"
+                                   Trigger="Click">
                     <atom:Button ButtonType="Default">BR</atom:Button>
                 </atom:PopupConfirm>
-        
+
             </Grid>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Customize icon"
-            Description="Set icon props to customize the icon.">
-            <atom:PopupConfirm 
-                Title="Delete the task"
-                ConfirmContent="Are you sure to delete this task?"
-                Icon="{atom:IconProvider Kind=QuestionCircleOutlined}"
-                ConfirmStatus="Error"
-                OkText="Ok"
-                CancelText="Cancel">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Customize icon" Description="Set icon props to customize the icon.">
+            <atom:PopupConfirm Title="Delete the task"
+                               CancelText="Cancel"
+                               ConfirmContent="Are you sure to delete this task?"
+                               ConfirmStatus="Error"
+                               Icon="{atom:IconProvider Kind=QuestionCircleOutlined}"
+                               OkText="Ok">
                 <atom:Button ButtonType="Default" IsDanger="True">Delete</atom:Button>
             </atom:PopupConfirm>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml
index 52ded4d..0f9133d 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml
@@ -1,339 +1,750 @@
-<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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCasePanel.Styles>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ProgressBarShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCasePanel.Styles>
             <Style Selector="atom|CircleProgress">
-                <Setter Property="Margin" Value="5"></Setter>
+                <Setter Property="Margin" Value="5" />
             </Style>
             <Style Selector="atom|DashboardProgress">
-                <Setter Property="Margin" Value="5"></Setter>
+                <Setter Property="Margin" Value="5" />
             </Style>
             <Style Selector="#CircleWithStep atom|StepsProgressBar">
-                <Setter Property="Margin" Value="5"></Setter>
+                <Setter Property="Margin" Value="5" />
             </Style>
-        </showcase:ShowCasePanel.Styles>
-        <showcase:ShowCaseItem
-            Title="Progress bar"
-            Description="A standard progress bar.">
+        </desktop:ShowCasePanel.Styles>
+        <desktop:ShowCaseItem Title="Progress bar" Description="A standard progress bar.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ProgressBar Value="30" Minimum="0" Maximum="100" />
-                <atom:ProgressBar Value="50" Minimum="0" Maximum="100" />
-                <atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" />
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" />
-                <atom:ProgressBar Value="50" Minimum="0" Maximum="100" ShowProgressInfo="False" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Value="30" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Value="50" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Status="Exception"
+                                  Value="70" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  ShowProgressInfo="False"
+                                  Value="50" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Circular progress bar"
-            Description="A circular progress bar.">
+        </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" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     Value="75" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     Status="Exception"
+                                     Value="70" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     Value="100" />
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Mini size progress bar"
-            Description="Appropriate for a narrow area.">
-            <WrapPanel Orientation="Horizontal" Width="180" HorizontalAlignment="Left">
-                <atom:ProgressBar Value="30" Minimum="0" Maximum="100" SizeType="Middle" />
-                <atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Middle" />
-                <atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" SizeType="Middle" />
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" SizeType="Middle" />
-                <atom:ProgressBar Value="50" Minimum="0" Maximum="100" ShowProgressInfo="False" SizeType="Middle" />
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Mini size progress bar" Description="Appropriate for a narrow area.">
+            <WrapPanel Width="180"
+                       HorizontalAlignment="Left"
+                       Orientation="Horizontal">
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  SizeType="Middle"
+                                  Value="30" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  SizeType="Middle"
+                                  Value="50" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  SizeType="Middle"
+                                  Status="Exception"
+                                  Value="70" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  SizeType="Middle"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  ShowProgressInfo="False"
+                                  SizeType="Middle"
+                                  Value="50" />
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="A smaller circular progress bar."
-            Description="A smaller circular progress bar.">
+        </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" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     SizeType="Middle"
+                                     Value="75" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     SizeType="Middle"
+                                     Status="Exception"
+                                     Value="70" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     SizeType="Middle"
+                                     Value="100" />
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Dynamic"
-            Description="A dynamic progress bar is better.">
+        </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"/>
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Value="{Binding ProgressValue}" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     Value="{Binding ProgressValue}" />
                 <StackPanel Orientation="Horizontal" Spacing="10">
-                    <atom:Button SizeType="Small" Command="{Binding SubProgressValue}">Sub</atom:Button>
-                    <atom:Button SizeType="Small" Command="{Binding AddProgressValue}">Add</atom:Button>
+                    <atom:Button Command="{Binding SubProgressValue}" SizeType="Small">Sub</atom:Button>
+                    <atom:Button Command="{Binding AddProgressValue}" SizeType="Small">Add</atom:Button>
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Custom text format"
-            Description="You can set a custom text by setting the format prop.">
+        </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" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     ProgressTextFormat="\{0\} Days"
+                                     Value="75" />
+                <atom:CircleProgress Maximum="100"
+                                     Minimum="0"
+                                     Value="100" />
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Dashboard"
-            Description="By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Dashboard" Description="By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.">
             <WrapPanel Orientation="Horizontal">
-                <atom:DashboardProgress Value="75" Minimum="0" Maximum="100" DashboardGapPosition="Left" />
-                <atom:DashboardProgress Value="60" Minimum="0" Maximum="100" DashboardGapPosition="Top" />
-                <atom:DashboardProgress Value="75" Minimum="0" Maximum="100" DashboardGapPosition="Right"
-                                        GapDegree="40" />
-                <atom:DashboardProgress Value="100" Minimum="0" Maximum="100" DashboardGapPosition="Bottom"
-                                        GapDegree="40" />
+                <atom:DashboardProgress DashboardGapPosition="Left"
+                                        Maximum="100"
+                                        Minimum="0"
+                                        Value="75" />
+                <atom:DashboardProgress DashboardGapPosition="Top"
+                                        Maximum="100"
+                                        Minimum="0"
+                                        Value="60" />
+                <atom:DashboardProgress DashboardGapPosition="Right"
+                                        GapDegree="40"
+                                        Maximum="100"
+                                        Minimum="0"
+                                        Value="75" />
+                <atom:DashboardProgress DashboardGapPosition="Bottom"
+                                        GapDegree="40"
+                                        Maximum="100"
+                                        Minimum="0"
+                                        Value="100" />
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Progress bar with success segment"
-            Description="Show several parts of progress with different status.">
+        </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" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  SuccessThreshold="30"
+                                  Value="60" />
                 <WrapPanel Orientation="Horizontal">
-                    <atom:CircleProgress Value="60" Minimum="0" Maximum="100" SuccessThreshold="30" />
-                    <atom:DashboardProgress Value="60" Minimum="0" Maximum="100" SuccessThreshold="30"
-                                            SuccessThresholdBrush="Chocolate" />
+                    <atom:CircleProgress Maximum="100"
+                                         Minimum="0"
+                                         SuccessThreshold="30"
+                                         Value="60" />
+                    <atom:DashboardProgress Maximum="100"
+                                            Minimum="0"
+                                            SuccessThreshold="30"
+                                            SuccessThresholdBrush="Chocolate"
+                                            Value="60" />
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        
-        <showcase:ShowCaseItem
-            Title="Stroke Linecap"
-            Description="By setting strokeLinecap='butt', you can change the linecaps from round to butt, see stroke-linecap for more information.">
+        </desktop:ShowCaseItem>
+
+
+        <desktop:ShowCaseItem Title="Stroke Linecap" Description="By setting strokeLinecap='butt', you can change the linecaps from round to butt, see stroke-linecap for more information.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ProgressBar Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  StrokeLineCap="Square"
+                                  Value="75" />
                 <WrapPanel Orientation="Horizontal">
-                    <atom:CircleProgress Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
-                    <atom:DashboardProgress Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
+                    <atom:CircleProgress Maximum="100"
+                                         Minimum="0"
+                                         StrokeLineCap="Square"
+                                         Value="75" />
+                    <atom:DashboardProgress Maximum="100"
+                                            Minimum="0"
+                                            StrokeLineCap="Square"
+                                            Value="75" />
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Custom line gradient"
-            Description="Gradient encapsulation, circle and dashboard will ignore strokeLinecap when setting gradient.">
+        </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" />
+                <atom:ProgressBar IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  Value="99" />
+                <atom:ProgressBar IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  Status="Active"
+                                  Value="50" />
                 <WrapPanel Orientation="Horizontal">
-                    <atom:CircleProgress Value="90" Minimum="0" Maximum="100"
-                                         IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
-                    <atom:CircleProgress Value="100" Minimum="0" Maximum="100"
-                                         IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
-                    <atom:CircleProgress Value="93" Minimum="0" Maximum="100"
-                                         IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}" />
+                    <atom:CircleProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         Value="90" />
+                    <atom:CircleProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         Value="100" />
+                    <atom:CircleProgress IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         Value="93" />
                 </WrapPanel>
                 <WrapPanel Orientation="Horizontal">
-                    <atom:DashboardProgress Value="90" Minimum="0" Maximum="100" StrokeLineCap="Square"
-                                            IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
-                    <atom:DashboardProgress Value="100" Minimum="0" Maximum="100" StrokeLineCap="Square"
-                                            IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
-                    <atom:DashboardProgress Value="93" Minimum="0" Maximum="100" StrokeLineCap="Square"
-                                            IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}" />
+                    <atom:DashboardProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            StrokeLineCap="Square"
+                                            Value="90" />
+                    <atom:DashboardProgress IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            StrokeLineCap="Square"
+                                            Value="100" />
+                    <atom:DashboardProgress IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            StrokeLineCap="Square"
+                                            Value="93" />
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Progress bar with steps"
-            Description="A progress bar with steps.">
+        </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}" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Steps="3"
+                                       Value="50" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Steps="5"
+                                       Value="30" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       SizeType="Middle"
+                                       Steps="5"
+                                       Value="100" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       SizeType="Small"
+                                       Steps="8"
+                                       Value="80" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Steps="5"
+                                       StepsStrokeBrush="{Binding StepsChunkBrushes}"
+                                       Value="60" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Circular progress bar whit steps"
-            Description="A circular progress bar that support steps and color segments, default gap is 2px.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Circular progress bar whit steps" Description="A circular progress bar that support steps and color segments, default gap is 2px.">
             <StackPanel Orientation="Vertical" Spacing="5">
                 <WrapPanel Orientation="Horizontal">
-                    <atom:CircleProgress Value="50" Minimum="0" Maximum="100" StepCount="4" StepGap="8"
-                                         IndicatorThickness="20" />
-                    <atom:CircleProgress Value="100" Minimum="0" Maximum="100" StepCount="10" StepGap="8"
-                                         IndicatorThickness="20" />
-                    <atom:CircleProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
-                                         IndicatorThickness="20" Status="Exception" />
-                    <atom:CircleProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
-                                         IndicatorThickness="20"
-                                         SuccessThreshold="30" />
+                    <atom:CircleProgress IndicatorThickness="20"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         StepCount="4"
+                                         StepGap="8"
+                                         Value="50" />
+                    <atom:CircleProgress IndicatorThickness="20"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         StepCount="10"
+                                         StepGap="8"
+                                         Value="100" />
+                    <atom:CircleProgress IndicatorThickness="20"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         Status="Exception"
+                                         StepCount="8"
+                                         StepGap="10"
+                                         Value="77" />
+                    <atom:CircleProgress IndicatorThickness="20"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         StepCount="8"
+                                         StepGap="10"
+                                         SuccessThreshold="30"
+                                         Value="77" />
                 </WrapPanel>
                 <WrapPanel Orientation="Horizontal">
-                    <atom:DashboardProgress Value="50" Minimum="0" Maximum="100" StepCount="4" StepGap="8"
-                                            IndicatorThickness="20" />
-                    <atom:DashboardProgress Value="70" Minimum="0" Maximum="100" StepCount="10" StepGap="8"
-                                            IndicatorThickness="20" />
-                    <atom:DashboardProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
-                                            IndicatorThickness="20" Status="Exception" />
-                    <atom:DashboardProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
-                                            IndicatorThickness="20"
-                                            SuccessThreshold="30" />
+                    <atom:DashboardProgress IndicatorThickness="20"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            StepCount="4"
+                                            StepGap="8"
+                                            Value="50" />
+                    <atom:DashboardProgress IndicatorThickness="20"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            StepCount="10"
+                                            StepGap="8"
+                                            Value="70" />
+                    <atom:DashboardProgress IndicatorThickness="20"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            Status="Exception"
+                                            StepCount="8"
+                                            StepGap="10"
+                                            Value="77" />
+                    <atom:DashboardProgress IndicatorThickness="20"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            StepCount="8"
+                                            StepGap="10"
+                                            SuccessThreshold="30"
+                                            Value="77" />
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Circular progress bar whit steps"
-            Description="A circular progress bar that support steps and color segments, default gap is 2px.">
-            <StackPanel Orientation="Vertical" Spacing="5" x:Name="CircleWithStep">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Circular progress bar whit steps" Description="A circular progress bar that support steps and color segments, default gap is 2px.">
+            <StackPanel x:Name="CircleWithStep"
+                        Orientation="Vertical"
+                        Spacing="5">
                 <StackPanel Orientation="Vertical" Spacing="5">
-                    <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="300">
-                        <atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Large" />
-                        <atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Middle" />
-                        <atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Small" />
-                        <atom:ProgressBar Value="50" Minimum="0" Maximum="100" IndicatorThickness="20" />
+                    <StackPanel Width="300"
+                                HorizontalAlignment="Left"
+                                Orientation="Vertical">
+                        <atom:ProgressBar Maximum="100"
+                                          Minimum="0"
+                                          SizeType="Large"
+                                          Value="50" />
+                        <atom:ProgressBar Maximum="100"
+                                          Minimum="0"
+                                          SizeType="Middle"
+                                          Value="50" />
+                        <atom:ProgressBar Maximum="100"
+                                          Minimum="0"
+                                          SizeType="Small"
+                                          Value="50" />
+                        <atom:ProgressBar IndicatorThickness="20"
+                                          Maximum="100"
+                                          Minimum="0"
+                                          Value="50" />
                     </StackPanel>
                     <WrapPanel Orientation="Horizontal">
-                        <atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Large"/>
-                        <atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Middle"/>
-                        <atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Small"/>
-                        <atom:CircleProgress Value="50" Minimum="0" Maximum="100" Width="20" Height="20"/>
+                        <atom:CircleProgress Maximum="100"
+                                             Minimum="0"
+                                             SizeType="Large"
+                                             Value="50" />
+                        <atom:CircleProgress Maximum="100"
+                                             Minimum="0"
+                                             SizeType="Middle"
+                                             Value="50" />
+                        <atom:CircleProgress Maximum="100"
+                                             Minimum="0"
+                                             SizeType="Small"
+                                             Value="50" />
+                        <atom:CircleProgress Width="20"
+                                             Height="20"
+                                             Maximum="100"
+                                             Minimum="0"
+                                             Value="50" />
                     </WrapPanel>
                     <WrapPanel Orientation="Horizontal">
-                        <atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Large"/>
-                        <atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Middle"/>
-                        <atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Small"/>
-                        <atom:DashboardProgress Value="50" Minimum="0" Maximum="100" Width="20" Height="20"/>
+                        <atom:DashboardProgress Maximum="100"
+                                                Minimum="0"
+                                                SizeType="Large"
+                                                Value="50" />
+                        <atom:DashboardProgress Maximum="100"
+                                                Minimum="0"
+                                                SizeType="Middle"
+                                                Value="50" />
+                        <atom:DashboardProgress Maximum="100"
+                                                Minimum="0"
+                                                SizeType="Small"
+                                                Value="50" />
+                        <atom:DashboardProgress Width="20"
+                                                Height="20"
+                                                Maximum="100"
+                                                Minimum="0"
+                                                Value="50" />
                     </WrapPanel>
-        
+
                     <WrapPanel Orientation="Horizontal">
-                        <atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Large"/>
-                        <atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Middle"/>
-                        <atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Small"/>
-                        <atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" ChunkHeight="20" ChunkWidth="20"/>
-                        <atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" ChunkHeight="30" ChunkWidth="20"/>
+                        <atom:StepsProgressBar Maximum="100"
+                                               Minimum="0"
+                                               SizeType="Large"
+                                               Steps="3"
+                                               Value="50" />
+                        <atom:StepsProgressBar Maximum="100"
+                                               Minimum="0"
+                                               SizeType="Middle"
+                                               Steps="3"
+                                               Value="50" />
+                        <atom:StepsProgressBar Maximum="100"
+                                               Minimum="0"
+                                               SizeType="Small"
+                                               Steps="3"
+                                               Value="50" />
+                        <atom:StepsProgressBar ChunkHeight="20"
+                                               ChunkWidth="20"
+                                               Maximum="100"
+                                               Minimum="0"
+                                               Steps="3"
+                                               Value="50" />
+                        <atom:StepsProgressBar ChunkHeight="30"
+                                               ChunkWidth="20"
+                                               Maximum="100"
+                                               Minimum="0"
+                                               Steps="3"
+                                               Value="50" />
                     </WrapPanel>
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Change progress value position"
-            Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Change progress value position" Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:ProgressBar Value="30" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerStartPercentPosition}"/>
-                <atom:ProgressBar Value="60" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerCenterPercentPosition}"/>
-                <atom:ProgressBar Value="50" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerEndPercentPosition}"/>
-                <atom:ProgressBar Value="70" Minimum="0" Maximum="100" Width="300" IndicatorBarBrush="#001342" PercentPosition="{Binding InnerEndPercentPosition}"/>
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" Width="400" PercentPosition="{Binding InnerCenterPercentPosition}"/>
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" PercentPosition="{Binding OutterStartPercentPosition}"/>
-                <atom:ProgressBar Value="60" Minimum="0" Maximum="100" PercentPosition="{Binding OutterCenterPercentPosition}" SizeType="Small"/>
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" PercentPosition="{Binding OutterCenterPercentPosition}"/>
-                <atom:ProgressBar Value="55" Minimum="0" Maximum="100" PercentPosition="{Binding OutterStartPercentPosition}"/>
+                <atom:ProgressBar Width="300"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding InnerStartPercentPosition}"
+                                  Value="30" />
+                <atom:ProgressBar Width="300"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding InnerCenterPercentPosition}"
+                                  Value="60" />
+                <atom:ProgressBar Width="300"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding InnerEndPercentPosition}"
+                                  Value="50" />
+                <atom:ProgressBar Width="300"
+                                  IndicatorBarBrush="#001342"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding InnerEndPercentPosition}"
+                                  Value="70" />
+                <atom:ProgressBar Width="400"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding InnerCenterPercentPosition}"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding OutterStartPercentPosition}"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding OutterCenterPercentPosition}"
+                                  SizeType="Small"
+                                  Value="60" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding OutterCenterPercentPosition}"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  PercentPosition="{Binding OutterStartPercentPosition}"
+                                  Value="55" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Change progress value position for StepsProgressBar"
-            Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Change progress value position for StepsProgressBar" Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="Start"/>
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center"/>
-                <atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center" SizeType="Middle"/>
-                <atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center" SizeType="Small"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center"/>
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="End"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="8" PercentPosition="End" Status="Exception"/>
-                <atom:StepsProgressBar Value="99" Minimum="0" Maximum="100" Steps="8" PercentPosition="Start"/>
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="Start"
+                                       Steps="8"
+                                       Value="100" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="Center"
+                                       Steps="8"
+                                       Value="100" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="Center"
+                                       SizeType="Middle"
+                                       Steps="8"
+                                       Value="60" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="Center"
+                                       SizeType="Small"
+                                       Steps="8"
+                                       Value="60" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="Center"
+                                       Steps="8"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="End"
+                                       Steps="8"
+                                       Value="100" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="End"
+                                       Status="Exception"
+                                       Steps="8"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       PercentPosition="Start"
+                                       Steps="8"
+                                       Value="99" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Vertical progress bar"
-            Description="Ordinary linear progress bar, supports position specification of additional areas">
-            <StackPanel Orientation="Horizontal" Spacing="10" Height="300">
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical"/>
-                <atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical"/>
-                <atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" SizeType="Small"/>
-                <atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterStartPercentPosition}"/>
-                <atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterCenterPercentPosition}"/>
-                <atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterStartPercentPosition}"/>
-        
-                <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}"/>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Vertical progress bar" Description="Ordinary linear progress bar, supports position specification of additional areas">
+            <StackPanel Height="300"
+                        Orientation="Horizontal"
+                        Spacing="10">
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  Value="55" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  SizeType="Small"
+                                  Value="55" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding OutterStartPercentPosition}"
+                                  Value="55" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding OutterCenterPercentPosition}"
+                                  Value="55" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding OutterStartPercentPosition}"
+                                  Value="100" />
+
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding InnerStartPercentPosition}"
+                                  Value="55" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding InnerCenterPercentPosition}"
+                                  Value="55" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding InnerStartPercentPosition}"
+                                  Value="100" />
+                <atom:ProgressBar Maximum="100"
+                                  Minimum="0"
+                                  Orientation="Vertical"
+                                  PercentPosition="{Binding InnerEndPercentPosition}"
+                                  Value="70" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Vertical progress bar"
-            Description="Ordinary step progress bar, supports position specification of additional areas">
-            <StackPanel Orientation="Horizontal" Spacing="10" Height="300">
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" PercentPosition="End"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="5" Orientation="Vertical"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" SizeType="Small"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6"  Orientation="Vertical" PercentPosition="Center"/>
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Vertical progress bar" Description="Ordinary step progress bar, supports position specification of additional areas">
+            <StackPanel Height="300"
+                        Orientation="Horizontal"
+                        Spacing="10">
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="End"
+                                       Steps="10"
+                                       Value="100" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       Steps="5"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       SizeType="Small"
+                                       Steps="10"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="Start"
+                                       Steps="6"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="Center"
+                                       Steps="6"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="Start"
+                                       Steps="6"
+                                       Value="100" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Vertical progress bar"
-            Description="Ordinary step progress bar, supports position specification of additional areas">
-            <StackPanel Orientation="Horizontal" Spacing="10" Height="300">
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" PercentPosition="End"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="5" Orientation="Vertical"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" SizeType="Small"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
-                <atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6"  Orientation="Vertical" PercentPosition="Center"/>
-                <atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Vertical progress bar" Description="Ordinary step progress bar, supports position specification of additional areas">
+            <StackPanel Height="300"
+                        Orientation="Horizontal"
+                        Spacing="10">
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="End"
+                                       Steps="10"
+                                       Value="100" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       Steps="5"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       SizeType="Small"
+                                       Steps="10"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="Start"
+                                       Steps="6"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="Center"
+                                       Steps="6"
+                                       Value="55" />
+                <atom:StepsProgressBar Maximum="100"
+                                       Minimum="0"
+                                       Orientation="Vertical"
+                                       PercentPosition="Start"
+                                       Steps="6"
+                                       Value="100" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="toggle disabled status"
-            Description="The progress bar is in the disabled state and uses the disabled style.">
+        </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}"/>
-        
+                <atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  Value="30" />
+                <atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  Value="50" />
+                <atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  Status="Exception"
+                                  Value="70" />
+                <atom:ProgressBar IsEnabled="{Binding ToggleStatus}"
+                                  Maximum="100"
+                                  Minimum="0"
+                                  Value="100" />
+
+                <atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
+                                       Maximum="100"
+                                       Minimum="0"
+                                       Steps="10"
+                                       Value="30" />
+                <atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
+                                       Maximum="100"
+                                       Minimum="0"
+                                       Steps="10"
+                                       Value="50" />
+                <atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
+                                       Maximum="100"
+                                       Minimum="0"
+                                       Status="Exception"
+                                       Steps="10"
+                                       Value="70" />
+                <atom:StepsProgressBar IsEnabled="{Binding ToggleStatus}"
+                                       Maximum="100"
+                                       Minimum="0"
+                                       Steps="10"
+                                       Value="100" />
+
                 <WrapPanel Orientation="Horizontal">
-                    <atom:CircleProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
-                    <atom:CircleProgress Value="70" Minimum="0" Maximum="100" SizeType="Middle" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
-                    <atom:CircleProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
+                    <atom:CircleProgress IsEnabled="{Binding ToggleStatus}"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         SizeType="Middle"
+                                         Value="75" />
+                    <atom:CircleProgress IsEnabled="{Binding ToggleStatus}"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         SizeType="Middle"
+                                         Status="Exception"
+                                         Value="70" />
+                    <atom:CircleProgress IsEnabled="{Binding ToggleStatus}"
+                                         Maximum="100"
+                                         Minimum="0"
+                                         SizeType="Middle"
+                                         Value="100" />
                 </WrapPanel>
-        
+
                 <WrapPanel Orientation="Horizontal">
-                    <atom:DashboardProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
-                    <atom:DashboardProgress Value="70" Minimum="0" Maximum="100" SizeType="Middle" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
-                    <atom:DashboardProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
+                    <atom:DashboardProgress IsEnabled="{Binding ToggleStatus}"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            SizeType="Middle"
+                                            Value="75" />
+                    <atom:DashboardProgress IsEnabled="{Binding ToggleStatus}"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            SizeType="Middle"
+                                            Status="Exception"
+                                            Value="70" />
+                    <atom:DashboardProgress IsEnabled="{Binding ToggleStatus}"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            SizeType="Middle"
+                                            Value="100" />
                 </WrapPanel>
-        
-                <atom:Button Margin="0, 10, 0, 0"
-                             Text="{Binding ToggleDisabledText}"
-                             Command="{Binding ToggleEnabledStatus}"/>
+
+                <atom:Button Margin="0,10,0,0"
+                             Command="{Binding ToggleEnabledStatus}"
+                             Text="{Binding ToggleDisabledText}" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml.cs
index d1dac16..6e263d1 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml.cs
@@ -2,7 +2,6 @@ using AtomUI.Controls;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Media;
-using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/RadioButtonShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/RadioButtonShowCase.axaml
index 80af537..e993078 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/RadioButtonShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/RadioButtonShowCase.axaml
@@ -1,82 +1,76 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.RadioButtonShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCasePanel.Styles>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.RadioButtonShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCasePanel.Styles>
             <Style Selector="atom|RadioButton">
-                <Setter Property="Margin" Value="0, 0, 5, 10"></Setter>
+                <Setter Property="Margin" Value="0, 0, 5, 10" />
             </Style>
-        </showcase:ShowCasePanel.Styles>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The simplest use.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
+        </desktop:ShowCasePanel.Styles>
+        <desktop:ShowCaseItem Title="Basic" Description="The simplest use.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Horizontal"
+                        Spacing="10">
                 <atom:RadioButton>Radio</atom:RadioButton>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Disabled"
-            Description="Disabled state of RadioButton.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Disabled" Description="Disabled state of RadioButton.">
             <StackPanel HorizontalAlignment="Left" Orientation="Vertical">
                 <StackPanel Orientation="Horizontal">
                     <atom:RadioButton x:Name="ToggleDisabledRadioUnChecked">Radio1</atom:RadioButton>
                     <atom:RadioButton x:Name="ToggleDisabledRadioChecked" IsChecked="True">Radio2</atom:RadioButton>
                 </StackPanel>
-                <atom:Button ButtonType="Primary"
-                             x:Name="ToggleDisabledButton"
-                             Margin="0, 20, 0, 0"
+                <atom:Button x:Name="ToggleDisabledButton"
+                             Margin="0,20,0,0"
+                             ButtonType="Primary"
                              Command="{Binding $parent[showcase:RadioButtonShowCase].ToggleDisabledStatus}"
                              CommandParameter="{Binding ElementName=ToggleDisabledButton}">
                     toggle disabled
                 </atom:Button>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Radio Group"
-            Description="A group of radio components.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Radio Group" Description="A group of radio components.">
             <WrapPanel Orientation="Horizontal">
                 <atom:RadioButton>A</atom:RadioButton>
                 <atom:RadioButton>B</atom:RadioButton>
                 <atom:RadioButton>C</atom:RadioButton>
                 <atom:RadioButton>D</atom:RadioButton>
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Vertical Radio Group"
-            Description="Vertical Radio Group.">
-            <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Vertical Radio Group" Description="Vertical Radio Group.">
+            <StackPanel HorizontalAlignment="Left" Orientation="Vertical">
                 <atom:RadioButton>Option A</atom:RadioButton>
                 <atom:RadioButton>Option B</atom:RadioButton>
                 <atom:RadioButton>Option C</atom:RadioButton>
                 <atom:RadioButton>Option D</atom:RadioButton>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Option Button"
-            Description="OptionButton Group.">
+        <desktop:ShowCaseItem Title="Option Button" Description="OptionButton Group.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
+                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                     <atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
                     <atom:RadioButton>Pear</atom:RadioButton>
                     <atom:RadioButton>Orange</atom:RadioButton>
                 </StackPanel>
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
+                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                     <atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
                     <atom:RadioButton>Pear</atom:RadioButton>
                     <atom:RadioButton IsEnabled="False">Orange</atom:RadioButton>
                 </StackPanel>
 
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Spacing="10">
+                <StackPanel HorizontalAlignment="Left"
+                            Orientation="Horizontal"
+                            Spacing="10">
                     <atom:OptionButtonGroup ButtonStyle="Solid">
                         <atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
                         <atom:OptionButton>Pear</atom:OptionButton>
@@ -89,11 +83,9 @@
                     <atom:OptionButton IsEnabled="False">Orange</atom:OptionButton>
                 </atom:OptionButtonGroup>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="option style"
-            Description="The combination of option button style.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="option style" Description="The combination of option button style.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:OptionButtonGroup>
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
@@ -101,58 +93,54 @@
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
+
                 <atom:OptionButtonGroup>
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
-        
+
+
                 <atom:OptionButtonGroup>
                     <atom:OptionButton IsChecked="True" IsEnabled="False">Hangzhou</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Beijing</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Solid option button"
-            Description="Solid option button style.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Solid option button" Description="Solid option button style.">
             <StackPanel Orientation="Vertical" Spacing="10">
-        
+
                 <atom:OptionButtonGroup ButtonStyle="Solid">
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                     <atom:OptionButton>Shanghai</atom:OptionButton>
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
+
                 <atom:OptionButtonGroup ButtonStyle="Solid">
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
-        
+
+
                 <atom:OptionButtonGroup ButtonStyle="Solid">
                     <atom:OptionButton IsChecked="True" IsEnabled="False">Hangzhou</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Beijing</atom:OptionButton>
                     <atom:OptionButton IsEnabled="False">Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Size type"
-            Description="There are three sizes available: large, medium, and small. It can coordinate with input box.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Size type" Description="There are three sizes available: large, medium, and small. It can coordinate with input box.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:OptionButtonGroup SizeType="Large">
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
@@ -160,24 +148,24 @@
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
+
                 <atom:OptionButtonGroup SizeType="Middle">
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                     <atom:OptionButton>Shanghai</atom:OptionButton>
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
-        
+
+
                 <atom:OptionButtonGroup SizeType="Small">
                     <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                     <atom:OptionButton>Shanghai</atom:OptionButton>
                     <atom:OptionButton>Beijing</atom:OptionButton>
                     <atom:OptionButton>Chengdu</atom:OptionButton>
                 </atom:OptionButtonGroup>
-        
-            </StackPanel>
-        </showcase:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml
index 56535dd..346cef2 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml
@@ -1,17 +1,17 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.SegmentedShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The most basic usage.">
-            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SegmentedShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:Segmented>
                     <atom:SegmentedItem>Daily</atom:SegmentedItem>
                     <atom:SegmentedItem>Weekly</atom:SegmentedItem>
@@ -20,11 +20,9 @@
                     <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                 </atom:Segmented>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Block Segmented"
-            Description="block property will make the Segmented fit to its parent width.">
+        <desktop:ShowCaseItem Title="Block Segmented" Description="block property will make the Segmented fit to its parent width.">
             <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical">
                 <atom:Segmented IsExpanding="True">
                     <atom:SegmentedItem>123</atom:SegmentedItem>
@@ -32,12 +30,12 @@
                     <atom:SegmentedItem>longtext-longtext-longtext-longtext</atom:SegmentedItem>
                 </atom:Segmented>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Disabled"
-            Description="Disabled Segmented.">
-            <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Spacing="10">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Disabled" Description="Disabled Segmented.">
+            <StackPanel HorizontalAlignment="Stretch"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:Segmented>
                     <atom:SegmentedItem IsEnabled="False">Map</atom:SegmentedItem>
                     <atom:SegmentedItem IsEnabled="False">Transit</atom:SegmentedItem>
@@ -51,12 +49,12 @@
                     <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                 </atom:Segmented>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Three sizes of Segmented"
-            Description="There are three sizes of an Segmented: large (40px), default (32px) and small (24px).">
-            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Three sizes of Segmented" Description="There are three sizes of an Segmented: large (40px), default (32px) and small (24px).">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:Segmented SizeType="Large">
                     <atom:SegmentedItem>Daily</atom:SegmentedItem>
                     <atom:SegmentedItem>Weekly</atom:SegmentedItem>
@@ -64,7 +62,7 @@
                     <atom:SegmentedItem>Quarterly</atom:SegmentedItem>
                     <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                 </atom:Segmented>
-        
+
                 <atom:Segmented>
                     <atom:SegmentedItem>Daily</atom:SegmentedItem>
                     <atom:SegmentedItem>Weekly</atom:SegmentedItem>
@@ -72,7 +70,7 @@
                     <atom:SegmentedItem>Quarterly</atom:SegmentedItem>
                     <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                 </atom:Segmented>
-        
+
                 <atom:Segmented SizeType="Small">
                     <atom:SegmentedItem>Daily</atom:SegmentedItem>
                     <atom:SegmentedItem>Weekly</atom:SegmentedItem>
@@ -81,55 +79,51 @@
                     <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                 </atom:Segmented>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="With Icon only"
-            Description="Set icon without label for Segmented Item.">
-            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="With Icon only" Description="Set icon without label for Segmented Item.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:Segmented>
-                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}"/>
-                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=AppstoreOutlined}"/>
+                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}" />
+                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=AppstoreOutlined}" />
                 </atom:Segmented>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="With Icon"
-            Description="Set icon for Segmented Item.">
-            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="With Icon" Description="Set icon for Segmented Item.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:Segmented>
                     <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
                         List
                     </atom:SegmentedItem>
-                    <atom:SegmentedItem Content="Kanban" Icon="{atom:IconProvider Kind=AppstoreOutlined}"/>
+                    <atom:SegmentedItem Content="Kanban" Icon="{atom:IconProvider Kind=AppstoreOutlined}" />
                 </atom:Segmented>
-        
+
                 <atom:Segmented>
                     <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
                         Ava 牛逼
                     </atom:SegmentedItem>
-                    <atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}"/>
-        
-                    <atom:SegmentedItem Content="微软牛逼"
-                                         Icon="{atom:IconProvider Kind=WindowsOutlined}">
-                    </atom:SegmentedItem>
-        
+                    <atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />
+
+                    <atom:SegmentedItem Content="微软牛逼" Icon="{atom:IconProvider Kind=WindowsOutlined}" />
+
                 </atom:Segmented>
-        
+
                 <atom:Segmented SizeType="Large">
                     <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
                         Ava 牛逼
                     </atom:SegmentedItem>
-                    <atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}"/>
-        
-                    <atom:SegmentedItem Content="微软牛逼"
-                                         Icon="{atom:IconProvider Kind=WindowsOutlined}">
-                    </atom:SegmentedItem>
-        
+                    <atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />
+
+                    <atom:SegmentedItem Content="微软牛逼" Icon="{atom:IconProvider Kind=WindowsOutlined}" />
+
                 </atom:Segmented>
-        
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml.cs
index 0aab06f..dcff03f 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SegmentedShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml
index 559ec5c..e9b7ca9 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml
@@ -1,101 +1,104 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.SeparatorShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Horizontal"
-            Description="A Separator is horizontal by default. You can add text within Separator.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SeparatorShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Horizontal" Description="A Separator is horizontal by default. You can add text within Separator.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Title text"/>
+                <atom:Separator Title="Title text" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Title text"/>
+                <atom:Separator Title="Title text" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Divider with title"
-            Description="Divider with inner title, set orientation='left/right' to align it.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Divider with title" Description="Divider with inner title, set orientation='left/right' to align it.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Text" FontStyle="Italic"/>
+                <atom:Separator Title="Text" FontStyle="Italic" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Left text" TitlePosition="Left" FontWeight="Bold"/>
+                <atom:Separator Title="Left text"
+                                FontWeight="Bold"
+                                TitlePosition="Left" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Right text" TitlePosition="Right" FontStyle="Oblique"/>
+                <atom:Separator Title="Right text"
+                                FontStyle="Oblique"
+                                TitlePosition="Right" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Left Text with 0 orientationMargin" TitlePosition="Left" FontStyle="Oblique" FontWeight="Medium" OrientationMargin="0"/>
+                <atom:Separator Title="Left Text with 0 orientationMargin"
+                                FontStyle="Oblique"
+                                FontWeight="Medium"
+                                OrientationMargin="0"
+                                TitlePosition="Left" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-        
-                <atom:Separator Title="Right Text with 50px orientationMargin" TitlePosition="Right" TitleColor="Coral" FontWeight="Medium"
-                                OrientationMargin="50"/>
+
+                <atom:Separator Title="Right Text with 50px orientationMargin"
+                                FontWeight="Medium"
+                                OrientationMargin="50"
+                                TitleColor="Coral"
+                                TitlePosition="Right" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Text without heading style"
-            Description="You can use non-heading style of divider text by setting the plain property.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Text without heading style" Description="You can use non-heading style of divider text by setting the plain property.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Text"/>
+                <atom:Separator Title="Text" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Left Text" TitlePosition="Left"/>
+                <atom:Separator Title="Left Text" TitlePosition="Left" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
-                <atom:Separator Title="Right Text" TitlePosition="Right"/>
+                <atom:Separator Title="Right Text" TitlePosition="Right" />
                 <TextBlock TextWrapping="Wrap">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
                 </TextBlock>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Vertical"
-            Description="Use type='vertical' to make the divider vertical.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Vertical" Description="Use type='vertical' to make the divider vertical.">
             <StackPanel Orientation="Horizontal" Spacing="5">
                 <TextBlock>
                     Item1
                 </TextBlock>
-                <atom:VerticalSeparator Title="Right text"/>
+                <atom:VerticalSeparator Title="Right text" />
                 <TextBlock>
                     Item2
                 </TextBlock>
-                <atom:VerticalSeparator/>
+                <atom:VerticalSeparator />
                 <TextBlock>
                     Item3
                 </TextBlock>
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml.cs
index de2c678..8e16e19 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SeparatorShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml
index 91759aa..b58a59c 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml
@@ -1,141 +1,122 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.SliderShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SliderShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.">
             <StackPanel Orientation="Vertical" Spacing="20">
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    TickFrequency="5"
-                    IsEnabled="{Binding NormalEnabled}"
-                    Value="50"/>
-        
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    IsRangeMode="True"
-                    TickFrequency="5"
-                    IsEnabled="{Binding NormalEnabled}"
-                    RangeValue="20, 80"/>
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    IsEnabled="{Binding NormalEnabled}"
-                    IsRangeMode="True"
-                    TickFrequency="5"
-                    Marks="{Binding SliderMarks}"
-                    RangeValue="20, 80" />
-                
+                <atom:Slider IsEnabled="{Binding NormalEnabled}"
+                             Maximum="100"
+                             Minimum="0"
+                             TickFrequency="5"
+                             Value="50" />
+
+                <atom:Slider IsEnabled="{Binding NormalEnabled}"
+                             IsRangeMode="True"
+                             Maximum="100"
+                             Minimum="0"
+                             RangeValue="20, 80"
+                             TickFrequency="5" />
+                <atom:Slider IsEnabled="{Binding NormalEnabled}"
+                             IsRangeMode="True"
+                             Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             RangeValue="20, 80"
+                             TickFrequency="5" />
+
                 <StackPanel Orientation="Horizontal" Spacing="2">
                     <TextBlock>Disabled:</TextBlock>
-                    <atom:ToggleSwitch SizeType="Small" IsChecked="{Binding NormalEnabled}"/>
+                    <atom:ToggleSwitch IsChecked="{Binding NormalEnabled}" SizeType="Small" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Customize tooltip"
-            Description="Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Customize tooltip" Description="Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.">
             <StackPanel Orientation="Vertical" Spacing="20">
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    TickFrequency="1"
-                    IsSnapToTickEnabled="True"
-                    ValueFormatTemplate="\{0\}%"
-                    Value="20"/>
+                <atom:Slider IsSnapToTickEnabled="True"
+                             Maximum="100"
+                             Minimum="0"
+                             TickFrequency="1"
+                             ValueFormatTemplate="\{0\}%"
+                             Value="20" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Vertical"
-            Description="The vertical Slider.">
-            <StackPanel Orientation="Horizontal" Spacing="20" Height="300">
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    TickFrequency="1"
-                    Value="20"/>
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    TickFrequency="5"
-                    IsRangeMode="True"
-                    RangeValue="20, 80"
-                    IsSnapToTickEnabled="True"
-                    Value="20"/>
-                
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    Orientation="Vertical"
-                    TickFrequency="1"
-                    Marks="{Binding SliderMarks}"
-                    Value="20"/>
-                
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    IsRangeMode="True"
-                    Orientation="Vertical"
-                    TickFrequency="5"
-                    Marks="{Binding SliderMarks}"
-                    RangeValue="20, 80" />
-                
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Vertical" Description="The vertical Slider.">
+            <StackPanel Height="300"
+                        Orientation="Horizontal"
+                        Spacing="20">
+                <atom:Slider Maximum="100"
+                             Minimum="0"
+                             Orientation="Vertical"
+                             TickFrequency="1"
+                             Value="20" />
+                <atom:Slider IsRangeMode="True"
+                             IsSnapToTickEnabled="True"
+                             Maximum="100"
+                             Minimum="0"
+                             Orientation="Vertical"
+                             RangeValue="20, 80"
+                             TickFrequency="5"
+                             Value="20" />
+
+                <atom:Slider Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             Orientation="Vertical"
+                             TickFrequency="1"
+                             Value="20" />
+
+                <atom:Slider IsRangeMode="True"
+                             Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             Orientation="Vertical"
+                             RangeValue="20, 80"
+                             TickFrequency="5" />
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Graduated slider"
-            Description="Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb.
-            When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Graduated slider" Description="Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb.             When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.">
             <StackPanel Orientation="Vertical" Spacing="20">
                 <TextBlock FontWeight="Bold">included=true</TextBlock>
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    TickFrequency="1"
-                    Marks="{Binding SliderMarks}"
-                    Value="20"/>
-        
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    IsRangeMode="True"
-                    TickFrequency="5"
-                    Marks="{Binding SliderMarks}"
-                    RangeValue="20, 80" />
-        
+                <atom:Slider Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             TickFrequency="1"
+                             Value="20" />
+
+                <atom:Slider IsRangeMode="True"
+                             Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             RangeValue="20, 80"
+                             TickFrequency="5" />
+
                 <TextBlock FontWeight="Bold">included=false</TextBlock>
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    TickFrequency="1"
-                    Marks="{Binding SliderMarks}"
-                    Included="False"
-                    Value="20"/>
-        
-                <atom:Slider
-                    Maximum="100"
-                    Minimum="0"
-                    IsRangeMode="True"
-                    TickFrequency="5"
-                    Included="False"
-                    Marks="{Binding SliderMarks}"
-                    RangeValue="20, 80" />
-        
+                <atom:Slider Included="False"
+                             Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             TickFrequency="1"
+                             Value="20" />
+
+                <atom:Slider Included="False"
+                             IsRangeMode="True"
+                             Marks="{Binding SliderMarks}"
+                             Maximum="100"
+                             Minimum="0"
+                             RangeValue="20, 80"
+                             TickFrequency="5" />
+
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SplitButtonShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/SplitButtonShowCase.axaml
index ec0325b..5af0aa4 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SplitButtonShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SplitButtonShowCase.axaml
@@ -1,50 +1,54 @@
 <UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SplitButtonShowCase"
              xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:atom="https://atomui.net"
-             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase" mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The most basic SplitButton.">
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic SplitButton.">
             <atom:SplitButton TriggerType="Hover">
                 Hover me
                 <atom:SplitButton.Flyout>
                     <atom:MenuFlyout>
-                        <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                       Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                        <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                        <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                       Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                        <atom:MenuItem Header="Cut"
+                                       Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                       InputGesture="Ctrl+X" />
+                        <atom:MenuItem Header="Copy"
+                                       Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                       InputGesture="Ctrl+C" />
+                        <atom:MenuItem Header="Delete"
+                                       Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                       InputGesture="Ctrl+D" />
                     </atom:MenuFlyout>
                 </atom:SplitButton.Flyout>
             </atom:SplitButton>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Size"
-            Description="AtomUI supports three sizes of buttons: small, default and large.
-If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
-            <showcase:ShowCaseItem.Styles>
+        <desktop:ShowCaseItem Title="Size" Description="AtomUI supports three sizes of buttons: small, default and large. If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="atom|SplitButton">
                     <Setter Property="Margin" Value="5" />
                     <Setter Property="VerticalAlignment" Value="Bottom" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
+            </desktop:ShowCaseItem.Styles>
             <StackPanel Orientation="Vertical" Spacing="10">
                 <WrapPanel>
                     <atom:SplitButton SizeType="Large">
                         Large
                         <atom:SplitButton.Flyout>
                             <atom:MenuFlyout>
-                                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                               Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                                <atom:MenuItem Header="Cut"
+                                               Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                               InputGesture="Ctrl+X" />
+                                <atom:MenuItem Header="Copy"
+                                               Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                               InputGesture="Ctrl+C" />
+                                <atom:MenuItem Header="Delete"
+                                               Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                               InputGesture="Ctrl+D" />
                             </atom:MenuFlyout>
                         </atom:SplitButton.Flyout>
                     </atom:SplitButton>
@@ -52,12 +56,15 @@ If a large or small button is desired, set the size property to either large or
                         Middle
                         <atom:SplitButton.Flyout>
                             <atom:MenuFlyout>
-                                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                               Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                                <atom:MenuItem Header="Cut"
+                                               Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                               InputGesture="Ctrl+X" />
+                                <atom:MenuItem Header="Copy"
+                                               Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                               InputGesture="Ctrl+C" />
+                                <atom:MenuItem Header="Delete"
+                                               Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                               InputGesture="Ctrl+D" />
                             </atom:MenuFlyout>
                         </atom:SplitButton.Flyout>
                     </atom:SplitButton>
@@ -65,80 +72,93 @@ If a large or small button is desired, set the size property to either large or
                         Small
                         <atom:SplitButton.Flyout>
                             <atom:MenuFlyout>
-                                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                               Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                                <atom:MenuItem Header="Cut"
+                                               Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                               InputGesture="Ctrl+X" />
+                                <atom:MenuItem Header="Copy"
+                                               Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                               InputGesture="Ctrl+C" />
+                                <atom:MenuItem Header="Delete"
+                                               Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                               InputGesture="Ctrl+D" />
                             </atom:MenuFlyout>
                         </atom:SplitButton.Flyout>
                     </atom:SplitButton>
                 </WrapPanel>
                 <WrapPanel>
-                    <atom:SplitButton SizeType="Large" IsPrimaryButtonType="True">
+                    <atom:SplitButton IsPrimaryButtonType="True" SizeType="Large">
                         Large
                         <atom:SplitButton.Flyout>
                             <atom:MenuFlyout>
-                                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                               Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                                <atom:MenuItem Header="Cut"
+                                               Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                               InputGesture="Ctrl+X" />
+                                <atom:MenuItem Header="Copy"
+                                               Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                               InputGesture="Ctrl+C" />
+                                <atom:MenuItem Header="Delete"
+                                               Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                               InputGesture="Ctrl+D" />
                             </atom:MenuFlyout>
                         </atom:SplitButton.Flyout>
                     </atom:SplitButton>
-                    <atom:SplitButton SizeType="Middle" IsPrimaryButtonType="True">
+                    <atom:SplitButton IsPrimaryButtonType="True" SizeType="Middle">
                         Middle
                         <atom:SplitButton.Flyout>
                             <atom:MenuFlyout>
-                                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                               Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                                <atom:MenuItem Header="Cut"
+                                               Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                               InputGesture="Ctrl+X" />
+                                <atom:MenuItem Header="Copy"
+                                               Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                               InputGesture="Ctrl+C" />
+                                <atom:MenuItem Header="Delete"
+                                               Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                               InputGesture="Ctrl+D" />
                             </atom:MenuFlyout>
                         </atom:SplitButton.Flyout>
                     </atom:SplitButton>
-                    <atom:SplitButton SizeType="Small" IsPrimaryButtonType="True">
+                    <atom:SplitButton IsPrimaryButtonType="True" SizeType="Small">
                         Small
                         <atom:SplitButton.Flyout>
                             <atom:MenuFlyout>
-                                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                               Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                                <atom:MenuItem Header="Cut"
+                                               Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                               InputGesture="Ctrl+X" />
+                                <atom:MenuItem Header="Copy"
+                                               Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                               InputGesture="Ctrl+C" />
+                                <atom:MenuItem Header="Delete"
+                                               Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                               InputGesture="Ctrl+D" />
                             </atom:MenuFlyout>
                         </atom:SplitButton.Flyout>
                     </atom:SplitButton>
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Danger Buttons"
-            Description="danger is a property of button after antd 4.0.">
-            <showcase:ShowCaseItem.Styles>
+        <desktop:ShowCaseItem Title="Danger Buttons" Description="danger is a property of button after antd 4.0.">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="atom|SplitButton">
                     <Setter Property="Margin" Value="5" />
                     <Setter Property="VerticalAlignment" Value="Bottom" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
+            </desktop:ShowCaseItem.Styles>
             <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                 <atom:SplitButton IsDanger="true">
                     Default
                     <atom:SplitButton.Flyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                           Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                           Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                           Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:SplitButton.Flyout>
                 </atom:SplitButton>
@@ -147,38 +167,42 @@ If a large or small button is desired, set the size property to either large or
                     Primary
                     <atom:SplitButton.Flyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                           Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                           Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                           Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:SplitButton.Flyout>
                 </atom:SplitButton>
             </WrapPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Custom Icon"
-            Description="Custom flyout button icon.">
-            <showcase:ShowCaseItem.Styles>
+        <desktop:ShowCaseItem Title="Custom Icon" Description="Custom flyout button icon.">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="atom|SplitButton">
                     <Setter Property="Margin" Value="5" />
                     <Setter Property="VerticalAlignment" Value="Bottom" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
+            </desktop:ShowCaseItem.Styles>
             <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                 <atom:SplitButton>
                     Default
                     <atom:SplitButton.Flyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                           Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                           Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                           Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:SplitButton.Flyout>
                 </atom:SplitButton>
@@ -187,38 +211,42 @@ If a large or small button is desired, set the size property to either large or
                     Primary
                     <atom:SplitButton.Flyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                           Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                           Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                           Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:SplitButton.Flyout>
                 </atom:SplitButton>
             </WrapPanel>
-        </showcase:ShowCaseItem>
-        
-         <showcase:ShowCaseItem
-            Title="Flyout trigger type"
-            Description="Support two kind of Trigger type.">
-            <showcase:ShowCaseItem.Styles>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Flyout trigger type" Description="Support two kind of Trigger type.">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="atom|SplitButton">
                     <Setter Property="Margin" Value="5" />
                     <Setter Property="VerticalAlignment" Value="Bottom" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
+            </desktop:ShowCaseItem.Styles>
             <WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                 <atom:SplitButton TriggerType="Hover">
                     Hover Me
                     <atom:SplitButton.Flyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                           Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                           Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                           Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:SplitButton.Flyout>
                 </atom:SplitButton>
@@ -227,16 +255,19 @@ If a large or small button is desired, set the size property to either large or
                     Click Me
                     <atom:SplitButton.Flyout>
                         <atom:MenuFlyout>
-                            <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
-                                           Icon="{atom:IconProvider Kind=ScissorOutlined}" />
-                            <atom:MenuItem Header="Copy" InputGesture="Ctrl+C"
-                                           Icon="{atom:IconProvider Kind=CopyOutlined}" />
-                            <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
-                                           Icon="{atom:IconProvider Kind=DeleteOutlined}" />
+                            <atom:MenuItem Header="Cut"
+                                           Icon="{atom:IconProvider Kind=ScissorOutlined}"
+                                           InputGesture="Ctrl+X" />
+                            <atom:MenuItem Header="Copy"
+                                           Icon="{atom:IconProvider Kind=CopyOutlined}"
+                                           InputGesture="Ctrl+C" />
+                            <atom:MenuItem Header="Delete"
+                                           Icon="{atom:IconProvider Kind=DeleteOutlined}"
+                                           InputGesture="Ctrl+D" />
                         </atom:MenuFlyout>
                     </atom:SplitButton.Flyout>
                 </atom:SplitButton>
             </WrapPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml
index 8fdd536..a772a0b 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml
@@ -1,86 +1,87 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.SwitchShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-    <showcase:ShowCaseItem
-        Title="Basic"
-        Description="The most basic usage.">
-        <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
-            <atom:ToggleSwitch />
-        </StackPanel>
-    </showcase:ShowCaseItem>
-    
-    <showcase:ShowCaseItem
-        Title="Disabled"
-        Description="Disabled state of Switch.">
-        <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
-            <atom:ToggleSwitch x:Name="ToggleDisabledSwitch" />
-            <atom:Button ButtonType="Primary"
-                         Command="{Binding $parent[showcase:SwitchShowCase].ToggleDisabledStatus}"
-                         CommandParameter="{Binding ElementName=ToggleDisabledSwitch}">
-                toggle disabled
-            </atom:Button>
-        </StackPanel>
-    </showcase:ShowCaseItem>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.SwitchShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Horizontal"
+                        Spacing="10">
+                <atom:ToggleSwitch />
+            </StackPanel>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Text and icon"
-            Description="With text and icon.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
-                <atom:ToggleSwitch
-                    OnContent="On"
-                    OffContent="Off"
-                    IsChecked="True" />
-                <atom:ToggleSwitch
-                    OnContent="开"
-                    OffContent="关" />
+        <desktop:ShowCaseItem Title="Disabled" Description="Disabled state of Switch.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:ToggleSwitch x:Name="ToggleDisabledSwitch" />
+                <atom:Button ButtonType="Primary"
+                             Command="{Binding $parent[showcase:SwitchShowCase].ToggleDisabledStatus}"
+                             CommandParameter="{Binding ElementName=ToggleDisabledSwitch}">
+                    toggle disabled
+                </atom:Button>
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Text and icon" Description="With text and icon.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:ToggleSwitch IsChecked="True"
+                                   OffContent="Off"
+                                   OnContent="On" />
+                <atom:ToggleSwitch OffContent="关" OnContent="开" />
                 <atom:ToggleSwitch>
                     <atom:ToggleSwitch.OnContent>
-                        <atom:PathIcon Kind="TwitterOutlined"/>
+                        <atom:PathIcon Kind="TwitterOutlined" />
                     </atom:ToggleSwitch.OnContent>
                     <atom:ToggleSwitch.OffContent>
-                        <atom:PathIcon Kind="WechatOutlined"/>
+                        <atom:PathIcon Kind="WechatOutlined" />
                     </atom:ToggleSwitch.OffContent>
                 </atom:ToggleSwitch>
                 <atom:ToggleSwitch SizeType="Small">
                     <atom:ToggleSwitch.OnContent>
-                        <atom:PathIcon Kind="CheckOutlined"/>
+                        <atom:PathIcon Kind="CheckOutlined" />
                     </atom:ToggleSwitch.OnContent>
                     <atom:ToggleSwitch.OffContent>
-                        <atom:PathIcon Kind="CloseOutlined"/>
+                        <atom:PathIcon Kind="CloseOutlined" />
                     </atom:ToggleSwitch.OffContent>
                 </atom:ToggleSwitch>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Two sizes"
-            Description="size=Small represents a small sized switch.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
+        <desktop:ShowCaseItem Title="Two sizes" Description="size=Small represents a small sized switch.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
                 <atom:ToggleSwitch />
                 <atom:ToggleSwitch SizeType="Small" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Loading"
-            Description="Mark a pending state of switch.">
-            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
-                <atom:ToggleSwitch IsLoading="True" IsChecked="true" x:Name="ToggleSwitchDefault" />
-                <atom:ToggleSwitch SizeType="Small" IsLoading="True" x:Name="ToggleSwitchSmall" />
-                <atom:Button ButtonType="Primary"
-                             x:Name="ToggleLoadingStatusBtn"
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Loading" Description="Mark a pending state of switch.">
+            <StackPanel HorizontalAlignment="Left"
+                        Orientation="Vertical"
+                        Spacing="10">
+                <atom:ToggleSwitch x:Name="ToggleSwitchDefault"
+                                   IsChecked="true"
+                                   IsLoading="True" />
+                <atom:ToggleSwitch x:Name="ToggleSwitchSmall"
+                                   IsLoading="True"
+                                   SizeType="Small" />
+                <atom:Button x:Name="ToggleLoadingStatusBtn"
+                             ButtonType="Primary"
                              Command="{Binding $parent[showcase:SwitchShowCase].ToggleLoadingStatus}"
                              CommandParameter="{Binding ElementName=ToggleLoadingStatusBtn}">
                     toggle loading
                 </atom:Button>
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TabControlShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TabControlShowCase.axaml
index 42a4585..985928f 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TabControlShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TabControlShowCase.axaml
@@ -1,18 +1,16 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TabControlShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TabControlShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
     <TabControl>
         <TabItem Header="TabControl">
-            <showcase:ShowCasePanel>
-                <showcase:ShowCaseItem
-                    Title="Basic"
-                    Description="Default activate first tab.">
+            <desktop:ShowCasePanel>
+                <desktop:ShowCaseItem Title="Basic" Description="Default activate first tab.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabControl>
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
@@ -20,61 +18,53 @@
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
                         </atom:TabControl>
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Disabled"
-                    Description="Disabled a tab.">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Disabled" Description="Disabled a tab.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:CardTabControl>
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2" IsEnabled="False">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
                         </atom:CardTabControl>
-                        
+
                         <atom:TabControl>
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2" IsEnabled="False">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
                         </atom:TabControl>
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Centered"
-                    Description="Centered tabs.">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Centered" Description="Centered tabs.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabControl TabAlignmentCenter="True">
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
                         </atom:TabControl>
-                        
+
                         <atom:CardTabControl TabAlignmentCenter="True">
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
                         </atom:CardTabControl>
-                        
+
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Icon"
-                    Description="The Tab with Icon.">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Icon" Description="The Tab with Icon.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabControl>
                             <atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3" Icon="{atom:IconProvider Kind=WechatOutlined}">Content of Tab Pane 3</atom:TabItem>
                         </atom:TabControl>
-        
+
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Slide"
-                    Description="In order to fit in more tabs, they can slide left and right (or up and down).">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Slide" Description="In order to fit in more tabs, they can slide left and right (or up and down).">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabControl>
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
@@ -98,7 +88,7 @@
                             <atom:TabItem Header="Tab 19">Content of Tab Pane 19</atom:TabItem>
                             <atom:TabItem Header="Tab 20">Content of Tab Pane 20</atom:TabItem>
                         </atom:TabControl>
-                        
+
                         <atom:CardTabControl>
                             <atom:TabItem Header="Tab 1">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2">Content of Tab Pane 2</atom:TabItem>
@@ -122,13 +112,11 @@
                             <atom:TabItem Header="Tab 20">Content of Tab Pane 20</atom:TabItem>
                         </atom:CardTabControl>
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Card type tab"
-                    Description="Another type of Tabs, which doesn't support vertical mode.">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Card type tab" Description="Another type of Tabs, which doesn't support vertical mode.">
                     <StackPanel Orientation="Vertical" Spacing="20">
-                        
+
                         <atom:CardTabControl>
                             <atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
@@ -136,15 +124,13 @@
                         </atom:CardTabControl>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                 <showcase:ShowCaseItem
-                    Title="Position"
-                    Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Position" Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
-                            <atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionTabControlOptionGroup">
+                            <atom:OptionButtonGroup Name="PositionTabControlOptionGroup" ButtonStyle="Outline">
                                 <atom:OptionButton IsChecked="True">Top</atom:OptionButton>
                                 <atom:OptionButton>Bottom</atom:OptionButton>
                                 <atom:OptionButton>Left</atom:OptionButton>
@@ -153,12 +139,12 @@
                         </StackPanel>
 
                         <atom:TabControl Name="PositionTabControl"
-                                         DockPanel.Dock="{Binding PositionTabControlPlacement}"
-                                         TabStripPlacement="{Binding PositionTabControlPlacement}"
-                                         Height="300"
                                          Width="400"
+                                         Height="300"
                                          HorizontalAlignment="Left"
-                                         VerticalAlignment="Top">
+                                         VerticalAlignment="Top"
+                                         DockPanel.Dock="{Binding PositionTabControlPlacement}"
+                                         TabStripPlacement="{Binding PositionTabControlPlacement}">
                             <atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
@@ -170,16 +156,15 @@
                         </atom:TabControl>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Card Shape Position"
-                    Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile."
-                    Margin="0, 0, 10, 0">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Card Shape Position"
+                                      Margin="0,0,10,0"
+                                      Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
-                            <atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionCardTabControlOptionGroup">
+                            <atom:OptionButtonGroup Name="PositionCardTabControlOptionGroup" ButtonStyle="Outline">
                                 <atom:OptionButton IsChecked="True">Top</atom:OptionButton>
                                 <atom:OptionButton>Bottom</atom:OptionButton>
                                 <atom:OptionButton>Left</atom:OptionButton>
@@ -188,13 +173,13 @@
                         </StackPanel>
 
                         <atom:CardTabControl Name="PositionCardTabControl"
-                                           DockPanel.Dock="{Binding PositionCardTabControlPlacement}"
-                                           TabStripPlacement="{Binding PositionCardTabControlPlacement}"
-                                           IsShowAddTabButton="True"
-                                           Height="300"
-                                           Width="500"
-                                           HorizontalAlignment="Left"
-                                           VerticalAlignment="Top">
+                                             Width="500"
+                                             Height="300"
+                                             HorizontalAlignment="Left"
+                                             VerticalAlignment="Top"
+                                             DockPanel.Dock="{Binding PositionCardTabControlPlacement}"
+                                             IsShowAddTabButton="True"
+                                             TabStripPlacement="{Binding PositionCardTabControlPlacement}">
                             <atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
                             <atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
                             <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
@@ -210,15 +195,13 @@
                         </atom:CardTabControl>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                 <showcase:ShowCaseItem
-                    Title="Size"
-                    Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
+                <desktop:ShowCaseItem Title="Size" Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
-                            <atom:OptionButtonGroup ButtonStyle="Outline" Name="SizeTypeTabControlOptionGroup">
+                            <atom:OptionButtonGroup Name="SizeTypeTabControlOptionGroup" ButtonStyle="Outline">
                                 <atom:OptionButton>Small</atom:OptionButton>
                                 <atom:OptionButton IsChecked="True">Middle</atom:OptionButton>
                                 <atom:OptionButton>Large</atom:OptionButton>
@@ -240,27 +223,25 @@
                         </atom:CardTabControl>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
-                
-                <showcase:ShowCaseItem
-                    Title="Add and close tab"
-                    Description="Hide default plus icon, and bind event for customized trigger." Margin="0, 0, 30, 0">
-                    <atom:CardTabControl IsShowAddTabButton="True" Name="AddTabDemoTabControl">
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Add and close tab"
+                                      Margin="0,0,30,0"
+                                      Description="Hide default plus icon, and bind event for customized trigger.">
+                    <atom:CardTabControl Name="AddTabDemoTabControl" IsShowAddTabButton="True">
                         <atom:TabItem Header="Tab 1" Icon="{atom:IconProvider Kind=AppleOutlined}">Content of Tab Pane 1</atom:TabItem>
                         <atom:TabItem Header="Tab 2" Icon="{atom:IconProvider Kind=AndroidOutlined}">Content of Tab Pane 2</atom:TabItem>
                         <atom:TabItem Header="Tab 3">Content of Tab Pane 3</atom:TabItem>
                         <atom:TabItem Header="Tab 4" Icon="{atom:IconProvider Kind=WechatOutlined}">Content of Tab Pane 4</atom:TabItem>
                     </atom:CardTabControl>
-                </showcase:ShowCaseItem>
-                
-            </showcase:ShowCasePanel>
-            
+                </desktop:ShowCaseItem>
+
+            </desktop:ShowCasePanel>
+
         </TabItem>
         <TabItem Header="TabStrip">
-            <showcase:ShowCasePanel>
-                <showcase:ShowCaseItem
-                    Title="Basic"
-                    Description="Default activate first tab.">
+            <desktop:ShowCasePanel>
+                <desktop:ShowCaseItem Title="Basic" Description="Default activate first tab.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabStrip>
                             <atom:TabStripItem>Tab 1</atom:TabStripItem>
@@ -268,48 +249,42 @@
                             <atom:TabStripItem>Tab 3</atom:TabStripItem>
                         </atom:TabStrip>
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Disabled"
-                    Description="Disabled a tab.">
+                <desktop:ShowCaseItem Title="Disabled" Description="Disabled a tab.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:CardTabStrip>
                             <atom:TabStripItem>Tab 1</atom:TabStripItem>
-                            <atom:TabStripItem IsEnabled="False" IsClosable="True">Tab 2</atom:TabStripItem>
+                            <atom:TabStripItem IsClosable="True" IsEnabled="False">Tab 2</atom:TabStripItem>
                             <atom:TabStripItem>Tab 3</atom:TabStripItem>
                         </atom:CardTabStrip>
-                        
+
                         <atom:TabStrip>
                             <atom:TabStripItem>Tab 1</atom:TabStripItem>
                             <atom:TabStripItem IsEnabled="False">Tab 2</atom:TabStripItem>
                             <atom:TabStripItem>Tab 3</atom:TabStripItem>
                         </atom:TabStrip>
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Centered"
-                    Description="Centered tabs.">
+                <desktop:ShowCaseItem Title="Centered" Description="Centered tabs.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabStrip TabAlignmentCenter="True">
                             <atom:TabStripItem>Tab 1</atom:TabStripItem>
                             <atom:TabStripItem>Tab 2</atom:TabStripItem>
                             <atom:TabStripItem>Tab 3</atom:TabStripItem>
                         </atom:TabStrip>
-                        
+
                         <atom:CardTabStrip TabAlignmentCenter="True">
                             <atom:TabStripItem>Tab 1</atom:TabStripItem>
                             <atom:TabStripItem>Tab 2</atom:TabStripItem>
                             <atom:TabStripItem>Tab 3</atom:TabStripItem>
                         </atom:CardTabStrip>
-                        
-                    </StackPanel>
-                </showcase:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Icon"
-                    Description="The Tab with Icon.">
+                    </StackPanel>
+                </desktop:ShowCaseItem>
+
+                <desktop:ShowCaseItem Title="Icon" Description="The Tab with Icon.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabStrip>
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
@@ -317,11 +292,9 @@
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=WechatOutlined}">Tab 3</atom:TabStripItem>
                         </atom:TabStrip>
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Slide"
-                    Description="In order to fit in more tabs, they can slide left and right (or up and down).">
+                <desktop:ShowCaseItem Title="Slide" Description="In order to fit in more tabs, they can slide left and right (or up and down).">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:TabStrip>
                             <atom:TabStripItem>Tab 1</atom:TabStripItem>
@@ -349,11 +322,9 @@
                             <atom:TabStripItem>Tab 23</atom:TabStripItem>
                         </atom:TabStrip>
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Card type tab"
-                    Description="Another type of Tabs, which doesn't support vertical mode.">
+                <desktop:ShowCaseItem Title="Card type tab" Description="Another type of Tabs, which doesn't support vertical mode.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <atom:CardTabStrip>
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
@@ -363,15 +334,13 @@
                         </atom:CardTabStrip>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Position"
-                    Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
+                <desktop:ShowCaseItem Title="Position" Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
-                            <atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionTabStripOptionGroup">
+                            <atom:OptionButtonGroup Name="PositionTabStripOptionGroup" ButtonStyle="Outline">
                                 <atom:OptionButton IsChecked="True">Top</atom:OptionButton>
                                 <atom:OptionButton>Bottom</atom:OptionButton>
                                 <atom:OptionButton>Left</atom:OptionButton>
@@ -388,23 +357,23 @@
                                 <atom:TabStripItem>Tab 3</atom:TabStripItem>
                                 <atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
                             </atom:TabStrip>
-                            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
+                            <Border HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
                                     Background="rgb(241, 243, 246)">
                                 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab Content</TextBlock>
                             </Border>
                         </DockPanel>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Card Shape Position"
-                    Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile."
-                    Margin="0, 0, 10, 0">
+                <desktop:ShowCaseItem Title="Card Shape Position"
+                                      Margin="0,0,10,0"
+                                      Description="Tab's position: left, right, top or bottom. Will auto switch to top in mobile.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
-                            <atom:OptionButtonGroup ButtonStyle="Outline" Name="PositionCardTabStripOptionGroup">
+                            <atom:OptionButtonGroup Name="PositionCardTabStripOptionGroup" ButtonStyle="Outline">
                                 <atom:OptionButton IsChecked="True">Top</atom:OptionButton>
                                 <atom:OptionButton>Bottom</atom:OptionButton>
                                 <atom:OptionButton>Left</atom:OptionButton>
@@ -415,29 +384,28 @@
                         <DockPanel Height="300">
                             <atom:CardTabStrip Name="PositionCardTabStrip"
                                                DockPanel.Dock="{Binding PositionCardTabStripPlacement}"
-                                               TabStripPlacement="{Binding PositionCardTabStripPlacement}"
-                                               IsShowAddTabButton="True">
+                                               IsShowAddTabButton="True"
+                                               TabStripPlacement="{Binding PositionCardTabStripPlacement}">
                                 <atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
                                 <atom:TabStripItem Icon="{atom:IconProvider Kind=AndroidOutlined}">Tab 2</atom:TabStripItem>
                                 <atom:TabStripItem>Tab 3</atom:TabStripItem>
                                 <atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
                             </atom:CardTabStrip>
-                            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
+                            <Border HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
                                     Background="rgb(241, 243, 246)">
                                 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab Content</TextBlock>
                             </Border>
                         </DockPanel>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Size"
-                    Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
+                <desktop:ShowCaseItem Title="Size" Description="Large size tabs are usually used in page header, and small size could be used in Modal.">
                     <StackPanel Orientation="Vertical" Spacing="20">
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <TextBlock VerticalAlignment="Center">Tab position:</TextBlock>
-                            <atom:OptionButtonGroup ButtonStyle="Outline" Name="SizeTypeTabStripOptionGroup">
+                            <atom:OptionButtonGroup Name="SizeTypeTabStripOptionGroup" ButtonStyle="Outline">
                                 <atom:OptionButton>Small</atom:OptionButton>
                                 <atom:OptionButton IsChecked="True">Middle</atom:OptionButton>
                                 <atom:OptionButton>Large</atom:OptionButton>
@@ -459,22 +427,22 @@
                         </atom:CardTabStrip>
 
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-                <showcase:ShowCaseItem
-                    Title="Add and close tab"
-                    Description="Hide default plus icon, and bind event for customized trigger." Margin="0, 0, 30, 0">
+                <desktop:ShowCaseItem Title="Add and close tab"
+                                      Margin="0,0,30,0"
+                                      Description="Hide default plus icon, and bind event for customized trigger.">
                     <StackPanel Orientation="Vertical" Spacing="20">
-                        <atom:CardTabStrip IsShowAddTabButton="True" Name="AddTabDemoStrip">
+                        <atom:CardTabStrip Name="AddTabDemoStrip" IsShowAddTabButton="True">
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=AppleOutlined}">Tab 1</atom:TabStripItem>
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=AndroidOutlined}">Tab 2</atom:TabStripItem>
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=WechatOutlined}">Tab 3</atom:TabStripItem>
                             <atom:TabStripItem Icon="{atom:IconProvider Kind=GithubOutlined}" IsClosable="True">Tab 4</atom:TabStripItem>
                         </atom:CardTabStrip>
                     </StackPanel>
-                </showcase:ShowCaseItem>
+                </desktop:ShowCaseItem>
 
-            </showcase:ShowCasePanel>
+            </desktop:ShowCasePanel>
         </TabItem>
     </TabControl>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml
index a0f69e4..3d79b10 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml
@@ -1,21 +1,19 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TagShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCasePanel.Styles>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TagShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCasePanel.Styles>
             <Style Selector="atom|Tag">
                 <Setter Property="Margin" Value="5" />
             </Style>
-        </showcase:ShowCasePanel.Styles>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Usage of basic Tag, and it could be IsClosable and customize close button by set closeIcon property,will display default close button when closeIcon is setting to true. IsClosable Tag supports onClose events.">
+        </desktop:ShowCasePanel.Styles>
+        <desktop:ShowCaseItem Title="Basic" Description="Usage of basic Tag, and it could be IsClosable and customize close button by set closeIcon property,will display default close button when closeIcon is setting to true. IsClosable Tag supports onClose events.">
             <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <atom:Tag>Tag 1</atom:Tag>
                 <atom:Tag>Link</atom:Tag>
@@ -27,13 +25,15 @@
                     Tag 2
                 </atom:Tag>
             </WrapPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Colorful Tag"
-            Description="We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.">
+        <desktop:ShowCaseItem Title="Colorful Tag" Description="We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.">
             <StackPanel Orientation="Vertical">
-                <TextBlock FontWeight="Bold" FontSize="14" Margin="0, 0, 0, 10">Presets</TextBlock>
+                <TextBlock Margin="0,0,0,10"
+                           FontSize="14"
+                           FontWeight="Bold">
+                    Presets
+                </TextBlock>
                 <WrapPanel HorizontalAlignment="Left">
                     <atom:Tag TagColor="magenta">magenta</atom:Tag>
                     <atom:Tag TagColor="red">red</atom:Tag>
@@ -48,22 +48,28 @@
                     <atom:Tag TagColor="purple">purple</atom:Tag>
                 </WrapPanel>
 
-                <TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
+                <TextBlock Margin="0,20,0,10"
+                           FontSize="14"
+                           FontWeight="Bold">
+                    Custom
+                </TextBlock>
                 <WrapPanel HorizontalAlignment="Left">
                     <atom:Tag TagColor="#f50">#f50</atom:Tag>
-                    <atom:Tag TagColor="#2db7f5" IsClosable="True">#2db7f5</atom:Tag>
+                    <atom:Tag IsClosable="True" TagColor="#2db7f5">#2db7f5</atom:Tag>
                     <atom:Tag TagColor="#87d068">#87d068</atom:Tag>
                     <atom:Tag TagColor="#108ee9">#108ee9</atom:Tag>
                 </WrapPanel>
             </StackPanel>
 
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Status Tag"
-            Description="We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.">
+        <desktop:ShowCaseItem Title="Status Tag" Description="We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.">
             <StackPanel Orientation="Vertical">
-                <TextBlock FontWeight="Bold" FontSize="14" Margin="0, 0, 0, 10">Without icon</TextBlock>
+                <TextBlock Margin="0,0,0,10"
+                           FontSize="14"
+                           FontWeight="Bold">
+                    Without icon
+                </TextBlock>
                 <WrapPanel HorizontalAlignment="Left">
                     <atom:Tag TagColor="success">success</atom:Tag>
                     <atom:Tag TagColor="info">processing</atom:Tag>
@@ -72,7 +78,11 @@
                     <atom:Tag TagColor="default">default</atom:Tag>
                 </WrapPanel>
 
-                <TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
+                <TextBlock Margin="0,20,0,10"
+                           FontSize="14"
+                           FontWeight="Bold">
+                    Custom
+                </TextBlock>
                 <WrapPanel HorizontalAlignment="Left">
                     <atom:Tag TagColor="success">
                         <atom:Tag.Icon>
@@ -113,12 +123,9 @@
                 </WrapPanel>
             </StackPanel>
 
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Icon"
-            Description="Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.
-If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.">
+        <desktop:ShowCaseItem Title="Icon" Description="Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag. If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.">
             <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <atom:Tag TagColor="#55acee">
                     <atom:Tag.Icon>
@@ -145,11 +152,9 @@ If you want specific control over the positioning and placement of the Icon, the
                     Linkedin
                 </atom:Tag>
             </WrapPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="borderless"
-            Description="borderless">
+        <desktop:ShowCaseItem Title="borderless" Description="borderless">
             <StackPanel Orientation="Vertical">
                 <WrapPanel HorizontalAlignment="Left">
                     <atom:Tag Bordered="False">Tag1</atom:Tag>
@@ -158,28 +163,30 @@ If you want specific control over the positioning and placement of the Icon, the
                     <atom:Tag Bordered="False" IsClosable="True">Tag4</atom:Tag>
                 </WrapPanel>
 
-                <atom:Separator FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 20"/>
+                <atom:Separator Margin="0,20,0,20"
+                                FontSize="14"
+                                FontWeight="Bold" />
                 <WrapPanel HorizontalAlignment="Left">
-                    <atom:Tag TagColor="magenta" Bordered="False">magenta</atom:Tag>
-                    <atom:Tag TagColor="red" Bordered="False">red</atom:Tag>
-                    <atom:Tag TagColor="volcano" Bordered="False">volcano</atom:Tag>
-                    <atom:Tag TagColor="orange" Bordered="False">orange</atom:Tag>
-                    <atom:Tag TagColor="gold" Bordered="False">gold</atom:Tag>
-                    <atom:Tag TagColor="lime" Bordered="False">lime</atom:Tag>
-                    <atom:Tag TagColor="green" Bordered="False">green</atom:Tag>
-                    <atom:Tag TagColor="cyan" Bordered="False">cyan</atom:Tag>
-                    <atom:Tag TagColor="blue" Bordered="False">blue</atom:Tag>
-                    <atom:Tag TagColor="geekblue" Bordered="False">geekblue</atom:Tag>
-                    <atom:Tag TagColor="purple" Bordered="False">purple</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="magenta">magenta</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="red">red</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="volcano">volcano</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="orange">orange</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="gold">gold</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="lime">lime</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="green">green</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="cyan">cyan</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="blue">blue</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="geekblue">geekblue</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="purple">purple</atom:Tag>
 
-                    <atom:Tag TagColor="success" Bordered="False">success</atom:Tag>
-                    <atom:Tag TagColor="info" Bordered="False">processing</atom:Tag>
-                    <atom:Tag TagColor="error" Bordered="False">error</atom:Tag>
-                    <atom:Tag TagColor="warning" Bordered="False">warning</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="success">success</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="info">processing</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="error">error</atom:Tag>
+                    <atom:Tag Bordered="False" TagColor="warning">warning</atom:Tag>
                 </WrapPanel>
             </StackPanel>
 
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml.cs
index d810e9b..1c32713 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TagShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TimePickerShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TimePickerShowCase.axaml
index 1d8eea7..a8daf4d 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TimePickerShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TimePickerShowCase.axaml
@@ -1,145 +1,137 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TimePickerShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="Click TimePicker, and then we could select or input a time in panel.">
-            <atom:TimePicker Watermark="Select time" Width="200" />
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Three Sizes"
-            Description="The input box comes in three sizes: large, middle and small. Large is used in the form, while the medium size is the default.">
-           <StackPanel Orientation="Horizontal" Spacing="10">
-               <atom:TimePicker Watermark="Select time" Width="160" SizeType="Large" DefaultTime="12:08:23"/>
-               <atom:TimePicker Watermark="Select time" Width="160" SizeType="Middle" DefaultTime="12:08:23"/>
-               <atom:TimePicker Watermark="Select time" Width="160" SizeType="Small" DefaultTime="12:08:23"/>
-           </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Disabled"
-            Description="A disabled state of the TimePicker.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TimePickerShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="Click TimePicker, and then we could select or input a time in panel.">
+            <atom:TimePicker Width="200" Watermark="Select time" />
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Three Sizes" Description="The input box comes in three sizes: large, middle and small. Large is used in the form, while the medium size is the default.">
             <StackPanel Orientation="Horizontal" Spacing="10">
-                <atom:TimePicker Watermark="Select time" Width="160" IsEnabled="False" DefaultTime="12:08:23"/>
+                <atom:TimePicker Width="160"
+                                 DefaultTime="12:08:23"
+                                 SizeType="Large"
+                                 Watermark="Select time" />
+                <atom:TimePicker Width="160"
+                                 DefaultTime="12:08:23"
+                                 SizeType="Middle"
+                                 Watermark="Select time" />
+                <atom:TimePicker Width="160"
+                                 DefaultTime="12:08:23"
+                                 SizeType="Small"
+                                 Watermark="Select time" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Interval option"
-            Description="Show stepped options by MinuteIncrement SecondIncrement.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Disabled" Description="A disabled state of the TimePicker.">
             <StackPanel Orientation="Horizontal" Spacing="10">
-                <atom:TimePicker Watermark="Select time"
-                                 Width="160" 
+                <atom:TimePicker Width="160"
+                                 DefaultTime="12:08:23"
+                                 IsEnabled="False"
+                                 Watermark="Select time" />
+            </StackPanel>
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Interval option" Description="Show stepped options by MinuteIncrement SecondIncrement.">
+            <StackPanel Orientation="Horizontal" Spacing="10">
+                <atom:TimePicker Width="160"
                                  DefaultTime="12:08:23"
                                  MinuteIncrement="15"
                                  SecondIncrement="10"
-                                 />
+                                 Watermark="Select time" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="12 hours"
-            Description="TimePicker of 12 hours format, with default format h:mm:ss a.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="12 hours" Description="TimePicker of 12 hours format, with default format h:mm:ss a.">
             <StackPanel Orientation="Horizontal" Spacing="10">
-                <atom:TimePicker Watermark="Select time"
-                                 Width="160" 
-                                 DefaultTime="12:08:23"
+                <atom:TimePicker Width="160"
                                  ClockIdentifier="HourClock12"
-                />
-                <atom:TimePicker Watermark="Select time"
-                                 Width="160" 
                                  DefaultTime="12:08:23"
+                                 Watermark="Select time" />
+                <atom:TimePicker Width="160"
                                  ClockIdentifier="HourClock24"
-                />
+                                 DefaultTime="12:08:23"
+                                 Watermark="Select time" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Variants"
-            Description="Bordered-less style component.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Variants" Description="Bordered-less style component.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <StackPanel Orientation="Horizontal" Spacing="5">
-                    <atom:TimePicker Watermark="Outline"
-                                     Width="160" 
+                    <atom:TimePicker Width="160"
                                      StyleVariant="Outline"
-                    />
+                                     Watermark="Outline" />
                     <atom:RangeTimePicker Width="320"
-                                          StyleVariant="Outline"
-                                          RangeStartWatermark="Outline"/>
+                                          RangeStartWatermark="Outline"
+                                          StyleVariant="Outline" />
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Spacing="5">
-                    <atom:TimePicker Watermark="Filled"
-                                     Width="160"
-                                     StyleVariant="Filled" />
+                    <atom:TimePicker Width="160"
+                                     StyleVariant="Filled"
+                                     Watermark="Filled" />
                     <atom:RangeTimePicker Width="320"
-                                          StyleVariant="Outline"
-                                          RangeStartWatermark="Filled"/>
+                                          RangeStartWatermark="Filled"
+                                          StyleVariant="Outline" />
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Spacing="5">
-                    <atom:TimePicker Watermark="Borderless"
-                                     Width="160"
-                                     StyleVariant="Borderless" />
+                    <atom:TimePicker Width="160"
+                                     StyleVariant="Borderless"
+                                     Watermark="Borderless" />
                     <atom:RangeTimePicker Width="320"
-                                          StyleVariant="Borderless"
-                                          RangeStartWatermark="Borderless"/>
+                                          RangeStartWatermark="Borderless"
+                                          StyleVariant="Borderless" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Status"
-            Description="Add status to TimePicker with status, which could be error or warning.">
+        <desktop:ShowCaseItem Title="Status" Description="Add status to TimePicker with status, which could be error or warning.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <StackPanel Orientation="Horizontal" Spacing="5">
                     <atom:TimePicker Width="160"
                                      Status="Default"
                                      Watermark="Select time" />
                     <atom:RangeTimePicker Width="320"
-                                          StyleVariant="Outline"
-                                          Status="Default"
+                                          RangeEndWatermark="End time"
                                           RangeStartWatermark="Start time"
-                                          RangeEndWatermark="End time" />
+                                          Status="Default"
+                                          StyleVariant="Outline" />
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Spacing="5">
                     <atom:TimePicker Width="160"
                                      Status="Warning"
                                      Watermark="Select time" />
                     <atom:RangeTimePicker Width="320"
-                                          StyleVariant="Outline"
-                                          Status="Warning"
+                                          RangeEndWatermark="End time"
                                           RangeStartWatermark="Start time"
-                                          RangeEndWatermark="End time" />
+                                          Status="Warning"
+                                          StyleVariant="Outline" />
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" Spacing="5">
                     <atom:TimePicker Width="160"
                                      Status="Error"
                                      Watermark="Select time" />
                     <atom:RangeTimePicker Width="320"
-                                          StyleVariant="Outline"
-                                          Status="Error"
+                                          RangeEndWatermark="End time"
                                           RangeStartWatermark="Start time"
-                                          RangeEndWatermark="End time"/>
+                                          Status="Error"
+                                          StyleVariant="Outline" />
                 </StackPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Time Range Picker"
-            Description="Use time range picker with RangeTimePicker.">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Time Range Picker" Description="Use time range picker with RangeTimePicker.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:RangeTimePicker Width="320"
-                                 Status="Default"
-                                 RangeStartWatermark="Start time"
-                                 RangeEndWatermark="End time"/>
+                                      RangeEndWatermark="End time"
+                                      RangeStartWatermark="Start time"
+                                      Status="Default" />
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml
index 03ba4cc..661ed05 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TimelineShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-     
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TimelineShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml.cs
index 3408990..7076620 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TimelineShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml
index 9465263..a403f23 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TitleBarShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-     
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TitleBarShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml.cs
index 3af90d6..1358878 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TitleBarShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml
index 66cbfe7..5edbf0d 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml
@@ -1,13 +1,11 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.ToolBarShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-     
-    </showcase:ShowCasePanel>
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.ToolBarShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel />
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml.cs
index e7a24b3..a404a30 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/ToolBarShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TooltipShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TooltipShowCase.axaml
index 41ad367..0eba683 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TooltipShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TooltipShowCase.axaml
@@ -1,27 +1,23 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TooltipShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The simplest usage.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TooltipShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The simplest usage.">
             <StackPanel Orientation="Vertical" Spacing="10">
-                <TextBlock atom:ToolTip.Placement="Top" HorizontalAlignment="Left">
+                <TextBlock HorizontalAlignment="Left" atom:ToolTip.Placement="Top">
                     Tooltip will show on mouse enter.
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                 </TextBlock>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Placement"
-            Description="There are 12 placement options available.">
+        <desktop:ShowCaseItem Title="Placement" Description="There are 12 placement options available.">
             <Grid>
                 <Grid.Styles>
                     <Style Selector="atom|Button">
@@ -30,78 +26,100 @@
                     </Style>
                 </Grid.Styles>
                 <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
-                    <RowDefinition Height="Auto"></RowDefinition>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
-                    <ColumnDefinition Width="Auto"></ColumnDefinition>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
 
-                <atom:Button Grid.Row="1" Grid.Column="0" Text="LT">
+                <atom:Button Grid.Row="1"
+                             Grid.Column="0"
+                             Text="LT">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>LeftEdgeAlignedTop</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="2" Grid.Column="0" Text="Left">
+                <atom:Button Grid.Row="2"
+                             Grid.Column="0"
+                             Text="Left">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>Left</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="3" Grid.Column="0" Text="LB">
+                <atom:Button Grid.Row="3"
+                             Grid.Column="0"
+                             Text="LB">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>LeftEdgeAlignedBottom</atom:ToolTip.Placement>
                 </atom:Button>
 
-                <atom:Button Grid.Row="0" Grid.Column="1" Text="TL">
+                <atom:Button Grid.Row="0"
+                             Grid.Column="1"
+                             Text="TL">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>TopEdgeAlignedLeft</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="0" Grid.Column="2" Text="Top">
+                <atom:Button Grid.Row="0"
+                             Grid.Column="2"
+                             Text="Top">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="0" Grid.Column="3" Text="TR">
+                <atom:Button Grid.Row="0"
+                             Grid.Column="3"
+                             Text="TR">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>TopEdgeAlignedRight</atom:ToolTip.Placement>
                 </atom:Button>
 
-                <atom:Button Grid.Row="1" Grid.Column="4" Text="RT">
+                <atom:Button Grid.Row="1"
+                             Grid.Column="4"
+                             Text="RT">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>RightEdgeAlignedTop</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="2" Grid.Column="4" Text="Right">
+                <atom:Button Grid.Row="2"
+                             Grid.Column="4"
+                             Text="Right">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>Right</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="3" Grid.Column="4" Text="RB">
+                <atom:Button Grid.Row="3"
+                             Grid.Column="4"
+                             Text="RB">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>RightEdgeAlignedBottom</atom:ToolTip.Placement>
                 </atom:Button>
 
-                <atom:Button Grid.Row="4" Grid.Column="1" Text="BL">
+                <atom:Button Grid.Row="4"
+                             Grid.Column="1"
+                             Text="BL">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>BottomEdgeAlignedLeft</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="4" Grid.Column="2" Text="Bottom">
+                <atom:Button Grid.Row="4"
+                             Grid.Column="2"
+                             Text="Bottom">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>Bottom</atom:ToolTip.Placement>
                 </atom:Button>
-                <atom:Button Grid.Row="4" Grid.Column="3" Text="BR">
+                <atom:Button Grid.Row="4"
+                             Grid.Column="3"
+                             Text="BR">
                     <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                     <atom:ToolTip.Placement>BottomEdgeAlignedRight</atom:ToolTip.Placement>
                 </atom:Button>
 
             </Grid>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Arrow"
-            Description="Support show, hide or keep arrow in the center.">
+        <desktop:ShowCaseItem Title="Arrow" Description="Support show, hide or keep arrow in the center.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <atom:Segmented x:Name="ArrowSegmented">
                     <atom:SegmentedItem>Show</atom:SegmentedItem>
@@ -116,208 +134,238 @@
                         </Style>
                     </Grid.Styles>
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
-                        <RowDefinition Height="Auto"></RowDefinition>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
-                        <ColumnDefinition Width="Auto"></ColumnDefinition>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
 
-                    <atom:Button Grid.Row="1" Grid.Column="0" Text="LT"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="1"
+                                 Grid.Column="0"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="LT">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>LeftEdgeAlignedTop</atom:ToolTip.Placement>
                     </atom:Button>
-                    <atom:Button Grid.Row="2" Grid.Column="0" Text="Left"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="2"
+                                 Grid.Column="0"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="Left">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Left</atom:ToolTip.Placement>
                     </atom:Button>
-                    <atom:Button Grid.Row="3" Grid.Column="0" Text="LB"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="3"
+                                 Grid.Column="0"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="LB">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>LeftEdgeAlignedBottom</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Grid.Row="0" Grid.Column="1" Text="TL"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="0"
+                                 Grid.Column="1"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="TL">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>TopEdgeAlignedLeft</atom:ToolTip.Placement>
                     </atom:Button>
-                    <atom:Button Grid.Row="0" Grid.Column="2" Text="Top"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="0"
+                                 Grid.Column="2"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="Top">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
-                    <atom:Button Grid.Row="0" Grid.Column="3" Text="TR"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="0"
+                                 Grid.Column="3"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="TR">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>TopEdgeAlignedRight</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Grid.Row="1" Grid.Column="4" Text="RT"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="1"
+                                 Grid.Column="4"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="RT">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>RightEdgeAlignedTop</atom:ToolTip.Placement>
                     </atom:Button>
-                    
-                    <atom:Button Grid.Row="2" Grid.Column="4" Text="Right"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+
+                    <atom:Button Grid.Row="2"
+                                 Grid.Column="4"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="Right">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Right</atom:ToolTip.Placement>
                     </atom:Button>
-                    
-                    <atom:Button Grid.Row="3" Grid.Column="4" Text="RB"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+
+                    <atom:Button Grid.Row="3"
+                                 Grid.Column="4"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="RB">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>RightEdgeAlignedBottom</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Grid.Row="4" Grid.Column="1" Text="BL"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+                    <atom:Button Grid.Row="4"
+                                 Grid.Column="1"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="BL">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>BottomEdgeAlignedLeft</atom:ToolTip.Placement>
                     </atom:Button>
-                    
-                    <atom:Button Grid.Row="4" Grid.Column="2" Text="Bottom"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+
+                    <atom:Button Grid.Row="4"
+                                 Grid.Column="2"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="Bottom">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Bottom</atom:ToolTip.Placement>
                     </atom:Button>
-                    
-                    <atom:Button Grid.Row="4" Grid.Column="3" Text="BR"
-                                 atom:ToolTip.IsShowArrow="{Binding  ShowArrow}"
-                                 atom:ToolTip.IsPointAtCenter="{Binding  IsPointAtCenter}">
+
+                    <atom:Button Grid.Row="4"
+                                 Grid.Column="3"
+                                 atom:ToolTip.IsPointAtCenter="{Binding IsPointAtCenter}"
+                                 atom:ToolTip.IsShowArrow="{Binding ShowArrow}"
+                                 Text="BR">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>BottomEdgeAlignedRight</atom:ToolTip.Placement>
                     </atom:Button>
 
                 </Grid>
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Colorful Tooltip"
-            Description="We preset a series of colorful Tooltip styles for use in different situations.">
-            <showcase:ShowCaseItem.Styles>
+        <desktop:ShowCaseItem Title="Colorful Tooltip" Description="We preset a series of colorful Tooltip styles for use in different situations.">
+            <desktop:ShowCaseItem.Styles>
                 <Style Selector="atom|Button">
                     <Setter Property="Margin" Value="5" />
                 </Style>
-            </showcase:ShowCaseItem.Styles>
+            </desktop:ShowCaseItem.Styles>
             <StackPanel Orientation="Vertical">
-                <TextBlock FontWeight="Bold" FontSize="14" Margin="0, 0, 0, 10">Presets</TextBlock>
+                <TextBlock Margin="0,0,0,10"
+                           FontSize="14"
+                           FontWeight="Bold">
+                    Presets
+                </TextBlock>
                 <WrapPanel HorizontalAlignment="Left">
-                    <atom:Button Text="Blue" atom:ToolTip.PresetColor="Blue">
+                    <atom:Button atom:ToolTip.PresetColor="Blue" Text="Blue">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
-                    <atom:Button Text="Red" atom:ToolTip.PresetColor="Red">
+                    <atom:Button atom:ToolTip.PresetColor="Red" Text="Red">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Volcano" atom:ToolTip.PresetColor="Volcano">
+                    <atom:Button atom:ToolTip.PresetColor="Volcano" Text="Volcano">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Orange" atom:ToolTip.PresetColor="Orange">
+                    <atom:Button atom:ToolTip.PresetColor="Orange" Text="Orange">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Gold" atom:ToolTip.PresetColor="Gold">
+                    <atom:Button atom:ToolTip.PresetColor="Gold" Text="Gold">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Yellow" atom:ToolTip.PresetColor="Yellow">
+                    <atom:Button atom:ToolTip.PresetColor="Yellow" Text="Yellow">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Lime" atom:ToolTip.PresetColor="Lime">
+                    <atom:Button atom:ToolTip.PresetColor="Lime" Text="Lime">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Green" atom:ToolTip.PresetColor="Green">
+                    <atom:Button atom:ToolTip.PresetColor="Green" Text="Green">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Cyan" atom:ToolTip.PresetColor="Cyan">
+                    <atom:Button atom:ToolTip.PresetColor="Cyan" Text="Cyan">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="GeekBlue" atom:ToolTip.PresetColor="GeekBlue">
+                    <atom:Button atom:ToolTip.PresetColor="GeekBlue" Text="GeekBlue">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Purple" atom:ToolTip.PresetColor="Purple">
+                    <atom:Button atom:ToolTip.PresetColor="Purple" Text="Purple">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Pink" atom:ToolTip.PresetColor="Pink">
+                    <atom:Button atom:ToolTip.PresetColor="Pink" Text="Pink">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Magenta" atom:ToolTip.PresetColor="Magenta">
+                    <atom:Button atom:ToolTip.PresetColor="Magenta" Text="Magenta">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="Grey" atom:ToolTip.PresetColor="Grey">
+                    <atom:Button atom:ToolTip.PresetColor="Grey" Text="Grey">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
                 </WrapPanel>
 
-                <TextBlock FontWeight="Bold" FontSize="14" Margin="0, 20, 0, 10">Custom</TextBlock>
+                <TextBlock Margin="0,20,0,10"
+                           FontSize="14"
+                           FontWeight="Bold">
+                    Custom
+                </TextBlock>
                 <WrapPanel HorizontalAlignment="Left">
-                    <atom:Button Text="#f50" atom:ToolTip.Color="#f50">
+                    <atom:Button atom:ToolTip.Color="#f50" Text="#f50">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="#2db7f5" atom:ToolTip.Color="#2db7f5">
+                    <atom:Button atom:ToolTip.Color="#2db7f5" Text="#2db7f5">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="#87d068" atom:ToolTip.Color="#87d068">
+                    <atom:Button atom:ToolTip.Color="#87d068" Text="#87d068">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
 
-                    <atom:Button Text="#108ee9" atom:ToolTip.Color="#108ee9">
+                    <atom:Button atom:ToolTip.Color="#108ee9" Text="#108ee9">
                         <atom:ToolTip.Tip>prompt text</atom:ToolTip.Tip>
                         <atom:ToolTip.Placement>Top</atom:ToolTip.Placement>
                     </atom:Button>
                 </WrapPanel>
             </StackPanel>
-        </showcase:ShowCaseItem>
-    </showcase:ShowCasePanel>
+        </desktop:ShowCaseItem>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/TreeViewShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/TreeViewShowCase.axaml
index d51c854..4905e3c 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/TreeViewShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/TreeViewShowCase.axaml
@@ -1,20 +1,20 @@
-<UserControl
-    x:Class="AtomUI.Demo.Desktop.ShowCase.TreeViewShowCase"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:atom="https://atomui.net"
-    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
-    mc:Ignorable="d">
-    <showcase:ShowCasePanel>
-        <showcase:ShowCaseItem
-            Title="Basic"
-            Description="The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.">
+<UserControl x:Class="AtomUI.Demo.Desktop.ShowCase.TreeViewShowCase"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:atom="https://atomui.net"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
+             mc:Ignorable="d">
+    <desktop:ShowCasePanel>
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.">
             <atom:TreeView IsCheckable="True" IsDefaultExpandAll="True">
                 <atom:TreeViewItem Header="parent 1">
                     <atom:TreeViewItem Header="parent 1-0">
-                        <atom:TreeViewItem Header="leaf" IsCheckable="False" IsChecked="True" />
+                        <atom:TreeViewItem Header="leaf"
+                                           IsCheckable="False"
+                                           IsChecked="True" />
                         <atom:TreeViewItem Header="leaf" />
                     </atom:TreeViewItem>
                     <atom:TreeViewItem Header="parent 1-1" IsChecked="True">
@@ -22,43 +22,45 @@
                     </atom:TreeViewItem>
                 </atom:TreeViewItem>
             </atom:TreeView>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="Block Node"
-            Description="Block Node.">
-            <atom:TreeView IsCheckable="True" IsDefaultExpandAll="True" NodeHoverMode="Block">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="Block Node" Description="Block Node.">
+            <atom:TreeView IsCheckable="True"
+                           IsDefaultExpandAll="True"
+                           NodeHoverMode="Block">
                 <atom:TreeViewItem Header="parent">
                     <atom:TreeViewItem Header="child 1" IsEnabled="False" />
                     <atom:TreeViewItem Header="child 2" IsCheckable="False" />
                 </atom:TreeViewItem>
             </atom:TreeView>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem
-            Title="Tree with line"
-            Description="Tree with connected line between nodes, turn on by showLine, customize the preset icon by switcherIcon.">
+        <desktop:ShowCaseItem Title="Tree with line" Description="Tree with connected line between nodes, turn on by showLine, customize the preset icon by switcherIcon.">
             <StackPanel Orientation="Vertical" Spacing="10">
                 <StackPanel Orientation="Horizontal" Spacing="10">
                     <TextBlock>showLine:</TextBlock>
-                    <atom:ToggleSwitch IsChecked="{Binding ShowLineSwitchChecked,Mode=TwoWay}"/>
+                    <atom:ToggleSwitch IsChecked="{Binding ShowLineSwitchChecked, Mode=TwoWay}" />
                 </StackPanel>
-                
+
                 <StackPanel Orientation="Horizontal" Spacing="10">
                     <TextBlock>showIcon:</TextBlock>
-                    <atom:ToggleSwitch IsChecked="{Binding ShowIconSwitchChecked,Mode=TwoWay}" />
+                    <atom:ToggleSwitch IsChecked="{Binding ShowIconSwitchChecked, Mode=TwoWay}" />
                 </StackPanel>
-                
+
                 <StackPanel Orientation="Horizontal" Spacing="10">
                     <TextBlock>ShowLeafSwitcher:</TextBlock>
-                    <atom:ToggleSwitch IsChecked="{Binding ShowLeafSwitcherSwitchChecked,Mode=TwoWay}" />
+                    <atom:ToggleSwitch IsChecked="{Binding ShowLeafSwitcherSwitchChecked, Mode=TwoWay}" />
                 </StackPanel>
-                
-                <atom:TreeView IsShowLine="{Binding ShowLineSwitchChecked}"
-                               IsShowIcon="{Binding ShowIconSwitchChecked}"
-                               IsShowLeafSwitcher="{Binding ShowLeafSwitcherSwitchChecked}">
-                    <atom:TreeViewItem Header="parent 1" Icon="{atom:IconProvider Kind=CarryOutOutlined}" IsExpanded="True">
-                        <atom:TreeViewItem Header="parent 1-0" Icon="{atom:IconProvider Kind=CarryOutOutlined}" IsExpanded="True">
+
+                <atom:TreeView IsShowIcon="{Binding ShowIconSwitchChecked}"
+                               IsShowLeafSwitcher="{Binding ShowLeafSwitcherSwitchChecked}"
+                               IsShowLine="{Binding ShowLineSwitchChecked}">
+                    <atom:TreeViewItem Header="parent 1"
+                                       Icon="{atom:IconProvider Kind=CarryOutOutlined}"
+                                       IsExpanded="True">
+                        <atom:TreeViewItem Header="parent 1-0"
+                                           Icon="{atom:IconProvider Kind=CarryOutOutlined}"
+                                           IsExpanded="True">
                             <atom:TreeViewItem Header="leaf 1" Icon="{atom:IconProvider Kind=CarryOutOutlined}" />
                             <atom:TreeViewItem Header="leaf 2" Icon="{atom:IconProvider Kind=CarryOutOutlined}" />
                         </atom:TreeViewItem>
@@ -78,42 +80,41 @@
                     </atom:TreeViewItem>
                 </atom:TreeView>
             </StackPanel>
-        </showcase:ShowCaseItem>
-        
-        <showcase:ShowCaseItem
-            Title="draggable"
-            Description="Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode."
-            Margin="0, 0, 10, 0">
+        </desktop:ShowCaseItem>
+
+        <desktop:ShowCaseItem Title="draggable"
+                              Margin="0,0,10,0"
+                              Description="Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.">
             <atom:TreeView IsDraggable="True" NodeHoverMode="Block">
                 <atom:TreeViewItem Header="0-0">
                     <atom:TreeViewItem Header="0-0-0">
-                        <atom:TreeViewItem Header="0-0-0-0"/>
-                        <atom:TreeViewItem Header="0-0-0-1"/>
-                        <atom:TreeViewItem Header="0-0-0-2"/>
+                        <atom:TreeViewItem Header="0-0-0-0" />
+                        <atom:TreeViewItem Header="0-0-0-1" />
+                        <atom:TreeViewItem Header="0-0-0-2" />
                     </atom:TreeViewItem>
                     <atom:TreeViewItem Header="0-0-1">
-                        <atom:TreeViewItem Header="0-0-1-0"/>
-                        <atom:TreeViewItem Header="0-0-1-1"/>
-                        <atom:TreeViewItem Header="0-0-1-2"/>
+                        <atom:TreeViewItem Header="0-0-1-0" />
+                        <atom:TreeViewItem Header="0-0-1-1" />
+                        <atom:TreeViewItem Header="0-0-1-2" />
                     </atom:TreeViewItem>
-                    <atom:TreeViewItem Header="0-0-2"/>
+                    <atom:TreeViewItem Header="0-0-2" />
                 </atom:TreeViewItem>
                 <atom:TreeViewItem Header="0-1">
                     <atom:TreeViewItem Header="0-1-0">
-                        <atom:TreeViewItem Header="0-1-0-0"/>
-                        <atom:TreeViewItem Header="0-1-0-1"/>
-                        <atom:TreeViewItem Header="0-1-0-2"/>
+                        <atom:TreeViewItem Header="0-1-0-0" />
+                        <atom:TreeViewItem Header="0-1-0-1" />
+                        <atom:TreeViewItem Header="0-1-0-2" />
                     </atom:TreeViewItem>
                     <atom:TreeViewItem Header="0-1-1">
-                        <atom:TreeViewItem Header="0-1-1-0"/>
-                        <atom:TreeViewItem Header="0-1-1-1"/>
-                        <atom:TreeViewItem Header="0-1-1-2"/>
+                        <atom:TreeViewItem Header="0-1-1-0" />
+                        <atom:TreeViewItem Header="0-1-1-1" />
+                        <atom:TreeViewItem Header="0-1-1-2" />
                     </atom:TreeViewItem>
-                    <atom:TreeViewItem Header="0-1-2"/>
+                    <atom:TreeViewItem Header="0-1-2" />
                 </atom:TreeViewItem>
-                <atom:TreeViewItem Header="0-2"/>
+                <atom:TreeViewItem Header="0-2" />
             </atom:TreeView>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml b/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml
index 8f2863d..56e073b 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml
@@ -3,40 +3,38 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:atom="https://atomui.net"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
              mc:Ignorable="d">
-    <showcase:ShowCasePanel>
+    <desktop:ShowCasePanel>
 
-        <showcase:ShowCaseItem Title="Basic" Description="The most basic usage.">
+        <desktop:ShowCaseItem Title="Basic" Description="The most basic usage.">
             <Border Height="300" atom:Watermark.Glyph="{atom:TextGlyph 'AtomUI'}" />
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Multi-line watermark" Description="Use line-break to specify multi-line text watermark content.">
+        <desktop:ShowCaseItem Title="Multi-line watermark" Description="Use line-break to specify multi-line text watermark content.">
             <Border Height="200" atom:Watermark.Glyph="{atom:TextGlyph 'AtomUI&#x000A;Happy Working', FontSize=18, Foreground=Gray}" />
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Image watermark" Description="Specify the image address via image. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.">
+        <desktop:ShowCaseItem Title="Image watermark" Description="Specify the image address via image. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.">
             <Border Height="400">
                 <atom:Watermark.Glyph>
-                    <atom:ImageGlyph Source="/Assets/ATOMUI-LOGO.png"/>
+                    <atom:ImageGlyph Source="/Assets/ATOMUI-LOGO.png" />
                     <!-- <atom:ImageGlyph Source="/Assets/avalonia-logo.ico"/> -->
                 </atom:Watermark.Glyph>
             </Border>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-        <showcase:ShowCaseItem Title="Custom configuration" Description="Preview the watermark effect by configuring custom parameters.">
+        <desktop:ShowCaseItem Title="Custom configuration" Description="Preview the watermark effect by configuring custom parameters.">
             <StackPanel atom:Watermark.Glyph="{atom:TextGlyph 'AtomUI'}">
                 <TextBlock TextWrapping="Wrap">
-                    The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.
-                    <LineBreak /><LineBreak />
-                    Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
-                    <LineBreak /><LineBreak />
-                    Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
-                </TextBlock>
+                    The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.<LineBreak /><LineBreak />
+                    Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.<LineBreak /><LineBreak />
+                    Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.</TextBlock>
                 <Image Source="/Assets/watermark-sample.png" />
             </StackPanel>
-        </showcase:ShowCaseItem>
+        </desktop:ShowCaseItem>
 
-    </showcase:ShowCasePanel>
+    </desktop:ShowCasePanel>
 </UserControl>
\ No newline at end of file
diff --git a/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml.cs b/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml.cs
index 9421426..c313d60 100644
--- a/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml.cs
+++ b/samples/AtomUI.Demo.Desktop/ShowCase/WatermarkShowCase.axaml.cs
@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Button = AtomUI.Controls.Button;
-using ToggleSwitch = AtomUI.Controls.ToggleSwitch;
 
 namespace AtomUI.Demo.Desktop.ShowCase;
 
diff --git a/samples/AtomUI.Demo.Desktop/Themes/TabMenu.axaml b/samples/AtomUI.Demo.Desktop/Themes/TabMenu.axaml
index ccdbbf4..c40d71c 100644
--- a/samples/AtomUI.Demo.Desktop/Themes/TabMenu.axaml
+++ b/samples/AtomUI.Demo.Desktop/Themes/TabMenu.axaml
@@ -1,16 +1,15 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
+    <!-- Add Resources Here -->
     <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
         <Setter Property="TabControl.Template">
-            <!--    -->
+            <!--  -->
             <ControlTemplate TargetType="TabControl">
-                <Border
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
+                <Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
                             <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
@@ -24,13 +23,12 @@
                                 <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
                             </Panel>
                         </ScrollViewer>
-                        <ContentPresenter
-                            Name="PART_SelectedContentHost"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                        <ContentPresenter Name="PART_SelectedContentHost"
+                                          Margin="{TemplateBinding Padding}"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Content="{TemplateBinding SelectedContent}"
+                                          ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>
diff --git a/samples/AtomUI.Demo.Desktop/Themes/ToggleButton.axaml b/samples/AtomUI.Demo.Desktop/Themes/ToggleButton.axaml
index acbfbff..b6cd640 100644
--- a/samples/AtomUI.Demo.Desktop/Themes/ToggleButton.axaml
+++ b/samples/AtomUI.Demo.Desktop/Themes/ToggleButton.axaml
@@ -1,19 +1,17 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
+    <!-- Add Resources Here -->
     <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
         <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">
-                <Border
-                    Name="Background"
-                    Padding="8"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="3">
-                    <PathIcon
-                        Name="Icon"
-                        Width="16"
-                        Height="16"
-                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z"
-                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                <Border Name="Background"
+                        Padding="8"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="3">
+                    <PathIcon Name="Icon"
+                              Width="16"
+                              Height="16"
+                              Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z"
+                              Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
                 </Border>
             </ControlTemplate>
         </Setter>
diff --git a/samples/AtomUI.Demo.Desktop/Utils/EnumExtension.cs b/samples/AtomUI.Demo.Desktop/Utils/EnumExtension.cs
index c628f0a..96393e4 100644
--- a/samples/AtomUI.Demo.Desktop/Utils/EnumExtension.cs
+++ b/samples/AtomUI.Demo.Desktop/Utils/EnumExtension.cs
@@ -1,6 +1,6 @@
 using Avalonia.Markup.Xaml;
 
-namespace AtomUI.Demo.Desktop
+namespace AtomUI.Demo.Desktop.Utils
 {
     /// <summary>
     /// Xaml markup to get the enum values.
diff --git a/samples/AtomUI.Demo.Desktop/ViewModels/CheckBoxShowCaseModel.cs b/samples/AtomUI.Demo.Desktop/ViewModels/CheckBoxShowCaseModel.cs
index b904bff..c06b37f 100644
--- a/samples/AtomUI.Demo.Desktop/ViewModels/CheckBoxShowCaseModel.cs
+++ b/samples/AtomUI.Demo.Desktop/ViewModels/CheckBoxShowCaseModel.cs
@@ -1,4 +1,3 @@
-using AtomUI.Controls;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace AtomUI.Demo.Desktop.ViewModels;
diff --git a/samples/AtomUI.Demo.Desktop/ViewModels/DataGridDemoViewModel.cs b/samples/AtomUI.Demo.Desktop/ViewModels/DataGridDemoViewModel.cs
index 6a5d9a4..b678d43 100644
--- a/samples/AtomUI.Demo.Desktop/ViewModels/DataGridDemoViewModel.cs
+++ b/samples/AtomUI.Demo.Desktop/ViewModels/DataGridDemoViewModel.cs
@@ -1,7 +1,4 @@
-using System;
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.Linq;
 using Avalonia.Collections;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
diff --git a/samples/AtomUI.Demo.Desktop/ViewModels/TabControlDemoViewModel.cs b/samples/AtomUI.Demo.Desktop/ViewModels/TabControlDemoViewModel.cs
index d402708..a314341 100644
--- a/samples/AtomUI.Demo.Desktop/ViewModels/TabControlDemoViewModel.cs
+++ b/samples/AtomUI.Demo.Desktop/ViewModels/TabControlDemoViewModel.cs
@@ -1,5 +1,4 @@
 using System.Collections.ObjectModel;
-using System.Linq;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace AtomUI.Demo.Desktop.ViewModels;
diff --git a/samples/AtomUI.Demo.Desktop/Views/MainView.axaml b/samples/AtomUI.Demo.Desktop/Views/MainView.axaml
index e3db9a4..1306809 100644
--- a/samples/AtomUI.Demo.Desktop/Views/MainView.axaml
+++ b/samples/AtomUI.Demo.Desktop/Views/MainView.axaml
@@ -1,13 +1,13 @@
-<UserControl
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    mc:Ignorable="d"
-    x:Class="AtomUI.Demo.Desktop.Views.MainView"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:showcases="using:AtomUI.Demo.Desktop.ShowCase"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<UserControl x:Class="AtomUI.Demo.Desktop.Views.MainView"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:base="clr-namespace:AtomUI.Demo.Desktop"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showcases="using:AtomUI.Demo.Desktop.ShowCase"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
@@ -18,26 +18,24 @@
 
     </UserControl.Resources>
     <UserControl.Styles>
-        <Style Selector="showcases|ShowCasePanel">
+        <Style Selector="base|ShowCasePanel">
             <Setter Property="Margin" Value="0, 30, 0, 0" />
         </Style>
-        <Style Selector="showcases|ShowCaseItem">
+        <Style Selector="base|ShowCaseItem">
             <Setter Property="Margin" Value="0, 0, 0, 0" />
         </Style>
     </UserControl.Styles>
     <Grid RowDefinitions="Auto, *">
-        <TabControl
-            Grid.Row="1"
-            HorizontalAlignment="Stretch"
-            Margin="8"
-            Name="Tab"
-            Padding="20,0,0,0"
-            TabStripPlacement="Left"
-            FontSize="13"
-            x:Name="ShowCaseNav"
-            Theme="{DynamicResource NavigationTab}">
+        <TabControl x:Name="ShowCaseNav" Name="Tab"
+                    Grid.Row="1"
+                    Margin="8"
+                    Padding="20,0,0,0"
+                    HorizontalAlignment="Stretch"
+                    FontSize="13"
+                    TabStripPlacement="Left"
+                    Theme="{DynamicResource NavigationTab}">
             <TabControl.Styles>
-                <Style Selector="#ShowCaseNav > TabItem">
+                <Style Selector="#ShowCaseNav &gt; TabItem">
                     <Setter Property="FontSize" Value="18" />
                     <Setter Property="Width" Value="230" />
                 </Style>
diff --git a/samples/AtomUI.Demo.Desktop/Views/MainWindow.axaml b/samples/AtomUI.Demo.Desktop/Views/MainWindow.axaml
index 9c7cfef..d8cda35 100644
--- a/samples/AtomUI.Demo.Desktop/Views/MainWindow.axaml
+++ b/samples/AtomUI.Demo.Desktop/Views/MainWindow.axaml
@@ -1,16 +1,15 @@
-<Window
-    x:Class="AtomUI.Demo.Desktop.Views.MainWindow"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:views="clr-namespace:AtomUI.Demo.Desktop.Views"
-    Title="AtomUI Demo"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    x:CompileBindings="True"
-    Icon="/Assets/avalonia-logo.ico"
-    MinWidth="800"
-    mc:Ignorable="d">
+<Window x:Class="AtomUI.Demo.Desktop.Views.MainWindow"
+        xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:views="clr-namespace:AtomUI.Demo.Desktop.Views"
+        Title="AtomUI Demo"
+        MinWidth="800"
+        d:DesignHeight="450"
+        d:DesignWidth="800"
+        x:CompileBindings="True"
+        Icon="/Assets/avalonia-logo.ico"
+        mc:Ignorable="d">
     <views:MainView />
 </Window>
diff --git a/src/AtomUI.Base/AtomUI.Base.csproj b/src/AtomUI.Base/AtomUI.Base.csproj
index 7c4804e..3c71fc7 100644
--- a/src/AtomUI.Base/AtomUI.Base.csproj
+++ b/src/AtomUI.Base/AtomUI.Base.csproj
@@ -3,6 +3,7 @@
     <Import Project="$(MSBuildThisFileDirectory)..\..\build\Nuget.props" />
 
     <PropertyGroup>
+        <RootNamespace>AtomUI</RootNamespace>
         <AllowUnsafeBlocks>True</AllowUnsafeBlocks>
     </PropertyGroup>
     
diff --git a/src/AtomUI.Base/MotionScene/MotionActor.cs b/src/AtomUI.Base/MotionScene/MotionActor.cs
index 0c8872b..01dab88 100644
--- a/src/AtomUI.Base/MotionScene/MotionActor.cs
+++ b/src/AtomUI.Base/MotionScene/MotionActor.cs
@@ -1,5 +1,4 @@
 using System.Reflection;
-using AtomUI.Data;
 using AtomUI.Media;
 using AtomUI.Utils;
 using Avalonia;
diff --git a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBox.cs b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBox.cs
index b90bd62..72e4c10 100644
--- a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBox.cs
+++ b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBox.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBoxTheme.cs b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBoxTheme.cs
index 8c68d1f..00c4a48 100644
--- a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBoxTheme.cs
+++ b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedBoxTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBox.cs b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBox.cs
index ef9bdcc..090b3fd 100644
--- a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBox.cs
+++ b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBox.cs
@@ -1,7 +1,7 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
diff --git a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBoxTheme.cs b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBoxTheme.cs
index b61aabf..011343c 100644
--- a/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBoxTheme.cs
+++ b/src/AtomUI.Controls/AddOnDecoratedBox/AddOnDecoratedInnerBoxTheme.cs
@@ -1,8 +1,8 @@
 using AtomUI.Media;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/Alert/Alert.cs b/src/AtomUI.Controls/Alert/Alert.cs
index 91b6761..d00dfdc 100644
--- a/src/AtomUI.Controls/Alert/Alert.cs
+++ b/src/AtomUI.Controls/Alert/Alert.cs
@@ -1,6 +1,5 @@
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/Alert/AlertTheme.cs b/src/AtomUI.Controls/Alert/AlertTheme.cs
index a6e7f49..ef79609 100644
--- a/src/AtomUI.Controls/Alert/AlertTheme.cs
+++ b/src/AtomUI.Controls/Alert/AlertTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Data;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/AtomUI.Controls.csproj b/src/AtomUI.Controls/AtomUI.Controls.csproj
index 16f96e8..88ceeb9 100644
--- a/src/AtomUI.Controls/AtomUI.Controls.csproj
+++ b/src/AtomUI.Controls/AtomUI.Controls.csproj
@@ -3,7 +3,6 @@
     <Import Project="$(MSBuildThisFileDirectory)..\..\build\Nuget.props" />
 
     <PropertyGroup>
-        <RootNamespace>AtomUI.Controls</RootNamespace>
         <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
         <CompilerGeneratedFilesOutputPath>GeneratedFiles</CompilerGeneratedFilesOutputPath>
     </PropertyGroup>
diff --git a/src/AtomUI.Controls/AtomUI.Controls.csproj.DotSettings b/src/AtomUI.Controls/AtomUI.Controls.csproj.DotSettings
index 6948e6a..4b31aab 100644
--- a/src/AtomUI.Controls/AtomUI.Controls.csproj.DotSettings
+++ b/src/AtomUI.Controls/AtomUI.Controls.csproj.DotSettings
@@ -1,5 +1,50 @@
 <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=addondecoratedbox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=alert/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=arrowdecoratedbox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=badge/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=buttons/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=buttonspinner/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=checkbox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=collapse/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=combobox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=datepicker/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=drawer/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=emptyindicator/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=expander/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=flyouts/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=groupbox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=input/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=listbox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=loading/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=localization/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=marqueelabel/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=menu/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=message/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=notifications/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=numericupdown/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=optionbuttonbox/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=pathicon/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=popup/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=popupconfirm/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=popupconfirm_005Clocalization/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=primitives/@EntryIndexedValue">False</s:Boolean>
 	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=primitives_005Catomlayer/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=progressbar/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=radiobutton/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=segmented/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=separator/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=slider/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=switch/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tabcontrol/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tabcontrol_005Ctabstrip/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tag/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=timepicker/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=timepicker_005Clocalization/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=tooltip/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=treeview/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils/@EntryIndexedValue">False</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=utils_005Cmotion/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermark/@EntryIndexedValue">True</s:Boolean>
-	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermark_005Cglyphs/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
\ No newline at end of file
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermark_005Cglyphs/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=window/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
\ No newline at end of file
diff --git a/src/AtomUI.Controls/Badge/CountBadge.cs b/src/AtomUI.Controls/Badge/CountBadge.cs
index d087c72..7c5f72f 100644
--- a/src/AtomUI.Controls/Badge/CountBadge.cs
+++ b/src/AtomUI.Controls/Badge/CountBadge.cs
@@ -1,10 +1,9 @@
-using AtomUI.Controls.Badge;
-using AtomUI.Controls.MotionScene;
+using AtomUI.Controls.MotionScene;
 using AtomUI.Data;
 using AtomUI.MotionScene;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Palette;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/Badge/CountBadgeMotion.cs b/src/AtomUI.Controls/Badge/CountBadgeMotion.cs
index be3d5b4..ef20ebd 100644
--- a/src/AtomUI.Controls/Badge/CountBadgeMotion.cs
+++ b/src/AtomUI.Controls/Badge/CountBadgeMotion.cs
@@ -3,12 +3,12 @@ using Avalonia;
 using Avalonia.Animation.Easings;
 using Avalonia.Controls;
 
-namespace AtomUI.Controls.Badge;
+namespace AtomUI.Controls;
 
 internal class CountBadgeZoomBadgeIn : AbstractMotion
 {
-   public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
-   public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
+   public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
+   public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
    
    public CountBadgeZoomBadgeIn()
    {
@@ -18,7 +18,7 @@ internal class CountBadgeZoomBadgeIn : AbstractMotion
    public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
    {
       easing ??= new ExponentialEaseOut();
-      var config = new MotionConfig(MotionOpacityProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
       {
          TransitionKind = TransitionKind.Double,
          StartValue = 0d,
@@ -33,7 +33,7 @@ internal class CountBadgeZoomBadgeIn : AbstractMotion
    {
       easing ??= new BackEaseOut();
       
-      var config = new MotionConfig(MotionRenderTransformProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
       {
          TransitionKind = TransitionKind.TransformOperations,
          StartValue = BuildScaleTransform(0),
@@ -53,8 +53,8 @@ internal class CountBadgeZoomBadgeIn : AbstractMotion
 
 internal class CountBadgeZoomBadgeOut : AbstractMotion
 {
-   public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
-   public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
+   public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
+   public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
    
    public CountBadgeZoomBadgeOut()
    {
@@ -64,7 +64,7 @@ internal class CountBadgeZoomBadgeOut : AbstractMotion
    public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
    {
       easing ??= new ExponentialEaseIn();
-      var config = new MotionConfig(MotionOpacityProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
       {
          TransitionKind = TransitionKind.Double,
          StartValue = 1d,
@@ -79,7 +79,7 @@ internal class CountBadgeZoomBadgeOut : AbstractMotion
    {
       easing ??= new ExponentialEaseIn();
       
-      var config = new MotionConfig(MotionRenderTransformProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
       {
          TransitionKind = TransitionKind.TransformOperations,
          StartValue = BuildScaleTransform(1),
@@ -100,13 +100,13 @@ internal class CountBadgeZoomBadgeOut : AbstractMotion
 
 internal class CountBadgeNoWrapperZoomBadgeIn : AbstractMotion
 {
-   public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
-   public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
+   public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
+   public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
    
    public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
    {
       easing ??= new QuarticEaseOut();
-      var config = new MotionConfig(MotionOpacityProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
       {
          TransitionKind = TransitionKind.Double,
          StartValue = 0d,
@@ -121,7 +121,7 @@ internal class CountBadgeNoWrapperZoomBadgeIn : AbstractMotion
    {
       easing ??= new QuarticEaseOut();
       
-      var config = new MotionConfig(MotionRenderTransformProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
       {
          TransitionKind = TransitionKind.TransformOperations,
          StartValue = BuildScaleTransform(0),
@@ -135,13 +135,13 @@ internal class CountBadgeNoWrapperZoomBadgeIn : AbstractMotion
 
 internal class CountBadgeNoWrapperZoomBadgeOut : AbstractMotion
 {
-   public MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
-   public MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
+   public AtomUI.MotionScene.MotionConfig? OpacityConfig => GetMotionConfig(MotionOpacityProperty);
+   public AtomUI.MotionScene.MotionConfig? RenderTransformConfig => GetMotionConfig(MotionRenderTransformProperty);
    
    public void ConfigureOpacity(TimeSpan duration, Easing? easing = null)
    {
       easing ??= new CircularEaseIn();
-      var config = new MotionConfig(MotionOpacityProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionOpacityProperty)
       {
          TransitionKind = TransitionKind.Double,
          StartValue = 1d,
@@ -156,7 +156,7 @@ internal class CountBadgeNoWrapperZoomBadgeOut : AbstractMotion
    {
       easing ??= new CircularEaseIn();
       
-      var config = new MotionConfig(MotionRenderTransformProperty)
+      var config = new AtomUI.MotionScene.MotionConfig(MotionRenderTransformProperty)
       {
          TransitionKind = TransitionKind.TransformOperations,
          StartValue = BuildScaleTransform(1),
diff --git a/src/AtomUI.Controls/Badge/DotBadge.cs b/src/AtomUI.Controls/Badge/DotBadge.cs
index 844b78b..b991895 100644
--- a/src/AtomUI.Controls/Badge/DotBadge.cs
+++ b/src/AtomUI.Controls/Badge/DotBadge.cs
@@ -1,10 +1,9 @@
-using AtomUI.Controls.Badge;
-using AtomUI.Controls.MotionScene;
+using AtomUI.Controls.MotionScene;
 using AtomUI.Data;
 using AtomUI.MotionScene;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Palette;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerInnerBox.cs b/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerInnerBox.cs
index b6ff3fb..64095ec 100644
--- a/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerInnerBox.cs
+++ b/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerInnerBox.cs
@@ -1,6 +1,5 @@
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
diff --git a/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerTheme.cs b/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerTheme.cs
index e78a230..447ddc2 100644
--- a/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerTheme.cs
+++ b/src/AtomUI.Controls/ButtonSpinner/ButtonSpinnerTheme.cs
@@ -1,8 +1,8 @@
 using AtomUI.Media;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/Buttons/Button.cs b/src/AtomUI.Controls/Buttons/Button.cs
index ebe098d..6c0477f 100644
--- a/src/AtomUI.Controls/Buttons/Button.cs
+++ b/src/AtomUI.Controls/Buttons/Button.cs
@@ -6,7 +6,6 @@ using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.TokenSystem;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Buttons/DropdownButton.cs b/src/AtomUI.Controls/Buttons/DropdownButton.cs
index 1176a3b..233a293 100644
--- a/src/AtomUI.Controls/Buttons/DropdownButton.cs
+++ b/src/AtomUI.Controls/Buttons/DropdownButton.cs
@@ -1,8 +1,8 @@
 using AtomUI.Data;
 using AtomUI.Icon;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.TokenSystem;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Diagnostics;
diff --git a/src/AtomUI.Controls/Buttons/IconButton.cs b/src/AtomUI.Controls/Buttons/IconButton.cs
index 770eafc..e2527e7 100644
--- a/src/AtomUI.Controls/Buttons/IconButton.cs
+++ b/src/AtomUI.Controls/Buttons/IconButton.cs
@@ -5,7 +5,6 @@ using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
-using Avalonia.Layout;
 using Avalonia.Rendering;
 
 namespace AtomUI.Controls;
diff --git a/src/AtomUI.Controls/Buttons/IconButtonTheme.cs b/src/AtomUI.Controls/Buttons/IconButtonTheme.cs
index c9dd4d6..84a40eb 100644
--- a/src/AtomUI.Controls/Buttons/IconButtonTheme.cs
+++ b/src/AtomUI.Controls/Buttons/IconButtonTheme.cs
@@ -2,7 +2,6 @@
 using AtomUI.Theme;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/Buttons/SplitButton.cs b/src/AtomUI.Controls/Buttons/SplitButton.cs
index f2757ea..8f17008 100644
--- a/src/AtomUI.Controls/Buttons/SplitButton.cs
+++ b/src/AtomUI.Controls/Buttons/SplitButton.cs
@@ -1,5 +1,4 @@
-using System.Reactive.Disposables;
-using System.Windows.Input;
+using System.Windows.Input;
 using AtomUI.Data;
 using AtomUI.Input;
 using AtomUI.Theme.Data;
@@ -7,18 +6,15 @@ using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.Diagnostics;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Primitives.PopupPositioning;
 using Avalonia.Data;
 using Avalonia.Input;
-using Avalonia.Input.Raw;
 using Avalonia.Interactivity;
 using Avalonia.Layout;
 using Avalonia.LogicalTree;
 using Avalonia.Media;
-using Avalonia.Threading;
 
 namespace AtomUI.Controls;
 
diff --git a/src/AtomUI.Controls/Buttons/SplitButtonTheme.cs b/src/AtomUI.Controls/Buttons/SplitButtonTheme.cs
index c059ce4..3aa407a 100644
--- a/src/AtomUI.Controls/Buttons/SplitButtonTheme.cs
+++ b/src/AtomUI.Controls/Buttons/SplitButtonTheme.cs
@@ -1,11 +1,7 @@
 using AtomUI.Theme;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.Shapes;
 using Avalonia.Controls.Templates;
-using Avalonia.Media;
 using Avalonia.Styling;
 
 namespace AtomUI.Controls;
diff --git a/src/AtomUI.Controls/Buttons/ToggleIconButtonTheme.cs b/src/AtomUI.Controls/Buttons/ToggleIconButtonTheme.cs
index a34bc9a..2f69f93 100644
--- a/src/AtomUI.Controls/Buttons/ToggleIconButtonTheme.cs
+++ b/src/AtomUI.Controls/Buttons/ToggleIconButtonTheme.cs
@@ -4,8 +4,6 @@ using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
 using Avalonia.Styling;
 using AtomUI.Theme.Styling;
-using Avalonia;
-using Avalonia.Media;
 
 namespace AtomUI.Controls;
 
diff --git a/src/AtomUI.Controls/CheckBox/CheckBox.cs b/src/AtomUI.Controls/CheckBox/CheckBox.cs
index 681d45f..bec3363 100644
--- a/src/AtomUI.Controls/CheckBox/CheckBox.cs
+++ b/src/AtomUI.Controls/CheckBox/CheckBox.cs
@@ -3,7 +3,6 @@ using AtomUI.Media;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
diff --git a/src/AtomUI.Controls/Collapse/Collapse.cs b/src/AtomUI.Controls/Collapse/Collapse.cs
index ba11d18..c904e63 100644
--- a/src/AtomUI.Controls/Collapse/Collapse.cs
+++ b/src/AtomUI.Controls/Collapse/Collapse.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
diff --git a/src/AtomUI.Controls/Collapse/CollapseItem.cs b/src/AtomUI.Controls/Collapse/CollapseItem.cs
index d0041d0..a319a8d 100644
--- a/src/AtomUI.Controls/Collapse/CollapseItem.cs
+++ b/src/AtomUI.Controls/Collapse/CollapseItem.cs
@@ -1,8 +1,8 @@
 using AtomUI.Controls.MotionScene;
 using AtomUI.Controls.Utils;
 using AtomUI.MotionScene;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Automation.Peers;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Collapse/CollapseItemTheme.cs b/src/AtomUI.Controls/Collapse/CollapseItemTheme.cs
index 07af69c..79087cd 100644
--- a/src/AtomUI.Controls/Collapse/CollapseItemTheme.cs
+++ b/src/AtomUI.Controls/Collapse/CollapseItemTheme.cs
@@ -1,6 +1,6 @@
-using AtomUI.Icon;
-using AtomUI.MotionScene;
+using AtomUI.MotionScene;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
 using AtomUI.Utils;
diff --git a/src/AtomUI.Controls/ComboBox/ComboBoxSpinnerInnerBox.cs b/src/AtomUI.Controls/ComboBox/ComboBoxSpinnerInnerBox.cs
index bff93c9..a4188d0 100644
--- a/src/AtomUI.Controls/ComboBox/ComboBoxSpinnerInnerBox.cs
+++ b/src/AtomUI.Controls/ComboBox/ComboBoxSpinnerInnerBox.cs
@@ -1,6 +1,5 @@
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/ComboBox/ComboBoxTheme.cs b/src/AtomUI.Controls/ComboBox/ComboBoxTheme.cs
index dee457a..0c1f58d 100644
--- a/src/AtomUI.Controls/ComboBox/ComboBoxTheme.cs
+++ b/src/AtomUI.Controls/ComboBox/ComboBoxTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Documents;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/DatePicker/DatePickerToken.cs b/src/AtomUI.Controls/DatePicker/DatePickerToken.cs
index dd22d2e..950217c 100644
--- a/src/AtomUI.Controls/DatePicker/DatePickerToken.cs
+++ b/src/AtomUI.Controls/DatePicker/DatePickerToken.cs
@@ -1,4 +1,4 @@
-namespace AtomUI.Controls.DatePicker;
+namespace AtomUI.Controls;
 
 public class DatePickerToken
 {
diff --git a/src/AtomUI.Controls/EmptyIndicator/EmptyIndicator.cs b/src/AtomUI.Controls/EmptyIndicator/EmptyIndicator.cs
index 6bf0d45..784c948 100644
--- a/src/AtomUI.Controls/EmptyIndicator/EmptyIndicator.cs
+++ b/src/AtomUI.Controls/EmptyIndicator/EmptyIndicator.cs
@@ -1,6 +1,6 @@
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/EmptyIndicator/EmptyIndicatorTheme.cs b/src/AtomUI.Controls/EmptyIndicator/EmptyIndicatorTheme.cs
index 1348668..be56c87 100644
--- a/src/AtomUI.Controls/EmptyIndicator/EmptyIndicatorTheme.cs
+++ b/src/AtomUI.Controls/EmptyIndicator/EmptyIndicatorTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Data;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/Expander/Expander.cs b/src/AtomUI.Controls/Expander/Expander.cs
index f493a41..c051dab 100644
--- a/src/AtomUI.Controls/Expander/Expander.cs
+++ b/src/AtomUI.Controls/Expander/Expander.cs
@@ -1,19 +1,13 @@
-using AtomUI.Controls.MotionScene;
-using AtomUI.Controls.Utils;
+using AtomUI.Controls.Utils;
 using AtomUI.MotionScene;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
-using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Data;
 using Avalonia.Input;
-using Avalonia.Layout;
-using Avalonia.Threading;
 
 namespace AtomUI.Controls;
 
diff --git a/src/AtomUI.Controls/Expander/ExpanderTheme.cs b/src/AtomUI.Controls/Expander/ExpanderTheme.cs
index a15a50c..7ceaf9d 100644
--- a/src/AtomUI.Controls/Expander/ExpanderTheme.cs
+++ b/src/AtomUI.Controls/Expander/ExpanderTheme.cs
@@ -1,5 +1,6 @@
 using AtomUI.MotionScene;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
 using AtomUI.Utils;
diff --git a/src/AtomUI.Controls/Flyouts/Flyout.cs b/src/AtomUI.Controls/Flyouts/Flyout.cs
index 5873dfa..b6ea319 100644
--- a/src/AtomUI.Controls/Flyouts/Flyout.cs
+++ b/src/AtomUI.Controls/Flyouts/Flyout.cs
@@ -1,12 +1,11 @@
 using System.ComponentModel;
 using System.Reactive.Disposables;
 using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives.PopupPositioning;
-using Avalonia.Input;
 using Avalonia.Layout;
 using Avalonia.Media;
 using Avalonia.Metadata;
diff --git a/src/AtomUI.Controls/Flyouts/FlyoutHost.cs b/src/AtomUI.Controls/Flyouts/FlyoutHost.cs
index 2db21c4..a377a87 100644
--- a/src/AtomUI.Controls/Flyouts/FlyoutHost.cs
+++ b/src/AtomUI.Controls/Flyouts/FlyoutHost.cs
@@ -1,6 +1,6 @@
 using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives.PopupPositioning;
diff --git a/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenter.cs b/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenter.cs
index 087278f..9c1a103 100644
--- a/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenter.cs
+++ b/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenter.cs
@@ -3,7 +3,6 @@ using Avalonia.Controls;
 using Avalonia.Controls.Platform;
 using Avalonia.Controls.Primitives;
 using Avalonia.Interactivity;
-using Avalonia.LogicalTree;
 
 namespace AtomUI.Controls;
 
diff --git a/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenterTheme.cs b/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenterTheme.cs
index 8083291..6463fef 100644
--- a/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenterTheme.cs
+++ b/src/AtomUI.Controls/Flyouts/MenuFlyoutPresenterTheme.cs
@@ -1,7 +1,6 @@
-using AtomUI.Data;
-using AtomUI.Theme;
+using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/GroupBox/GroupBox.cs b/src/AtomUI.Controls/GroupBox/GroupBox.cs
index 905d08f..6dab1a6 100644
--- a/src/AtomUI.Controls/GroupBox/GroupBox.cs
+++ b/src/AtomUI.Controls/GroupBox/GroupBox.cs
@@ -1,10 +1,8 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.Documents;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Layout;
diff --git a/src/AtomUI.Controls/Input/SearchEdit.cs b/src/AtomUI.Controls/Input/SearchEdit.cs
index 554072a..bc0581e 100644
--- a/src/AtomUI.Controls/Input/SearchEdit.cs
+++ b/src/AtomUI.Controls/Input/SearchEdit.cs
@@ -1,6 +1,5 @@
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
diff --git a/src/AtomUI.Controls/ListBox/ListBox.cs b/src/AtomUI.Controls/ListBox/ListBox.cs
index 297e63a..a0157d9 100644
--- a/src/AtomUI.Controls/ListBox/ListBox.cs
+++ b/src/AtomUI.Controls/ListBox/ListBox.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/ListBox/ListBoxItemTheme.cs b/src/AtomUI.Controls/ListBox/ListBoxItemTheme.cs
index a2026e4..2e86540 100644
--- a/src/AtomUI.Controls/ListBox/ListBoxItemTheme.cs
+++ b/src/AtomUI.Controls/ListBox/ListBoxItemTheme.cs
@@ -5,7 +5,6 @@ using AtomUI.Theme.Utils;
 using Avalonia.Animation;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
-using Avalonia.Layout;
 using Avalonia.Styling;
 
 namespace AtomUI.Controls;
diff --git a/src/AtomUI.Controls/Loading/LoadingMask.cs b/src/AtomUI.Controls/Loading/LoadingMask.cs
index 5e709d3..bef3aa3 100644
--- a/src/AtomUI.Controls/Loading/LoadingMask.cs
+++ b/src/AtomUI.Controls/Loading/LoadingMask.cs
@@ -1,5 +1,4 @@
 using AtomUI.Data;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation.Easings;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Localization/en_US.cs b/src/AtomUI.Controls/Localization/en_US.cs
index f57ce49..8e01955 100644
--- a/src/AtomUI.Controls/Localization/en_US.cs
+++ b/src/AtomUI.Controls/Localization/en_US.cs
@@ -1,8 +1,10 @@
 using AtomUI.Theme;
 using AtomUI.Utils;
 
+// ReSharper disable once CheckNamespace
 namespace AtomUI.Controls.Localization;
 
+// ReSharper disable once InconsistentNaming
 [LanguageProvider(LanguageCode.en_US, Constants.CommonLangID)]
 internal class en_US : AbstractLanguageProvider
 {
diff --git a/src/AtomUI.Controls/Localization/zh_CN.cs b/src/AtomUI.Controls/Localization/zh_CN.cs
index e93800e..f8f33a7 100644
--- a/src/AtomUI.Controls/Localization/zh_CN.cs
+++ b/src/AtomUI.Controls/Localization/zh_CN.cs
@@ -1,8 +1,10 @@
 using AtomUI.Theme;
 using AtomUI.Utils;
 
+// ReSharper disable once CheckNamespace
 namespace AtomUI.Controls.Localization;
 
+// ReSharper disable once InconsistentNaming
 [LanguageProvider(LanguageCode.zh_CN, Constants.CommonLangID)]
 internal class zh_CN : AbstractLanguageProvider
 {
diff --git a/src/AtomUI.Controls/MarqueeLabel/MarqueeLabel.cs b/src/AtomUI.Controls/MarqueeLabel/MarqueeLabel.cs
index 15e7a4c..a28e368 100644
--- a/src/AtomUI.Controls/MarqueeLabel/MarqueeLabel.cs
+++ b/src/AtomUI.Controls/MarqueeLabel/MarqueeLabel.cs
@@ -1,3 +1,4 @@
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
diff --git a/src/AtomUI.Controls/Menu/ContextMenu.cs b/src/AtomUI.Controls/Menu/ContextMenu.cs
index b4da42e..c494478 100644
--- a/src/AtomUI.Controls/Menu/ContextMenu.cs
+++ b/src/AtomUI.Controls/Menu/ContextMenu.cs
@@ -2,10 +2,7 @@
 using System.Reflection;
 using AtomUI.Reflection;
 using AtomUI.Theme.Styling;
-using Avalonia.Controls;
-using Avalonia.Controls.Primitives;
 using Avalonia.Input;
-using Avalonia.LogicalTree;
 using Avalonia.Media;
 
 namespace AtomUI.Controls;
diff --git a/src/AtomUI.Controls/Menu/ContextMenuTheme.cs b/src/AtomUI.Controls/Menu/ContextMenuTheme.cs
index e1fb790..ed1ef4e 100644
--- a/src/AtomUI.Controls/Menu/ContextMenuTheme.cs
+++ b/src/AtomUI.Controls/Menu/ContextMenuTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/Menu/Menu.cs b/src/AtomUI.Controls/Menu/Menu.cs
index ea5003a..2e41552 100644
--- a/src/AtomUI.Controls/Menu/Menu.cs
+++ b/src/AtomUI.Controls/Menu/Menu.cs
@@ -1,5 +1,5 @@
 using AtomUI.Data;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.LogicalTree;
diff --git a/src/AtomUI.Controls/Menu/MenuItem.cs b/src/AtomUI.Controls/Menu/MenuItem.cs
index 954a7e5..295e6e3 100644
--- a/src/AtomUI.Controls/Menu/MenuItem.cs
+++ b/src/AtomUI.Controls/Menu/MenuItem.cs
@@ -1,8 +1,8 @@
 using AtomUI.Data;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Menu/MenuItemTheme.cs b/src/AtomUI.Controls/Menu/MenuItemTheme.cs
index 9e4d586..4f867fa 100644
--- a/src/AtomUI.Controls/Menu/MenuItemTheme.cs
+++ b/src/AtomUI.Controls/Menu/MenuItemTheme.cs
@@ -1,8 +1,8 @@
 using AtomUI.Media;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/Menu/MenuScrollViewerTheme.cs b/src/AtomUI.Controls/Menu/MenuScrollViewerTheme.cs
index 9ed0981..132c165 100644
--- a/src/AtomUI.Controls/Menu/MenuScrollViewerTheme.cs
+++ b/src/AtomUI.Controls/Menu/MenuScrollViewerTheme.cs
@@ -1,9 +1,9 @@
 using AtomUI.Data;
 using AtomUI.Media;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/Menu/MenuSeparator.cs b/src/AtomUI.Controls/Menu/MenuSeparator.cs
index d610cd0..ef42d78 100644
--- a/src/AtomUI.Controls/Menu/MenuSeparator.cs
+++ b/src/AtomUI.Controls/Menu/MenuSeparator.cs
@@ -1,6 +1,5 @@
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Data;
 using Avalonia.Media;
diff --git a/src/AtomUI.Controls/Menu/MenuTheme.cs b/src/AtomUI.Controls/Menu/MenuTheme.cs
index 17f9735..9f95d38 100644
--- a/src/AtomUI.Controls/Menu/MenuTheme.cs
+++ b/src/AtomUI.Controls/Menu/MenuTheme.cs
@@ -1,6 +1,5 @@
 using AtomUI.Theme;
 using AtomUI.Theme.Styling;
-using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/Menu/TopLevelMenuItemTheme.cs b/src/AtomUI.Controls/Menu/TopLevelMenuItemTheme.cs
index 5a3ab5e..799bed5 100644
--- a/src/AtomUI.Controls/Menu/TopLevelMenuItemTheme.cs
+++ b/src/AtomUI.Controls/Menu/TopLevelMenuItemTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/Message/IMessage.cs b/src/AtomUI.Controls/Message/IMessage.cs
index 138a560..f412f22 100644
--- a/src/AtomUI.Controls/Message/IMessage.cs
+++ b/src/AtomUI.Controls/Message/IMessage.cs
@@ -1,4 +1,4 @@
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 public interface IMessage
 {
diff --git a/src/AtomUI.Controls/Message/IMessageManager.cs b/src/AtomUI.Controls/Message/IMessageManager.cs
index 0436975..9dd7667 100644
--- a/src/AtomUI.Controls/Message/IMessageManager.cs
+++ b/src/AtomUI.Controls/Message/IMessageManager.cs
@@ -1,4 +1,4 @@
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 public interface IMessageManager
 {
diff --git a/src/AtomUI.Controls/Message/Message.cs b/src/AtomUI.Controls/Message/Message.cs
index d6aea84..5174e3e 100644
--- a/src/AtomUI.Controls/Message/Message.cs
+++ b/src/AtomUI.Controls/Message/Message.cs
@@ -1,7 +1,7 @@
 using System.ComponentModel;
 using System.Runtime.CompilerServices;
 
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 public class Message : IMessage, INotifyPropertyChanged
 {
diff --git a/src/AtomUI.Controls/Message/MessageCard.cs b/src/AtomUI.Controls/Message/MessageCard.cs
index 2e78d76..e06fb84 100644
--- a/src/AtomUI.Controls/Message/MessageCard.cs
+++ b/src/AtomUI.Controls/Message/MessageCard.cs
@@ -1,13 +1,12 @@
 using AtomUI.Icon;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
-using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Interactivity;
 
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 [PseudoClasses(ErrorPC, InformationPC, SuccessPC, WarningPC, LoadingPC)]
 public class MessageCard : TemplatedControl
diff --git a/src/AtomUI.Controls/Message/MessageCardTheme.cs b/src/AtomUI.Controls/Message/MessageCardTheme.cs
index e96f594..15d0181 100644
--- a/src/AtomUI.Controls/Message/MessageCardTheme.cs
+++ b/src/AtomUI.Controls/Message/MessageCardTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
@@ -13,7 +13,7 @@ using Avalonia.Data.Converters;
 using Avalonia.Layout;
 using Avalonia.Styling;
 
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 [ControlThemeProvider]
 internal class MessageCardTheme : BaseControlTheme
diff --git a/src/AtomUI.Controls/Message/MessageToken.cs b/src/AtomUI.Controls/Message/MessageToken.cs
index 9302452..84da32a 100644
--- a/src/AtomUI.Controls/Message/MessageToken.cs
+++ b/src/AtomUI.Controls/Message/MessageToken.cs
@@ -2,7 +2,7 @@
 using Avalonia;
 using Avalonia.Media;
 
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 [ControlDesignToken]
 public class MessageToken : AbstractControlDesignToken
diff --git a/src/AtomUI.Controls/Message/MessageType.cs b/src/AtomUI.Controls/Message/MessageType.cs
index 28fcbcc..a56505d 100644
--- a/src/AtomUI.Controls/Message/MessageType.cs
+++ b/src/AtomUI.Controls/Message/MessageType.cs
@@ -1,4 +1,4 @@
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 public enum MessageType
 {
diff --git a/src/AtomUI.Controls/Message/WindowMessageManager.cs b/src/AtomUI.Controls/Message/WindowMessageManager.cs
index adee0c0..3bcc6cc 100644
--- a/src/AtomUI.Controls/Message/WindowMessageManager.cs
+++ b/src/AtomUI.Controls/Message/WindowMessageManager.cs
@@ -7,7 +7,7 @@ using Avalonia.Layout;
 using Avalonia.Threading;
 using Avalonia.VisualTree;
 
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 [TemplatePart(WindowNotificationManagerTheme.ItemsPart, typeof(Panel))]
 public class WindowMessageManager : TemplatedControl, IMessageManager
diff --git a/src/AtomUI.Controls/Message/WindowMessageManagerTheme.cs b/src/AtomUI.Controls/Message/WindowMessageManagerTheme.cs
index 6f74160..444f909 100644
--- a/src/AtomUI.Controls/Message/WindowMessageManagerTheme.cs
+++ b/src/AtomUI.Controls/Message/WindowMessageManagerTheme.cs
@@ -5,7 +5,7 @@ using Avalonia.Controls.Templates;
 using Avalonia.Layout;
 using Avalonia.Styling;
 
-namespace AtomUI.Controls.Message;
+namespace AtomUI.Controls;
 
 [ControlThemeProvider]
 internal class WindowMessageManagerTheme : BaseControlTheme
diff --git a/src/AtomUI.Controls/Notifications/NotificationCard.cs b/src/AtomUI.Controls/Notifications/NotificationCard.cs
index 00f484b..e1a35ea 100644
--- a/src/AtomUI.Controls/Notifications/NotificationCard.cs
+++ b/src/AtomUI.Controls/Notifications/NotificationCard.cs
@@ -1,11 +1,9 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
-using Avalonia.Controls.Templates;
-using Avalonia.Data;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.LogicalTree;
diff --git a/src/AtomUI.Controls/Notifications/NotificationCardTheme.cs b/src/AtomUI.Controls/Notifications/NotificationCardTheme.cs
index dc09a7f..2ed30f6 100644
--- a/src/AtomUI.Controls/Notifications/NotificationCardTheme.cs
+++ b/src/AtomUI.Controls/Notifications/NotificationCardTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
diff --git a/src/AtomUI.Controls/Notifications/NotificationProgressBar.cs b/src/AtomUI.Controls/Notifications/NotificationProgressBar.cs
index 4e4d441..2d7a18f 100644
--- a/src/AtomUI.Controls/Notifications/NotificationProgressBar.cs
+++ b/src/AtomUI.Controls/Notifications/NotificationProgressBar.cs
@@ -1,4 +1,5 @@
-using AtomUI.Theme.Styling;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/PathIcon/IconProviderMarkupExtension.cs b/src/AtomUI.Controls/PathIcon/IconProviderMarkupExtension.cs
index 74a25c9..9f487f3 100644
--- a/src/AtomUI.Controls/PathIcon/IconProviderMarkupExtension.cs
+++ b/src/AtomUI.Controls/PathIcon/IconProviderMarkupExtension.cs
@@ -1,5 +1,4 @@
 using AtomUI.Icon;
-using Avalonia.Data;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 
diff --git a/src/AtomUI.Controls/Popup/Popup.cs b/src/AtomUI.Controls/Popup/Popup.cs
index b0fc5db..1fc5294 100644
--- a/src/AtomUI.Controls/Popup/Popup.cs
+++ b/src/AtomUI.Controls/Popup/Popup.cs
@@ -2,8 +2,8 @@
 using AtomUI.Controls.MotionScene;
 using AtomUI.Data;
 using AtomUI.MotionScene;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/PopupConfirm/Localization/en_US.cs b/src/AtomUI.Controls/PopupConfirm/Localization/en_US.cs
index 7557f93..eec642b 100644
--- a/src/AtomUI.Controls/PopupConfirm/Localization/en_US.cs
+++ b/src/AtomUI.Controls/PopupConfirm/Localization/en_US.cs
@@ -1,8 +1,10 @@
 using AtomUI.Theme;
 using AtomUI.Utils;
 
+// ReSharper disable once CheckNamespace
 namespace AtomUI.Controls.PopupConfirmLang;
 
+// ReSharper disable once InconsistentNaming
 [LanguageProvider(LanguageCode.en_US, PopupConfirmToken.ID)]
 internal class en_US : AbstractLanguageProvider
 {
diff --git a/src/AtomUI.Controls/PopupConfirm/Localization/zh_CN.cs b/src/AtomUI.Controls/PopupConfirm/Localization/zh_CN.cs
index a170666..b3333d8 100644
--- a/src/AtomUI.Controls/PopupConfirm/Localization/zh_CN.cs
+++ b/src/AtomUI.Controls/PopupConfirm/Localization/zh_CN.cs
@@ -1,8 +1,10 @@
 using AtomUI.Theme;
 using AtomUI.Utils;
 
+// ReSharper disable once CheckNamespace
 namespace AtomUI.Controls.PopupConfirmLang;
 
+// ReSharper disable once InconsistentNaming
 [LanguageProvider(LanguageCode.zh_CN, PopupConfirmToken.ID)]
 internal class zh_CN : AbstractLanguageProvider
 {
diff --git a/src/AtomUI.Controls/PopupConfirm/PopupConfirm.cs b/src/AtomUI.Controls/PopupConfirm/PopupConfirm.cs
index fef25f9..d7fa295 100644
--- a/src/AtomUI.Controls/PopupConfirm/PopupConfirm.cs
+++ b/src/AtomUI.Controls/PopupConfirm/PopupConfirm.cs
@@ -1,5 +1,5 @@
 using AtomUI.Controls.PopupConfirmLang;
-using AtomUI.Data;
+using AtomUI.Theme.Data;
 using Avalonia;
 using Avalonia.Controls.Templates;
 using Avalonia.Interactivity;
diff --git a/src/AtomUI.Controls/PopupConfirm/PopupConfirmContainerTheme.cs b/src/AtomUI.Controls/PopupConfirm/PopupConfirmContainerTheme.cs
index f41144b..1739906 100644
--- a/src/AtomUI.Controls/PopupConfirm/PopupConfirmContainerTheme.cs
+++ b/src/AtomUI.Controls/PopupConfirm/PopupConfirmContainerTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/Primitives/MotionGhostControl.cs b/src/AtomUI.Controls/Primitives/MotionGhostControl.cs
index ecf065e..f44de86 100644
--- a/src/AtomUI.Controls/Primitives/MotionGhostControl.cs
+++ b/src/AtomUI.Controls/Primitives/MotionGhostControl.cs
@@ -1,5 +1,4 @@
-using AtomUI.Controls.Utils;
-using AtomUI.Media;
+using AtomUI.Media;
 using AtomUI.MotionScene;
 using Avalonia;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Primitives/ShadowRenderer.cs b/src/AtomUI.Controls/Primitives/ShadowRenderer.cs
index a3d51c7..929e04d 100644
--- a/src/AtomUI.Controls/Primitives/ShadowRenderer.cs
+++ b/src/AtomUI.Controls/Primitives/ShadowRenderer.cs
@@ -1,10 +1,8 @@
 using AtomUI.Data;
 using AtomUI.Media;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Layout;
-using Avalonia.LogicalTree;
 using Avalonia.Media;
 
 namespace AtomUI.Controls.Primitives;
diff --git a/src/AtomUI.Controls/ProgressBar/AbstractCircleProgress.cs b/src/AtomUI.Controls/ProgressBar/AbstractCircleProgress.cs
index 3e460cc..0233c82 100644
--- a/src/AtomUI.Controls/ProgressBar/AbstractCircleProgress.cs
+++ b/src/AtomUI.Controls/ProgressBar/AbstractCircleProgress.cs
@@ -1,5 +1,4 @@
 using AtomUI.Media;
-using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/ProgressBar/AbstractCircleProgressTheme.cs b/src/AtomUI.Controls/ProgressBar/AbstractCircleProgressTheme.cs
index a334c41..3ad4099 100644
--- a/src/AtomUI.Controls/ProgressBar/AbstractCircleProgressTheme.cs
+++ b/src/AtomUI.Controls/ProgressBar/AbstractCircleProgressTheme.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
 using Avalonia.Layout;
diff --git a/src/AtomUI.Controls/ProgressBar/AbstractLineProgress.cs b/src/AtomUI.Controls/ProgressBar/AbstractLineProgress.cs
index 1a516f7..9f24f5f 100644
--- a/src/AtomUI.Controls/ProgressBar/AbstractLineProgress.cs
+++ b/src/AtomUI.Controls/ProgressBar/AbstractLineProgress.cs
@@ -1,5 +1,4 @@
 using AtomUI.Media;
-using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/ProgressBar/AbstractLineProgressTheme.cs b/src/AtomUI.Controls/ProgressBar/AbstractLineProgressTheme.cs
index 5496c4d..9169901 100644
--- a/src/AtomUI.Controls/ProgressBar/AbstractLineProgressTheme.cs
+++ b/src/AtomUI.Controls/ProgressBar/AbstractLineProgressTheme.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
 using Avalonia.Layout;
diff --git a/src/AtomUI.Controls/ProgressBar/AbstractProgressBar.cs b/src/AtomUI.Controls/ProgressBar/AbstractProgressBar.cs
index 969b38f..a063b22 100644
--- a/src/AtomUI.Controls/ProgressBar/AbstractProgressBar.cs
+++ b/src/AtomUI.Controls/ProgressBar/AbstractProgressBar.cs
@@ -1,4 +1,5 @@
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
 using AtomUI.Utils;
diff --git a/src/AtomUI.Controls/RadioButton/RadioButton.cs b/src/AtomUI.Controls/RadioButton/RadioButton.cs
index 3f17984..23cf4cd 100644
--- a/src/AtomUI.Controls/RadioButton/RadioButton.cs
+++ b/src/AtomUI.Controls/RadioButton/RadioButton.cs
@@ -3,7 +3,6 @@ using AtomUI.Media;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Segmented/SegmentedItem.cs b/src/AtomUI.Controls/Segmented/SegmentedItem.cs
index 03929e9..ca4ce9c 100644
--- a/src/AtomUI.Controls/Segmented/SegmentedItem.cs
+++ b/src/AtomUI.Controls/Segmented/SegmentedItem.cs
@@ -1,8 +1,8 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/Separator/Separator.cs b/src/AtomUI.Controls/Separator/Separator.cs
index b6abdf8..12e2de2 100644
--- a/src/AtomUI.Controls/Separator/Separator.cs
+++ b/src/AtomUI.Controls/Separator/Separator.cs
@@ -5,10 +5,8 @@ using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
-using Avalonia.Data;
 using Avalonia.Layout;
 using Avalonia.Media;
-using Avalonia.Media.Imaging;
 using Avalonia.Metadata;
 
 namespace AtomUI.Controls;
diff --git a/src/AtomUI.Controls/Slider/SliderTrack.cs b/src/AtomUI.Controls/Slider/SliderTrack.cs
index e249d95..7114321 100644
--- a/src/AtomUI.Controls/Slider/SliderTrack.cs
+++ b/src/AtomUI.Controls/Slider/SliderTrack.cs
@@ -1,5 +1,6 @@
 using System.Globalization;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
 using AtomUI.Utils;
diff --git a/src/AtomUI.Controls/Switch/SwitchKnob.cs b/src/AtomUI.Controls/Switch/SwitchKnob.cs
index 0ba33de..ecede97 100644
--- a/src/AtomUI.Controls/Switch/SwitchKnob.cs
+++ b/src/AtomUI.Controls/Switch/SwitchKnob.cs
@@ -1,5 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
 using AtomUI.Utils;
@@ -10,7 +11,7 @@ using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Styling;
 
-namespace AtomUI.Controls.Switch;
+namespace AtomUI.Controls;
 
 internal class SwitchKnob : Control, IControlCustomStyle
 {
diff --git a/src/AtomUI.Controls/Switch/ToggleSwitch.cs b/src/AtomUI.Controls/Switch/ToggleSwitch.cs
index 76a2d45..19166b3 100644
--- a/src/AtomUI.Controls/Switch/ToggleSwitch.cs
+++ b/src/AtomUI.Controls/Switch/ToggleSwitch.cs
@@ -1,4 +1,3 @@
-using AtomUI.Controls.Switch;
 using AtomUI.Controls.Utils;
 using AtomUI.Icon;
 using AtomUI.Media;
diff --git a/src/AtomUI.Controls/Switch/ToggleSwitchTheme.cs b/src/AtomUI.Controls/Switch/ToggleSwitchTheme.cs
index d2499c8..18c322d 100644
--- a/src/AtomUI.Controls/Switch/ToggleSwitchTheme.cs
+++ b/src/AtomUI.Controls/Switch/ToggleSwitchTheme.cs
@@ -4,7 +4,7 @@ using Avalonia.Controls;
 using Avalonia.Controls.Templates;
 using Avalonia.Styling;
 
-namespace AtomUI.Controls.Switch;
+namespace AtomUI.Controls;
 
 [ControlThemeProvider]
 internal class ToggleSwitchTheme : BaseControlTheme
diff --git a/src/AtomUI.Controls/Switch/ToggleSwitchToken.cs b/src/AtomUI.Controls/Switch/ToggleSwitchToken.cs
index 9426ea2..f587022 100644
--- a/src/AtomUI.Controls/Switch/ToggleSwitchToken.cs
+++ b/src/AtomUI.Controls/Switch/ToggleSwitchToken.cs
@@ -3,7 +3,7 @@ using AtomUI.Theme.TokenSystem;
 using Avalonia;
 using Avalonia.Media;
 
-namespace AtomUI.Controls.Switch;
+namespace AtomUI.Controls;
 
 [ControlDesignToken]
 internal class ToggleSwitchToken : AbstractControlDesignToken
diff --git a/src/AtomUI.Controls/TabControl/BaseOverflowMenuItem.cs b/src/AtomUI.Controls/TabControl/BaseOverflowMenuItem.cs
index 33329ef..801bf95 100644
--- a/src/AtomUI.Controls/TabControl/BaseOverflowMenuItem.cs
+++ b/src/AtomUI.Controls/TabControl/BaseOverflowMenuItem.cs
@@ -2,7 +2,6 @@
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Interactivity;
-using Avalonia.Threading;
 
 namespace AtomUI.Controls;
 
diff --git a/src/AtomUI.Controls/TabControl/BaseOverflowMenuItemTheme.cs b/src/AtomUI.Controls/TabControl/BaseOverflowMenuItemTheme.cs
index 6216d9a..9bfb927 100644
--- a/src/AtomUI.Controls/TabControl/BaseOverflowMenuItemTheme.cs
+++ b/src/AtomUI.Controls/TabControl/BaseOverflowMenuItemTheme.cs
@@ -1,8 +1,8 @@
 using AtomUI.Media;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/TabControl/BaseTabControl.cs b/src/AtomUI.Controls/TabControl/BaseTabControl.cs
index f36d676..b3b0940 100644
--- a/src/AtomUI.Controls/TabControl/BaseTabControl.cs
+++ b/src/AtomUI.Controls/TabControl/BaseTabControl.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/TabControl/BaseTabItemTheme.cs b/src/AtomUI.Controls/TabControl/BaseTabItemTheme.cs
index f382e5d..5febf54 100644
--- a/src/AtomUI.Controls/TabControl/BaseTabItemTheme.cs
+++ b/src/AtomUI.Controls/TabControl/BaseTabItemTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Icon;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/TabControl/BaseTabScrollViewer.cs b/src/AtomUI.Controls/TabControl/BaseTabScrollViewer.cs
index 6a088c8..02b442c 100644
--- a/src/AtomUI.Controls/TabControl/BaseTabScrollViewer.cs
+++ b/src/AtomUI.Controls/TabControl/BaseTabScrollViewer.cs
@@ -1,6 +1,6 @@
 using System.Globalization;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Converters;
diff --git a/src/AtomUI.Controls/TabControl/BaseTabScrollViewerTheme.cs b/src/AtomUI.Controls/TabControl/BaseTabScrollViewerTheme.cs
index dd4c9a5..4d4f3c2 100644
--- a/src/AtomUI.Controls/TabControl/BaseTabScrollViewerTheme.cs
+++ b/src/AtomUI.Controls/TabControl/BaseTabScrollViewerTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Data;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/TabControl/CardTabControl.cs b/src/AtomUI.Controls/TabControl/CardTabControl.cs
index fa24e07..a3f0f35 100644
--- a/src/AtomUI.Controls/TabControl/CardTabControl.cs
+++ b/src/AtomUI.Controls/TabControl/CardTabControl.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/TabControl/CardTabControlTheme.cs b/src/AtomUI.Controls/TabControl/CardTabControlTheme.cs
index 62fc14c..e66ace5 100644
--- a/src/AtomUI.Controls/TabControl/CardTabControlTheme.cs
+++ b/src/AtomUI.Controls/TabControl/CardTabControlTheme.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/TabControl/TabControl.cs b/src/AtomUI.Controls/TabControl/TabControl.cs
index 1c40e46..7520cc4 100644
--- a/src/AtomUI.Controls/TabControl/TabControl.cs
+++ b/src/AtomUI.Controls/TabControl/TabControl.cs
@@ -1,6 +1,6 @@
-using AtomUI.Theme.Styling;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
diff --git a/src/AtomUI.Controls/TabControl/TabControlTheme.cs b/src/AtomUI.Controls/TabControl/TabControlTheme.cs
index e89eda9..714da8d 100644
--- a/src/AtomUI.Controls/TabControl/TabControlTheme.cs
+++ b/src/AtomUI.Controls/TabControl/TabControlTheme.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/TabControl/TabItem.cs b/src/AtomUI.Controls/TabControl/TabItem.cs
index eb4d8d8..5305b0d 100644
--- a/src/AtomUI.Controls/TabControl/TabItem.cs
+++ b/src/AtomUI.Controls/TabControl/TabItem.cs
@@ -1,9 +1,9 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Icon;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStrip.cs b/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStrip.cs
index 08de5b6..6121587 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStrip.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStrip.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStripItemTheme.cs b/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStripItemTheme.cs
index 0a1a3da..131d749 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStripItemTheme.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/BaseTabStripItemTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Icon;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/CardTabStrip.cs b/src/AtomUI.Controls/TabControl/TabStrip/CardTabStrip.cs
index 10bf83c..e23dc1d 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/CardTabStrip.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/CardTabStrip.cs
@@ -1,7 +1,6 @@
 using AtomUI.Data;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/CardTabStripTheme.cs b/src/AtomUI.Controls/TabControl/TabStrip/CardTabStripTheme.cs
index 1754db7..8c64e0c 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/CardTabStripTheme.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/CardTabStripTheme.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/TabStrip.cs b/src/AtomUI.Controls/TabControl/TabStrip/TabStrip.cs
index a18d875..a036612 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/TabStrip.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/TabStrip.cs
@@ -1,6 +1,6 @@
-using AtomUI.Theme.Styling;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/TabStripItem.cs b/src/AtomUI.Controls/TabControl/TabStrip/TabStripItem.cs
index c3a7f69..a2cde88 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/TabStripItem.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/TabStripItem.cs
@@ -1,9 +1,9 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Icon;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/TabControl/TabStrip/TabStripTheme.cs b/src/AtomUI.Controls/TabControl/TabStrip/TabStripTheme.cs
index 4f8802b..a173f8c 100644
--- a/src/AtomUI.Controls/TabControl/TabStrip/TabStripTheme.cs
+++ b/src/AtomUI.Controls/TabControl/TabStrip/TabStripTheme.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/Tag/Tag.cs b/src/AtomUI.Controls/Tag/Tag.cs
index 2f197d6..8eb63ea 100644
--- a/src/AtomUI.Controls/Tag/Tag.cs
+++ b/src/AtomUI.Controls/Tag/Tag.cs
@@ -3,7 +3,6 @@ using AtomUI.Theme;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Palette;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/Tag/TagTheme.cs b/src/AtomUI.Controls/Tag/TagTheme.cs
index 2d9ca3f..ada1ab7 100644
--- a/src/AtomUI.Controls/Tag/TagTheme.cs
+++ b/src/AtomUI.Controls/Tag/TagTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
 using Avalonia.Layout;
diff --git a/src/AtomUI.Controls/TimePicker/DateTimePickerPanel.cs b/src/AtomUI.Controls/TimePicker/DateTimePickerPanel.cs
index c3d06d2..e2d55e0 100644
--- a/src/AtomUI.Controls/TimePicker/DateTimePickerPanel.cs
+++ b/src/AtomUI.Controls/TimePicker/DateTimePickerPanel.cs
@@ -1,7 +1,6 @@
 using AtomUI.Controls.TimePickerLang;
-using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
diff --git a/src/AtomUI.Controls/TimePicker/Localization/en_US.cs b/src/AtomUI.Controls/TimePicker/Localization/en_US.cs
index f7c3bd2..4d41d8e 100644
--- a/src/AtomUI.Controls/TimePicker/Localization/en_US.cs
+++ b/src/AtomUI.Controls/TimePicker/Localization/en_US.cs
@@ -1,8 +1,10 @@
 using AtomUI.Theme;
 using AtomUI.Utils;
 
+// ReSharper disable once CheckNamespace
 namespace AtomUI.Controls.TimePickerLang;
 
+// ReSharper disable once InconsistentNaming
 [LanguageProvider(LanguageCode.en_US, TimePickerToken.ID)]
 internal class en_US : AbstractLanguageProvider
 {
diff --git a/src/AtomUI.Controls/TimePicker/Localization/zh_CN.cs b/src/AtomUI.Controls/TimePicker/Localization/zh_CN.cs
index 444f96b..a98e9f3 100644
--- a/src/AtomUI.Controls/TimePicker/Localization/zh_CN.cs
+++ b/src/AtomUI.Controls/TimePicker/Localization/zh_CN.cs
@@ -1,8 +1,10 @@
 using AtomUI.Theme;
 using AtomUI.Utils;
 
+// ReSharper disable once CheckNamespace
 namespace AtomUI.Controls.TimePickerLang;
 
+// ReSharper disable once InconsistentNaming
 [LanguageProvider(LanguageCode.zh_CN, TimePickerToken.ID)]
 internal class zh_CN : AbstractLanguageProvider
 {
diff --git a/src/AtomUI.Controls/TimePicker/PickerClearUpButtonTheme.cs b/src/AtomUI.Controls/TimePicker/PickerClearUpButtonTheme.cs
index bd02eb9..d683b52 100644
--- a/src/AtomUI.Controls/TimePicker/PickerClearUpButtonTheme.cs
+++ b/src/AtomUI.Controls/TimePicker/PickerClearUpButtonTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
 using Avalonia.Data;
diff --git a/src/AtomUI.Controls/TimePicker/RangeTimePickerFlyoutPresenterTheme.cs b/src/AtomUI.Controls/TimePicker/RangeTimePickerFlyoutPresenterTheme.cs
index 5559435..c7de739 100644
--- a/src/AtomUI.Controls/TimePicker/RangeTimePickerFlyoutPresenterTheme.cs
+++ b/src/AtomUI.Controls/TimePicker/RangeTimePickerFlyoutPresenterTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Controls.Localization;
 using AtomUI.Controls.TimePickerLang;
-using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/TimePicker/RangeTimePickerTheme.cs b/src/AtomUI.Controls/TimePicker/RangeTimePickerTheme.cs
index 0f2528c..0fe614b 100644
--- a/src/AtomUI.Controls/TimePicker/RangeTimePickerTheme.cs
+++ b/src/AtomUI.Controls/TimePicker/RangeTimePickerTheme.cs
@@ -1,7 +1,7 @@
 using AtomUI.Data;
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Shapes;
diff --git a/src/AtomUI.Controls/TimePicker/TimePicker.cs b/src/AtomUI.Controls/TimePicker/TimePicker.cs
index db82b3a..319fdb4 100644
--- a/src/AtomUI.Controls/TimePicker/TimePicker.cs
+++ b/src/AtomUI.Controls/TimePicker/TimePicker.cs
@@ -1,7 +1,7 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Diagnostics;
diff --git a/src/AtomUI.Controls/TimePicker/TimePickerFlyoutPresenterTheme.cs b/src/AtomUI.Controls/TimePicker/TimePickerFlyoutPresenterTheme.cs
index 0e0304d..4b0abd3 100644
--- a/src/AtomUI.Controls/TimePicker/TimePickerFlyoutPresenterTheme.cs
+++ b/src/AtomUI.Controls/TimePicker/TimePickerFlyoutPresenterTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Controls.Localization;
 using AtomUI.Controls.TimePickerLang;
-using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Templates;
diff --git a/src/AtomUI.Controls/TimePicker/TimePickerPresenter.cs b/src/AtomUI.Controls/TimePicker/TimePickerPresenter.cs
index 36bec5d..695bf0b 100644
--- a/src/AtomUI.Controls/TimePicker/TimePickerPresenter.cs
+++ b/src/AtomUI.Controls/TimePicker/TimePickerPresenter.cs
@@ -1,7 +1,6 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
diff --git a/src/AtomUI.Controls/TimePicker/TimePickerPresenterTheme.cs b/src/AtomUI.Controls/TimePicker/TimePickerPresenterTheme.cs
index 9e96195..7b440e6 100644
--- a/src/AtomUI.Controls/TimePicker/TimePickerPresenterTheme.cs
+++ b/src/AtomUI.Controls/TimePicker/TimePickerPresenterTheme.cs
@@ -1,6 +1,6 @@
 using AtomUI.Theme;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Shapes;
diff --git a/src/AtomUI.Controls/Tooltip/ToolTip.cs b/src/AtomUI.Controls/Tooltip/ToolTip.cs
index d3ec351..924152a 100644
--- a/src/AtomUI.Controls/Tooltip/ToolTip.cs
+++ b/src/AtomUI.Controls/Tooltip/ToolTip.cs
@@ -1,8 +1,8 @@
 using System.Reflection;
 using AtomUI.Reflection;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Palette;
 using AtomUI.Theme.Styling;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
diff --git a/src/AtomUI.Controls/TreeView/DragPreviewAdorner.cs b/src/AtomUI.Controls/TreeView/DragPreviewAdorner.cs
index 612069a..5df50af 100644
--- a/src/AtomUI.Controls/TreeView/DragPreviewAdorner.cs
+++ b/src/AtomUI.Controls/TreeView/DragPreviewAdorner.cs
@@ -1,5 +1,5 @@
-using AtomUI.Theme.Styling;
-using AtomUI.Utils;
+using AtomUI.Theme.Data;
+using AtomUI.Theme.Styling;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Layout;
diff --git a/src/AtomUI.Controls/TreeView/NodeSwitcherButton.cs b/src/AtomUI.Controls/TreeView/NodeSwitcherButton.cs
index 430748f..86b3a3d 100644
--- a/src/AtomUI.Controls/TreeView/NodeSwitcherButton.cs
+++ b/src/AtomUI.Controls/TreeView/NodeSwitcherButton.cs
@@ -2,9 +2,9 @@
 using AtomUI.Data;
 using AtomUI.Icon;
 using AtomUI.Media;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls.Primitives;
diff --git a/src/AtomUI.Controls/TreeView/TreeView.cs b/src/AtomUI.Controls/TreeView/TreeView.cs
index 59302d5..4fd6b34 100644
--- a/src/AtomUI.Controls/TreeView/TreeView.cs
+++ b/src/AtomUI.Controls/TreeView/TreeView.cs
@@ -1,5 +1,6 @@
 using AtomUI.Controls.Utils;
 using AtomUI.Data;
+using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
diff --git a/src/AtomUI.Controls/TreeView/TreeViewItem.cs b/src/AtomUI.Controls/TreeView/TreeViewItem.cs
index c664474..9871a21 100644
--- a/src/AtomUI.Controls/TreeView/TreeViewItem.cs
+++ b/src/AtomUI.Controls/TreeView/TreeViewItem.cs
@@ -3,7 +3,6 @@ using AtomUI.Media;
 using AtomUI.Theme.Data;
 using AtomUI.Theme.Styling;
 using AtomUI.Theme.Utils;
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Controls;
diff --git a/src/AtomUI.Controls/TreeView/TreeViewItemTheme.cs b/src/AtomUI.Controls/TreeView/TreeViewItemTheme.cs
index 48daf81..32f2237 100644
--- a/src/AtomUI.Controls/TreeView/TreeViewItemTheme.cs
+++ b/src/AtomUI.Controls/TreeView/TreeViewItemTheme.cs
@@ -1,5 +1,4 @@
-using AtomUI.Data;
-using AtomUI.Theme;
+using AtomUI.Theme;
 using AtomUI.Theme.Styling;
 using Avalonia.Controls;
 using Avalonia.Controls.Converters;
diff --git a/src/AtomUI.Controls/Utils/DateTimeUtils.cs b/src/AtomUI.Controls/Utils/DateTimeUtils.cs
index a8c4280..94fe1b9 100644
--- a/src/AtomUI.Controls/Utils/DateTimeUtils.cs
+++ b/src/AtomUI.Controls/Utils/DateTimeUtils.cs
@@ -1,6 +1,6 @@
 using System.Globalization;
 using AtomUI.Controls.TimePickerLang;
-using AtomUI.Data;
+using AtomUI.Theme.Data;
 
 namespace AtomUI.Controls.Utils;
 
diff --git a/src/AtomUI.Controls/Utils/RoundRectGeometryBuilder.cs b/src/AtomUI.Controls/Utils/RoundRectGeometryBuilder.cs
index 462425b..e3d5c81 100644
--- a/src/AtomUI.Controls/Utils/RoundRectGeometryBuilder.cs
+++ b/src/AtomUI.Controls/Utils/RoundRectGeometryBuilder.cs
@@ -1,4 +1,3 @@
-using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Media;
 using Avalonia.Utilities;
diff --git a/src/AtomUI.Controls/Watermark/Glyphs/ImageGlyph.cs b/src/AtomUI.Controls/Watermark/Glyphs/ImageGlyph.cs
index 583f57a..8d37a57 100644
--- a/src/AtomUI.Controls/Watermark/Glyphs/ImageGlyph.cs
+++ b/src/AtomUI.Controls/Watermark/Glyphs/ImageGlyph.cs
@@ -1,4 +1,3 @@
-using System.Globalization;
 using Avalonia;
 using Avalonia.Media;
 
diff --git a/src/AtomUI.Controls/Window/CaptionButton.cs b/src/AtomUI.Controls/Window/CaptionButton.cs
index 38b73ae..fc931e7 100644
--- a/src/AtomUI.Controls/Window/CaptionButton.cs
+++ b/src/AtomUI.Controls/Window/CaptionButton.cs
@@ -1,12 +1,9 @@
-using AtomUI.Controls.Controls;
-using AtomUI.Data;
-using AtomUI.Theme.TokenSystem;
 using Avalonia;
 using Avalonia.Input;
 using Avalonia.Layout;
 using Avalonia.Media;
 
-namespace AtomUI.Controls.Window;
+namespace AtomUI.Controls;
 
 using AvaloniaButton = Avalonia.Controls.Button;
 
diff --git a/src/AtomUI.Controls/Window/CaptionButtonBox.cs b/src/AtomUI.Controls/Window/CaptionButtonBox.cs
index ea370b7..5d84d29 100644
--- a/src/AtomUI.Controls/Window/CaptionButtonBox.cs
+++ b/src/AtomUI.Controls/Window/CaptionButtonBox.cs
@@ -1,4 +1,4 @@
-namespace AtomUI.Controls.Window;
+namespace AtomUI.Controls;
 
 using AvaloniaCaptionButtons = Avalonia.Controls.Chrome.CaptionButtons;
 
diff --git a/src/AtomUI.Controls/Window/CaptionButtonThemeProvider.cs b/src/AtomUI.Controls/Window/CaptionButtonThemeProvider.cs
index 12d0cf0..8dd1288 100644
--- a/src/AtomUI.Controls/Window/CaptionButtonThemeProvider.cs
+++ b/src/AtomUI.Controls/Window/CaptionButtonThemeProvider.cs
@@ -1,8 +1,6 @@
-using AtomUI.Controls.Window;
-using AtomUI.Theme.Styling;
 using Avalonia.Styling;
 
-namespace AtomUI.Controls.Controls.Window;
+namespace AtomUI.Controls;
 
 public class CaptionButtonThemeProvider
 {
diff --git a/src/AtomUI.Controls/Window/CaptionButtonToken.cs b/src/AtomUI.Controls/Window/CaptionButtonToken.cs
index 7a63590..832b6f2 100644
--- a/src/AtomUI.Controls/Window/CaptionButtonToken.cs
+++ b/src/AtomUI.Controls/Window/CaptionButtonToken.cs
@@ -1,7 +1,7 @@
 using AtomUI.Theme.TokenSystem;
 using Avalonia.Media;
 
-namespace AtomUI.Controls.Controls;
+namespace AtomUI.Controls;
 
 [ControlDesignToken]
 internal class CaptionButtonToken : AbstractControlDesignToken
diff --git a/src/AtomUI.Controls/Window/TitleBar.cs b/src/AtomUI.Controls/Window/TitleBar.cs
index 7db37e4..46348ac 100644
--- a/src/AtomUI.Controls/Window/TitleBar.cs
+++ b/src/AtomUI.Controls/Window/TitleBar.cs
@@ -1,4 +1,4 @@
-namespace AtomUI.Controls.Chrome;
+namespace AtomUI.Controls;
 
 using AvaloniaTitleBar = Avalonia.Controls.Chrome.TitleBar;
 
diff --git a/src/AtomUI.Controls/Window/Window.cs b/src/AtomUI.Controls/Window/Window.cs
index 9bd614f..ede8b3a 100644
--- a/src/AtomUI.Controls/Window/Window.cs
+++ b/src/AtomUI.Controls/Window/Window.cs
@@ -1,6 +1,4 @@
-using AtomUI.Theme.TokenSystem;
-
-namespace AtomUI.Controls.Window;
+namespace AtomUI.Controls;
 
 using AvaloniaWindow = Avalonia.Controls.Window;
 
diff --git a/src/AtomUI.Controls/Window/WindowToken.cs b/src/AtomUI.Controls/Window/WindowToken.cs
index 4afeb7a..575ae23 100644
--- a/src/AtomUI.Controls/Window/WindowToken.cs
+++ b/src/AtomUI.Controls/Window/WindowToken.cs
@@ -1,7 +1,7 @@
 using AtomUI.Theme.TokenSystem;
 using Avalonia.Media;
 
-namespace AtomUI.Controls.Window;
+namespace AtomUI.Controls;
 
 [ControlDesignToken]
 public class WindowToken : AbstractControlDesignToken
diff --git a/src/AtomUI.Generator/Language/LanguageProviderRegisterClassSourceWriter.cs b/src/AtomUI.Generator/Language/LanguageProviderRegisterClassSourceWriter.cs
index cc319f4..ebde932 100644
--- a/src/AtomUI.Generator/Language/LanguageProviderRegisterClassSourceWriter.cs
+++ b/src/AtomUI.Generator/Language/LanguageProviderRegisterClassSourceWriter.cs
@@ -1,5 +1,4 @@
-using System.Collections.Immutable;
-using Microsoft.CodeAnalysis;
+using Microsoft.CodeAnalysis;
 using Microsoft.CodeAnalysis.CSharp;
 using Microsoft.CodeAnalysis.CSharp.Syntax;
 
diff --git a/src/AtomUI.Theme/AbstractLanguageProvider.cs b/src/AtomUI.Theme/AbstractLanguageProvider.cs
index c598743..0a7c026 100644
--- a/src/AtomUI.Theme/AbstractLanguageProvider.cs
+++ b/src/AtomUI.Theme/AbstractLanguageProvider.cs
@@ -1,5 +1,4 @@
 using System.Reflection;
-using AtomUI.Theme.TokenSystem;
 using Avalonia.Controls;
 
 namespace AtomUI.Theme;
diff --git a/src/AtomUI.Theme/Data/LanguageResourceBinder.cs b/src/AtomUI.Theme/Data/LanguageResourceBinder.cs
index 46d54fc..e888cc9 100644
--- a/src/AtomUI.Theme/Data/LanguageResourceBinder.cs
+++ b/src/AtomUI.Theme/Data/LanguageResourceBinder.cs
@@ -1,10 +1,9 @@
-using AtomUI.Theme;
-using Avalonia;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Data;
 using Avalonia.Styling;
 
-namespace AtomUI.Data;
+namespace AtomUI.Theme.Data;
 
 public static class LanguageResourceBinder
 {
diff --git a/src/AtomUI.Theme/Data/TokenResourceBinder.cs b/src/AtomUI.Theme/Data/TokenResourceBinder.cs
index 0a5e033..4438de5 100644
--- a/src/AtomUI.Theme/Data/TokenResourceBinder.cs
+++ b/src/AtomUI.Theme/Data/TokenResourceBinder.cs
@@ -5,7 +5,7 @@ using Avalonia.Data;
 using Avalonia.Markup.Xaml.MarkupExtensions;
 using Avalonia.Styling;
 
-namespace AtomUI.Utils;
+namespace AtomUI.Theme.Data;
 
 public static class TokenResourceBinder
 {