Merge pull request #36 from HandyOrg/Add-Progress-Button

add ProgressButton

HandyControl/Controls/Button/ProgressButton.cs

@@ -0,0 +1,27 @@
+using System.Windows;
+using System.Windows.Controls.Primitives;
+using HandyControl.Data;
+
+namespace HandyControl.Controls
+{
+    public class ProgressButton : ToggleButton
+    {
+        public static readonly DependencyProperty ProgressStyleProperty = DependencyProperty.Register(
+            "ProgressStyle", typeof(Style), typeof(ProgressButton), new PropertyMetadata(default(Style)));
+
+        public Style ProgressStyle
+        {
+            get => (Style) GetValue(ProgressStyleProperty);
+            set => SetValue(ProgressStyleProperty, value);
+        }
+
+        public static readonly DependencyProperty ProgressProperty = DependencyProperty.Register(
+            "Progress", typeof(double), typeof(ProgressButton), new PropertyMetadata(ValueBoxes.Double0Box));
+
+        public double Progress
+        {
+            get => (double) GetValue(ProgressProperty);
+            set => SetValue(ProgressProperty, value);
+        }
+    }
+}

HandyControl/HandyControl.csproj

@@ -90,10 +90,11 @@
     <Compile Include="Controls\Base\RegularItemsControl.cs" />
     <Compile Include="Controls\Base\SelectableItem.cs" />
     <Compile Include="Controls\Base\SimpleItemsControl.cs" />
-    <Compile Include="Controls\CoverFlow\CoverFlow.cs" />
-    <Compile Include="Controls\CoverFlow\CoverFlowItem.cs" />
-    <Compile Include="Controls\CoverView\CoverViewContent.cs" />
-    <Compile Include="Controls\CoverView\CoverViewItem.cs" />
+    <Compile Include="Controls\Button\ProgressButton.cs" />
+    <Compile Include="Controls\Cover\CoverFlow\CoverFlow.cs" />
+    <Compile Include="Controls\Cover\CoverFlow\CoverFlowItem.cs" />
+    <Compile Include="Controls\Cover\CoverView\CoverViewContent.cs" />
+    <Compile Include="Controls\Cover\CoverView\CoverViewItem.cs" />
     <Compile Include="Controls\Other\AnimationPath.cs" />
     <Compile Include="Controls\Attach\BackgroundSwitchElement.cs" />
     <Compile Include="Controls\Attach\BorderElement.cs" />
@@ -108,7 +109,7 @@
     <Compile Include="Controls\Button\ContextMenuButton.cs" />
     <Compile Include="Controls\Button\ContextMenuToggleButton.cs" />
     <Compile Include="Controls\Other\Carousel.cs" />
-    <Compile Include="Controls\CoverView\CoverView.cs" />
+    <Compile Include="Controls\Cover\CoverView\CoverView.cs" />
     <Compile Include="Controls\Panel\CirclePanel.cs" />
     <Compile Include="Controls\Other\CircleProgressBar.cs" />
     <Compile Include="Controls\Other\RadioGroup.cs" />
@@ -370,6 +371,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\Styles\Base\ProgressButtonBaseStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Themes\Styles\Base\RadioGroupBaseStyle.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -610,6 +615,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\Styles\ProgressButton.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Themes\Styles\RadioButton.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

HandyControl/Themes/Styles/Base/ProgressBarBaseStyle.xaml

@@ -76,7 +76,7 @@
         <Setter Property="Height" Value="100"/>
         <Setter Property="Width" Value="100"/>
         <Setter Property="ArcThickness" Value="4"/>
-        <Setter Property="Text" Value="{Binding Value,RelativeSource={RelativeSource Self},StringFormat={}{0} %}"></Setter>
+        <Setter Property="Text" Value="{Binding Value,RelativeSource={RelativeSource Self},StringFormat={}{0} %}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:CircleProgressBar">

HandyControl/Themes/Styles/Base/ProgressButtonBaseStyle.xaml

@@ -0,0 +1,67 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls"
+                    xmlns:system="clr-namespace:System;assembly=mscorlib">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ToggleButtonBaseStyle.xaml"/>
+        <ResourceDictionary Source="ProgressBarBaseStyle.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style x:Key="ProgressBarFlat4ProgressButton" TargetType="ProgressBar">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="controls:BorderElement.CornerRadius" Value="4"/>
+        <Setter Property="Foreground" Value="{DynamicResource DarkMaskBrush}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ProgressBar">
+                    <Border x:Name="PART_Track">
+                        <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left">
+                            <Border CornerRadius="{Binding Path=(controls:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}" x:Name="Indicator" Background="{TemplateBinding Foreground}"/>
+                        </Decorator>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ProgressButtonBaseStyle" BasedOn="{StaticResource ToggleButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="ProgressStyle" Value="{StaticResource ProgressBarFlat4ProgressButton}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:ProgressButton">
+                    <Border x:Name="Chrome" CornerRadius="{Binding Path=(controls:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
+                        <Grid>
+                            <ProgressBar x:Name="ProgressBar" Height="{x:Static system:Double.NaN}" Value="{TemplateBinding Progress}" Maximum="100" Visibility="Collapsed" Style="{TemplateBinding ProgressStyle}"/>
+                            <ContentPresenter Name="UnCheckedElement"  Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
+                            <ContentPresenter Name="CheckedElement" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="Collapsed" Content="{Binding Path=(controls:StatusSwitchElement.CheckedElement),RelativeSource={RelativeSource TemplatedParent}}"/>
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="Opacity" Value=".9"/>
+                        </Trigger>
+                        <Trigger Property="IsPressed" Value="True">
+                            <Setter Property="Opacity" Value=".6"/>
+                        </Trigger>
+                        <Trigger Property="IsChecked" Value="True">
+                            <Setter Property="Visibility" Value="Visible" TargetName="ProgressBar"/>
+                            <Setter Property="Visibility" Value="Visible" TargetName="CheckedElement"/>
+                        </Trigger>
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="controls:StatusSwitchElement.HiddenElement" Value="True"/>
+                                <Condition Property="IsChecked" Value="True"/>
+                            </MultiTrigger.Conditions>
+                            <Setter Property="Visibility" Value="Collapsed" TargetName="UnCheckedElement"/>
+                        </MultiTrigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="Opacity" Value="0.4"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>

HandyControl/Themes/Styles/ProgressButton.xaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="Base/ProgressButtonBaseStyle.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style BasedOn="{StaticResource ProgressButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="Background" Value="{DynamicResource DefaultBrush}"/>
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Background" Value="{DynamicResource DarkDefaultBrush}"/>
+            </Trigger>
+            <Trigger Property="IsPressed" Value="True">
+                <Setter Property="Background" Value="{DynamicResource BorderBrush}"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style x:Key="ProgressButtonPrimary" BasedOn="{StaticResource ProgressButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
+    </Style>
+
+    <Style x:Key="ProgressButtonSuccess" BasedOn="{StaticResource ProgressButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="Background" Value="{DynamicResource SuccessBrush}"/>
+    </Style>
+
+    <Style x:Key="ProgressButtonInfo" BasedOn="{StaticResource ProgressButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="Background" Value="{DynamicResource InfoBrush}"/>
+    </Style>
+
+    <Style x:Key="ProgressButtonWarning" BasedOn="{StaticResource ProgressButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="Background" Value="{DynamicResource WarningBrush}"/>
+    </Style>
+
+    <Style x:Key="ProgressButtonDanger" BasedOn="{StaticResource ProgressButtonBaseStyle}" TargetType="controls:ProgressButton">
+        <Setter Property="Background" Value="{DynamicResource DangerBrush}"/>
+    </Style>
+
+</ResourceDictionary>

HandyControl/Themes/Styles/Style.xaml

@@ -54,6 +54,7 @@
         <ResourceDictionary Source="Shield.xaml"/>
         <ResourceDictionary Source="CoverView.xaml"/>
         <ResourceDictionary Source="CoverFlow.xaml"/>
+        <ResourceDictionary Source="ProgressButton.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
 </ResourceDictionary>

HandyControlDemo/Data/MessageToken.cs

@@ -76,6 +76,8 @@
 	
         public static readonly string CoverFlowDemoCtl = nameof(CoverFlowDemoCtl);
 	
+        public static readonly string ProgressButtonDemoCtl = nameof(ProgressButtonDemoCtl);
+	
         public static readonly string ButtonDemoCtl = nameof(ButtonDemoCtl);
 
         public static readonly string ToggleButtonDemoCtl = nameof(ToggleButtonDemoCtl);

HandyControlDemo/Data/MessageToken.tt

@@ -40,7 +40,8 @@ var controlList = new List<string>
 	"ShieldDemoCtl",
 	"WaterfallPanelDemoCtl",
 	"CoverViewDemoCtl",
-	"CoverFlowDemoCtl"
+	"CoverFlowDemoCtl",
+	"ProgressButtonDemoCtl"
 };
 var styleList = new List<string>
 {

HandyControlDemo/HandyControlDemo.csproj

@@ -189,6 +189,9 @@
     <Compile Include="UserControl\Controls\PreviewSliderDemoCtl.xaml.cs">
       <DependentUpon>PreviewSliderDemoCtl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="UserControl\Controls\ProgressButtonDemoCtl.xaml.cs">
+      <DependentUpon>ProgressButtonDemoCtl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="UserControl\Controls\RateDemoCtl.xaml.cs">
       <DependentUpon>RateDemoCtl.xaml</DependentUpon>
     </Compile>
@@ -490,6 +493,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="UserControl\Controls\ProgressButtonDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="UserControl\Controls\RateDemoCtl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -704,6 +711,7 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="Resources\Img\LeftMainContent\ProgressButton_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\SortAscending_grey_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\LinearCarousel_16x.png" />
     <Resource Include="Resources\Img\Album\1.jpg" />

HandyControlDemo/Properties/Langs/Lang.Designer.cs

@@ -789,6 +789,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 进度按钮 的本地化字符串。
+        /// </summary>
+        public static string ProgressButton {
+            get {
+                return ResourceManager.GetString("ProgressButton", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 QQ群 的本地化字符串。
         /// </summary>
@@ -1104,6 +1113,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 上传;上传中 的本地化字符串。
+        /// </summary>
+        public static string UploadStr {
+            get {
+                return ResourceManager.GetString("UploadStr", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 警告 的本地化字符串。
         /// </summary>

HandyControlDemo/Properties/Langs/Lang.en.resx

@@ -474,4 +474,10 @@
   <data name="MessageBox" xml:space="preserve">
     <value>MessageBox</value>
   </data>
-</root>
+  <data name="ProgressButton" xml:space="preserve">
+    <value>ProgressButton</value>
+  </data>
+  <data name="UploadStr" xml:space="preserve">
+    <value>Upload;Uploading</value>
+  </data>
+</root>

HandyControlDemo/Properties/Langs/Lang.resx

@@ -474,4 +474,10 @@
   <data name="MessageBox" xml:space="preserve">
     <value>消息框</value>
   </data>
-</root>
+  <data name="ProgressButton" xml:space="preserve">
+    <value>进度按钮</value>
+  </data>
+  <data name="UploadStr" xml:space="preserve">
+    <value>上传;上传中</value>
+  </data>
+</root>

HandyControlDemo/UserControl/Controls/ProgressButtonDemoCtl.xaml

@@ -0,0 +1,17 @@
+<UserControl x:Class="HandyControlDemo.UserControl.ProgressButtonDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
+             xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
+             Background="{DynamicResource RegionBrush}">
+    <controls:TransitioningContentControl>
+        <StackPanel Margin="32" Width="300" Button.Click="ButtonProgress_OnClick" VerticalAlignment="Center">
+            <controls:ProgressButton IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StrConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
+            <controls:ProgressButton Style="{StaticResource ProgressButtonPrimary}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StrConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
+            <controls:ProgressButton Style="{StaticResource ProgressButtonSuccess}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StrConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
+            <controls:ProgressButton Style="{StaticResource ProgressButtonInfo}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StrConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
+            <controls:ProgressButton Style="{StaticResource ProgressButtonWarning}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StrConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
+            <controls:ProgressButton Style="{StaticResource ProgressButtonDanger}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StrConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
+        </StackPanel>
+    </controls:TransitioningContentControl>
+</UserControl>

HandyControlDemo/UserControl/Controls/ProgressButtonDemoCtl.xaml.cs

@@ -0,0 +1,65 @@
+using System;
+using System.Windows;
+using System.Windows.Threading;
+
+namespace HandyControlDemo.UserControl
+{
+    public partial class ProgressButtonDemoCtl
+    {
+        public static readonly DependencyProperty ProgressProperty = DependencyProperty.Register(
+            "Progress", typeof(int), typeof(ProgressButtonDemoCtl), new PropertyMetadata(default(int)));
+
+        public int Progress
+        {
+            get => (int) GetValue(ProgressProperty);
+            set => SetValue(ProgressProperty, value);
+        }
+
+        public static readonly DependencyProperty IsUploadingProperty = DependencyProperty.Register(
+            "IsUploading", typeof(bool), typeof(ProgressButtonDemoCtl), new PropertyMetadata(default(bool)));
+
+        public bool IsUploading
+        {
+            get => (bool) GetValue(IsUploadingProperty);
+            set => SetValue(IsUploadingProperty, value);
+        }
+
+        private readonly DispatcherTimer _timer;
+
+        public ProgressButtonDemoCtl()
+        {
+            InitializeComponent();
+
+            DataContext = this;
+
+            _timer = new DispatcherTimer
+            {
+                Interval = TimeSpan.FromMilliseconds(200)
+            };
+            _timer.Tick += Timer_Tick;
+        }
+
+        private void Timer_Tick(object sender, EventArgs e)
+        {
+            Progress++;
+            if (Progress == 100)
+            {
+                Progress = 0;
+                _timer.Stop();
+                IsUploading = false;
+            }
+        }
+
+        private void ButtonProgress_OnClick(object sender, RoutedEventArgs e)
+        {
+            if (_timer.IsEnabled)
+            {
+                _timer.Stop();
+            }
+            else
+            {
+                _timer.Start();
+            }
+        }
+    }
+}

HandyControlDemo/UserControl/Controls/WaterfallPanelDemoCtl.xaml

@@ -5,7 +5,7 @@
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
              xmlns:interactivity="clr-namespace:HandyControl.Interactivity;assembly=HandyControl"
              Background="{DynamicResource RegionBrush}">
-    <ContentControl>
+    <controls:TransitioningContentControl>
         <Grid Margin="32">
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto"/>
@@ -53,5 +53,5 @@
                 </controls:ScrollViewer>
             </StackPanel>
         </Grid>
-    </ContentControl>
+    </controls:TransitioningContentControl>
 </UserControl>

HandyControlDemo/UserControl/Main/LeftMainContent.xaml

@@ -182,6 +182,11 @@
                     </controls:StatusSwitchElement.CheckedElement>
                 </ToggleButton>
                 <ListBox Name="listControl" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single"  Style="{StaticResource ListBoxTransparent}">
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.ProgressButtonDemoCtl}" Content="{x:Static langs:Lang.ProgressButton}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ProgressButton_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
                     <ListBoxItem Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
                         <controls:EdgeElement.LeftContent>
                             <Image Source="../../Resources/Img/LeftMainContent/NumericListBox_16x.png"/>
@@ -232,7 +237,7 @@
                             <Image Source="../../Resources/Img/LeftMainContent/FlipVertical_16x.png"/>
                         </controls:EdgeElement.LeftContent>
                     </ListBoxItem>
-                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.RateDemoCtl}" Content="{x:Static langs:Lang.Rate}">
+                    <ListBoxItem Tag="{x:Static data:MessageToken.RateDemoCtl}" Content="{x:Static langs:Lang.Rate}">
                         <controls:EdgeElement.LeftContent>
                             <Image Source="../../Resources/Img/LeftMainContent/Star.png"/>
                         </controls:EdgeElement.LeftContent>

README.md

@@ -10,6 +10,10 @@
 
 ## Latest examples
 
+### ProgressButton
+
+![ProgressButton](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressButton.png)
+
 ### CoverFlow
 
 ![CoverFlow](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverFlow.gif)
@@ -22,6 +26,8 @@
 
 ![WaterfallPanel](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaterfallPanel.png)
 
+## History publication
+
 ### Rate
 
 ![Rate](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Rate.png)
@@ -30,8 +36,6 @@
 
 ![BlurWindow](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/BlurWindow.png)
 
-## History publication
-
 ### FlipClock
 
 ![FlipClock](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/FlipClock.gif)