OnlineMonitorSystem/HandyControl/HandyControl_Shared/Themes/Styles/Base/StepBarBaseStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:hc="clr-namespace:HandyControl.Controls">

    <Style x:Key="StepBarItemBaseStyle" TargetType="hc:StepBarItem">
        <Setter Property="Focusable" Value="False"/>
        <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="hc:StepBarItem">
        <Setter Property="Margin" Value="10,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="hc:StepBarItem">
                    <Border Background="Transparent">
                        <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 AncestorType=hc:StepBar}}" TextElement.Foreground="{TemplateBinding Foreground}" Margin="0,4,0,0"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="StepBarItemHorizontalBottom" BasedOn="{StaticResource StepBarItemBaseStyle}" TargetType="hc:StepBarItem">
        <Setter Property="Margin" Value="10,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="hc:StepBarItem">
                    <StackPanel>
                        <ContentPresenter HorizontalAlignment="Center" ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource AncestorType=hc: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="StepBarItemVertical" BasedOn="{StaticResource StepBarItemBaseStyle}" TargetType="hc:StepBarItem">
        <Setter Property="Margin" Value="0, 10"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="hc: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>
                        <ContentPresenter HorizontalAlignment="Left" ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource AncestorType=hc:StepBar}}" TextElement.Foreground="{TemplateBinding Foreground}" Margin="10,4,0,0"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="StepBarHorizontalTopControlTemplate" TargetType="hc:StepBar">
        <hc:SimplePanel>
            <ProgressBar HorizontalAlignment="Center" Name="PART_ProgressBarBack" VerticalAlignment="Top" Margin="0,10,0,0" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}"/>
            <ItemsPresenter/>
        </hc:SimplePanel>
    </ControlTemplate>

    <ControlTemplate x:Key="StepBarHorizontalBottomControlTemplate" TargetType="hc:StepBar">
        <hc:SimplePanel>
            <ProgressBar HorizontalAlignment="Center" Name="PART_ProgressBarBack" VerticalAlignment="Bottom" Margin="0,0,0,10" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}"/>
            <ItemsPresenter VerticalAlignment="Bottom"/>
        </hc:SimplePanel>
    </ControlTemplate>

    <ControlTemplate x:Key="StepBarVerticalControlTemplate" TargetType="hc:StepBar">
        <hc:SimplePanel>
            <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/>
        </hc:SimplePanel>
    </ControlTemplate>

    <Style x:Key="StepBarBaseStyle" TargetType="hc:StepBar">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalTop}"/>
        <Setter Property="Template" Value="{StaticResource StepBarHorizontalTopControlTemplate}"/>
        <Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}"/>
        <Style.Triggers>
            <Trigger Property="Dock" Value="Left">
                <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVertical}"/>
                <Setter Property="Template" Value="{StaticResource StepBarVerticalControlTemplate}"/>
                <Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}"/>
            </Trigger>
            <Trigger Property="Dock" Value="Bottom">
                <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalBottom}"/>
                <Setter Property="Template" Value="{StaticResource StepBarHorizontalBottomControlTemplate}"/>
                <Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}"/>
            </Trigger>
            <Trigger Property="Dock" Value="Right">
                <Setter Property="FlowDirection" Value="RightToLeft"/>
                <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVertical}"/>
                <Setter Property="Template" Value="{StaticResource StepBarVerticalControlTemplate}"/>
                <Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>