Merge pull request #238 from AuroraZiling/main

Docs update
kikipoulet · Jul 2, 2024 · 73842f0 · 73842f0
2 parents 65a3e37 + d6d08e7
commit 73842f0
Show file tree

Hide file tree

Showing 37 changed files with 284 additions and 74 deletions.
diff --git a/SukiUI/Theme/DataGridStyle.axaml b/SukiUI/Theme/DataGridStyle.axaml
@@ -9,7 +9,7 @@
                     <DataGridTemplateColumn Header="Birthday">
                         <DataGridTemplateColumn.CellTemplate>
                             <DataTemplate>
-                                <DatePicker BorderThickness="0" SelectedDate="{Binding Birthday}" />
+                                <DatePicker BorderThickness="0" />
                             </DataTemplate>
                         </DataGridTemplateColumn.CellTemplate>
                     </DataGridTemplateColumn>
@@ -151,9 +151,12 @@
                             CornerRadius="0" />
 
                     <DataGridRowHeader Name="PART_RowHeader"
+                                       Grid.Row="0"
                                        Grid.RowSpan="3"
+                                       Grid.Column="0"
                                        DataGridFrozenGrid.IsFrozen="True" />
                     <DataGridCellsPresenter Name="PART_CellsPresenter"
+                                            Grid.Row="0"
                                             Grid.Column="1"
                                             Margin="6"
                                             DataGridFrozenGrid.IsFrozen="True" />
@@ -206,14 +209,16 @@
                     </Border>
                     <Rectangle x:Name="HorizontalSeparator"
                                Grid.Row="2"
+                               Grid.Column="0"
                                Grid.ColumnSpan="2"
                                Height="1"
                                Margin="1,0,1,0"
                                HorizontalAlignment="Stretch"
                                Fill="Transparent"
                                IsVisible="{TemplateBinding AreSeparatorsVisible}" />
 
-                    <ContentPresenter Grid.RowSpan="2"
+                    <ContentPresenter Grid.Row="0"
+                                      Grid.RowSpan="2"
                                       Grid.Column="1"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
@@ -256,7 +261,9 @@
                     </StackPanel>
 
                     <DataGridRowHeader Name="RowHeader"
+                                       Grid.Row="0"
                                        Grid.RowSpan="3"
+                                       Grid.Column="0"
                                        DataGridFrozenGrid.IsFrozen="True" />
 
                 </DataGridFrozenGrid>
@@ -267,8 +274,7 @@
     <Style Selector="DataGridRowGroupHeader /template/ ToggleButton#ExpanderButton">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Grid.Column="0"
-                        Width="20"
+                <Border Width="20"
                         Height="20"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
@@ -309,42 +315,40 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Background="Transparent" BorderThickness="0">
-                    <Grid ColumnDefinitions="Auto,*,Auto" RowDefinitions="Auto,*,Auto,Auto">
-
-                        <DataGridColumnHeader Name="PART_TopLeftCornerHeader" Width="22" />
-                        <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1" />
-                        <DataGridColumnHeader Name="PART_TopRightCornerHeader" Grid.Column="2" />
-                        <Rectangle Name="PART_ColumnHeadersAndRowsSeparator"
-                                   Grid.ColumnSpan="3"
-                                   Height="1"
-                                   VerticalAlignment="Bottom"
-                                   Fill="Transparent"
-                                   StrokeThickness="1" />
-
-                        <DataGridRowsPresenter Name="PART_RowsPresenter"
-                                               Grid.Row="1"
-                                               Grid.ColumnSpan="3">
-                            <DataGridRowsPresenter.GestureRecognizers>
-                                <ScrollGestureRecognizer CanHorizontallyScroll="True" CanVerticallyScroll="True" />
-                            </DataGridRowsPresenter.GestureRecognizers>
-                        </DataGridRowsPresenter>
-
-                        <ScrollBar Name="PART_VerticalScrollbar"
-                                   Grid.Row="1"
-                                   Grid.Column="2"
-                                   Width="{DynamicResource ScrollBarThickness}"
-                                   Orientation="Vertical" />
-
-                        <Grid Grid.Row="2"
-                              Grid.Column="1"
-                              ColumnDefinitions="Auto,*">
-
-                            <ScrollBar Name="PART_HorizontalScrollbar"
-                                       Grid.Column="1"
-                                       Height="{DynamicResource ScrollBarThickness}"
-                                       Orientation="Horizontal" />
+                    <ScrollViewer Name="PART_ScrollViewer"
+                                  HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
+                                  VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}">
+                        <Grid ColumnDefinitions="Auto,*,Auto" RowDefinitions="Auto,*,Auto,Auto">
+
+                            <DataGridColumnHeader Name="PART_TopLeftCornerHeader"
+                                                  Grid.Row="0"
+                                                  Grid.Column="0"
+                                                  Width="22" />
+                            <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter"
+                                                            Grid.Row="0"
+                                                            Grid.Column="1" />
+                            <DataGridColumnHeader Name="PART_TopRightCornerHeader"
+                                                  Grid.Row="0"
+                                                  Grid.Column="2" />
+                            <Rectangle Name="PART_ColumnHeadersAndRowsSeparator"
+                                       Grid.Row="0"
+                                       Grid.Column="0"
+                                       Grid.ColumnSpan="3"
+                                       Height="1"
+                                       VerticalAlignment="Bottom"
+                                       Fill="Transparent"
+                                       StrokeThickness="1" />
+
+                            <DataGridRowsPresenter Name="PART_RowsPresenter"
+                                                   Grid.Row="1"
+                                                   Grid.Column="0"
+                                                   Grid.ColumnSpan="3">
+                                <DataGridRowsPresenter.GestureRecognizers>
+                                    <ScrollGestureRecognizer CanHorizontallyScroll="True" CanVerticallyScroll="True" />
+                                </DataGridRowsPresenter.GestureRecognizers>
+                            </DataGridRowsPresenter>
                         </Grid>
-                    </Grid>
+                    </ScrollViewer>
                 </Border>
             </ControlTemplate>
         </Setter>

diff --git a/docs/docs/.vitepress/config/en.mts b/docs/docs/.vitepress/config/en.mts
@@ -32,14 +32,14 @@ export const en = defineConfig({
             text: 'Navigation',
             items: [
               { text: 'SideMenu', link: '/documentation/controls/navigation/sidemenu' },
+              { text: 'StackPage', link: '/documentation/controls/navigation/stackpage' },
+              { text: 'TabControl', link: '/documentation/controls/navigation/tabcontrol' },
             ]
           },
           {
             text: 'Layout',
             items: [
               { text: 'GlassCard', link: '/documentation/controls/layout/glasscard' },
-              { text: 'TabControl', link: '/documentation/controls/layout/tabcontrol' },
-              { text: 'StackPage', link: '/documentation/controls/layout/stackpage' },
               { text: 'SettingsLayout', link: '/documentation/controls/layout/settingslayout' },
               { text: 'SukiWindow', link: '/documentation/controls/layout/sukiwindow' },
               { text: 'Dock', link: '/documentation/controls/layout/dock' },
@@ -59,13 +59,7 @@ export const en = defineConfig({
               { text: 'CheckBox', link: '/documentation/controls/inputs/checkbox' },
               { text: 'RadioButton', link: '/documentation/controls/inputs/radiobutton' },
               { text: 'ContextMenu', link: '/documentation/controls/inputs/contextmenu' },
-            ]
-          },
-          {
-            text: 'Text',
-            items: [
-              { text: 'AutoCompleteBox', link: '/documentation/controls/text/autocompletebox' },
-              { text: 'TextBox', link: '/documentation/controls/text/textbox' },
+              { text: 'AutoCompleteBox', link: '/documentation/controls/inputs/autocompletebox' },
             ]
           },
           {

diff --git a/docs/docs/.vitepress/config/zh.mts b/docs/docs/.vitepress/config/zh.mts
@@ -29,24 +29,24 @@ export const zh = defineConfig({
         text: '控件',
         items: [
           {
-            text: 'Navigation',
+            text: '导航',
             items: [
               { text: 'SideMenu', link: '/zh/documentation/controls/navigation/sidemenu' },
+              { text: 'StackPage', link: '/zh/documentation/controls/navigation/stackpage' },
+              { text: 'TabControl', link: '/zh/documentation/controls/navigation/tabcontrol' },
             ]
           },
           {
-            text: 'Layout',
+            text: '布局',
             items: [
               { text: 'GlassCard', link: '/zh/documentation/controls/layout/glasscard' },
-              { text: 'TabControl', link: '/zh/documentation/controls/layout/tabcontrol' },
-              { text: 'StackPage', link: '/zh/documentation/controls/layout/stackpage' },
               { text: 'SettingsLayout', link: '/zh/documentation/controls/layout/settingslayout' },
               { text: 'SukiWindow', link: '/zh/documentation/controls/layout/sukiwindow' },
               { text: 'Dock', link: '/zh/documentation/controls/layout/dock' },
             ]
           },
           {
-            text: 'Inputs',
+            text: '输入',
             items: [
               { text: 'Button', link: '/zh/documentation/controls/inputs/button' },
               { text: 'DropDownButton', link: '/zh/documentation/controls/inputs/dropdownbutton' },
@@ -59,24 +59,18 @@ export const zh = defineConfig({
               { text: 'CheckBox', link: '/zh/documentation/controls/inputs/checkbox' },
               { text: 'RadioButton', link: '/zh/documentation/controls/inputs/radiobutton' },
               { text: 'ContextMenu', link: '/zh/documentation/controls/inputs/contextmenu' },
+              { text: 'AutoCompleteBox', link: '/zh/documentation/controls/inputs/autocompletebox' },
             ]
           },
           {
-            text: 'Text',
-            items: [
-              { text: 'AutoCompleteBox', link: '/zh/documentation/controls/text/autocompletebox' },
-              { text: 'TextBox', link: '/zh/documentation/controls/text/textbox' },
-            ]
-          },
-          {
-            text: 'Date & Time',
+            text: '日期与时间',
             items: [
               { text: 'Calendar', link: '/zh/documentation/controls/datetime/calendar' },
               { text: 'DatePicker', link: '/zh/documentation/controls/datetime/datepicker' },
             ]
           },
           {
-            text: 'Progress',
+            text: '进度',
             items: [
               { text: 'WaveProgress', link: '/zh/documentation/controls/progress/waveprogress' },
               { text: 'Stepper', link: '/zh/documentation/controls/progress/stepper' },
@@ -86,7 +80,7 @@ export const zh = defineConfig({
             ]
           },
           {
-            text: 'Data Presentation',
+            text: '数据展现',
             items: [
               { text: 'DataGrid', link: '/zh/documentation/controls/data/datagrid' },
               { text: 'ListBox', link: '/zh/documentation/controls/data/listbox' },

diff --git a/...entation/controls/text/autocompletebox.md → ...tation/controls/inputs/autocompletebox.md b/...entation/controls/text/autocompletebox.md → ...tation/controls/inputs/autocompletebox.md
diff --git a/docs/docs/documentation/controls/inputs/button.md b/docs/docs/documentation/controls/inputs/button.md
@@ -4,7 +4,7 @@ SukiUI has a handful of button styles, available in both the standard primary co
 
 ## Show
 
-<img src="/controls/inputs/button.webp" height="300px" width="300px"/>
+<img src="/controls/inputs/button.webp" />
 
 - Busy
 

diff --git a/docs/docs/documentation/controls/inputs/checkbox.md b/docs/docs/documentation/controls/inputs/checkbox.md
@@ -0,0 +1,19 @@
+# CheckBox
+
+A control used for collecting user's choices.
+
+## Show
+
+<img src="/controls/inputs/checkbox.gif"/>
+
+## Example
+
+```xml
+<CheckBox Content="Option One" IsChecked="True" />
+<CheckBox Content="Option Two" />
+<CheckBox IsThreeState="True" Content="Option Three" />
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml)
diff --git a/docs/docs/documentation/controls/inputs/combobox.md b/docs/docs/documentation/controls/inputs/combobox.md
@@ -1,6 +1,6 @@
 # Combobox
 
-A component for selecting from a dataset
+A control for selecting from a dataset.
 
 ## Show
 
@@ -10,8 +10,7 @@ A component for selecting from a dataset
 
 ```xml
 <ComboBox ItemsSource="{Binding}" 
-          SelectedItem="{Binding}" 
-          />
+          SelectedItem="{Binding}" />
 ```
 
 ## See Also

diff --git a/docs/docs/documentation/controls/inputs/contextmenu.md b/docs/docs/documentation/controls/inputs/contextmenu.md
@@ -0,0 +1,51 @@
+# ContextMenu
+
+Add a right-click triggered context menu for a control.
+
+## Show
+
+<img src="/controls/inputs/contextmenus.gif"/>
+
+## Example
+
+```xml
+<controls:GlassCard>
+    <controls:GlassCard.ContextMenu>
+        <ContextMenu>
+            <MenuItem Command="{Binding OptionClickedCommand}"
+                      CommandParameter="{x:False}"
+                      Header="Option" />
+
+            <MenuItem Header="Disabled Option" IsEnabled="False" />
+
+            <MenuItem Command="{Binding OptionClickedCommand}"
+                      CommandParameter="{x:True}"
+                      Header="Option With Icon">
+                <MenuItem.Icon>
+                    <PathIcon />
+                </MenuItem.Icon>
+            </MenuItem>
+
+            <MenuItem Header="Disabled With Icon" IsEnabled="False">
+                <MenuItem.Icon>
+                    <PathIcon />
+                </MenuItem.Icon>
+            </MenuItem>
+
+            <MenuItem Header="Separator Next" />
+            <MenuItem Header="-" />
+
+            <MenuItem Header="Submenu">
+                <MenuItem Header="Sub-Submenu">
+                    <MenuItem Command="{Binding}" Header="Nested Option" />
+                    <MenuItem Header="Disabled Nested Option" IsEnabled="False" />
+                </MenuItem>
+            </MenuItem>
+        </ContextMenu>
+    </controls:GlassCard.ContextMenu>
+</controls:GlassCard>
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/ContextMenusView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/ContextMenusView.axaml)
diff --git a/docs/docs/documentation/controls/inputs/numericupdown.md b/docs/docs/documentation/controls/inputs/numericupdown.md
@@ -1,6 +1,6 @@
 # NumericUpDown
 
-A component for numeric input
+A control for numeric input.
 
 ## Show
 

diff --git a/docs/docs/documentation/controls/inputs/radiobutton.md b/docs/docs/documentation/controls/inputs/radiobutton.md
@@ -0,0 +1,19 @@
+# RadioButton
+
+A control used for collecting the user's choice.
+
+## Show
+
+<img src="/controls/inputs/radiobutton.gif"/>
+
+## Example
+
+```xml
+<RadioButton Content="Option One"
+             GroupName="A"
+             IsChecked="True" />
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/TogglesView.axaml)
diff --git a/docs/docs/documentation/controls/inputs/slider.md b/docs/docs/documentation/controls/inputs/slider.md
@@ -1,6 +1,6 @@
 # Slider
 
-A component for displaying current value and intervals in range.
+A control for displaying current value and intervals in range.
 
 ## Show
 

diff --git a/docs/docs/documentation/controls/inputs/textbox.md b/docs/docs/documentation/controls/inputs/textbox.md
@@ -0,0 +1,17 @@
+# TextBox
+
+A control used for collecting user provided information.
+
+## Show
+
+<img src="/controls/inputs/textbox.gif"/>
+
+## Example
+
+```xml
+<TextBox theme:TextBoxExtensions.Prefix="Username" Watermark="John" />
+```
+
+## See Also
+
+[Demo: SukiUI.Demo/Features/Dashboard/DashboardView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/Dashboard/DashboardView.axaml)
diff --git a/docs/docs/documentation/controls/inputs/togglebutton.md b/docs/docs/documentation/controls/inputs/togglebutton.md
@@ -1,5 +1,7 @@
 # ToggleButton
 
+Switching between two states.
+
 ## Show
 
 <img src="/controls/inputs/togglebutton.gif" height="300px" width="300px"/>
-Original file line number
+Diff line change
@@ Expand Up @@
     ## Show
-    <img src="/controls/inputs/button.webp" height="300px" width="300px"/>
+    <img src="/controls/inputs/button.webp" />
     - Busy
@@ Expand Down @@