improve stepbar

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
     }
 }