From 43db0c0293acf2c1849a725c9868881197db7e1d Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 00:34:48 +0800
Subject: [PATCH] feat: add header for demo.

---
 demo/Semi.Avalonia.Demo/Pages/Overview.axaml  |  12 -
 .../{Views => Themes}/TabMenu.axaml           |  33 +--
 .../Themes/ToggleButton.axaml                 |  33 +++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  | 272 ++++++++++--------
 .../Views/MainView.axaml.cs                   |  13 +
 5 files changed, 211 insertions(+), 152 deletions(-)
 rename demo/Semi.Avalonia.Demo/{Views => Themes}/TabMenu.axaml (57%)
 create mode 100644 demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
index 2e100a2..a2a8569 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -9,18 +9,6 @@
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
         <StackPanel Spacing="5">
-            <TextBlock
-                HorizontalAlignment="Center"
-                Classes="H4"
-                Text="Welcome to Semi Avalonia"
-                Theme="{StaticResource TitleTextBlock}" />
-
-            <ToggleSwitch
-                Content="Switch Theme"
-                IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-                OffContent="Dark"
-                OnContent="Default" />
-
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                 <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
diff --git a/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml b/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
similarity index 57%
rename from demo/Semi.Avalonia.Demo/Views/TabMenu.axaml
rename to demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
index 5c7a38f..0c9ec39 100644
--- a/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
@@ -12,27 +12,18 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <Grid DockPanel.Dock="Left" RowDefinitions="Auto, *">
-                            <TextBlock
-                                Grid.Row="0"
-                                Margin="8,0,8,8"
-                                HorizontalAlignment="Center"
-                                Classes="H5"
-                                Text="Semi Avalonia Demo"
-                                Theme="{DynamicResource TitleTextBlock}" />
-                            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
-                                <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                                    <ItemsPresenter Name="PART_ItemsPresenter">
-                                        <ItemsPresenter.ItemsPanel>
-                                            <ItemsPanelTemplate>
-                                                <StackPanel />
-                                            </ItemsPanelTemplate>
-                                        </ItemsPresenter.ItemsPanel>
-                                    </ItemsPresenter>
-                                    <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-                                </Panel>
-                            </ScrollViewer>
-                        </Grid>
+                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
+                            <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                                <ItemsPresenter Name="PART_ItemsPresenter">
+                                    <ItemsPresenter.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <StackPanel />
+                                        </ItemsPanelTemplate>
+                                    </ItemsPresenter.ItemsPanel>
+                                </ItemsPresenter>
+                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            </Panel>
+                        </ScrollViewer>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
                             Margin="{TemplateBinding Padding}"
diff --git a/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
new file mode 100644
index 0000000..6a113d4
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
@@ -0,0 +1,33 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="ThemeToggleButton" 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="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
+                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+        </Style>
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ PathIcon">
+                <Setter Property="PathIcon.Data" Value="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
+            </Style>
+
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 608e5e0..0074644 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -11,126 +11,160 @@
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="TabMenu.axaml" />
+                <ResourceInclude Source="../Themes/TabMenu.axaml" />
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
-    <TabControl
-        Margin="8,20,0,20"
-        Padding="20,0,0,0"
-        HorizontalAlignment="Stretch"
-        TabStripPlacement="Left"
-        Theme="{DynamicResource NavigationTab}">
-        <TabItem Header="Overview">
-            <pages:Overview />
-        </TabItem>
-        <TabItem Header="AutoCompleteBox">
-            <pages:AutoCompleteBoxDemo />
-        </TabItem>
-        <TabItem Header="Border">
-            <pages:BorderDemo />
-        </TabItem>
-        <TabItem Header="Button">
-            <pages:ButtonDemo />
-        </TabItem>
-        <TabItem Header="ButtonSpinner">
-            <pages:ButtonSpinnerDemo />
-        </TabItem>
-        <TabItem Header="Calendar">
-            <pages:CalendarDemo />
-        </TabItem>
-        <TabItem Header="CalendarDatePicker">
-            <pages:CalendarDatePickerDemo />
-        </TabItem>
-        <TabItem Header="Carousel">
-            <pages:CarouselDemo />
-        </TabItem>
-        <TabItem Header="CheckBox">
-            <pages:CheckBoxDemo />
-        </TabItem>
-        <TabItem Header="ColorPicker">
-            <pages:ColorPickerDemo />
-        </TabItem>
-        <TabItem Header="ComboBox">
-            <pages:ComboBoxDemo />
-        </TabItem>
-        <TabItem Header="DataGrid">
-            <pages:DataGridDemo />
-        </TabItem>
-        <TabItem Header="DatePicker">
-            <pages:DatePickerDemo />
-        </TabItem>
-        <TabItem Header="Expander">
-            <pages:ExpanderDemo />
-        </TabItem>
-        <TabItem Header="Flyout">
-            <pages:FlyoutDemo />
-        </TabItem>
-        <TabItem Header="GridSplitter">
-            <pages:GridSplitter />
-        </TabItem>
-        <TabItem Header="Label">
-            <pages:LabelDemo />
-        </TabItem>
-        <TabItem Header="ListBox">
-            <pages:ListBoxDemo />
-        </TabItem>
-        <TabItem Header="ManagedFileChooser">
-            <pages:ManagedFileChooserDemo />
-        </TabItem>
-        <TabItem Header="Menu">
-            <pages:MenuDemo />
-        </TabItem>
-        <TabItem Header="Notification">
-            <pages:NotificationDemo />
-        </TabItem>
-        <TabItem Header="NumericUpDown">
-            <pages:NumericUpDownDemo />
-        </TabItem>
-        <TabItem Header="ProgressBar">
-            <pages:ProgressBarDemo />
-        </TabItem>
-        <TabItem Header="RadioButton">
-            <pages:RadioButtonDemo />
-        </TabItem>
-        <TabItem Header="RefreshContainer">
-            <pages:RefreshContainerDemo />
-        </TabItem>
-        <TabItem Header="RepeatButton">
-            <pages:RepeatButtonDemo />
-        </TabItem>
-        <TabItem Header="Slider">
-            <pages:SliderDemo />
-        </TabItem>
-        <TabItem Header="SplitView">
-            <pages:SplitViewDemo />
-        </TabItem>
-        <TabItem Header="TabControl">
-            <pages:TabControlDemo />
-        </TabItem>
-        <TabItem Header="TextBlock">
-            <pages:TextBlockDemo />
-        </TabItem>
-        <TabItem Header="TextBox">
-            <pages:TextBoxDemo />
-        </TabItem>
-        <TabItem Header="ThemeVariantScope">
-            <pages:ThemeVariantDemo />
-        </TabItem>
-        <TabItem Header="TimePicker">
-            <pages:TimePickerDemo />
-        </TabItem>
-        <TabItem Header="ToggleButton">
-            <pages:ToggleButtonDemo />
-        </TabItem>
-        <TabItem Header="ToggleSwitch">
-            <pages:ToggleSwitchDemo />
-        </TabItem>
-        <TabItem Header="ToolTip">
-            <pages:ToolTipDemo />
-        </TabItem>
-        <TabItem Header="TreeView">
-            <pages:TreeViewDemo />
-        </TabItem>
-    </TabControl>
+    <Grid RowDefinitions="Auto, *">
+        <Border
+            Margin="8"
+            Padding="12,4"
+            Theme="{DynamicResource CardBorder}">
+            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
+                    <TextBlock
+                        VerticalAlignment="Center"
+                        Classes="H6"
+                        Text="Semi Avalonia"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TextBlock
+                        Margin="8,0"
+                        VerticalAlignment="Center"
+                        Text="/" />
+                    <TextBlock
+                        Margin="8,0"
+                        VerticalAlignment="Center"
+                        Classes="Secondary"
+                        Text="{Binding #tab.SelectedItem.Header}" />
+                </StackPanel>
+                <ToggleButton
+                    Grid.Column="1"
+                    IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
+                    Theme="{DynamicResource ThemeToggleButton}" />
+            </Grid>
+
+        </Border>
+        <TabControl
+            Name="tab"
+            Grid.Row="1"
+            Margin="8"
+            Padding="20,0,0,0"
+            HorizontalAlignment="Stretch"
+            TabStripPlacement="Left"
+            Theme="{DynamicResource NavigationTab}">
+            <TabItem Header="Overview">
+                <pages:Overview />
+            </TabItem>
+            <TabItem Header="AutoCompleteBox">
+                <pages:AutoCompleteBoxDemo />
+            </TabItem>
+            <TabItem Header="Border">
+                <pages:BorderDemo />
+            </TabItem>
+            <TabItem Header="Button">
+                <pages:ButtonDemo />
+            </TabItem>
+            <TabItem Header="ButtonSpinner">
+                <pages:ButtonSpinnerDemo />
+            </TabItem>
+            <TabItem Header="Calendar">
+                <pages:CalendarDemo />
+            </TabItem>
+            <TabItem Header="CalendarDatePicker">
+                <pages:CalendarDatePickerDemo />
+            </TabItem>
+            <TabItem Header="Carousel">
+                <pages:CarouselDemo />
+            </TabItem>
+            <TabItem Header="CheckBox">
+                <pages:CheckBoxDemo />
+            </TabItem>
+            <TabItem Header="ColorPicker">
+                <pages:ColorPickerDemo />
+            </TabItem>
+            <TabItem Header="ComboBox">
+                <pages:ComboBoxDemo />
+            </TabItem>
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="DatePicker">
+                <pages:DatePickerDemo />
+            </TabItem>
+            <TabItem Header="Expander">
+                <pages:ExpanderDemo />
+            </TabItem>
+            <TabItem Header="Flyout">
+                <pages:FlyoutDemo />
+            </TabItem>
+            <TabItem Header="GridSplitter">
+                <pages:GridSplitter />
+            </TabItem>
+            <TabItem Header="Label">
+                <pages:LabelDemo />
+            </TabItem>
+            <TabItem Header="ListBox">
+                <pages:ListBoxDemo />
+            </TabItem>
+            <TabItem Header="ManagedFileChooser">
+                <pages:ManagedFileChooserDemo />
+            </TabItem>
+            <TabItem Header="Menu">
+                <pages:MenuDemo />
+            </TabItem>
+            <TabItem Header="Notification">
+                <pages:NotificationDemo />
+            </TabItem>
+            <TabItem Header="NumericUpDown">
+                <pages:NumericUpDownDemo />
+            </TabItem>
+            <TabItem Header="ProgressBar">
+                <pages:ProgressBarDemo />
+            </TabItem>
+            <TabItem Header="RadioButton">
+                <pages:RadioButtonDemo />
+            </TabItem>
+            <TabItem Header="RefreshContainer">
+                <pages:RefreshContainerDemo />
+            </TabItem>
+            <TabItem Header="RepeatButton">
+                <pages:RepeatButtonDemo />
+            </TabItem>
+            <TabItem Header="Slider">
+                <pages:SliderDemo />
+            </TabItem>
+            <TabItem Header="SplitView">
+                <pages:SplitViewDemo />
+            </TabItem>
+            <TabItem Header="TabControl">
+                <pages:TabControlDemo />
+            </TabItem>
+            <TabItem Header="TextBlock">
+                <pages:TextBlockDemo />
+            </TabItem>
+            <TabItem Header="TextBox">
+                <pages:TextBoxDemo />
+            </TabItem>
+            <TabItem Header="ThemeVariantScope">
+                <pages:ThemeVariantDemo />
+            </TabItem>
+            <TabItem Header="TimePicker">
+                <pages:TimePickerDemo />
+            </TabItem>
+            <TabItem Header="ToggleButton">
+                <pages:ToggleButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleSwitch">
+                <pages:ToggleSwitchDemo />
+            </TabItem>
+            <TabItem Header="ToolTip">
+                <pages:ToolTipDemo />
+            </TabItem>
+            <TabItem Header="TreeView">
+                <pages:TreeViewDemo />
+            </TabItem>
+        </TabControl>
+    </Grid>
+
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
index 5464c27..b48ee71 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
@@ -1,4 +1,7 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -8,4 +11,14 @@ public partial class MainView : UserControl
     {
         InitializeComponent();
     }
+
+    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        var app = Application.Current;
+        if (app is not null)
+        {
+            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Default : ThemeVariant.Dark;
+        }
+    }
 }
\ No newline at end of file