docs: 添加部分内容

docs/Gemfile.lock

@@ -11,10 +11,10 @@ GEM
     eventmachine (1.2.7)
     ffi (1.16.3)
     forwardable-extended (2.6.0)
-    google-protobuf (4.26.1)
-      rake (>= 13)
     google-protobuf (4.26.1-arm64-darwin)
       rake (>= 13)
+    google-protobuf (4.26.1-x64-mingw-ucrt)
+      rake (>= 13)
     google-protobuf (4.26.1-x86_64-linux)
       rake (>= 13)
     http_parser.rb (0.8.0)
@@ -68,11 +68,10 @@ GEM
     rexml (3.2.6)
     rouge (4.2.1)
     safe_yaml (1.0.5)
-    sass-embedded (1.75.0)
-      google-protobuf (>= 3.25, < 5.0)
-      rake (>= 13.0.0)
     sass-embedded (1.75.0-arm64-darwin)
       google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.75.0-x64-mingw-ucrt)
+      google-protobuf (>= 3.25, < 5.0)
     sass-embedded (1.75.0-x86_64-linux-gnu)
       google-protobuf (>= 3.25, < 5.0)
     terminal-table (3.0.2)
@@ -82,6 +81,7 @@ GEM
 
 PLATFORMS
   arm64-darwin
+  x64-mingw-ucrt
   x86_64-linux-gnu
 
 DEPENDENCIES

docs/_config.yml

@@ -5,5 +5,16 @@ theme: just-the-docs
 url: https://wpfsuite.elecho.dev
 favicon_ico: "/assets/favicon.ico"
 
+callouts:
+  danger:
+    title: Danger
+    color: red
+  warning:
+    title: Warning
+    color: yellow
+  tip:
+    title: Tip
+    color: green
+
 aux_links:
   Source Code: https://github.com/OrgEleCho/EleCho.WpfSuite

docs/_sass/color_schemes/light.scss

@@ -0,0 +1,16 @@
+$color-scheme: light !default;
+$body-background-color: $white !default;
+$body-heading-color: $grey-dk-300 !default;
+$body-text-color: $grey-dk-100 !default;
+$link-color: $blue-000 !default;
+$nav-child-link-color: $grey-dk-100 !default;
+$sidebar-color: $grey-lt-000 !default;
+$base-button-color: #f7f7f7 !default;
+$btn-primary-color: $blue-100 !default;
+$code-background-color: $grey-lt-000 !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
+$table-background-color: $white !default;
+$search-background-color: $white !default;
+$search-result-preview-color: $grey-dk-000 !default;
+
+@import "./vendor/OneLightJekyll/syntax";

docs/_sass/custom/setup.scss

@@ -0,0 +1,4 @@
+img {
+    border-radius: 5px;
+    border: solid $grey-lt-000 5px !important;
+}

docs/index.md

@@ -18,7 +18,7 @@ The WPF Suite extends WPF with a number of basic but essential features that can
 
 ---
 
-WPF Suite is a suite of layout panels, enhancement controls, value converters, markup extensions, transitions and utilities.
+WPF Suite is a suite of layout panels, enhanced controls, value converters, markup extensions, transitions and utilities.
 
 With the enhanced layout panel, you can easily add spacing between items using the "Spacing" property. 
 The WPF Suite also provides two additional layout panels, FlexPanel and MasonryPanel. 
@@ -32,7 +32,7 @@ WPF Suite is also optimized for pen devices. Now you can drag and drop the conte
 
 There is a lot more to explore with the WPF Suite, such as transition animations for content switching and page jumps, form options that allow you to set transparent blurred backgrounds, light/dark color switching, value converters to reduce logic code, and more.
 
-Browse the docs to learn more about how to use this theme.
+Browse the docs to learn more about how to use this library.
 
 
 ## Getting started

docs/zh/custom_styles.md

@@ -0,0 +1,198 @@
+---
+title: 自定义样式
+layout: default
+nav_order: 1
+permalink: /zh/custom-styles
+parent: 中文文档
+---
+
+# 自定义样式
+{: .fs-9 }
+
+在接下来的文档中, 会使用类似于 FluentDesign 的样式来进行演示
+{: .fs-6 .fw-300 }
+
+---
+
+将下面这个 ResourceDictionary 添加到 App.xaml 中以应用到全局
+
+```xml
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ws="clr-namespace:EleCho.WpfSuite;assembly=EleCho.WpfSuite"
+                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
+
+    <sys:String x:Key="WpfSuiteDesignName">SimpleDesign</sys:String>
+
+    <Color x:Key="PrimaryColor">#0067c0</Color>
+    <SolidColorBrush x:Key="PrimaryBrush" Color="{DynamicResource PrimaryColor}"/>
+
+    <LinearGradientBrush x:Key="ControlBorder" StartPoint="0,0" EndPoint="0,1">
+        <GradientStop Offset="0" Color="#18000000"/>
+        <GradientStop Offset=".9" Color="#18000000"/>
+        <GradientStop Offset="1" Color="#33000000"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="TextBoxBorder" StartPoint="0,0" EndPoint="0,1">
+        <GradientStop Offset="0" Color="#18000000"/>
+        <GradientStop Offset=".9" Color="#18000000"/>
+        <GradientStop Offset="1" Color="#88000000"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="FocusedTextBoxBorder" StartPoint="0,0" EndPoint="0,1">
+        <GradientStop Offset="0" Color="#18000000"/>
+        <GradientStop Offset=".9" Color="#18000000"/>
+        <GradientStop Offset="1" Color="{DynamicResource PrimaryColor}"/>
+    </LinearGradientBrush>
+
+    <Style TargetType="{x:Type ws:TextBox}"
+           BasedOn="{StaticResource {x:Type ws:TextBox}}">
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Padding" Value="4 6"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
+        <Setter Property="HoverBorderBrush" Value="{x:Null}"/>
+        <Setter Property="FocusedBorderBrush" Value="{StaticResource FocusedTextBoxBorder}"/>
+        <Setter Property="Background" Value="#EEFFFFFF"/>
+        <Setter Property="HoverBackground" Value="#88FFFFFF"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:PasswordBox}"
+           BasedOn="{StaticResource {x:Type ws:PasswordBox}}">
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Padding" Value="4 6"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
+        <Setter Property="HoverBorderBrush" Value="{x:Null}"/>
+        <Setter Property="FocusedBorderBrush" Value="{StaticResource FocusedTextBoxBorder}"/>
+        <Setter Property="Background" Value="#EEFFFFFF"/>
+        <Setter Property="HoverBackground" Value="#88FFFFFF"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:Button}"
+           BasedOn="{StaticResource {x:Type ws:Button}}">
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Padding" Value="8 6"/>
+        <Setter Property="BorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="HoverBorderBrush" Value="{x:Null}"/>
+        <Setter Property="PressedBorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="Background" Value="#EEFFFFFF"/>
+        <Setter Property="HoverBackground" Value="#88FFFFFF"/>
+        <Setter Property="PressedBackground" Value="#44FFFFFF"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ToggleButton}"
+           BasedOn="{StaticResource {x:Type ws:ToggleButton}}">
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Padding" Value="8 6"/>
+        <Setter Property="BorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="HoverBorderBrush" Value="{x:Null}"/>
+        <Setter Property="PressedBorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="Background" Value="#EEFFFFFF"/>
+        <Setter Property="HoverBackground" Value="#88FFFFFF"/>
+        <Setter Property="PressedBackground" Value="#44FFFFFF"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ComboBox}"
+           BasedOn="{StaticResource {x:Type ws:ComboBox}}">
+        <Setter Property="Padding" Value="8 6"/>
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="PopupCornerRadius" Value="4"/>
+        <Setter Property="ClipToBounds" Value="True"/>
+        <Setter Property="BorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="HoverBorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="PressedBorderBrush" Value="{StaticResource ControlBorder}"/>
+        <Setter Property="Background" Value="#EEFFFFFF"/>
+        <Setter Property="HoverBackground" Value="#88FFFFFF"/>
+        <Setter Property="PressedBackground" Value="#44FFFFFF"/>
+
+        <!--Popup-->
+        <Setter Property="PopupBorderBrush" Value="{DynamicResource ControlBorder}"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ComboBoxItem}"
+           BasedOn="{StaticResource {x:Type ws:ComboBoxItem}}">
+        <Setter Property="Margin" Value="2 1"/>
+        <Setter Property="Padding" Value="8 6"/>
+        <Setter Property="CornerRadius" Value="2"/>
+        <Setter Property="BorderThickness" Value="2 0 0 0"/>
+        <Setter Property="HoverBackground" Value="#11000000"/>
+        <Setter Property="HoverBorderBrush" Value="#11000000"/>
+
+        <Setter Property="SelectedBackground" Value="#11000000"/>
+        <Setter Property="SelectedBorderBrush" Value="{DynamicResource PrimaryBrush}"/>
+
+        <Setter Property="HoverFocusedBackground" Value="#11000000"/>
+        <Setter Property="HoverFocusedBorderBrush" Value="#11000000"/>
+
+        <Setter Property="SelectedFocusedBackground" Value="#11000000"/>
+        <Setter Property="HoverSelectedBackground" Value="#11000000"/>
+        <Setter Property="HoverSelectedBorderBrush" Value="{DynamicResource PrimaryBrush}"/>
+        <Setter Property="FocusedBorderBrush" Value="Transparent"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:CheckBox}"
+           BasedOn="{StaticResource {x:Type ws:CheckBox}}">
+        <Setter Property="CornerRadius" Value="2"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ListBox}"
+           BasedOn="{StaticResource {x:Type ws:ListBox}}">
+        <Setter Property="CornerRadius" Value="4"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ListBoxItem}"
+           BasedOn="{StaticResource {x:Type ws:ListBoxItem}}">
+        <Setter Property="CornerRadius" Value="4"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:TabControl}"
+           BasedOn="{StaticResource {x:Type ws:TabControl}}">
+        <Setter Property="CornerRadius" Value="4"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:TabItem}"
+           BasedOn="{StaticResource {x:Type ws:TabItem}}">
+        <Setter Property="CornerRadius" Value="2"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ContextMenu}"
+           BasedOn="{StaticResource {x:Type ws:ContextMenu}}">
+        <Setter Property="CornerRadius" Value="4"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:Menu}"
+           BasedOn="{StaticResource {x:Type ws:Menu}}">
+        <Setter Property="CornerRadius" Value="4"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:MenuItem}"
+           BasedOn="{StaticResource {x:Type ws:MenuItem}}">
+        <Setter Property="CornerRadius" Value="2"/>
+    </Style>
+
+    <Style TargetType="{x:Type ws:ScrollBar}"
+           BasedOn="{StaticResource {x:Type ws:ScrollBar}}">
+        <Setter Property="ThumbCornerRadius" Value="3"/>
+        <Setter Property="ButtonCornerRadius" Value="3"/>
+        <Style.Triggers>
+            <Trigger Property="Orientation" Value="Vertical">
+                <Setter Property="Width" Value="12"/>
+                <Setter Property="MinWidth" Value="12"/>
+                <Setter Property="GlyphMargin" Value="1 2"/>
+            </Trigger>
+            <Trigger Property="Orientation" Value="Horizontal">
+                <Setter Property="Height" Value="12"/>
+                <Setter Property="MinHeight" Value="12"/>
+                <Setter Property="GlyphMargin" Value="1 2"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style TargetType="{x:Type ws:Tooltip}"
+           BasedOn="{StaticResource {x:Type ws:Tooltip}}">
+        <!--nothing-->
+    </Style>
+
+</ResourceDictionary>
+```