diff --git a/docs/en/custom_styles.md b/docs/en/custom_styles.md
new file mode 100644
index 0000000..5a90b33
--- /dev/null
+++ b/docs/en/custom_styles.md
@@ -0,0 +1,198 @@
+---
+title: Custom Styles
+layout: default
+nav_order: 1
+permalink: /en/custom-styles
+parent: Documentation
+---
+
+# Custom Styles
+{: .fs-9 }
+
+In the following sections of the document, a style similar to FluentDesign is used for demonstration purposes.
+{: .fs-6 .fw-300 }
+
+---
+
+Add the following ResourceDictionary to App.xaml to apply it globally
+
+```xml
+
+
+ SimpleDesign
+
+ #0067c0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/en/enhanced_controls.md b/docs/en/enhanced_controls.md
new file mode 100644
index 0000000..74c2853
--- /dev/null
+++ b/docs/en/enhanced_controls.md
@@ -0,0 +1,168 @@
+---
+title: Enhanced Controls
+layout: default
+nav_order: 3
+permalink: /en/enhanced-controls
+parent: Documentation
+---
+
+# Enhanced Controls
+{: .fs-9 }
+
+WPF Suite has property extensions for most controls, including state properties, corner rounding, and some controls have functionality extensions.
+{: .fs-6 .fw-300 }
+
+---
+
+## State Properties
+
+You will see in the enhanced control, some additional properties, such as `HoverBackground`, `HoverBorderBrush`, which,
+as the name suggests, indicate the value of the corresponding property in the corresponding state.
+
+If these properties are set to null, they will also fallback correctly to the set `Background` and `BorderBrush` property values.
+
+This means that you don't need to change the template to set the control to look a certain way in a certain state.
+
+Example
+{: .fw-300}
+
+```xml
+
+```
+
+Appearence, non-hovering, hovering and pressed states:
+
+
+
+
+
+
+
+## Rounding Corners
+
+Button, TextBox, PasswordBox and most controls now support CornerRadius for rounding corners.
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+```
+
+
+
+## Placeholder
+
+TextBox and PasswordBox can now set placeholders via the Placeholder property. The placeholder is displayed when the textbox is empty.
+
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+```
+
+
+
+## Rounding Corners Clipping
+
+By binding the Clip property to the Border's ContentClip property, you can automatically clip the portion that extends beyond the rounded corners.
+
+Example:
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+```
+
+
+
+## Smooth Scrolling
+
+If you use the ScrollViewer provided by the WPF Suite, it will have a smoother effect on content scrolling with the mouse.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| ScrollWithWheelDelta | bool | Determines the scroll distance by the delta value of Wheel event. This option is used to optimize the scroll effect. The default value is true |
+| EnableScrollingAnimation | bool | Enable scrolling animation, which determines whether to use easing when scrolling with the mouse. The default value is true and this option requires ScrollWithWheelDelta to be set to true. Otherwise it doesn't work |
+| ScrollingAnimationDuration | Duration | The duration of scrolling animation, the default value is 250 ms |
+| MouseScrollDeltaFactor | double | When scrolling with the mouse, the multiplier of the scrolling Delta value. Change this value to change the scroll speed and direction. The default is 1 |
+| TouchpadScrollDeltaFactor | double | When scrolling with the touchpad, the multiplier of the scrolling Delta value. Change this value to change the scroll speed and direction. The default is 1 |
+| AlwaysHandleMouseWheelScrolling | bool | Always handle the mouse Wheel event for scrolling, ScrollViewer content is scrolled when the mouse wheel scrolls. The default is true |
+
+
+{: .tip }
+> Will AlwaysHandleMouseWheelScrolling set to false, the ScrollViewer smooth scrolling effect will not be applied in TextBox
+
+Example:
+{: .fw-300}
+
+```xml
+
+ Some content...
+
+```
+
+
+
+## Touch Simulation
+
+Native WPF does not support scrolling with a stylus on a ScrollViewer. However, if you want to enable scrolling with a stylus, you can use "touch device simulation". By simulating a touch device with the stylus, you can achieve scrolling functionality using the stylus.
+
+| AttachedProperty | Type | Description |
+| --- | --- | --- |
+| StylusTouchDevice.Simulate | bool | Whether to simulate the pen as a touch device, default is false |
+| StylusTouchDevice.MoveThreshold | double | Move threshold, the pen will report as touch move only after moving beyond the specified distance, default is 3 |
+| MouseTouchDevice.Simulate | bool | Whether to simulate the mouse as a touch device, default is false |
+| MouseTouchDevice.MoveThreshold | double | Move threshold, the mouse will report as touch move only after moving beyond the specified distance, default is 3 |
+
+{: .tip }
+> If you set the move threshold to 0, you will not be able to click on controls inside the ScrollViewer using the pen, because the pen always has some jitter and touch move will trigger the scrolling of the ScrollViewer, interrupting the click action.
+>
+> So, adjust the move threshold according to your desired "precision".
+> (Many programs have a larger threshold for this, such as 5px, or even 10px or more)
+
+Example:
+{: .fw-300}
+
+```xml
+
+ SomeContent...
+
+```
+
+
\ No newline at end of file
diff --git a/docs/en/layout_panels.md b/docs/en/layout_panels.md
new file mode 100644
index 0000000..85ea1a7
--- /dev/null
+++ b/docs/en/layout_panels.md
@@ -0,0 +1,342 @@
+---
+title: Layout Panels
+layout: default
+nav_order: 2
+permalink: /en/layout-panels
+parent: Documentation
+---
+
+# Layout Panels
+{: .fs-9 }
+
+Layout panels in the WPF Suite that have the same name as the original WPF panels are used in the same way. The use of the two expanded Layout Panels is also more intuitive.
+{: .fs-6 .fw-300 }
+
+---
+
+The following are instructions for using the Layout panel in the WPF Suite
+
+## StackPanel
+
+Stacking panel, arranges child elements in a vertical or horizontal row.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| Orientaion | Orientation | The layout direction of the element, defaults to vertical. |
+| Spacing | double | The spacing between the elements in the panel, default is 0. |
+
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+```
+
+
+
+
+## WrapPanel
+
+Row break panel, arranges child elements in a horizontal or vertical row in the specified direction, and automatically breaks lines beyond the edges of the panel.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| Orientation | Orientation | The layout direction of the element, defaults to vertical. |
+| ItemWidth | double | The width of the element, if the value is NaN, then it is auto-width, default is NaN |
+| ItemHeight | double | The height of the element, if the value is NaN, then it is auto-height, default is NaN |
+| HorizontalSpacing | double | The horizontal spacing between the elements in the panel, default is 0. |
+| VerticalSpacing | double | The vertical spacing between the elements in the panel, default is 0. |
+
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## UniformGrid
+
+Provides a method of arranging content in a grid (where all cells are the same size).
+
+| Property | Type | Description |
+| --- | --- | --- |
+| Columns | int | Number of columns in the grid, defaults to 0, i.e. adaptive |
+| Rows | int | The number of rows in the grid, defaults to 0, i.e. adaptive. |
+| FirstColumn | int | The number of empty cells at the beginning of the first row of the grid, default is 0 |
+| HorizontalSpacing | double | The horizontal spacing between the elements in the panel, default is 0. |
+| VerticalSpacing | double | The vertical spacing between the elements in the panel, default is 0. |
+
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## FlexPanel
+
+Flexible panels, which can be thought of as an enhanced WrapPanel, allow you to specify the spatial distribution and alignment of elements.
+
+To understand an elastic panel, it is necessary to know that there are two directions in an elastic panel, the "major axis" and the "cross axis" (or "side axis"). When setting the panel in the direction of the row, i.e. horizontally, the major axis is the horizontal direction and the cross axis is the other direction, i.e. vertically.
+When setting the panel direction to row, i.e. horizontal, the major axis is the horizontal direction and the cross axis is the other direction, i.e. vertical.
+
+{: .tip }
+> About flex layout, See: [Basic concepts of flexbox - CSS Cascading Style Sheets, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+
+| Property | Type | Description |
+| --- | --- | --- |
+| Direction | FlexDirection | Layout direction, defaults to row, i.e. horizontal. |
+| Wrap | FlexWrap | Wrap behavior, defaults to no wrap. |
+| MainAlignment | FlexMainAlignment | The alignment of the element on the main axis, default is to the beginning. |
+| CrossAlignment | FlexCrossAlignment | The way the content is aligned on the cross-axis, the default is stretched. |
+| ItemsAlignment | FlexItemsAlignment | The alignment of the element itself, stretched by default. |
+| UniformGrow | double | Uniform grow factor |
+| UniformShrink | double | Uniform shrink factor |
+| MainSpacing | double | Item spacing on main axis |
+| CrossSpacing | double | Item spacing on cross axis |
+
+Attached properties
+{: .fw-300}
+
+| Property | Type | Description |
+| Order | int | The order of item, default is '0' |
+| Grow | double | Grow factor of item self |
+| Shrink | double | Shrink factor of item self |
+| Basis | double | The initial size of item on main axis |
+
+FlexDirection Definition
+{: .fw-300}
+
+| Value | Description |
+| --- | --- |
+| Row | Layout on rows, i.e. horizontally |
+| RowReversed | Layout on rows, but the order of items within a row is reversed. |
+| Column | Layout on columns, i.e. vertically |
+| ColumnReversed | Layout on columns, but the order of items in a row is reversed. |
+
+FlexWrap Definition
+{: .fw-300}
+
+| Value | Description |
+| --- | --- |
+| NoWrap | No wrap |
+| Wrap | Wrap |
+| WrapReverse | Wrap, but the order of the lines is reversed. |
+
+FlexMainAlignment Definition
+{: .fw-300}
+
+| Value | Description |
+| --- | --- |
+| Start | Aligning items to the beginning of a line |
+| End | Aligning items to the end of a line |
+| Center | Aligning items to the center of a line |
+| SpaceBetween | Align items to the both sides of a line |
+| SpaceAround | Align items around a line, with spacing on both sides of the line. |
+| SpaceEvenly | Align items around a line, with same spacing on both sides of each item. |
+
+FlexCrossAlignment Definition
+{: .fw-300}
+
+| Value | Description |
+| --- | --- |
+| Start | Align lines to the start |
+| End | Align lines to the end |
+| Center | Align lines to the center |
+| Stretch | Stretch line size to fill the container |
+| SpaceBetween | Align lines to the both sides of the container |
+| SpaceAround | Align lines around the container, with spacing on both sides of the container. |
+| SpaceEvenly | Align items around the container, with same spacing on both sides of each line. |
+
+FlexItemsAlignment Definition
+{: .fw-300}
+
+| Value | Description |
+| --- | --- |
+| Start | Align item to the start |
+| End | Align item to the end |
+| Center | Align item to the center |
+| Baseline | Align item to baseline (This value has no effect) |
+| Stretch | Stretch the size of item to fill the item area |
+
+Example, align items to the center
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+```
+
+
+
+
+Example, align items to both sides of line
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+```
+
+
+
+Example, align items to both sides of line, and make the first item fill the remaining space
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+```
+
+
+
+Example, wrap, and make each item take up as much of the remaining space as possible
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## MasonryPanel
+
+Masonry panel, simple waterfall layout implementation.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| Orientation | Orientation | Layout direction, i.e. the direction in which the elements are stacked, defaults to vertical. |
+| Flows | int | number of flows, default is 1, when value is 1, behavior is same as StackPanel |
+| FlowSpacing | the distance between flows, defaults to 0 |
+| ItemSpacing | The spacing between items, default is 0. |
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## BoxPanel
+
+Box panel, where each item occupies the space of the entire container.
+
+{: .tip }
+> This panel is often used to replace the Grid, and if you only want multiple items to overlap in the same space, using a BoxPanel can improve performance a little.
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+```
+
+
diff --git a/docs/en/transition_effects.md b/docs/en/transition_effects.md
new file mode 100644
index 0000000..ebfbe07
--- /dev/null
+++ b/docs/en/transition_effects.md
@@ -0,0 +1,202 @@
+---
+title: Transition Effects
+layout: default
+nav_order: 4
+permalink: /en/transition-effects
+parent: Documentation
+---
+
+# Transition Effects
+{: .fs-9 }
+
+Implement a transition effect when the content switches, such as fade-in and fade-out, or slide-in and slide-out. It will greatly enhance the aesthetics of the program.
+{: .fs-6 .fw-300 }
+
+---
+
+Below is an introduction to the transition animations in WPF Suite.
+
+## IContentTransition
+
+An interface that represents a content transition effect.
+
+Definition
+{: .fw-300}
+
+```cs
+///
+/// Content transition
+///
+public interface IContentTransition
+{
+ ///
+ /// Run the content transition
+ ///
+ /// Container UIElement
+ /// Old content UIElement
+ /// New content UIElement
+ /// This transition is forward
+ /// Cancellation token
+ ///
+ public Task Run(
+ FrameworkElement container,
+ FrameworkElement? oldContent,
+ FrameworkElement? newContent,
+ bool forward,
+ CancellationToken cancellationToken);
+}
+
+```
+
+Below are some built-in transition effects:
+
+| Class Name | Description |
+| --- | --- |
+| FadeTransition | Fade in/out effect achieved by animating the Opacity property. |
+| SlideTransition | Slide transition effect achieved by setting the RenderTransform to TranslateTransform and animating its properties. |
+| RotateTransition | Rotation transition effect achieved by setting the RenderTransform to RotateTransform and animating its properties. |
+| SlideFadeTransition | Combination of fade in/out and slide transition effects. |
+| RotateFadeTransition | Combination of fade in/out and rotation transition effects. |
+
+## TransitioningContentControl
+
+The ContentControl implementation that allows the use of transition animations inherits from Control.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| Content | object | The content to display, default is null. |
+| ContentTemplate | DataTemplate | The template for the content, default is null. |
+| ContentTemplateSelector | DataTemplateSelector | The selector for the content template, default is null. |
+| Transition | IContentTransition | The transition effect used for content switching, default is null. |
+| CornerRadius | CornerRadius | The radius value for rounded corners. |
+
+{: .warning }
+> TransitioningContentControl does not inherit from ContentControl.
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+```
+
+```cs
+private void Button_Click(object sender, RoutedEventArgs e)
+{
+ buttonContentControl.Content = System.IO.Path.GetRandomFileName();
+}
+```
+
+
+
+More advanced usage
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```cs
+[ObservableProperty]
+[NotifyPropertyChangedFor(nameof(CurrentImageSource))]
+private int _currentImageSourceIndex;
+
+[ObservableProperty]
+private bool _transitionReverse;
+
+public ObservableCollection ImageSources { get; } = new()
+{
+ new BitmapImage(new Uri("pack://application:,,,/WpfTest;component/Assets/Banners/1.jpg")),
+ new BitmapImage(new Uri("pack://application:,,,/WpfTest;component/Assets/Banners/2.jpg")),
+ new BitmapImage(new Uri("pack://application:,,,/WpfTest;component/Assets/Banners/3.jpg")),
+ new BitmapImage(new Uri("pack://application:,,,/WpfTest;component/Assets/Banners/4.jpg")),
+ new BitmapImage(new Uri("pack://application:,,,/WpfTest;component/Assets/Banners/5.jpg")),
+};
+
+public ImageSource? CurrentImageSource => ImageSources[CurrentImageSourceIndex];
+
+public WelcomePage()
+{
+ InitializeComponent();
+
+ DataContext = this;
+}
+
+[RelayCommand]
+public void GoPrev()
+{
+ TransitionReverse = true;
+ var prevIndex = CurrentImageSourceIndex;
+ if (prevIndex == 0)
+ prevIndex = ImageSources.Count;
+
+ prevIndex--;
+
+ CurrentImageSourceIndex = prevIndex;
+}
+
+[RelayCommand]
+public void GoNext()
+{
+ TransitionReverse = false;
+ CurrentImageSourceIndex = (CurrentImageSourceIndex + 1) % ImageSources.Count;
+}
+```
+
+{: .tip }
+> The ObservableProperty and RelayCommand used here are generated using the CommunityToolkit.Mvvm to automatically create observable properties and commands.
+
+
+
+## Frame
+
+The Frame control provided in WPF Suite also supports navigation transition effects. Therefore, when your program is a multipage program, you can use transition effects to make it more visually appealing.
+
+| Property | Type | Description |
+| --- | --- | ---- |
+| CornerRadius | CornerRadius | The radius of the rounded corners |
+| Transition | IContentTransition | The transition effect for content switching |
+
+Overall effect
+{: .fw-300}
+
+
\ No newline at end of file
diff --git a/docs/en/window_options.md b/docs/en/window_options.md
new file mode 100644
index 0000000..b58ee9f
--- /dev/null
+++ b/docs/en/window_options.md
@@ -0,0 +1,301 @@
+---
+title: Window Options
+layout: default
+nav_order: 4
+permalink: /en/window-options
+parent: Documentation
+---
+
+# Window Options
+{: .fs-9 }
+
+Through window options, you can set the background type of the window, light or dark theme, visibility of the title bar, visibility of the title bar menu buttons, etc.
+{: .fs-6 .fw-300 }
+
+---
+
+Here is an introduction to window options.
+
+## WindowOption
+
+Tool class for setting window options.
+
+| AttachedProperty | Type | Description |
+| --- | --- | --- |
+| Backdrop | WindowBackdrop | The type of window backdrop, can be Auto, None, Mica, Acrylic or MicaAlt. Default is "Auto" |
+| Corner | WindowCorner | The type of window corner, can be default(Default), DoNotRound, Round, RoundSmall. Default is "Default" |
+| CaptionColor | WindowOptionColor | The color of the window caption bar, can be default(Default), None or any custom RGB color. Default is "Default" |
+| TextColor | WindowOptionColor | The color of the text on the caption bar, can be default(Default), None or any custom RGB color. Default is "Default" |
+| BorderColor | WindowOptionColor | The color of the window border, can be default(Default), None or any custom RGB color. Default is "Default" |
+| IsDarkMode | bool | Indicates if the window is in dark mode. Default is false |
+| AccentState | WindowAccentState | The style state of the window, can be None(None), Gradient(Gradient), Transparent(Transparent), BlurBehind(BlurBehind), AcrylicBlurBehind(AcrylicBlurBehind) or HostBackdrop. Default is "None"|
+| AccentBorder | bool | Indicates if the application window style has border when using accent. Default is true |
+| AccentGradientColor | Color | The gradient color for the window style. Default is ScRGB(0.25, 1, 1, 1)|
+| IsCaptionMenuVisible | bool | Whether the caption menu of the title bar is visible, which includes the application icon, and the minimize, maximize, and close buttons. Default is true. |
+| IsMinimumButton | bool | Represents whether a Visual is the minimize button of a window, used for customizing the minimize button. Default is false. |
+| IsMaximumButton | bool | Represents whether a Visual is the maximize button of a window, used for customizing the maximize button. Default is false. |
+| IsCloseButton | bool | Represents whether a Visual is the close button of a window, used for customizing the close button. Default is false. |
+
+## Set window background on Windows 11
+
+If the system version is greater than or equal to 22621, the window background can be set using WindowOption.Backdrop.
+Make sure to set the window background as Transparent; otherwise, the default white window background will overshadow your set background.
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+```
+
+
+
+Change the value of `ws:WindowOption.Backdrop` to `Acrylic`, and the effect will be like this:
+
+
+
+Note: If you need to use WindowChrome, GlassFrameThickness represents the thickness at which the background effect is applied.
+
+Because GlassFrameThickness is set to 0 by default, you will notice that the background effect is no longer present. Setting it to -1 (infinite) will allow you to see the background again.
+
+```xml
+
+
+
+
+
+```
+
+
+
+{: .warning }
+> In fact, Backdrop also requires the CompositionTarget.BackgroundColor value of the window HwndSource to be Transparent. So if you set it to another value, Backdrop will also be invalid.
+
+## Enabling Dark Mode for Windows 11 Window
+
+In system version 22000, you can enable dark mode for windows, which will make the title bar and settings window background become dark.
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+```
+
+
+
+The same applies under an acrylic background window.
+
+
+
+
+
+## Setting Color and Borders on Windows 11
+
+Setting the title bar color, text color, window edge style, and border color can be done when the system version is higher than 22000.
+
+Disable corner rounding
+{: .fw-300}
+
+```xml
+
+
+
+
+
+```
+
+
+
+Set the color of the title bar, text, and border.
+{: .fw-300}
+
+```xml
+
+
+
+```
+
+
+
+## Use Acrylic in Windows 10
+
+As early as Windows 10, it has been possible to set the background using a hidden API called "SetWindowCompositionAttribute."
+The only drawback is that it cannot extend the acrylic effect to the title bar area.
+
+Using AccentState to set the window background to acrylic.
+{: .fw-300}
+
+```xml
+
+
+
+```
+
+
+
+{: .warning }
+> Note that if you want to use WindowChrome, unlike Backdrop, the AccentState requires GlassFrameThickness to be set to 0.
+> Otherwise, the acrylic effect will not be displayed.
+
+Of course, by removing the title bar in any way, you can obtain a clean acrylic window. For example, you can set `WindowStyle` to `None` and `ResizeMode` to `NoResize`.
+
+Remove the title bar for the acrylic.
+{: .fw-300}
+
+```xml
+
+
+
+```
+
+
+
+{: .tip }
+> The reason why the window has a border even though the `WindowStyle` is set to `None` is because the `AccentBorder` is set to true by default.
+> When applying the Accent using API at the underlying level, a border is still added to the window.
+
+Of course, using WindowChrome can also get a clean acrylic window without the title bar, while retaining the functionality of dragging and resizing the window borders. However, the minimize, maximize, and close buttons of the window will disappear.
+
+```xml
+
+
+
+
+
+```
+
+
+
+## Custom window caption menu buttons
+
+If you want to remove the three buttons of the window and replace them with custom implementations, you can perform the following steps:
+
+1. Set ws:WindowOption.IsCaptionMenuVisible of the Window to false to remove the system's caption menu.
+2. Set ws:WindowOption.IsMaximumButton of the custom maximize button to true to correctly respond to system behavior.
+
+Example
+{: .fw-300}
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+If you are using the Windows 11 operating system, when you hover your mouse over the maximize button, layout options will also be displayed correctly.
+
+
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index b08aa5d..c7629dd 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,9 +1,10 @@
---
-title: Home
+title: Documentation
layout: home
nav_order: 1
description: 'WPF layout panels, controls, value converters, markup extensions, transitions and utilities.'
permalink: /
+has_children: true
---
# Boost your WPF development
diff --git a/docs/zh/enhanced_controls.md b/docs/zh/enhanced_controls.md
index 9784757..e8ec915 100644
--- a/docs/zh/enhanced_controls.md
+++ b/docs/zh/enhanced_controls.md
@@ -115,7 +115,7 @@ TextBox 和 PasswordBox 现在可以通过 Placeholder 属性来设置占位符.
| 附加属性 | 类型 | 描述 |
| --- | --- | --- |
-| ScrollWithWheelDelta | bool | 通过 Wheel 事件的 delta 值决定滚动距离, 此选项用于优化触摸板滚动效果, 默认为 true |
+| ScrollWithWheelDelta | bool | 通过 Wheel 事件的 delta 值决定滚动距离, 此选项用于优化滚动效果, 默认为 true |
| EnableScrollingAnimation | bool | 启用滚动动画, 决定使用鼠标进行滚动时是否使用缓动的效果, 默认为 true, 并且此选项要求 ScrollWithWheelDelta 设为 true, 否则不起作用 |
| ScrollingAnimationDuration | Duration | 滚动动画的时长, 默认为 250ms |
| MouseScrollDeltaFactor | double | 当使用鼠标进行滚动时, 滚动 Delta 值的乘数. 改变此值可以变更滚动速度与方向, 默认为 1 |
@@ -123,7 +123,7 @@ TextBox 和 PasswordBox 现在可以通过 Placeholder 属性来设置占位符.
| AlwaysHandleMouseWheelScrolling | bool | 总是处理鼠标 Wheel 事件的滚动, 当鼠标滚轮滚动时则滚动 ScrollViewer 内容. 默认为 true |
{: .tip }
-> 将 AlwaysHandleMouseWheelScrolling 设置为 false 时, ScrollViewer 的滚动效果将不会应用于 TextBox 上
+> 将 AlwaysHandleMouseWheelScrolling 设置为 false 时, ScrollViewer 的平滑滚动效果将不会应用于 TextBox 上
使用示例:
{: .fw-300}
diff --git a/docs/zh/layout_panels.md b/docs/zh/layout_panels.md
index 9c5a6ac..0f0bc0c 100644
--- a/docs/zh/layout_panels.md
+++ b/docs/zh/layout_panels.md
@@ -127,8 +127,8 @@ WPF Suite 中的布局面板, 如与 WPF 原有面板名称一致, 则使用方
| Direction | FlexDirection | 布局方向, 默认为行, 也就是水平方向 |
| Wrap | FlexWrap | 换行行为, 默认为不换行 |
| MainAlignment | FlexMainAlignment | 元素在主轴上的对齐方式, 默认是对齐到开头 |
-| CrossAlignment | FlexCrossAlignment | 内容在交叉轴上的对其方式, 默认是对齐到开头 |
-| ItemsAlignment | FlexItemsAlignment | 元素自身在主轴上的对齐方式, 默认是对齐到开头 |
+| CrossAlignment | FlexCrossAlignment | 内容在交叉轴上的对其方式, 默认是拉伸 |
+| ItemsAlignment | FlexItemsAlignment | 元素自身的对齐方式, 默认是拉伸 |
| UniformGrow | double | 统一的大小增长系数 |
| UniformShrink | double | 统一的大小收缩系数 |
| MainSpacing | double | 元素在主轴上的间距 |
+ 
+ 
+