原文:WPF教程002 - 实现Step步骤条控件

在网上看到这么一个效果，刚好在用WPF做控件，就想着用WPF来实现一下

1、实现原理

1.1、该控件分为2个模块，类似ComboBox控件分为StepBar和StepBarItem
1.2、StepBarItem定义一个Number依赖属性，用来实现每个节点上显示的步骤编号
1.3、StepBar定义一个Progress依赖属性，用来标识该控件走到了第几步，之外可以根据Progress属性与当前Item的Index来进行比较，来实现当控件进入到不同进度时，各个Item节点的样式

2、控件实现

StepBar类似ComboBox控件，但与ComboBox不同的是，由于控件本身并不需要选中，因此直接继承自ItemsControl，而不是ListBox。StepBarItem继承自ContentControl
2.1、新增StepBar、StepBarItem，分别继承自ItemsControl与ContentControl
  1. public class StepBar : ItemsControl
    2. 

  2. {
    3. 

    4. 

  4. 	#region Constructors
    5. 

  5. 	static StepBar()
    6. 

  6. 	{
    7. 

  7. 		DefaultStyleKeyProperty.OverrideMetadata(typeof(StepBar), new FrameworkPropertyMetadata(typeof(StepBar)));
    8. 

  8. 	}
    9. 

  9. 	#endregion
    10. 

  10. }


  1. public class StepBarItem : ContentControl
    2. 

  2. {
    3. 

  3. 	#region Constructors
    4. 

  4. 	static StepBarItem()
    5. 

  5. 	{
    6. 

  6. 		DefaultStyleKeyProperty.OverrideMetadata(typeof(StepBarItem), new FrameworkPropertyMetadata(typeof(StepBarItem)));
    7. 

  7. 	}
    8. 

  8. 	#endregion
    9. 

  9. }
2、2、在Generic.xaml资源文件中定义这两个控件的基本样式
首先讲下大概的布局思路，StepBar比较简单，就是使用UniformGrid布局，然后设置Rows="1"，这样所有的StepBarItem就会在一行显示，并且平分一行大小，否则UniformGrid默认一行是只显示2个的，重点是在StepBarItem的布局上面。
首先将文字和那根横线进行拆分，分为2列，文字那列根据内容自适应，横线则填充，因此每个StepBarItem由两部分组成：文字+横线。但是这样会有个问题，前面几个Item都会很正常的显示，但一到最后一个Item的时候，就会多出来右边的那根横线，那怎么去掉呢。我这边参照网上的思路，使用了Converter转换器，将每个Item作为参数传入转换器中，判断Item的Index与整个空间的Items.Count进行比较，如果当前的Index和Items的最后一个相等，那么久将最后一个Item的右边的那根横线给隐藏，这样就能达到文章一开始的那个效果。
  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    2. 

  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    3. 

  3.                     xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
    4. 

  4.                     xmlns:ZUI="clr-namespace:ZdfFlatUI"
    5. 

  5.                     xmlns:Converters="clr-namespace:ZdfFlatUI.Converters">
    6. 

    7. 

  7.     <Converters:IsLastItemConverter x:Key="IsLastItemConverter" />
    8. 

  8.     <Converters:IsProgressedConverter x:Key="IsProgressedConverter" />
    9. 

    10. 

  10.     <PathGeometry x:Key="Icon_Gou" Figures="M378.410667 850.450963C364.491852 850.450963 350.610963 845.293037 340.02963 834.939259L20.920889 523.529481C-0.279704 502.821926-0.279704 469.295407 20.920889 448.587852 42.121481 427.880296 76.48237 427.880296 97.682963 448.587852L378.410667 722.526815 925.75763 188.491852C946.958222 167.784296 981.319111 167.784296 1002.519704 188.491852 1023.720296 209.161481 1023.720296 242.688 1002.519704 263.395556L416.791704 834.939259C406.172444 845.293037 392.291556 850.450963 378.410667 850.450963L378.410667 850.450963Z" />
    11. 

    12. 

  12.     <Style TargetType="{x:Type ZUI:StepBarItem}">
    13. 

  13.         <Setter Property="FontWeight" Value="Bold" />
    14. 

  14.         <Setter Property="FontSize" Value="14" />
    15. 

  15.         <Setter Property="FontFamily" Value="宋体" />
    16. 

  16.         <Setter Property="Template">
    17. 

  17.             <Setter.Value>
    18. 

  18.                 <ControlTemplate TargetType="{x:Type ZUI:StepBarItem}">
    19. 

  19.                     <Grid>
    20. 

  20.                         <Grid.ColumnDefinitions>
    21. 

  21.                             <ColumnDefinition Width="auto" />
    22. 

  22.                             <ColumnDefinition Width="*" />
    23. 

  23.                         </Grid.ColumnDefinitions>
    24. 

  24.                         <StackPanel Orientation="Horizontal">
    25. 

  25.                             <Grid Margin="0,0,10,0">
    26. 

  26.                                 <Border x:Name="Bd" BorderBrush="#CCCCCC" Width="25" Height="25" CornerRadius="100" 
    27. 

  27.                                         BorderThickness="1" SnapsToDevicePixels="True" UseLayoutRounding="True">
    28. 

  28.                                 </Border>
    29. 

  29.                                 <TextBlock x:Name="Number" Text="{TemplateBinding Number}"
    30. 

  30.                                            HorizontalAlignment="Center" VerticalAlignment="Center" />
    31. 

  31.                                 <Path x:Name="path" Data="{StaticResource Icon_Gou}" Stretch="Uniform" Width="12" Fill="#3399FF" Visibility="Collapsed" />
    32. 

  32.                             </Grid>
    33. 

  33.                             <ContentPresenter VerticalAlignment="Center" />
    34. 

  34.                             
    35. 

  35.                         </StackPanel>
    36. 

  36.                         <Border x:Name="Line" Grid.Column="1" BorderBrush="#E3E8EE" BorderThickness="0,1,0,0" 
    37. 

  37.                                 VerticalAlignment="Center" Margin="10,0"
    38. 

  38.                                 SnapsToDevicePixels="True" UseLayoutRounding="True" />
    39. 

  39.                     </Grid>
    40. 

  40.                     <ControlTemplate.Triggers>
    41. 

  41.                         <DataTrigger Value="True">
    42. 

  42.                             <DataTrigger.Binding>
    43. 

  43.                                 <MultiBinding Converter="{StaticResource IsLastItemConverter}">
    44. 

  44.                                     <Binding RelativeSource="{RelativeSource Self}" />
    45. 

  45.                                     <Binding RelativeSource="{RelativeSource AncestorType={x:Type ZUI:StepBar}}" Path="Items.Count"/>
    46. 

  46.                                 </MultiBinding>
    47. 

  47.                             </DataTrigger.Binding>
    48. 

  48.                             <Setter TargetName="Line" Property="Visibility" Value="Collapsed" />
    49. 

  49.                         </DataTrigger>
    50. 

  50.                         <DataTrigger Value="False">
    51. 

  51.                             <DataTrigger.Binding>
    52. 

  52.                                 <MultiBinding Converter="{StaticResource IsLastItemConverter}">
    53. 

  53.                                     <Binding RelativeSource="{RelativeSource Self}" />
    54. 

  54.                                     <Binding RelativeSource="{RelativeSource AncestorType={x:Type ZUI:StepBar}}" Path="Items.Count"/>
    55. 

  55.                                 </MultiBinding>
    56. 

  56.                             </DataTrigger.Binding>
    57. 

  57.                             <Setter TargetName="Line" Property="Visibility" Value="Visible" />
    58. 

  58.                         </DataTrigger>
    59. 

  59.                         <DataTrigger Value="Less">
    60. 

  60.                             <DataTrigger.Binding>
    61. 

  61.                                 <MultiBinding Converter="{StaticResource IsProgressedConverter}">
    62. 

  62.                                     <Binding RelativeSource="{RelativeSource Self}" />
    63. 

  63.                                     <Binding RelativeSource="{RelativeSource AncestorType={x:Type ZUI:StepBar}}" Path="Progress"/>
    64. 

  64.                                 </MultiBinding>
    65. 

  65.                             </DataTrigger.Binding>
    66. 

  66.                             <Setter TargetName="Bd" Property="Background" Value="#003399FF" />
    67. 

  67.                             <Setter TargetName="Bd" Property="BorderBrush" Value="#3399FF" />
    68. 

  68.                             <Setter TargetName="Number" Property="Visibility" Value="Collapsed" />
    69. 

  69.                             <Setter TargetName="Line" Property="BorderBrush" Value="#3399FF" />
    70. 

  70.                             <Setter TargetName="path" Property="Visibility" Value="Visible" />
    71. 

  71.                             <Setter Property="Foreground" Value="#999999" />
    72. 

  72.                         </DataTrigger>
    73. 

  73.                         <DataTrigger Value="Equal">
    74. 

  74.                             <DataTrigger.Binding>
    75. 

  75.                                 <MultiBinding Converter="{StaticResource IsProgressedConverter}">
    76. 

  76.                                     <Binding RelativeSource="{RelativeSource Self}" />
    77. 

  77.                                     <Binding RelativeSource="{RelativeSource AncestorType={x:Type ZUI:StepBar}}" Path="Progress"/>
    78. 

  78.                                 </MultiBinding>
    79. 

  79.                             </DataTrigger.Binding>
    80. 

  80.                             <Setter TargetName="Bd" Property="Background" Value="#3399FF" />
    81. 

  81.                             <Setter TargetName="Bd" Property="BorderBrush" Value="#3399FF" />
    82. 

  82.                             <Setter TargetName="Number" Property="Visibility" Value="Visible" />
    83. 

  83.                             <Setter TargetName="Number" Property="Foreground" Value="#FFFFFF" />
    84. 

  84.                             <Setter TargetName="path" Property="Visibility" Value="Collapsed" />
    85. 

  85.                             <Setter Property="Foreground" Value="#666666" />
    86. 

  86.                         </DataTrigger>
    87. 

  87.                         <DataTrigger Value="Large">
    88. 

  88.                             <DataTrigger.Binding>
    89. 

  89.                                 <MultiBinding Converter="{StaticResource IsProgressedConverter}">
    90. 

  90.                                     <Binding RelativeSource="{RelativeSource Self}" />
    91. 

  91.                                     <Binding RelativeSource="{RelativeSource AncestorType={x:Type ZUI:StepBar}}" Path="Progress"/>
    92. 

  92.                                 </MultiBinding>
    93. 

  93.                             </DataTrigger.Binding>
    94. 

  94.                             <Setter Property="Foreground" Value="#999999" />
    95. 

  95.                         </DataTrigger>
    96. 

  96.                     </ControlTemplate.Triggers>
    97. 

  97.                 </ControlTemplate>
    98. 

  98.             </Setter.Value>
    99. 

  99.         </Setter>
    100. 

  100.     </Style>
    101. 

  101.     
    102. 

  102.     <Style TargetType="{x:Type ZUI:StepBar}">
    103. 

  103.         <Setter Property="Template">
    104. 

  104.             <Setter.Value>
    105. 

  105.                 <ControlTemplate TargetType="{x:Type ZUI:StepBar}">
    106. 

  106.                     <Border>
    107. 

  107.                         <ItemsPresenter />
    108. 

  108.                     </Border>
    109. 

  109.                 </ControlTemplate>
    110. 

  110.             </Setter.Value>
    111. 

  111.         </Setter>
    112. 

  112.         <Setter Property="ItemsPanel">
    113. 

  113.             <Setter.Value>
    114. 

  114.                 <ItemsPanelTemplate>
    115. 

  115.                     <UniformGrid IsItemsHost="True" Rows="1" />
    116. 

  116.                 </ItemsPanelTemplate>
    117. 

  117.             </Setter.Value>
    118. 

  118.         </Setter>
    119. 

  119.     </Style>
    120. 

  120. </ResourceDictionary>
这里有个地方需要注意一下：我在 IsLastItemConverter 转换器中同时传入了Items.Count，但是转换器中又没用到这个参数，是因为什么呢？因为在StepBar可能会在中途Add或者Remove一个Item，这样就可以动态的设置倒数第二个本来已经隐藏的横线为Visible，而不至于Add一个Item后，后面几个Item右边的横线都不显示。

2.3、新增两个转换器：IsProgressedConverter（进度转换器）和IsLastItemConverter（是否是最后一个Item）
IsProgressedConverter
  1. using System;
    2. 

  2. using System.Collections.Generic;
    3. 

  3. using System.Linq;
    4. 

  4. using System.Text;
    5. 

  5. using System.Windows;
    6. 

  6. using System.Windows.Controls;
    7. 

  7. using System.Windows.Data;
    8. 

    9. 

  9. namespace ZdfFlatUI.Converters
    10. 

  10. {
    11. 

  11.     public class IsProgressedConverter : IMultiValueConverter
    12. 

  12.     {
    13. 

  13.         public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    14. 

  14.         {
    15. 

  15.             if ((values[0] is ContentControl && values[1] is int) == false)
    16. 

  16.             {
    17. 

  17.                 return EnumCompare.None;
    18. 

  18.             }
    19. 

    20. 

  20.             ContentControl contentControl = values[0] as ContentControl;
    21. 

  21.             int progress = (int)values[1];
    22. 

  22.             ItemsControl itemsControl = ItemsControl.ItemsControlFromItemContainer(contentControl);
    23. 

    24. 

  24.             if(itemsControl == null)
    25. 

  25.             {
    26. 

  26.                 return EnumCompare.None;
    27. 

  27.             }
    28. 

    29. 

  29.             int index = itemsControl.ItemContainerGenerator.IndexFromContainer(contentControl);
    30. 

  30.             
    31. 

  31.             if(index < progress)
    32. 

  32.             {
    33. 

  33.                 return EnumCompare.Less;
    34. 

  34.             }
    35. 

  35.             else if(index == progress)
    36. 

  36.             {
    37. 

  37.                 return EnumCompare.Equal;
    38. 

  38.             }
    39. 

  39.             return EnumCompare.Large;
    40. 

  40.         }
    41. 

  41.         public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    42. 

  42.         {
    43. 

  43.             throw new NotSupportedException();
    44. 

  44.         }
    45. 

  45.     }
    46. 

  46. }
IsLastItemConverter
  1. using System;
    2. 

  2. using System.Collections.Generic;
    3. 

  3. using System.Linq;
    4. 

  4. using System.Text;
    5. 

  5. using System.Windows;
    6. 

  6. using System.Windows.Controls;
    7. 

  7. using System.Windows.Data;
    8. 

    9. 

  9. namespace ZdfFlatUI.Converters
    10. 

  10. {
    11. 

  11.     /// <summary>
    12. 

  12.     /// true则隐藏，false则显示
    13. 

  13.     /// </summary>
    14. 

  14.     public class IsLastItemConverter : IMultiValueConverter
    15. 

  15.     {
    16. 

  16.         #region IValueConverter 成员
    17. 

    18. 

  18.         public object Convert(object[] value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    19. 

  19.         {
    20. 

  20.             ContentControl contentPresenter = value[0] as ContentControl;
    21. 

  21.             ItemsControl itemsControl = ItemsControl.ItemsControlFromItemContainer(contentPresenter);
    22. 

    23. 

  23.             bool flag = false;
    24. 

  24.             if(itemsControl != null)
    25. 

  25.             {
    26. 

  26.                 int index = itemsControl.ItemContainerGenerator.IndexFromContainer(contentPresenter);
    27. 

  27.                 flag = (index == (itemsControl.Items.Count - 1));
    28. 

  28.             }
    29. 

    30. 

  30.             return flag;
    31. 

  31.         }
    32. 

  32.         public object[] ConvertBack(object value, Type[] targetType, object parameter, System.Globalization.CultureInfo culture)
    33. 

  33.         {
    34. 

  34.             return null;
    35. 

  35.         }
    36. 

  36.         #endregion
    37. 

  37.     }
    38. 

  38. }
2.4、在StepBar和StepBarItem分别新增Progress、Number依赖属性，具体的看代码，就不解释了
StepBar
  1. using System;
    2. 

  2. using System.Collections;
    3. 

  3. using System.Collections.Generic;
    4. 

  4. using System.Collections.Specialized;
    5. 

  5. using System.Linq;
    6. 

  6. using System.Text;
    7. 

  7. using System.Windows;
    8. 

  8. using System.Windows.Controls;
    9. 

    10. 

  10. namespace ZdfFlatUI
    11. 

  11. {
    12. 

  12.     public class StepBar : ItemsControl
    13. 

  13.     {
    14. 

  14.         #region Private属性
    15. 

    16. 

  16.         #endregion
    17. 

    18. 

  18.         #region 依赖属性定义
    19. 

  19.         public int Progress
    20. 

  20.         {
    21. 

  21.             get { return (int)GetValue(ProgressProperty); }
    22. 

  22.             set { SetValue(ProgressProperty, value); }
    23. 

  23.         }
    24. 

  24.         
    25. 

  25.         public static readonly DependencyProperty ProgressProperty =
    26. 

  26.             DependencyProperty.Register("Progress", typeof(int), typeof(StepBar), new PropertyMetadata(0, OnProgressChangedCallback, OnProgressCoerceValueCallback));
    27. 

    28. 

  28.         private static object OnProgressCoerceValueCallback(DependencyObject d, object baseValue)
    29. 

  29.         {
    30. 

  30.             //不让Progress超出边界
    31. 

  31.             StepBar stepBar = d as StepBar;
    32. 

  32.             int newValue = Convert.ToInt32(baseValue);
    33. 

  33.             if (newValue < 0)
    34. 

  34.             {
    35. 

  35.                 return 0;
    36. 

  36.             }
    37. 

  37.             else if(newValue >= stepBar.Items.Count)
    38. 

  38.             {
    39. 

  39.                 return stepBar.Items.Count - 1;
    40. 

  40.             }
    41. 

  41.             return newValue;
    42. 

  42.         }
    43. 

    44. 

  44.         private static void OnProgressChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    45. 

  45.         {
    46. 

  46.             
    47. 

  47.         }
    48. 

    49. 

    50. 

  50.         #endregion
    51. 

    52. 

  52.         #region 依赖属性set get
    53. 

    54. 

  54.         #endregion
    55. 

    56. 

  56.         #region Constructors
    57. 

  57.         static StepBar()
    58. 

  58.         {
    59. 

  59.             DefaultStyleKeyProperty.OverrideMetadata(typeof(StepBar), new FrameworkPropertyMetadata(typeof(StepBar)));
    60. 

  60.         }
    61. 

  61.         #endregion
    62. 

    63. 

  63.         #region Override方法
    64. 

  64.         protected override DependencyObject GetContainerForItemOverride()
    65. 

  65.         {
    66. 

  66.             return new StepBarItem();
    67. 

  67.         }
    68. 

    69. 

  69.         protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    70. 

  70.         {
    71. 

  71.             //设置Item的显示数字
    72. 

  72.             StepBarItem stepBarItem = element as StepBarItem;
    73. 

  73.             ItemsControl itemsControl = ItemsControl.ItemsControlFromItemContainer(stepBarItem);
    74. 

  74.             int index = itemsControl.ItemContainerGenerator.IndexFromContainer(stepBarItem);
    75. 

  75.             stepBarItem.Number = Convert.ToString(++index);
    76. 

  76.             base.PrepareContainerForItemOverride(element, item);
    77. 

  77.         }
    78. 

    79. 

  79.         protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
    80. 

  80.         {
    81. 

  81.             base.OnItemsChanged(e);
    82. 

    83. 

  83.             //ItemsControl数量变化时，重新设置各个Item的显示的数字
    84. 

  84.             for (int i = 0; i < this.Items.Count; i++)
    85. 

  85.             {
    86. 

  86.                 StepBarItem stepBarItem = this.ItemContainerGenerator.ContainerFromIndex(i) as StepBarItem;
    87. 

  87.                 if(stepBarItem != null)
    88. 

  88.                 {
    89. 

  89.                     int temp = i;
    90. 

  90.                     stepBarItem.Number = Convert.ToString(++temp);
    91. 

  91.                 }
    92. 

  92.             }
    93. 

  93.             //进度重新回到第一个
    94. 

  94.             this.Progress = 0;
    95. 

  95.         }
    96. 

  96.         #endregion
    97. 

    98. 

  98.         #region Private方法
    99. 

    100. 

  100.         #endregion
    101. 

  101.     }
    102. 

  102. }
StepBarItem
  1. using System;
    2. 

  2. using System.Collections.Generic;
    3. 

  3. using System.Linq;
    4. 

  4. using System.Text;
    5. 

  5. using System.Windows;
    6. 

  6. using System.Windows.Controls;
    7. 

    8. 

  8. namespace ZdfFlatUI
    9. 

  9. {
    10. 

  10.     public class StepBarItem : ContentControl
    11. 

  11.     {
    12. 

  12.         #region Private属性
    13. 

    14. 

  14.         #endregion
    15. 

    16. 

  16.         #region 依赖属性定义
    17. 

  17.         public string Number
    18. 

  18.         {
    19. 

  19.             get { return (string)GetValue(NumberProperty); }
    20. 

  20.             set { SetValue(NumberProperty, value); }
    21. 

  21.         }
    22. 

    23. 

  23.         public static readonly DependencyProperty NumberProperty =
    24. 

  24.             DependencyProperty.Register("Number", typeof(string), typeof(StepBarItem));
    25. 

  25.         #endregion
    26. 

    27. 

  27.         #region 依赖属性set get
    28. 

    29. 

  29.         #endregion
    30. 

    31. 

  31.         #region Constructors
    32. 

  32.         static StepBarItem()
    33. 

  33.         {
    34. 

  34.             DefaultStyleKeyProperty.OverrideMetadata(typeof(StepBarItem), new FrameworkPropertyMetadata(typeof(StepBarItem)));
    35. 

  35.         }
    36. 

  36.         #endregion
    37. 

    38. 

  38.         #region Override方法
    39. 

  39.         #endregion
    40. 

    41. 

  41.         #region Private方法
    42. 

    43. 

  43.         #endregion
    44. 

  44.     }
    45. 

  45. }

3、控件的具体使用

  1. <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
    2. 

  2. 	<TextBlock x:Name="text" Text="{Binding ., StringFormat=当前正在进行 {0} 步}" Foreground="#957180" FontSize="14" Margin="0,0,0,20" />
    3. 

    4. 

  4. 	<WPF.UI:StepBar x:Name="stepBar1" Width="900" Margin="0,20,0,0" />
    5. 

    6. 

  6. 	<StackPanel Orientation="Horizontal">
    7. 

  7. 		<WPF.UI:FlatButton Width="70" Height="28" CornerRadius="3" Click="FlatButton_Click1" Content="Previous" Margin="10,20" />
    8. 

  8. 		<WPF.UI:FlatButton Width="70" Height="28" CornerRadius="3" Click="FlatButton_Click" Content="Next" Margin="10,10" />
    9. 

  9. 		<WPF.UI:FlatButton Width="70" Height="28" CornerRadius="3" Click="btn_AddItem" Content="Add" Margin="10,10" />
    10. 

  10. 		<WPF.UI:FlatButton Width="70" Height="28" CornerRadius="3" Click="btn_RemoveItem" Content="Remove" Margin="10,10" />
    11. 

  11. 	</StackPanel>
    12. 

  12. </StackPanel>


  1. public partial class UCTStepBarTest : UserControl
    2. 

  2. {
    3. 

  3. 	private int _Step;
    4. 

    5. 

  5. 	public int Step
    6. 

  6. 	{
    7. 

  7. 		get
    8. 

  8. 		{
    9. 

  9. 			int temp = this.stepBar.Progress;
    10. 

  10. 			return ++temp;
    11. 

  11. 		}
    12. 

  12. 	}
    13. 

    14. 

  14. 	ObservableCollection<string> list = new ObservableCollection<string>();
    15. 

  15. 	public UCTStepBarTest()
    16. 

  16. 	{
    17. 

  17. 		InitializeComponent();
    18. 

    19. 

  19. 		
    20. 

  20. 		list.Add("已完成");
    21. 

  21. 		list.Add("进行中");
    22. 

  22. 		list.Add("已完成");
    23. 

  23. 		list.Add("进行中");
    24. 

    25. 

  25. 		this.stepBar1.ItemsSource = list;
    26. 

  26. 		this.text.DataContext = Step;
    27. 

  27. 	}
    28. 

    29. 

  29. 	private void FlatButton_Click(object sender, RoutedEventArgs e)
    30. 

  30. 	{
    31. 

  31. 		this.stepBar1.Progress++;
    32. 

  32. 		this.text.DataContext = Step;
    33. 

  33. 	}
    34. 

    35. 

  35. 	private void FlatButton_Click1(object sender, RoutedEventArgs e)
    36. 

  36. 	{
    37. 

  37. 		this.stepBar1.Progress--;
    38. 

  38. 		this.text.DataContext = Step;
    39. 

  39. 	}
    40. 

    41. 

  41. 	private void btn_AddItem(object sender, RoutedEventArgs e)
    42. 

  42. 	{
    43. 

  43. 		list.Add("进行中");
    44. 

  44. 	}
    45. 

    46. 

  46. 	private void btn_RemoveItem(object sender, RoutedEventArgs e)
    47. 

  47. 	{
    48. 

  48. 		list.RemoveAt(0);
    49. 

  49. 		this.text.DataContext = Step;
    50. 

  50. 	}
    51. 

  51. }

最终的效果图如下：
 最后仍然是没有达到一开始的那个效果，我设想的是文字部分应该是可以使用DataTemplate模板自定义的，但是文字详细描述那部分和横线的部分不太好布局，目前想不到该怎么去布局，思维受限了，先搁置等到后面看能不能找到合适的解决方法。

















WPF教程002 - 实现Step步骤条控件的更多相关文章

  1. C#开发step步骤条控件

    现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...

  2. WPF-自定义实现步骤条控件

    步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthCo ...

  3. Photoshop和WPF双剑配合，打造炫酷个性的进度条控件

    现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或 ...

  4. 示例：WPF中Slider控件封装的缓冲播放进度条控件

    原文:示例:WPF中Slider控件封装的缓冲播放进度条控件 一.目的:模仿播放器播放进度条,支持缓冲任务功能 二.进度: 实现类似播放器中带缓存的播放样式(播放区域.缓冲区域.全部区域等样式) 实现 ...

  5. DevExpress的进度条控件ProgressBarControl的使用-以ZedGraph添加曲线进度为例

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  6. WPF中嵌入WinForm中的webbrowser控件

    原文:WPF中嵌入WinForm中的webbrowser控件 使用VS2008创建WPF应用程序,需使用webbrowser.从工具箱中添加WPF组件中的webbrowser发现其中有很多属性事件不能 ...

  7. HslControls组件库 工业控件库 曲线控件 时间控件 管道控件 温度计控件 阀门控件 传送带控件 进度条控件 电池控件 数码管控件等等

    本篇博客主要对 HslControls 组件做一个大概的总览介绍,更详细的内容可以参照页面里的子链接,还有github上的源代码,然后进行相关的学习,和使用. Prepare 先从nuget下载到组件 ...

  8. WPF 构建无外观（Lookless）控件

    原文:WPF 构建无外观(Lookless)控件 构建一个用户可以使用Template属性设置外观的WPF控件需要以下几步 1.继承自System.Windows.Controls.Control 2 ...

  9. WPF中自定义的DataTemplate中的控件，在Window_Loaded事件中加载机制初探

    原文:WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探         最近因为项目需要,开始学习如何使用WPF开发桌面程序.使用WPF一段时间之后,感 ...

随机推荐

  1. System.ComponentModel.Win32Exception (0x80004005)：拒绝访问。——解决办法

    一.问题如下: (无法执行程序.所执行的命令为 "C:\Windows\Microsoft.NET\Framework64\v4.0.30319\csc.exe" /noconfi ...

  2. 该扩展程序未列在 Chrome 网上应用店中，并可能是在您不知情的情况下添加的

    ＂chrome扩展程序无法启用＂的解决方案 http://www.cnplugins.com/tool/installpluginfix.html win10家庭版没有组策略怎么办? https:// ...

  3. （四）RabbitMQ消息队列-服务详细配置与日常监控管理

    原文:(四)RabbitMQ消息队列-服务详细配置与日常监控管理 RabbitMQ服务管理 启动服务:rabbitmq-server -detached[ /usr/local/rabbitmq/sb ...

  4. 中小研发团队架构实践之分布式协调器.Net版ZooKeeper

    原文:中小研发团队架构实践之分布式协调器.Net版ZooKeeper 一.ZooKeeper是什么  Apache ZooKeeper是由Apache Hadoop的子项目发展而来,于2010年11月 ...

  5. php 根据给定的年份和月份获取该年份该月份的起始和结束时间

    function getShiJianChuo($nian=0,$yue=0){ if(empty($nian) || empty($yue)){ $now = time(); $nian = dat ...

  6. Centos6.5 网络配置

    网络配置 本教程配置说明 以下为本教程安装时的配置,用户依据实际情况进行调整 * 在root用户权限下安装下完毕 * IP地址设置为 10.10.108.160 * 本机DNS设置为 8.8.8.8 ...

  7. JavaMail| JavaMail配置属性

    属性名 含义 mail.smtp.user SMTP的缺省用户名. mail.smtp.host 要连接的SMTP服务器. mail.smtp.port 要连接的SMTP服务器的端口号,如果conne ...

  8. [tmux] Copy and paste text from a tmux session

    One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also ...

  9. PPT之SmartArt功能

    在PPT中,我们经常看到这样的漂亮的组合图标: 他们是怎么做出来的呢?其实用ppt自带的SmartArt功能就能做出来了. Tips:SmartArt可以直接先选择组合图标再填文字,还可以写好了文字, ...

  10. centos7环境下mysql5.7的安装与配置（免安装版）

    最近无事闲来折腾虚拟机,以前都是折腾云服务器,现在自己捣捣.看到mysql的教程蛮好的,准备做个笔记.原文来自mysql5.7的安装与配置(centos7环境) 第一步:下载mysql ? 1 [ro ...