Add ShowStepIndex Option for StepBar #23

ghost1372 · Jan 17, 2025 · 8036cae · 8036cae
1 parent 596bea7
commit 8036cae
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 5 deletions.
diff --git a/dev/DevWinUI.Controls/Controls/StepBar/StepBar.Property.cs b/dev/DevWinUI.Controls/Controls/StepBar/StepBar.Property.cs
@@ -85,4 +85,22 @@ private static void OnHeaderDisplayModeChanged(DependencyObject d, DependencyPro
             ctl.UpdateHeaderDisplayMode();
         }
     }
+
+    public bool ShowStepIndex
+    {
+        get { return (bool)GetValue(ShowStepIndexProperty); }
+        set { SetValue(ShowStepIndexProperty, value); }
+    }
+
+    public static readonly DependencyProperty ShowStepIndexProperty =
+        DependencyProperty.Register(nameof(ShowStepIndex), typeof(bool), typeof(StepBar), new PropertyMetadata(true, OnShowStepIndexChanged));
+
+    private static void OnShowStepIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var ctl = (StepBar)d;
+        if (ctl != null)
+        {
+            ctl.UpdateItems();
+        }
+    }
 }
diff --git a/dev/DevWinUI.Controls/Controls/StepBar/StepBar.cs b/dev/DevWinUI.Controls/Controls/StepBar/StepBar.cs
@@ -194,6 +194,7 @@ private void UpdateItems()
                 stepBarItem.Orientation = this.Orientation;
                 stepBarItem.HeaderDisplayMode = this.HeaderDisplayMode;
                 stepBarItem.ItemTemplate = ItemTemplate;
+                stepBarItem.ShowStepIndex = ShowStepIndex;
             }
         }
 

diff --git a/dev/DevWinUI.Controls/Controls/StepBar/StepBarItem.cs b/dev/DevWinUI.Controls/Controls/StepBar/StepBarItem.cs
@@ -7,6 +7,15 @@ public partial class StepBarItem : ContentControl
     private ContentPresenter contentPresenter;
     private Border border;
     private StackPanel panel;
+    internal bool ShowStepIndex
+    {
+        get { return (bool)GetValue(ShowStepIndexProperty); }
+        set { SetValue(ShowStepIndexProperty, value); }
+    }
+
+    internal static readonly DependencyProperty ShowStepIndexProperty =
+        DependencyProperty.Register(nameof(ShowStepIndex), typeof(bool), typeof(StepBarItem), new PropertyMetadata(true));
+
     internal DataTemplate ItemTemplate
     {
         get { return (DataTemplate)GetValue(ItemTemplateProperty); }

diff --git a/dev/DevWinUI.Controls/Themes/Generic.xaml b/dev/DevWinUI.Controls/Themes/Generic.xaml
@@ -5825,7 +5825,7 @@ Themes\Styles\Win2D\Watermark.xaml
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
             <Border x:Name="PART_Border" Height="40" MinWidth="40" HorizontalAlignment="Center" Background="{ThemeResource ControlSolidFillColorDefaultBrush}" BorderBrush="{ThemeResource StepBarItemInActiveBorderBrush}" BorderThickness="2" CornerRadius="90">
-              <TextBlock x:Name="PART_Number" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{StaticResource BaseTextBlockStyle}" Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+              <TextBlock x:Name="PART_Number" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{StaticResource BaseTextBlockStyle}" Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding ShowStepIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
             </Border>
             <ContentPresenter x:Name="PART_Content" Margin="0,5,0,0" HorizontalAlignment="Center" ContentTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
           </StackPanel>
@@ -5913,7 +5913,7 @@ Themes\Styles\Win2D\Watermark.xaml
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
             <Border x:Name="PART_Border" Height="40" MinWidth="40" Background="{ThemeResource ControlSolidFillColorDefaultBrush}" BorderBrush="{ThemeResource StepBarItemInActiveBorderBrush}" BorderThickness="2" CornerRadius="90">
-              <TextBlock x:Name="PART_Number" HorizontalAlignment="Center" VerticalAlignment="Center" FlowDirection="LeftToRight" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{StaticResource BaseTextBlockStyle}" Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+              <TextBlock x:Name="PART_Number" HorizontalAlignment="Center" VerticalAlignment="Center" FlowDirection="LeftToRight" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{StaticResource BaseTextBlockStyle}" Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding ShowStepIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
             </Border>
             <ContentPresenter x:Name="PART_Content" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" ContentTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
           </StackPanel>
@@ -7036,6 +7036,7 @@ Themes\Styles\Win2D\Watermark.xaml
     <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalStyle}" />
     <Setter Property="Template" Value="{StaticResource StepBarHorizontalControlTemplate}" />
     <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
+    <Setter Property="ShowStepIndex" Value="True" />
   </Style>
   <Style BasedOn="{StaticResource DefaultDevWinUITextBoxStyle}" TargetType="local:TextBox" />
   <Style BasedOn="{StaticResource DefaultWaveProgressBarStyle}" TargetType="local:WaveProgressBar" />

diff --git a/dev/DevWinUI.Controls/Themes/Styles/Controls/StepBar.xaml b/dev/DevWinUI.Controls/Themes/Styles/Controls/StepBar.xaml
@@ -41,6 +41,7 @@
         <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalStyle}" />
         <Setter Property="Template" Value="{StaticResource StepBarHorizontalControlTemplate}" />
         <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
+        <Setter Property="ShowStepIndex" Value="True" />
     </Style>
 
     <ControlTemplate x:Key="StepBarHorizontalControlTemplate"
@@ -324,7 +325,8 @@
                                        VerticalAlignment="Center"
                                        Foreground="{ThemeResource TextFillColorPrimaryBrush}"
                                        Style="{StaticResource BaseTextBlockStyle}"
-                                       Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                       Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                       Visibility="{Binding ShowStepIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
                         </Border>
                         <ContentPresenter x:Name="PART_Content"
                                           Margin="0,5,0,0"
@@ -460,7 +462,8 @@
                                        FlowDirection="LeftToRight"
                                        Foreground="{ThemeResource TextFillColorPrimaryBrush}"
                                        Style="{StaticResource BaseTextBlockStyle}"
-                                       Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                       Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                       Visibility="{Binding ShowStepIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
                         </Border>
                         <ContentPresenter x:Name="PART_Content"
                                           Margin="5,0,0,0"

diff --git a/dev/DevWinUI.Gallery/Views/Pages/Features/StepBarPage.xaml b/dev/DevWinUI.Gallery/Views/Pages/Features/StepBarPage.xaml
@@ -57,9 +57,13 @@
                             <ComboBoxItem Content="Bottom"
                                           Tag="Bottom" />
                         </ComboBox>
+                        <ToggleSwitch x:Name="TGShowStepIndex"
+                                      Header="Show StepIndex"
+                                      IsOn="True" />
                     </StackPanel>
                 </local:ControlExample.Pane>
-                <dev:StepBar x:Name="StepBarSample">
+                <dev:StepBar x:Name="StepBarSample"
+                             ShowStepIndex="{x:Bind TGShowStepIndex.IsOn, Mode=OneWay}">
                     <dev:StepBarItem Content="Register" />
                     <dev:StepBarItem Content="BasicInfo" />
                     <dev:StepBarItem Content="UploadFile" />