ShrlAlgoToolkit/Melskin/Controls/StepBar.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Melskin.Controls">
    <Style TargetType="{x:Type local:StepBarItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Cursor" Value="Hand" />
        <!--  添加手型光标  -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:StepBarItem}">
                    <!--  使用透明背景的 Grid 扩大点击区域  -->
                    <Grid
                        x:Name="Root"
                        Margin="2"
                        Background="Transparent">
                        <StackPanel x:Name="Container" Orientation="{TemplateBinding Orientation}">
                            <Grid>
                                <Ellipse
                                    x:Name="Node"
                                    Width="28"
                                    Height="28"
                                    Fill="#222"
                                    Stroke="{DynamicResource TextSecondaryBrush}"
                                    StrokeThickness="2" />
                                <TextBlock
                                    x:Name="IndexText"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="White"
                                    Text="{TemplateBinding Index}" />
                                <Path
                                    x:Name="CheckMark"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Data="M2,5 L5,8 L10,2"
                                    Stroke="White"
                                    StrokeThickness="2"
                                    Visibility="Collapsed" />
                            </Grid>
                            <ContentPresenter Margin="8,4" VerticalAlignment="Center" />
                            <Rectangle
                                x:Name="Line"
                                Margin="4"
                                Fill="{DynamicResource TextSecondaryBrush}" />
                        </StackPanel>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Status" Value="Completed">
                            <Setter TargetName="Node" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
                            <Setter TargetName="Node" Property="Stroke" Value="{DynamicResource PrimaryNormalBrush}" />
                            <Setter TargetName="IndexText" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="CheckMark" Property="Visibility" Value="Visible" />
                            <Setter TargetName="Line" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
                            <!--  添加一个小动画  -->
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="CheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            From="0"
                                            To="1"
                                            Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="Orientation" Value="Horizontal">
                            <Setter TargetName="Line" Property="Width" Value="40" />
                            <Setter TargetName="Line" Property="Height" Value="2" />
                            <Setter TargetName="Line" Property="VerticalAlignment" Value="Center" />
                            <Setter TargetName="Node" Property="VerticalAlignment" Value="Center" />
                        </Trigger>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter TargetName="Line" Property="Width" Value="2" />
                            <Setter TargetName="Line" Property="Height" Value="30" />
                            <Setter TargetName="Line" Property="HorizontalAlignment" Value="Center" />
                            <Setter TargetName="Node" Property="HorizontalAlignment" Value="Center" />
                        </Trigger>
                        <Trigger Property="Status" Value="Active">
                            <Setter TargetName="Node" Property="Stroke" Value="{DynamicResource PrimaryNormalBrush}" />
                            <Setter TargetName="IndexText" Property="Foreground" Value="{DynamicResource PrimaryNormalBrush}" />
                        </Trigger>
                        <Trigger Property="Status" Value="Completed">
                            <Setter TargetName="Node" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
                            <Setter TargetName="Node" Property="Stroke" Value="{DynamicResource PrimaryNormalBrush}" />
                            <Setter TargetName="IndexText" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="CheckMark" Property="Visibility" Value="Visible" />
                            <Setter TargetName="Line" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
                        </Trigger>
                        <Trigger Property="IsLast" Value="True">
                            <Setter TargetName="Line" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  StepBar Style  -->
    <Style TargetType="{x:Type local:StepBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:StepBar}">
                    <ItemsPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <!--  通过绑定方向来切换面板  -->
                    <StackPanel Orientation="{Binding Orientation, RelativeSource={RelativeSource AncestorType=local:StepBar}}" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>