diff --git a/README-cn.md b/README-cn.md
index d01d74c5..7a9b2882 100644
--- a/README-cn.md
+++ b/README-cn.md
@@ -256,7 +256,7 @@ Step 4: 开始编码
 
 ### SplitButton
 
-![SplitButton](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/SplitButton.png)
+![SplitButton](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/SplitButton.gif)
 
 ### FloatingBlock
 
@@ -310,7 +310,7 @@ Step 4: 开始编码
 
 ### Badge
 
-![Badge](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Badge.png)
+![Badge](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Badge.gif)
 
 ### Gravatar
 
@@ -330,11 +330,11 @@ Step 4: 开始编码
 
 ### Transfer
 
-![Transfer](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Transfer.png)
+![Transfer](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Transfer.gif)
 
 ### ProgressButton
 
-![ProgressButton](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/ProgressButton.png)
+![ProgressButton](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/ProgressButton.gif)
 
 ### CoverFlow
 
@@ -354,11 +354,11 @@ Step 4: 开始编码
 
 ### Rate
 
-![Rate](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Rate.png)
+![Rate](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Rate.gif)
 
 ### BlurWindow
 
-![BlurWindow](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/BlurWindow.png)
+![BlurWindow](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/BlurWindow.gif)
 
 ### FlipClock
 
@@ -390,7 +390,7 @@ Step 4: 开始编码
 
 ### CircleProgressBar
 
-![CircleProgressBar](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/CircleProgressBar.png)
+![CircleProgressBar](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/CircleProgressBar.gif)
 
 ### ButtonStyle
 
@@ -492,7 +492,7 @@ Step 4: 开始编码
 
 ### StepBar
 
-![StepBar](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/StepBar.png)
+![StepBar](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/StepBar.gif)
 
 ### GifImage
 
@@ -504,11 +504,11 @@ Step 4: 开始编码
 
 ### Calendar
 
-![Calendar](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Calendar.jpg)
+![Calendar](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Calendar.gif)
 
 ### Clock
 
-![Clock](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Clock.jpg)
+![Clock](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/Clock.png)
 
 ### CalendarWithClock
 
@@ -516,7 +516,7 @@ Step 4: 开始编码
 
 ### TextBlock
 
-![TextBlock](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/TextBlock.jpg)
+![TextBlock](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/TextBlock.png)
 
 ### RichTextBoxStyle
 
@@ -524,11 +524,11 @@ Step 4: 开始编码
 
 ### TextBox
 
-![TextBox](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/TextBox.jpg)
+![TextBox](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/TextBox.png)
 
 ### ComboBox
 
-![ComboBox](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/ComboBox.jpg)
+![ComboBox](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/ComboBox.png)
 
 ### NumericUpDown
 
@@ -540,27 +540,27 @@ Step 4: 开始编码
 
 ### PasswordBox
 
-![PasswordBox](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/PasswordBox.jpg)
+![PasswordBox](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/PasswordBox.png)
 
 ### DatePicker
 
-![DatePicker](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/DatePicker.jpg)
+![DatePicker](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/DatePicker.png)
 
 ### TimePicker
 
-![TimePicker](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/TimePicker.jpg)
+![TimePicker](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/TimePicker.gif)
 
 ### DateTimePicker
 
-![DateTimePicker](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/DateTimePicker.png)
+![DateTimePicker](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/DateTimePicker.gif)
 
 ### ScrollViewer
 
-![ScrollViewer](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/ScrollViewer.png)
+![ScrollViewer](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/ScrollViewer.gif)
 
 ### CirclePanel
 
-![CirclePanel](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/CirclePanel.jpg)
+![CirclePanel](https://gitee.com/handyorg/HandyOrgResource/raw/master/HandyControl/Resources/CirclePanel.png)
 
 ### TransitioningContentControl
 
diff --git a/README.md b/README.md
index 2ebdada8..53905710 100644
--- a/README.md
+++ b/README.md
@@ -250,7 +250,7 @@ Step 4: Enjoy coding
 
 ### SplitButton
 
-![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.png)
+![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.gif)
 
 ### FloatingBlock
 
@@ -304,7 +304,7 @@ Step 4: Enjoy coding
 
 ### Badge
 
-![Badge](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Badge.png)
+![Badge](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Badge.gif)
 
 ### Gravatar
 
@@ -324,11 +324,11 @@ Step 4: Enjoy coding
 
 ### Transfer
 
-![Transfer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Transfer.png)
+![Transfer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Transfer.gif)
 
 ### ProgressButton
 
-![ProgressButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ProgressButton.png)
+![ProgressButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ProgressButton.gif)
 
 ### CoverFlow
 
@@ -348,11 +348,11 @@ Step 4: Enjoy coding
 
 ### Rate
 
-![Rate](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Rate.png)
+![Rate](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Rate.gif)
 
 ### BlurWindow
 
-![BlurWindow](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/BlurWindow.png)
+![BlurWindow](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/BlurWindow.gif)
 
 ### FlipClock
 
@@ -384,7 +384,7 @@ Step 4: Enjoy coding
 
 ### CircleProgressBar
 
-![CircleProgressBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CircleProgressBar.png)
+![CircleProgressBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CircleProgressBar.gif)
 
 ### ButtonStyle
 
@@ -486,7 +486,7 @@ Step 4: Enjoy coding
 
 ### StepBar
 
-![StepBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/StepBar.png)
+![StepBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/StepBar.gif)
 
 ### GifImage
 
@@ -498,11 +498,11 @@ Step 4: Enjoy coding
 
 ### Calendar
 
-![Calendar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Calendar.jpg)
+![Calendar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Calendar.gif)
 
 ### Clock
 
-![Clock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Clock.jpg)
+![Clock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Clock.png)
 
 ### CalendarWithClock
 
@@ -510,7 +510,7 @@ Step 4: Enjoy coding
 
 ### TextBlock
 
-![TextBlock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TextBlock.jpg)
+![TextBlock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TextBlock.png)
 
 ### RichTextBoxStyle
 
@@ -518,11 +518,11 @@ Step 4: Enjoy coding
 
 ### TextBox
 
-![TextBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TextBox.jpg)
+![TextBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TextBox.png)
 
 ### ComboBox
 
-![ComboBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ComboBox.jpg)
+![ComboBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ComboBox.png)
 
 ### NumericUpDown
 
@@ -534,27 +534,27 @@ Step 4: Enjoy coding
 
 ### PasswordBox
 
-![PasswordBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/PasswordBox.jpg)
+![PasswordBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/PasswordBox.png)
 
 ### DatePicker
 
-![DatePicker](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/DatePicker.jpg)
+![DatePicker](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/DatePicker.png)
 
 ### TimePicker
 
-![TimePicker](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TimePicker.jpg)
+![TimePicker](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TimePicker.gif)
 
 ### DateTimePicker
 
-![DateTimePicker](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/DateTimePicker.png)
+![DateTimePicker](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/DateTimePicker.gif)
 
 ### ScrollViewer
 
-![ScrollViewer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ScrollViewer.png)
+![ScrollViewer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ScrollViewer.gif)
 
 ### CirclePanel
 
-![CirclePanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CirclePanel.jpg)
+![CirclePanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CirclePanel.png)
 
 ### TransitioningContentControl
 
diff --git a/doc/source/handycontrol/extend_controls/blurWindow/index.md b/doc/source/handycontrol/extend_controls/blurWindow/index.md
index 8f0cda90..341cf2fc 100644
--- a/doc/source/handycontrol/extend_controls/blurWindow/index.md
+++ b/doc/source/handycontrol/extend_controls/blurWindow/index.md
@@ -41,4 +41,4 @@ public class BlurWindow : Window
 </hc:BlurWindow>
 ```
 
-![BlurWindow](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/BlurWindow.png)
\ No newline at end of file
+![BlurWindow](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/BlurWindow.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/circlePanel/index.md b/doc/source/handycontrol/extend_controls/circlePanel/index.md
index 45493a1a..80f5c188 100644
--- a/doc/source/handycontrol/extend_controls/circlePanel/index.md
+++ b/doc/source/handycontrol/extend_controls/circlePanel/index.md
@@ -58,4 +58,4 @@ public class CirclePanel : Panel
 </hc:CirclePanel>
 ```
 
-![CirclePanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CirclePanel.jpg)
\ No newline at end of file
+![CirclePanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CirclePanel.png)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/circleProgressBar/index.md b/doc/source/handycontrol/extend_controls/circleProgressBar/index.md
index f3cb7e7a..3bc06ec8 100644
--- a/doc/source/handycontrol/extend_controls/circleProgressBar/index.md
+++ b/doc/source/handycontrol/extend_controls/circleProgressBar/index.md
@@ -40,4 +40,4 @@ public class CircleProgressBar : RangeBase
 </StackPanel>
 ```
 
-![CircleProgressBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CircleProgressBar.png)
\ No newline at end of file
+![CircleProgressBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CircleProgressBar.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/progressButton/index.md b/doc/source/handycontrol/extend_controls/progressButton/index.md
index 7fd76d1b..1ed5d278 100644
--- a/doc/source/handycontrol/extend_controls/progressButton/index.md
+++ b/doc/source/handycontrol/extend_controls/progressButton/index.md
@@ -28,4 +28,4 @@ public class ProgressButton : ToggleButton
 </StackPanel>
 ```
 
-![ProgressButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ProgressButton.png)
\ No newline at end of file
+![ProgressButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ProgressButton.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/rate/index.md b/doc/source/handycontrol/extend_controls/rate/index.md
index 8e8d9fd9..13ead7cd 100644
--- a/doc/source/handycontrol/extend_controls/rate/index.md
+++ b/doc/source/handycontrol/extend_controls/rate/index.md
@@ -52,4 +52,4 @@ public class Rate : RegularItemsControl
 </StackPanel>
 ```
 
-![Rate](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Rate.png)
\ No newline at end of file
+![Rate](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Rate.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/splitButton/index.md b/doc/source/handycontrol/extend_controls/splitButton/index.md
index 33f79879..aa42bdbc 100644
--- a/doc/source/handycontrol/extend_controls/splitButton/index.md
+++ b/doc/source/handycontrol/extend_controls/splitButton/index.md
@@ -51,4 +51,4 @@ public class SplitButton : ButtonBase
 </StackPanel>
 ```
 
-![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.png)
\ No newline at end of file
+![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/stepBar/index.md b/doc/source/handycontrol/extend_controls/stepBar/index.md
index f21fe2f2..c8fea8d6 100644
--- a/doc/source/handycontrol/extend_controls/stepBar/index.md
+++ b/doc/source/handycontrol/extend_controls/stepBar/index.md
@@ -90,4 +90,4 @@ public class StepBar : ItemsControl
 </Grid>
 ```
 
-![StepBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/StepBar.png)
\ No newline at end of file
+![StepBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/StepBar.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/transfer/index.md b/doc/source/handycontrol/extend_controls/transfer/index.md
index 9e01dcee..ac215d55 100644
--- a/doc/source/handycontrol/extend_controls/transfer/index.md
+++ b/doc/source/handycontrol/extend_controls/transfer/index.md
@@ -41,4 +41,4 @@ public class Transfer : SimpleItemsControl
 </hc:Transfer>
 ```
 
-![Transfer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Transfer.png)
\ No newline at end of file
+![Transfer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Transfer.gif)
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/calendar/index.md b/doc/source/handycontrol/native_controls/calendar/index.md
index 1ffb9210..ab50db3a 100644
--- a/doc/source/handycontrol/native_controls/calendar/index.md
+++ b/doc/source/handycontrol/native_controls/calendar/index.md
@@ -12,5 +12,5 @@ title: Calendar 日历
 {% code %}
 <Calendar/>
 {% endcode %}
-![Calendar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Calendar.jpg)
+![Calendar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Calendar.gif)
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/textBlock/index.md b/doc/source/handycontrol/native_controls/textBlock/index.md
index b1baf500..9b29f5dd 100644
--- a/doc/source/handycontrol/native_controls/textBlock/index.md
+++ b/doc/source/handycontrol/native_controls/textBlock/index.md
@@ -34,4 +34,4 @@ title: TextBlock 文本块
 </StackPanel>
 ```
 
-![TextBlockStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TextBlock.jpg)
\ No newline at end of file
+![TextBlockStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/TextBlock.png)
\ No newline at end of file