WPF上位机自定义控件系列：步骤 WxStepBar

程序猿老王

同济大学地球物理学硕士

WPF 上位机自定义控件系列

步骤 WxStepBar

类似 ListBox、TabControl 等控件，包含两项内容：WxStepBar 和 WxStepBarItem，分别继承自 ContentControl 和 ItemsControl，支持数据绑定

WxStepBarItem 控件，包含三种状态

public enum StepBarState
    Default,
    Busy,
    Complete,

using System.Windows;
using System.Windows.Controls;
namespace WpfControlsX.ControlX
    /// ----------------------------------------------------------------
    /// Author      : BigWang
    /// Created Time: 2023/4/4 22:32:06
    /// Description :
    /// ----------------------------------------------------------------
    /// Version      Modified Time              Modified By     Modified Content
    /// V1.0.0.0     2023/4/4 22:32:06                     BigWang         首次编写         
    public class WxStepBarItem : ContentControl
        /// <summary>
        /// 序号
        /// </summary>
        public int Index
            get => (int)GetValue(IndexProperty);
            internal set => SetValue(IndexProperty, value);
        public static readonly DependencyProperty IndexProperty =
            DependencyProperty.Register("Index", typeof(int), typeof(WxStepBarItem), new PropertyMetadata(-1));
        /// <summary>
        /// 当前状态
        /// </summary>
        public StepBarState State
            get => (StepBarState)GetValue(StateProperty);
            set => SetValue(StateProperty, value);
        public static readonly DependencyProperty StateProperty =
            DependencyProperty.Register("State", typeof(StepBarState), typeof(WxStepBarItem), new PropertyMetadata(StepBarState.Default));
        /// <summary>
        /// 图标尺寸
        /// </summary>
        public double IconSize
            get => (double)GetValue(IconSizeProperty);
            set => SetValue(IconSizeProperty, value);
        public static readonly DependencyProperty IconSizeProperty =
            DependencyProperty.Register("IconSize", typeof(double), typeof(WxStepBarItem), new PropertyMetadata(12d));
        /// <summary>
        /// 圆角
        /// </summary>
        public CornerRadius CornerRadius
            get => (CornerRadius)GetValue(CornerRadiusProperty);
            set => SetValue(CornerRadiusProperty, value);
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(WxStepBarItem), new PropertyMetadata(new CornerRadius(0)));

WxStepBar 控件

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
namespace WpfControlsX.ControlX
    [TemplatePart(Name = ProgressBarTemplateName, Type = typeof(ProgressBar))]
    public class WxStepBar : ItemsControl
        static WxStepBar()
            DefaultStyleKeyProperty.OverrideMetadata(typeof(WxStepBar), new FrameworkPropertyMetadata(typeof(WxStepBar)));
        private const string ProgressBarTemplateName = "PART_ProgressBar";
        private ProgressBar _progressBar;
        public int StepIndex
            get => (int)GetValue(StepIndexProperty);
            set => SetValue(StepIndexProperty, value);
        public static readonly DependencyProperty StepIndexProperty =
            DependencyProperty.Register("StepIndex", typeof(int), typeof(WxStepBar), new PropertyMetadata(0, OnStepIndexChanged));
        private static void OnStepIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            WxStepBar step = (WxStepBar)d;
            int stepIndex = (int)e.NewValue;
            step.UpdateStepItemState(stepIndex);
        private void UpdateStepItemState(int stepIndex)
            int count = Items.Count;
            if (count <= 0)
                return;
            for (int i = 0; i < Items.Count; i++)
                if (ItemContainerGenerator.ContainerFromIndex(i) is WxStepBarItem stepItem)
                    stepItem.State = i < stepIndex ? StepBarState.Complete : i == stepIndex ? StepBarState.Busy : StepBarState.Default;
        public override void OnApplyTemplate()
            base.OnApplyTemplate();
            _progressBar = GetTemplateChild(ProgressBarTemplateName) as ProgressBar;
        protected override void OnRender(DrawingContext drawingContext)
            base.OnRender(drawingContext);
            int count = Items.Count;
            if (_progressBar == null || count <= 0)
                return;
            _progressBar.Maximum = count - 1;
            _progressBar.Value = StepIndex;
            _progressBar.Width = ActualWidth / count * (count - 1);
        protected override bool IsItemItsOwnContainerOverride(object item)
            return item is WxStepBarItem;
        protected override DependencyObject GetContainerForItemOverride()
            return new WxStepBarItem();
        public WxStepBar()
            ItemContainerGenerator.StatusChanged += ItemContainerGenerator_StatusChanged;
        public void Next()
            if (StepIndex >= Items.Count)
                StepIndex = Items.Count - 1;
            StepIndex++;
        public void Prev()
            if (StepIndex < 0)
                StepIndex = -1;
                StepIndex--;
        private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
            if (ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
                int count = Items.Count;
                if (count <= 0)
                    return;
                UpdateStepItemState(StepIndex);

xaml 样式

<!--#region WxStepBar -->
<Style x:Key="StepBarItemStyle" TargetType="{x:Type cx:WxStepBarItem}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{DynamicResource BrushWaterMark}"/>
    <Setter Property="Foreground" Value="{DynamicResource BrushText}"/>
    <Setter Property="Background" Value="{DynamicResource BrushRegion}"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="CornerRadius" Value="16"/>
    <Setter Property="IconSize" Value="32"/>
    <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type cx:WxStepBarItem}">
                    <StackPanel>
                        <cx:WxSimplePanel>
                            <Ellipse Width="{TemplateBinding IconSize}" Height="{TemplateBinding IconSize}" Fill="{TemplateBinding Background}" HorizontalAlignment="Center"/>
                            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" CornerRadius="{TemplateBinding CornerRadius}"
                                    BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
                                    Height="{TemplateBinding IconSize}" Width="{TemplateBinding IconSize}">
                                <cx:WxSimplePanel>
                                    <TextBlock Name="PART_Index" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="{TemplateBinding FontSize}"
                                               Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type cx:WxStepBarItem}}, Converter={StaticResource WxStepBarItem2Index}}"/>
                                    <Path Name="PART_PathComplete" Data="{StaticResource IconCheck}" Fill="{TemplateBinding Foreground}" Stretch="Uniform"
                                          Width="14" Height="14" Visibility="Collapsed"/>
                                </cx:WxSimplePanel>
                            </Border>
                        </cx:WxSimplePanel>
                        <ContentPresenter HorizontalAlignment="Center" TextElement.FontWeight="Black" TextElement.Foreground="{DynamicResource BrushText}" Margin="0,6,0,0"
                                          ContentTemplate="{Binding ItemTemplate,RelativeSource={RelativeSource AncestorType=cx:WxStepBar}}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="State" Value="Default">
                            <Setter Property="Foreground" Value="{DynamicResource BrushText}"/>
                            <Setter Property="Background" Value="{DynamicResource BrushRegion}"/>
                            <Setter TargetName="PART_PathComplete" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="PART_Index" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="State" Value="Busy">
                            <Setter Property="Background" Value="{DynamicResource BrushPrimary}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource BrushPrimary}"/>
                            <Setter Property="Foreground" Value="{DynamicResource BrushReversedText}"/>
                            <Setter TargetName="PART_PathComplete" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="PART_Index" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="State" Value="Complete">
                            <Setter Property="Background" Value="{DynamicResource BrushSuccess}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource BrushSuccess}"/>
                            <Setter Property="Foreground" Value="{DynamicResource BrushReversedText}"/>
                            <Setter TargetName="PART_PathComplete" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="PART_Index" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
<Style TargetType="{x:Type cx:WxStepBar}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Background" Value="Red"/>
    <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemStyle}"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type cx:WxStepBar}">
                <cx:WxSimplePanel>
                    <ProgressBar x:Name="PART_ProgressBar" Margin="0,18" Height="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 Value="{Binding StepIndex,RelativeSource={RelativeSource AncestorType=cx:WxStepBar}}"/>
                    <ItemsPresenter/>
                </cx:WxSimplePanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>