WPF- custom implementation step bar control

Original: WPF - Custom implementation steps bar control

Article Step effect achieved:

Step bar control is implemented on the basis of the listbox.

One,

Code xaml:

  <Window.Resources>
        <convert1:StepListBarWidthConverter x:Key="StepListStepWidthConverter" />
        <ControlTemplate x:Key="NormalItemTemplate" TargetType="ListBoxItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Content}" />
                <Grid Grid.Row="1" Margin="2">
                    <Ellipse
                        Width="10"
                        Height="10"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Fill="#55DCF5" />
                </Grid>
            </Grid>
        </ControlTemplate>
        <Style x:Key="StepListBoxStyle" TargetType="ListBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Grid>
                            <Rectangle
                                Width="510"
                                Height="4"
                                Margin="0,0,0,8"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Bottom"
                                Fill="#55DCF5" />
                            <ItemsPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="SelectedTemplate" TargetType="ListBoxItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Content}" />
                <Grid Grid.Row="1" Margin="2">
                    <Ellipse
                        Width="8"
                        Height="8"
                        VerticalAlignment="Center"
                        Panel.ZIndex="3">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="#FFFFFF" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse
                        Width="12"
                        Height="12"
                        VerticalAlignment="Center"
                        Panel.ZIndex="2">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="#225BA7" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse
                        Width="16"
                        Height="16"
                        VerticalAlignment="Center"
                        Panel.ZIndex="1">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="#FFFFFF" />
                        </Ellipse.Fill>
                    </Ellipse>
                </Grid>
            </Grid>
        </ControlTemplate>
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Converter={StaticResource StepListStepWidthConverter}}" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="FontFamily" Value="SimHei" />
            <Setter Property="Foreground" Value="#ACF1FE" />
            <Setter Property="Template" Value="{StaticResource NormalItemTemplate}" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Trigger.Setters>
                        <Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
                        <Setter Property="FontSize" Value="20" />
                        <Setter Property="Foreground" Value="White" />
                        <Setter Property="FontFamily" Value="SimHei" />
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>
    <StackPanel Background="SteelBlue">
        <ListBox
            Margin="0 200 0 0"
            x:Name="NavList"
            HorizontalAlignment="Center"
            BorderThickness="0"
            Foreground="#225BA7"
            IsEnabled="False"
            ItemContainerStyle="{StaticResource ListBoxItemStyle}"
            SelectedIndex="4"
            Style="{StaticResource StepListBoxStyle}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel IsItemsHost="False" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>1</ListBoxItem>
            <ListBoxItem>2</ListBoxItem>
            <ListBoxItem>3</ListBoxItem>
            <ListBoxItem>4</ListBoxItem>
            <ListBoxItem>5</ListBoxItem>
            <ListBoxItem>6</ListBoxItem>

        </ListBox>
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
            <Button Click="Button_Click">下一步</Button>
            <Button Margin="100,0,0,0" Click="Button_Click_1">首页</Button>
        </StackPanel>
    </StackPanel>

Each style template description: StepListBoxStyle, whole step bar control style, rectangular strip template.

NormalItemTemplate, single step style when not selected.

SelectedTemplate, single step pattern when selected.

ListBoxItemStyle, through the use of templates and style trigger.

Second, a step necessary to fix the total length of strip, strip setting step in accordance with several steps, it is necessary to write a converter, the length of each set.

Converters Code:

    class StepListBarWidthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            ListBox listBox = value as ListBox;
            if (listBox==null)
            {
                return Binding.DoNothing;
            }
            if (listBox.Items.Count == 0)
            {
                return 0;
            }
            return 510 / (listBox.Items.Count - 1);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return Binding.DoNothing;
        }
    }

When using the Listbox's SelectedIndex ItemSource and bind to.