Merge pull request #283 from sirdoombox/main

Add dedicated separator style. Demo TrayIcon.
kikipoulet · Aug 27, 2024 · ac659f4 · ac659f4
2 parents 5a4ab52 + 5f48524
commit ac659f4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 21 deletions.
diff --git a/SukiUI.Demo/App.axaml b/SukiUI.Demo/App.axaml
@@ -8,6 +8,27 @@
     <Application.DataTemplates>
         <common:ViewLocator />
     </Application.DataTemplates>
+
+    <TrayIcon.Icons>
+        <TrayIcons>
+            <TrayIcon Icon="/Assets/OIG.N5o-removebg-preview.png" 
+                      ToolTipText="SukiUI Native Menu Demo">
+                <TrayIcon.Menu>
+                    <NativeMenu>
+                        <NativeMenuItem Header="Native Menu Demo">
+                            <NativeMenu>
+                                <NativeMenuItem Header="Option 1"   />
+                                <NativeMenuItem Header="Option 2"   />
+                                <NativeMenuItemSeparator/>
+                                <NativeMenuItem Header="Option 3"  />
+                            </NativeMenu>
+                        </NativeMenuItem>
+                    </NativeMenu>
+                </TrayIcon.Menu>
+            </TrayIcon>
+        </TrayIcons>
+    </TrayIcon.Icons>
+
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>

diff --git a/SukiUI.Demo/Features/ControlsLibrary/ContextMenusView.axaml b/SukiUI.Demo/Features/ControlsLibrary/ContextMenusView.axaml
@@ -37,10 +37,11 @@
                     </MenuItem.Icon>
                 </MenuItem>
                 <MenuItem Header="Separator Next" />
-                <MenuItem Header="-" />
+                <Separator/>
                 <MenuItem Header="Submenu">
                     <MenuItem Header="Sub-Submenu">
                         <MenuItem Command="{Binding NestedOptionClickedCommand}" Header="Nested Option" />
+                        <MenuItem Header="-" />
                         <MenuItem Header="Disabled Nested Option" IsEnabled="False" />
                     </MenuItem>
                 </MenuItem>

diff --git a/SukiUI/Theme/Index.axaml b/SukiUI/Theme/Index.axaml
@@ -61,6 +61,7 @@
                 <ResourceInclude Source="avares://sukiUI/Theme/CalendarDatePickerStyle.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Theme/TabControl.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Theme/TabItem.axaml" />
+                <ResourceInclude Source="avares://sukiUI/Theme/Separator.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Theme/DropDownButton.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Theme/Menu.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Theme/ContextMenu.axaml" />

diff --git a/SukiUI/Theme/MenuFlyoutPresenter.axaml b/SukiUI/Theme/MenuFlyoutPresenter.axaml
@@ -16,11 +16,13 @@
                             BorderThickness="{TemplateBinding BorderThickness}"
                             ClipToBounds="True"
                             CornerRadius="{TemplateBinding CornerRadius}">
-                        <ItemsPresenter Name="PART_ItemsPresenter"
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Center"
-                                        ItemsPanel="{TemplateBinding ItemsPanel}"
-                                        KeyboardNavigation.TabNavigation="Continue" />
+                        <Panel Background="{DynamicResource PopupGradientBrush}">
+                            <ItemsPresenter Name="PART_ItemsPresenter"
+                                            HorizontalAlignment="Left"
+                                            VerticalAlignment="Center"
+                                            ItemsPanel="{TemplateBinding ItemsPanel}"
+                                            KeyboardNavigation.TabNavigation="Continue" />
+                        </Panel>
                     </Border>
                 </Panel>
             </ControlTemplate>
@@ -32,4 +34,4 @@
     <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}"
                   BasedOn="{StaticResource SukiMenuFlyoutPresenterStyle}"
                   TargetType="MenuFlyoutPresenter" />
-</ResourceDictionary>
+</ResourceDictionary>
diff --git a/SukiUI/Theme/MenuItem.axaml b/SukiUI/Theme/MenuItem.axaml
@@ -100,16 +100,6 @@
             <Setter Property="Background" Value="{DynamicResource SukiLightBorderBrush}" />
         </Style>
 
-        <Style Selector="^:separator">
-            <Setter Property="Template">
-                <ControlTemplate>
-                    <Separator Height="1"
-                               Margin="20,1,0,1"
-                               Background="{DynamicResource ThemeControlMidBrush}" />
-                </ControlTemplate>
-            </Setter>
-        </Style>
-
         <Style Selector="^:open /template/ LayoutTransformControl#PART_LayoutTransform">
             <Style.Animations>
                 <Animation Easing="{StaticResource MenuEasing}"
@@ -152,12 +142,9 @@
         </Style>
 
         <Style Selector="^:separator">
-            <Setter Property="Height" Value="NaN" />
             <Setter Property="Template">
                 <ControlTemplate>
-                    <Separator Height="1"
-                               Margin="0,0"
-                               Background="{DynamicResource SukiLightBorderBrush}" />
+                    <Separator Margin="0"/>
                 </ControlTemplate>
             </Setter>
         </Style>

diff --git a/SukiUI/Theme/Separator.axaml b/SukiUI/Theme/Separator.axaml
@@ -0,0 +1,36 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="SukiSeparatorStyle" TargetType="Separator">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Foreground" Value="{DynamicResource SukiLightBorderBrush}" />
+        <Setter Property="MinHeight" Value="1" />
+        <Setter Property="Height" Value="1" />
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Name="PART_RootBorder"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderThickness}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Rectangle Name="PART_Content" Fill="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Border#PART_RootBorder">
+            <Setter Property="ClipToBounds" Value="True" />
+        </Style>
+
+        <Style Selector="^ /template/ Rectangle#PART_Content">
+            <Setter Property="Height" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+    </ControlTheme>
+    <ControlTheme x:Key="{x:Type Separator}" TargetType="Separator"
+                  BasedOn="{StaticResource SukiSeparatorStyle}" />
+</ResourceDictionary>