StepBar 步骤条

引导用户按照流程完成任务的分步导航条.

1
2
3
4
[StyleTypedProperty(Property = "ItemContainerStyle", StyleTargetType = typeof(StepBarItem))]
[DefaultEvent("StepChanged")]
[TemplatePart(Name = ElementProgressBarBack, Type = typeof(ProgressBar))]
public class StepBar : ItemsControl

属性

属性 描述 默认值 备注
StepIndex 当前步骤序号 0
Dock 步骤条顶靠方式 Dock.Top

方法

名称 说明
Next( ) 跳转到下一步
Prev( ) 跳转到上一步

事件

名称 说明
StepChanged 步骤改变时触发

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<Grid Margin="32">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <hc:StepBar Grid.ColumnSpan="2" StepIndex="{Binding StepIndex}">
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Register}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.BasicInfo}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.UploadFile}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Complete}}"/>
    </hc:StepBar>
    <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="{ex:Lang Key={x:Static langs:LangKeys.Prev}}" Style="{StaticResource ButtonPrimary}"/>
        <Button Command="{Binding NextCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Margin="0,16,0,0" Content="{ex:Lang Key={x:Static langs:LangKeys.Next}}" Style="{StaticResource ButtonPrimary}"/>
    </StackPanel>
    <hc:StepBar Margin="0,0,0,32" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Dock="Bottom">
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Register}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.BasicInfo}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.UploadFile}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Complete}}"/>
    </hc:StepBar>
    <hc:StepBar Grid.Column="0" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Left">
        <hc:StepBar.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Left">
                        <Run Text="{ex:Lang Key={Binding Header}}"/>
                        <Run Text="{Binding Index,RelativeSource={RelativeSource AncestorType=hc:StepBarItem}}"/>
                    </TextBlock>
                    <TextBlock Margin="0,4,0,0" Text="{ex:Lang Key={Binding Content}}"/>
                </StackPanel>
            </DataTemplate>
        </hc:StepBar.ItemTemplate>
    </hc:StepBar>
    <hc:StepBar Grid.Column="1" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Right">
        <hc:StepBar.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Left">
                        <Run Text="{ex:Lang Key={Binding Header}}"/>
                        <Run Text="{Binding Index,RelativeSource={RelativeSource AncestorType=hc:StepBarItem}}"/>
                    </TextBlock>
                    <TextBlock Margin="0,4,0,0" Text="{ex:Lang Key={Binding Content}}"/>
                </StackPanel>
            </DataTemplate>
        </hc:StepBar.ItemTemplate>
    </hc:StepBar>
</Grid>

StepBar