improve stepbar

HandyControl/Controls/StepBar/StepBar.cs

@@ -0,0 +1,157 @@
+using System;
+using System.ComponentModel;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+using System.Windows.Input;
+using System.Windows.Media;
+using HandyControl.Data;
+using HandyControl.Interactivity;
+using HandyControl.Tools;
+
+namespace HandyControl.Controls
+{
+    [StyleTypedProperty(Property = "ItemContainerStyle", StyleTargetType = typeof(StepBarItem))]
+    [DefaultEvent("StepChanged")]
+    [TemplatePart(Name = ElementProgressBarBack, Type = typeof(ProgressBar))]
+    public class StepBar : ItemsControl
+    {
+        private ProgressBar _progressBarBack;
+
+        #region Constants
+
+        private const string ElementProgressBarBack = "PART_ProgressBarBack";
+
+        #endregion Constants
+
+        public StepBar()
+        {
+            CommandBindings.Add(new CommandBinding(ControlCommands.Next, (s, e) => Next()));
+            CommandBindings.Add(new CommandBinding(ControlCommands.Prev, (s, e) => Prev()));
+            ItemContainerGenerator.StatusChanged += ItemContainerGenerator_StatusChanged;
+        }
+
+        private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
+        {
+            var count = Items.Count;
+            if (count > 0)
+            {
+                if (ItemContainerGenerator.ContainerFromIndex(0) is StepBarItem item)
+                {
+                    item.Status = StepStatus.UnderWay;
+                }
+
+                for (int i = 0; i < count; i++)
+                {
+                    if (ItemContainerGenerator.ContainerFromIndex(i) is StepBarItem stepBarItem)
+                    {
+                        stepBarItem.Index = i + 1;
+                    }
+                }
+            }
+        }
+
+        protected override bool IsItemItsOwnContainerOverride(object item) => item is StepBarItem;
+
+        protected override DependencyObject GetContainerForItemOverride() => new StepBarItem();
+
+        /// <summary>
+        ///     步骤改变事件
+        /// </summary>
+        public static readonly RoutedEvent StepChangedEvent =
+            EventManager.RegisterRoutedEvent("StepChanged", RoutingStrategy.Bubble,
+                typeof(EventHandler<FunctionEventArgs<int>>), typeof(StepBar));
+
+        /// <summary>
+        ///     步骤改变事件
+        /// </summary>
+        [Category("Behavior")]
+        public event EventHandler<FunctionEventArgs<int>> StepChanged
+        {
+            add => AddHandler(StepChangedEvent, value);
+            remove => RemoveHandler(StepChangedEvent, value);
+        }
+
+        public static readonly DependencyProperty StepIndexProperty = DependencyProperty.Register(
+            "StepIndex", typeof(int), typeof(StepBar), new PropertyMetadata(default(int)));
+
+        public int StepIndex
+        {
+            get => (int) GetValue(StepIndexProperty);
+            protected set => SetValue(StepIndexProperty, value);
+        }
+
+        public static readonly DependencyProperty DockProperty = DependencyProperty.Register(
+            "Dock", typeof(Dock), typeof(StepBar), new PropertyMetadata(Dock.Top));
+
+        public Dock Dock
+        {
+            get => (Dock) GetValue(DockProperty);
+            set => SetValue(DockProperty, value);
+        }
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            _progressBarBack = GetTemplateChild(ElementProgressBarBack) as ProgressBar;
+        }
+
+        protected override void OnRender(DrawingContext drawingContext)
+        {
+            base.OnRender(drawingContext);
+
+            var colCount = Items.Count;
+            if (_progressBarBack == null || colCount <= 0) return;
+            _progressBarBack.Maximum = colCount - 1;
+            _progressBarBack.Value = StepIndex;
+
+            if (Dock == Dock.Top || Dock == Dock.Bottom)
+            {
+                _progressBarBack.Width = (colCount - 1) * (ActualWidth / colCount);
+            }
+            else
+            {
+                _progressBarBack.Height = (colCount - 1) * (ActualHeight / colCount);
+            }
+        }
+
+        public void Next()
+        {
+            StepIndex++;
+            if (StepIndex >= Items.Count)
+            {
+                StepIndex = Items.Count - 1;
+                return;
+            }
+            RaiseEvent(new FunctionEventArgs<int>(StepChangedEvent, this)
+            {
+                Info = StepIndex
+            });
+            if (ItemContainerGenerator.ContainerFromIndex(StepIndex - 1) is StepBarItem stepItemFinished)
+                stepItemFinished.Status = StepStatus.Complete;
+            if (ItemContainerGenerator.ContainerFromIndex(StepIndex) is StepBarItem stepItemSelected)
+                stepItemSelected.Status = StepStatus.UnderWay;
+            _progressBarBack?.BeginAnimation(RangeBase.ValueProperty, AnimationHelper.CreateAnimation(StepIndex));
+        }
+
+        public void Prev()
+        {
+            StepIndex--;
+            if (StepIndex < 0)
+            {
+                StepIndex = 0;
+                return;
+            }
+            RaiseEvent(new FunctionEventArgs<int>(StepChangedEvent, this)
+            {
+                Info = StepIndex
+            });
+            if (ItemContainerGenerator.ContainerFromIndex(StepIndex + 1) is StepBarItem stepItemWaiting)
+                stepItemWaiting.Status = StepStatus.Waiting;
+            if (ItemContainerGenerator.ContainerFromIndex(StepIndex) is StepBarItem stepItemSelected)
+                stepItemSelected.Status = StepStatus.UnderWay;
+            _progressBarBack?.BeginAnimation(RangeBase.ValueProperty, AnimationHelper.CreateAnimation(StepIndex));
+        }
+    }
+}

HandyControl/Controls/StepBar/StepBarItem.cs

@@ -0,0 +1,42 @@
+using System.Windows;
+using System.Windows.Controls;
+using HandyControl.Data;
+
+namespace HandyControl.Controls
+{
+    /// <summary>
+    ///     步骤条单元项
+    /// </summary>
+    public class StepBarItem : ContentControl
+    {
+        /// <summary>
+        ///     步骤编号
+        /// </summary>
+        public static readonly DependencyProperty IndexProperty = DependencyProperty.Register(
+            "Index", typeof(int), typeof(StepBarItem), new PropertyMetadata(-1));
+
+        /// <summary>
+        ///     步骤编号
+        /// </summary>
+        public int Index
+        {
+            get => (int) GetValue(IndexProperty);
+            internal set => SetValue(IndexProperty, value);
+        }
+
+        /// <summary>
+        ///     步骤状态
+        /// </summary>
+        public static readonly DependencyProperty StatusProperty = DependencyProperty.Register(
+            "Status", typeof(StepStatus), typeof(StepBarItem), new PropertyMetadata(StepStatus.Waiting));
+
+        /// <summary>
+        ///     步骤状态
+        /// </summary>
+        public StepStatus Status
+        {
+            get => (StepStatus) GetValue(StatusProperty);
+            internal set => SetValue(StatusProperty, value);
+        }
+    }
+}

HandyControl/Controls/Steps/StepBar.cs

@@ -1,162 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Controls.Primitives;
-using System.Windows.Input;
-using System.Windows.Markup;
-using System.Windows.Media;
-using HandyControl.Data;
-using HandyControl.Interactivity;
-using HandyControl.Tools;
-
-// ReSharper disable once CheckNamespace
-namespace HandyControl.Controls
-{
-    /// <summary>
-    ///     步骤条
-    /// </summary>
-    [ContentProperty("Items")]
-    [TemplatePart(Name = ElementProgressBarBack, Type = typeof(ProgressBar))]
-    [TemplatePart(Name = ElementUniformGridMain, Type = typeof(Panel))]
-    public class StepBar : Control
-    {
-        private bool _isLoaded;
-
-        private ProgressBar _progressBarBack;
-
-        private Panel _panelMain;
-
-        #region Constants
-
-        private const string ElementProgressBarBack = "PART_ProgressBarBack";
-        private const string ElementUniformGridMain = "PART_UniformGridMain";
-
-        #endregion Constants
-
-        /// <summary>
-        ///     步骤改变事件
-        /// </summary>
-        public static readonly RoutedEvent StepChangedEvent =
-            EventManager.RegisterRoutedEvent("StepChanged", RoutingStrategy.Bubble,
-                typeof(EventHandler<FunctionEventArgs<int>>), typeof(StepBar));
-
-        /// <summary>
-        ///     步骤改变事件
-        /// </summary>
-        public event EventHandler<FunctionEventArgs<int>> StepChanged
-        {
-            add => AddHandler(StepChangedEvent, value);
-            remove => RemoveHandler(StepChangedEvent, value);
-        }
-
-        public StepBar()
-        {
-            Loaded += (s1, e1) =>
-            {
-                if (_isLoaded) return;
-                UpdateItems(Items);
-
-                CommandBindings.Add(new CommandBinding(ControlCommands.Next, (s, e) => Next()));
-                CommandBindings.Add(new CommandBinding(ControlCommands.Prev, (s, e) => Prev()));
-
-                _isLoaded = true;
-            };
-        }
-
-        public override void OnApplyTemplate()
-        {
-            _panelMain?.Children.Clear();
-            base.OnApplyTemplate();
-
-            _progressBarBack = GetTemplateChild(ElementProgressBarBack) as ProgressBar;
-            _panelMain = GetTemplateChild(ElementUniformGridMain) as Panel;
-
-            CheckNull();
-
-            if (_isLoaded)
-            {
-                UpdateItems(Items);
-            }
-        }
-
-        private void CheckNull()
-        {
-            if (_panelMain == null || _progressBarBack == null) throw new Exception();
-        }
-
-        public int StepIndex { get; private set; }
-
-        public List<StepItem> Items { get; set; } = new List<StepItem>();
-
-        private void UpdateItems(IReadOnlyCollection<StepItem> list)
-        {
-            if (list == null) return;
-            _panelMain.Children.Clear();
-
-            var index = 1;
-            foreach (var item in list)
-            {
-                item.Index = index;
-                item.IndexStr = $"{Properties.Langs.Lang.Step}{index}";
-                _panelMain.Children.Add(item);
-                index++;
-            }
-
-            if (list.FirstOrDefault() is StepItem stepItem)
-            {
-                stepItem.Status = false;
-            }
-        }
-
-        protected override void OnRender(DrawingContext drawingContext)
-        {
-            base.OnRender(drawingContext);
-
-            var colCount = _panelMain.Children.Count;
-            if (colCount <= 0) return;
-            _progressBarBack.Width = (colCount - 1) * (ActualWidth / colCount);
-            _progressBarBack.Value = 0;
-            _progressBarBack.Maximum = colCount - 1;
-        }
-
-        public void Next()
-        {
-            StepIndex++;
-            if (StepIndex >= _panelMain.Children.Count)
-            {
-                StepIndex = _panelMain.Children.Count - 1;
-                return;
-            }
-            RaiseEvent(new FunctionEventArgs<int>(StepChangedEvent, this)
-            {
-                Info = StepIndex
-            });
-            if (_panelMain.Children[StepIndex - 1] is StepItem stepItemFinished)
-                stepItemFinished.Status = true;
-            if (_panelMain.Children[StepIndex] is StepItem stepItemSelected)
-                stepItemSelected.Status = false;
-            _progressBarBack.BeginAnimation(RangeBase.ValueProperty, AnimationHelper.CreateAnimation(StepIndex));
-        }
-
-        public void Prev()
-        {
-            StepIndex--;
-            if (StepIndex < 0)
-            {
-                StepIndex = 0;
-                return;
-            }
-            RaiseEvent(new FunctionEventArgs<int>(StepChangedEvent, this)
-            {
-                Info = StepIndex
-            });
-            if (_panelMain.Children[StepIndex + 1] is StepItem stepItemFinished)
-                stepItemFinished.Status = null;
-            if (_panelMain.Children[StepIndex] is StepItem stepItemSelected)
-                stepItemSelected.Status = false;
-            _progressBarBack.BeginAnimation(RangeBase.ValueProperty, AnimationHelper.CreateAnimation(StepIndex));
-        }
-    }
-}

HandyControl/Controls/Steps/StepItem.cs

@@ -1,70 +0,0 @@
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Media;
-using HandyControl.Data;
-using HandyControl.Tools;
-
-// ReSharper disable once CheckNamespace
-namespace HandyControl.Controls
-{
-    /// <summary>
-    ///     步骤条单元项
-    /// </summary>
-    public class StepItem : Control
-    {
-        internal static readonly DependencyProperty IndexProperty = DependencyProperty.Register(
-            "Index", typeof(int), typeof(StepItem), new PropertyMetadata(-1));
-
-        internal int Index
-        {
-            get => (int)GetValue(IndexProperty);
-            set => SetValue(IndexProperty, value);
-        }
-
-        internal static readonly DependencyProperty IndexStrProperty = DependencyProperty.Register(
-            "IndexStr", typeof(string), typeof(StepItem), new PropertyMetadata(default(string)));
-
-        internal string IndexStr
-        {
-            get => (string)GetValue(IndexStrProperty);
-            set => SetValue(IndexStrProperty, value);
-        }
-
-        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(
-            "Title", typeof(string), typeof(StepItem), new PropertyMetadata(default(string)));
-
-        public string Title
-        {
-            get => (string)GetValue(TitleProperty);
-            set => SetValue(TitleProperty, value);
-        }
-
-        private bool? _status;
-
-        public bool? Status
-        {
-            get => _status;
-            set
-            {
-                _status = value;
-                UpdateStatus();
-            }
-        }
-
-        private void UpdateStatus()
-        {
-            if (Status == true)
-            {
-                Foreground = ResourceHelper.GetResource<Brush>(ResourceToken.PrimaryTextBrush);
-            }
-            else if (Status == false)
-            {
-                Foreground = ResourceHelper.GetResource<Brush>(ResourceToken.PrimaryBrush);
-            }
-            else
-            {
-                Foreground = ResourceHelper.GetResource<Brush>(ResourceToken.ThirdlyTextBrush);
-            }
-        }
-    }
-}

HandyControl/Controls/TransitioningContentControl.cs

@@ -1,4 +1,5 @@
 using System;
+using System.ComponentModel;
 using System.Diagnostics.CodeAnalysis;
 using System.Linq;
 using System.Windows;
@@ -18,7 +19,10 @@ namespace HandyControl.Controls
 
         public TransitioningContentControl()
         {
-            DefaultStyleKey = typeof(TransitioningContentControl);
+            if (!DesignerProperties.GetIsInDesignMode(this))
+            {
+                DefaultStyleKey = typeof(TransitioningContentControl);
+            }
         }
 
         private Storyboard CurrentTransition
@@ -43,6 +47,8 @@ namespace HandyControl.Controls
 
         public override void OnApplyTemplate()
         {
+            if (DesignerProperties.GetIsInDesignMode(this)) return;
+
             if (IsTransitioning)
                 AbortTransition();
 

HandyControl/Data/Enum/StepStatus.cs

@@ -0,0 +1,23 @@
+namespace HandyControl.Data
+{
+    /// <summary>
+    ///     步骤状态
+    /// </summary>
+    public enum StepStatus
+    {
+        /// <summary>
+        ///     完成
+        /// </summary>
+        Complete,
+
+        /// <summary>
+        ///     进行中
+        /// </summary>
+        UnderWay,
+
+        /// <summary>
+        ///     等待中
+        /// </summary>
+        Waiting
+    }
+}

HandyControl/HandyControl.csproj

@@ -65,9 +65,12 @@
     <Compile Include="Controls\Loading\LoadingCircle.cs" />
     <Compile Include="Controls\Loading\LoadingLine.cs" />
     <Compile Include="Controls\InternalCanvas.cs" />
+    <Compile Include="Controls\StepBar\StepBar.cs" />
+    <Compile Include="Controls\StepBar\StepBarItem.cs" />
     <Compile Include="Data\Enum\InfoType.cs" />
     <Compile Include="Data\Enum\ResultType.cs" />
     <Compile Include="Data\Enum\SkinType.cs" />
+    <Compile Include="Data\Enum\StepStatus.cs" />
     <Compile Include="Data\Enum\TipPlacement.cs" />
     <Compile Include="Data\GrowlInfo.cs" />
     <Compile Include="Data\OperationResult!1.cs" />
@@ -110,8 +113,6 @@
     <Compile Include="Expression\Shapes\Arc.cs" />
     <Compile Include="Expression\Shapes\PrimitiveShape.cs" />
     <Compile Include="Tools\SingleOpenHelper.cs" />
-    <Compile Include="Controls\Steps\StepBar.cs" />
-    <Compile Include="Controls\Steps\StepItem.cs" />
     <Compile Include="Controls\TabControl\TabControl.cs" />
     <Compile Include="Controls\TabControl\TabItem.cs" />
     <Compile Include="Controls\TabControl\TabPanel.cs" />
@@ -266,6 +267,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\Styles\Base\StepBarBaseStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Themes\Styles\Base\TabControlBaseStyle.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

HandyControl/Properties/Langs/Lang.Designer.cs

@@ -47,7 +47,7 @@ namespace HandyControl.Properties.Langs {
         }
         
         /// <summary>
-        ///   重写当前线程的 CurrentUICulture 属性
+        ///   使用此强类型资源类，为所有资源查找
         ///   重写当前线程的 CurrentUICulture 属性。
         /// </summary>
         [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
@@ -78,6 +78,24 @@ namespace HandyControl.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 无法自注册复合命令 的本地化字符串。
+        /// </summary>
+        public static string CannotRegisterCompositeCommandInItself {
+            get {
+                return ResourceManager.GetString("CannotRegisterCompositeCommandInItself", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   查找类似 不能注册同一命令两次 的本地化字符串。
+        /// </summary>
+        public static string CannotRegisterSameCommandTwice {
+            get {
+                return ResourceManager.GetString("CannotRegisterSameCommandTwice", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 清空 的本地化字符串。
         /// </summary>
@@ -249,15 +267,6 @@ namespace HandyControl.Properties.Langs {
             }
         }
         
-        /// <summary>
-        ///   查找类似 步骤 的本地化字符串。
-        /// </summary>
-        public static string Step {
-            get {
-                return ResourceManager.GetString("Step", resourceCulture);
-            }
-        }
-        
         /// <summary>
         ///   查找类似 提示 的本地化字符串。
         /// </summary>

HandyControl/Properties/Langs/Lang.en.resx

@@ -165,9 +165,6 @@
   <data name="Clear" xml:space="preserve">
     <value>Clear</value>
   </data>
-  <data name="Step" xml:space="preserve">
-    <value>Step</value>
-  </data>
   <data name="Close" xml:space="preserve">
     <value>Close</value>
   </data>
@@ -195,4 +192,10 @@
   <data name="FormatError" xml:space="preserve">
     <value>format error</value>
   </data>
+  <data name="CannotRegisterCompositeCommandInItself" xml:space="preserve">
+    <value>Cannot Register Composite Command In It self</value>
+  </data>
+  <data name="CannotRegisterSameCommandTwice" xml:space="preserve">
+    <value>Cannot Register Same Command Twice</value>
+  </data>
 </root>

HandyControl/Properties/Langs/Lang.resx

@@ -145,9 +145,6 @@
   <data name="Clear" xml:space="preserve">
     <value>清空</value>
   </data>
-  <data name="Step" xml:space="preserve">
-    <value>步骤</value>
-  </data>
   <data name="Close" xml:space="preserve">
     <value>关闭</value>
   </data>
@@ -175,4 +172,10 @@
   <data name="FormatError" xml:space="preserve">
     <value>格式错误</value>
   </data>
+  <data name="CannotRegisterCompositeCommandInItself" xml:space="preserve">
+    <value>无法自注册复合命令</value>
+  </data>
+  <data name="CannotRegisterSameCommandTwice" xml:space="preserve">
+    <value>不能注册同一命令两次</value>
+  </data>
 </root>

HandyControl/Themes/Styles/Base/StepBarBaseStyle.xaml

@@ -0,0 +1,134 @@
+<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="../TextBlock.xaml"/>
+        <ResourceDictionary Source="../ProgressBar.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style x:Key="StepBarItemBaseStyle" TargetType="controls:StepBarItem">
+        <Setter Property="Foreground" Value="{DynamicResource ThirdlyTextBrush}"/>
+        <Style.Triggers>
+            <Trigger Property="Status" Value="Complete">
+                <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
+            </Trigger>
+            <Trigger Property="Status" Value="UnderWay">
+                <Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
+            </Trigger>
+            <Trigger Property="Status" Value="Waiting">
+                <Setter Property="Foreground" Value="{DynamicResource ThirdlyTextBrush}"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style x:Key="StepBarItemHorizontalTop" BasedOn="{StaticResource StepBarItemBaseStyle}" TargetType="controls:StepBarItem">
+        <Setter Property="Margin" Value="10,0"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:StepBarItem">
+                    <StackPanel>
+                        <Border Background="{DynamicResource RegionBrush}" HorizontalAlignment="Center" CornerRadius="12" BorderThickness="2" BorderBrush="{TemplateBinding Foreground}" Height="24" MinWidth="24">
+                            <TextBlock Foreground="{TemplateBinding Foreground}" Style="{StaticResource TextBlockDefaultThiLight}" Text="{Binding Index,RelativeSource={RelativeSource TemplatedParent}}"/>
+                        </Border>
+                        <ContentPresenter HorizontalAlignment="Center" ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource FindAncestor,AncestorType=controls:StepBar}}" TextElement.Foreground="{TemplateBinding Foreground}" Margin="0,4,0,0"/>
+                    </StackPanel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="StepBarItemHorizontalBottom" BasedOn="{StaticResource StepBarItemBaseStyle}" TargetType="controls:StepBarItem">
+        <Setter Property="Margin" Value="10,0"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:StepBarItem">
+                    <StackPanel>
+                        <ContentPresenter HorizontalAlignment="Center" ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource FindAncestor,AncestorType=controls:StepBar}}" TextElement.Foreground="{TemplateBinding Foreground}" Margin="0,0,0,4"/>
+                        <Border Background="{DynamicResource RegionBrush}" HorizontalAlignment="Center" CornerRadius="12" BorderThickness="2" BorderBrush="{TemplateBinding Foreground}" Height="24" MinWidth="24">
+                            <TextBlock Foreground="{TemplateBinding Foreground}" Style="{StaticResource TextBlockDefaultThiLight}" Text="{Binding Index,RelativeSource={RelativeSource TemplatedParent}}"/>
+                        </Border>
+                    </StackPanel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="StepBarItemVerticalLeft" BasedOn="{StaticResource StepBarItemBaseStyle}" TargetType="controls:StepBarItem">
+        <Setter Property="Margin" Value="0, 10"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:StepBarItem">
+                    <StackPanel Orientation="Horizontal">
+                        <Border Background="{DynamicResource RegionBrush}" HorizontalAlignment="Center" CornerRadius="12" BorderThickness="2" BorderBrush="{TemplateBinding Foreground}" Height="24" MinWidth="24">
+                            <TextBlock Foreground="{TemplateBinding Foreground}" Style="{StaticResource TextBlockDefaultThiLight}" Text="{Binding Index,RelativeSource={RelativeSource TemplatedParent}}"/>
+                        </Border>
+                        <StackPanel Margin="10,0,0,0">
+                            <ContentPresenter HorizontalAlignment="Left" ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource FindAncestor,AncestorType=controls:StepBar}}" TextElement.Foreground="{TemplateBinding Foreground}" Margin="0,4,0,0"/>
+                        </StackPanel>
+                    </StackPanel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <ItemsPanelTemplate x:Key="StepBarHorizontalItemsPanelTemplate">
+        <UniformGrid Rows="1"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="StepBarVerticalItemsPanelTemplate">
+        <UniformGrid Columns="1"/>
+    </ItemsPanelTemplate>
+
+    <ControlTemplate x:Key="StepBarHorizontalTopControlTemplate" TargetType="controls:StepBar">
+        <Grid>
+            <ProgressBar HorizontalAlignment="Center" Name="PART_ProgressBarBack" VerticalAlignment="Top" Margin="0,10,0,0" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}"/>
+            <ItemsPresenter/>
+        </Grid>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="StepBarHorizontalBottomControlTemplate" TargetType="controls:StepBar">
+        <Grid>
+            <ProgressBar HorizontalAlignment="Center" Name="PART_ProgressBarBack" VerticalAlignment="Bottom" Margin="0,0,0,10" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}"/>
+            <ItemsPresenter VerticalAlignment="Bottom"/>
+        </Grid>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="StepBarVerticalLeftControlTemplate" TargetType="controls:StepBar">
+        <Grid>
+            <ProgressBar Orientation="Vertical" Width="4" HorizontalAlignment="Left" Name="PART_ProgressBarBack" VerticalAlignment="Center" Margin="10,0,0,0" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}" RenderTransformOrigin="0.5,0.5">
+                <ProgressBar.RenderTransform>
+                    <TransformGroup>
+                        <RotateTransform Angle="180"/>
+                    </TransformGroup>
+                </ProgressBar.RenderTransform>
+            </ProgressBar>
+            <ItemsPresenter/>
+        </Grid>
+    </ControlTemplate>
+
+    <Style x:Key="StepBarBaseStyle" TargetType="controls:StepBar">
+        <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalTop}"/>
+        <Setter Property="Template" Value="{StaticResource StepBarHorizontalTopControlTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}"/>
+        <Style.Triggers>
+            <Trigger Property="Dock" Value="Left">
+                <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}"/>
+                <Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}"/>
+                <Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}"/>
+            </Trigger>
+            <Trigger Property="Dock" Value="Bottom">
+                <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalBottom}"/>
+                <Setter Property="Template" Value="{StaticResource StepBarHorizontalBottomControlTemplate}"/>
+                <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}"/>
+            </Trigger>
+            <Trigger Property="Dock" Value="Right">
+                <Setter Property="FlowDirection" Value="RightToLeft"/>
+                <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}"/>
+                <Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}"/>
+                <Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+</ResourceDictionary>

HandyControl/Themes/Styles/ProgressBar.xaml

@@ -206,11 +206,18 @@
                     <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
                         <Rectangle x:Name="PART_Track" Fill="{TemplateBinding Background}" StrokeThickness="0" Stroke="{TemplateBinding BorderBrush}"/>
                         <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left">
-                            <Grid x:Name="Foreground">
-                                <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
-                            </Grid>
+                            <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
                         </Decorator>
                     </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="Orientation" Value="Vertical">
+                            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
+                                <Setter.Value>
+                                    <RotateTransform Angle="-90"/>
+                                </Setter.Value>
+                            </Setter>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>

HandyControl/Themes/Styles/StepBar.xaml

@@ -2,39 +2,9 @@
                     xmlns:controls="clr-namespace:HandyControl.Controls">
 
     <ResourceDictionary.MergedDictionaries>
-        <ResourceDictionary Source="TextBlock.xaml"/>
-        <ResourceDictionary Source="ProgressBar.xaml"/>
+        <ResourceDictionary Source="Base/StepBarBaseStyle.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
-    <Style TargetType="controls:StepItem">
-        <Setter Property="Foreground" Value="{DynamicResource ThirdlyTextBrush}"/>
-        <Setter Property="Margin" Value="10,0"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="controls:StepItem">
-                    <StackPanel>
-                        <Border Background="{DynamicResource RegionBrush}" HorizontalAlignment="Center" CornerRadius="12" BorderThickness="2" BorderBrush="{TemplateBinding Foreground}" Height="24" MinWidth="24">
-                            <TextBlock Foreground="{TemplateBinding Foreground}" Style="{StaticResource TextBlockDefaultThiLight}" Text="{Binding Index,RelativeSource={RelativeSource FindAncestor,AncestorType=controls:StepItem}}"/>
-                        </Border>
-                        <TextBlock Margin="0,10,0,0" Foreground="{TemplateBinding Foreground}" Style="{StaticResource TextBlockSubTitleBold}" Text="{TemplateBinding IndexStr}"/>
-                        <TextBlock Foreground="{TemplateBinding Foreground}" Margin="0,4,0,0" Style="{StaticResource TextBlockDefaultThiLight}" Text="{TemplateBinding Title}"/>
-                    </StackPanel>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <Style TargetType="controls:StepBar">
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="controls:StepBar">
-                    <Grid>
-                        <ProgressBar HorizontalAlignment="Center" Name="PART_ProgressBarBack" VerticalAlignment="Top" Margin="0,10,0,0" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}"/>
-                        <UniformGrid Name="PART_UniformGridMain" Rows="1"/>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
+    <Style BasedOn="{StaticResource StepBarBaseStyle}" TargetType="controls:StepBar"/>
 
 </ResourceDictionary>

HandyControlDemo/Data/Model/StepBarDemoModel.cs

@@ -0,0 +1,9 @@
+namespace HandyControlDemo.Data
+{
+    public class StepBarDemoModel
+    {
+        public string Header { get; set; }
+
+        public string Content { get; set; }
+    }
+}

HandyControlDemo/HandyControlDemo.csproj

@@ -79,6 +79,7 @@
     </Compile>
     <Compile Include="Data\Model\ContributorModel.cs" />
     <Compile Include="Data\Model\DemoDataModel.cs" />
+    <Compile Include="Data\Model\StepBarDemoModel.cs" />
     <Compile Include="Properties\Langs\Lang.Designer.cs">
       <AutoGen>True</AutoGen>
       <DesignTime>True</DesignTime>
@@ -235,6 +236,7 @@
     <Compile Include="ViewModel\GrowlDemoViewModel.cs" />
     <Compile Include="ViewModel\ImageBrowserDemoViewModel.cs" />
     <Compile Include="ViewModel\MainViewModel.cs" />
+    <Compile Include="ViewModel\StepBarDemoViewModel.cs" />
     <Compile Include="ViewModel\ViewModelLocator.cs" />
     <Compile Include="ViewModel\WindowDemoViewModel.cs" />
     <Compile Include="Window\CommonWindow.xaml.cs">

HandyControlDemo/Properties/Langs/Lang.Designer.cs

@@ -47,7 +47,7 @@ namespace HandyControlDemo.Properties.Langs {
         }
         
         /// <summary>
-        ///   重写当前线程的 CurrentUICulture 属性
+        ///   使用此强类型资源类，为所有资源查找
         ///   重写当前线程的 CurrentUICulture 属性。
         /// </summary>
         [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
@@ -717,6 +717,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 步骤 的本地化字符串。
+        /// </summary>
+        public static string Step {
+            get {
+                return ResourceManager.GetString("Step", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 步骤条 的本地化字符串。
         /// </summary>

HandyControlDemo/Properties/Langs/Lang.en.resx

@@ -396,4 +396,7 @@
   <data name="PlsEnterEmail" xml:space="preserve">
     <value>please enter email</value>
   </data>
+  <data name="Step" xml:space="preserve">
+    <value>Step</value>
+  </data>
 </root>

HandyControlDemo/Properties/Langs/Lang.resx

@@ -376,4 +376,7 @@
   <data name="PlsEnterEmail" xml:space="preserve">
     <value>请输入邮箱</value>
   </data>
+  <data name="Step" xml:space="preserve">
+    <value>步骤</value>
+  </data>
 </root>

HandyControlDemo/Service/DataService.cs

@@ -11,7 +11,7 @@ namespace HandyControlDemo.Service
 {
     public class DataService
     {
-        public List<DemoDataModel> GetDemoDataList()
+        internal List<DemoDataModel> GetDemoDataList()
         {
             var list = new List<DemoDataModel>();
             for (var i = 1; i <= 6; i++)
@@ -43,7 +43,7 @@ namespace HandyControlDemo.Service
             return list;
         }
 
-        public List<string> GetComboBoxDemoDataList()
+        internal List<string> GetComboBoxDemoDataList()
         {
             var converter = new StringRepeatConverter();
             var list = new List<string>();
@@ -55,7 +55,7 @@ namespace HandyControlDemo.Service
             return list;
         }
 
-        public List<ContributorModel> GetContributorDataList()
+        internal List<ContributorModel> GetContributorDataList()
         {
             var client = new WebClient();
             client.Headers.Add("User-Agent", "request");
@@ -77,5 +77,32 @@ namespace HandyControlDemo.Service
             }
             return list;
         }
+
+        internal List<StepBarDemoModel> GetStepBarDemoDataList()
+        {
+            return new List<StepBarDemoModel>
+            {
+                new StepBarDemoModel
+                {
+                    Header = $"{Properties.Langs.Lang.Step}1",
+                    Content = Properties.Langs.Lang.Register
+                },
+                new StepBarDemoModel
+                {
+                    Header = $"{Properties.Langs.Lang.Step}2",
+                    Content = Properties.Langs.Lang.BasicInfo
+                },
+                new StepBarDemoModel
+                {
+                    Header = $"{Properties.Langs.Lang.Step}3",
+                    Content = Properties.Langs.Lang.UploadFile
+                },
+                new StepBarDemoModel
+                {
+                    Header = $"{Properties.Langs.Lang.Step}4",
+                    Content = Properties.Langs.Lang.Complete
+                }
+            };
+        }
     }
 }

HandyControlDemo/UserControl/Controls/StepBarDemoCtl.xaml

@@ -3,21 +3,57 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
-             xmlns:interactivity="clr-namespace:HandyControl.Interactivity;assembly=HandyControl"
+             DataContext="{Binding StepBarDemo,Source={StaticResource Locator}}"
              FocusManager.FocusedElement="{Binding RelativeSource={x:Static RelativeSource.Self}, Mode=OneTime}"
              Background="{DynamicResource RegionBrush}">
     <controls:TransitioningContentControl>
-        <StackPanel Margin="32" VerticalAlignment="Center" MaxWidth="800">
-            <controls:StepBar x:Name="StepBarMain">
-                <controls:StepItem Title="{x:Static langs:Lang.Register}"/>
-                <controls:StepItem Title="{x:Static langs:Lang.BasicInfo}"/>
-                <controls:StepItem Title="{x:Static langs:Lang.UploadFile}"/>
-                <controls:StepItem Title="{x:Static langs:Lang.Complete}"/>
+        <Grid Margin="32" Name="PanelMain">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition/>
+                <ColumnDefinition/>
+            </Grid.ColumnDefinitions>
+            <controls:StepBar Grid.ColumnSpan="2">
+                <controls:StepBarItem Content="{x:Static langs:Lang.Register}"/>
+                <controls:StepBarItem Content="{x:Static langs:Lang.BasicInfo}"/>
+                <controls:StepBarItem Content="{x:Static langs:Lang.UploadFile}"/>
+                <controls:StepBarItem Content="{x:Static langs:Lang.Complete}"/>
             </controls:StepBar>
-            <StackPanel Orientation="Horizontal" Margin="0,32,0,0" HorizontalAlignment="Center">
-                <Button Command="interactivity:ControlCommands.Prev" CommandTarget="{Binding ElementName=StepBarMain}" Width="180" Content="{x:Static langs:Lang.Prev}" Style="{StaticResource ButtonPrimary}"/>
-                <Button Command="interactivity:ControlCommands.Next" CommandTarget="{Binding ElementName=StepBarMain}" Width="180" Margin="16,0,0,0" Content="{x:Static langs:Lang.Next}" Style="{StaticResource ButtonPrimary}"/>
+            <StackPanel Margin="0,32" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center">
+                <Button Command="{Binding PrevCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Content="{x:Static langs:Lang.Prev}" Style="{StaticResource ButtonPrimary}"/>
+                <Button Command="{Binding NextCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Margin="0,16,0,0" Content="{x:Static langs:Lang.Next}" Style="{StaticResource ButtonPrimary}"/>
             </StackPanel>
-        </StackPanel>
+            <controls:StepBar Margin="0,0,0,32" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Dock="Bottom">
+                <controls:StepBarItem Content="{x:Static langs:Lang.Register}"/>
+                <controls:StepBarItem Content="{x:Static langs:Lang.BasicInfo}"/>
+                <controls:StepBarItem Content="{x:Static langs:Lang.UploadFile}"/>
+                <controls:StepBarItem Content="{x:Static langs:Lang.Complete}"/>
+            </controls:StepBar>
+            <controls:StepBar Grid.Column="0" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Left">
+                <controls:StepBar.ItemTemplate>
+                    <DataTemplate>
+                        <StackPanel>
+                            <TextBlock Text="{Binding Header}" FontSize="16" FontWeight="Bold" HorizontalAlignment="Left"/>
+                            <TextBlock Margin="0,4,0,0" Text="{Binding Content}"/>
+                        </StackPanel>
+                    </DataTemplate>
+                </controls:StepBar.ItemTemplate>
+            </controls:StepBar>
+            <controls:StepBar Grid.Column="1" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Right">
+                <controls:StepBar.ItemTemplate>
+                    <DataTemplate>
+                        <StackPanel>
+                            <TextBlock Text="{Binding Header}" FontSize="16" FontWeight="Bold" HorizontalAlignment="Left"/>
+                            <TextBlock Margin="0,4,0,0" Text="{Binding Content}"/>
+                        </StackPanel>
+                    </DataTemplate>
+                </controls:StepBar.ItemTemplate>
+            </controls:StepBar>
+        </Grid>
     </controls:TransitioningContentControl>
 </UserControl>

HandyControlDemo/UserControl/Main/LeftMainContent.xaml

@@ -124,12 +124,12 @@
         </TabItem>
         <TabItem Header="{x:Static langs:Lang.Controls}">
             <ListBox BorderThickness="0" SelectionMode="Single">
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
+                <ListBoxItem Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
                     <controls:EdgeElement.LeftContent>
                         <Image Source="../../Resources/Img/LeftMainContent/NumericListBox_16x.png"/>
                     </controls:EdgeElement.LeftContent>
                 </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.TextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
+                <ListBoxItem Tag="{x:Static data:MessageToken.TextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
                     <controls:EdgeElement.LeftContent>
                         <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
                     </controls:EdgeElement.LeftContent>
@@ -154,7 +154,7 @@
                         <Image Source="../../Resources/Img/LeftMainContent/TimePicker_16x.png"/>
                     </controls:EdgeElement.LeftContent>
                 </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.StepBarDemoCtl}" Content="{x:Static langs:Lang.StepBar}">
+                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.StepBarDemoCtl}" Content="{x:Static langs:Lang.StepBar}">
                     <controls:EdgeElement.LeftContent>
                         <Image Source="../../Resources/Img/LeftMainContent/Flow_16x.png"/>
                     </controls:EdgeElement.LeftContent>

HandyControlDemo/ViewModel/StepBarDemoViewModel.cs

@@ -0,0 +1,60 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Windows.Controls;
+using GalaSoft.MvvmLight;
+using GalaSoft.MvvmLight.CommandWpf;
+using HandyControl.Controls;
+using HandyControlDemo.Data;
+using HandyControlDemo.Service;
+
+namespace HandyControlDemo.ViewModel
+{
+    public class StepBarDemoViewModel : ViewModelBase
+    {
+        /// <summary>
+        ///     数据列表
+        /// </summary>
+        private List<StepBarDemoModel> _dataList;
+
+        /// <summary>
+        ///     数据列表
+        /// </summary>
+        public List<StepBarDemoModel> DataList
+        {
+            get => _dataList;
+            set => Set(ref _dataList, value);
+        }
+
+        public StepBarDemoViewModel(DataService dataService)
+        {
+            DataList = dataService.GetStepBarDemoDataList();
+        }
+
+        /// <summary>
+        ///     下一步
+        /// </summary>
+        public RelayCommand<Panel> NextCmd => new Lazy<RelayCommand<Panel>>(() => new RelayCommand<Panel>(Next)).Value;
+
+        /// <summary>
+        ///     上一步
+        /// </summary>
+        public RelayCommand<Panel> PrevCmd => new Lazy<RelayCommand<Panel>>(() => new RelayCommand<Panel>(Prev)).Value;
+
+        private void Next(Panel panel)
+        {
+            foreach (var stepBar in panel.Children.OfType<StepBar>())
+            {
+                stepBar.Next();
+            }
+        }
+
+        private void Prev(Panel panel)
+        {
+            foreach (var stepBar in panel.Children.OfType<StepBar>())
+            {
+                stepBar.Prev();
+            }
+        }
+    }
+}

HandyControlDemo/ViewModel/ViewModelLocator.cs

@@ -20,6 +20,7 @@ namespace HandyControlDemo.ViewModel
             SimpleIoc.Default.Register<ComboBoxDemoViewModel>();
             SimpleIoc.Default.Register<WindowDemoViewModel>();
             SimpleIoc.Default.Register<ContributorsViewModel>();
+            SimpleIoc.Default.Register<StepBarDemoViewModel>();
         }
 
         public static ViewModelLocator Instance => new Lazy<ViewModelLocator>(() =>
@@ -39,6 +40,8 @@ namespace HandyControlDemo.ViewModel
 
         public ContributorsViewModel ContributorsView => ServiceLocator.Current.GetInstance<ContributorsViewModel>();
 
+        public StepBarDemoViewModel StepBarDemo => ServiceLocator.Current.GetInstance<StepBarDemoViewModel>();
+
         #endregion
     }
 }

README.md

@@ -6,15 +6,19 @@
 
 ## Latest examples
 
-### 1、CircleProgressBar
+### 1、Slider
+
+![Slider](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Slider.png)
+
+### 2、CircleProgressBar
 
 ![CircleProgressBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CircleProgressBar.png)
 
-### 2、DataGrid
+### 3、DataGrid
 
 ![DataGrid](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataGrid.png)
 
-### 3、Now you can switch to dark theme
+### 4、Now you can switch to dark theme
 
 ![dark theme](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DarkTheme.png)
 
@@ -72,7 +76,7 @@
 
 ### 13、StepBar
 
-![StepBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/StepBar.gif)
+![StepBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/StepBar.png)
 
 ### 14、Calendar