WPF 水平进度条

WPF设计界面过程中，有时需要设计一种可以手动滑动修改并实时显示的进度条

进度条，效果如下：

 

  

颜色、图标、节点什么的，都可以重新替换。

 前端XAML代码： 

<UserControl x:Class="WpfApplication2.ProgressBarControl"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            mc:Ignorable="d" 
            d:DesignHeight="40" d:DesignWidth="300" Loaded="ProgressBarControl_OnLoaded">
    <UserControl.Resources>
        <Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Height" Value="18" />
            <Setter Property="Width" Value="18" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <!--手动绘制图标-->
                        <Grid>
                            <Ellipse Height="15" Width="4" Fill="Blue" Margin="0,3,0,0"></Ellipse>
                            <Ellipse Height="15" Width="12" Fill="Blue" Margin="-0,-4,0,0"></Ellipse>
                        </Grid>
                        <!--<Image Source="图标.png"></Image>-->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <StackPanel>
            <Slider x:Name="MySlider" Value="1" Maximum="10" Margin="-6,0,0,0">
                <Slider.Template>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <TickBar x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Height="4" Visibility="Collapsed"/>
                            <Border x:Name="TrackBackground" Margin="0" CornerRadius="2" Height="4" Grid.Row="1" BorderThickness="1"/>
                            <Track Grid.Row="1" x:Name="PART_Track">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource SliderThumbStyle}" />
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
                                </Track.IncreaseRepeatButton>
                            </Track>
                            <TickBar x:Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Visibility="Collapsed" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TickPlacement" Value="TopLeft">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="BottomRight">
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="Both">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Slider.Template>
            </Slider>
            <ProgressBar x:Name="MyProgressBar" Height="12" Foreground="Blue" Background="LightGray" BorderBrush="Transparent" Value="{Binding Value, ElementName=MySlider}" Maximum="100"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Ellipse Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>
                <Ellipse Grid.Column="1" Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>
                <Ellipse Grid.Column="2" Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>
                <Ellipse Grid.Column="3" Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>
            </Grid>
        </StackPanel>
    </Grid>
</UserControl>

 

后台代码： 

    /// <summary>
    /// ProgressBarControl.xaml 的交互逻辑
    /// </summary>
    public partial class ProgressBarControl : UserControl
    {
        public ProgressBarControl()
        {
            InitializeComponent();
        }

        private void ProgressBarControl_OnLoaded(object sender, RoutedEventArgs e)
        {
            MySlider.Value = Value;
        }
        #region 属性
        /// <summary>
        /// 进度条值
        /// </summary>
        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set
            {
                SetValue(ValueProperty, value);
            }
        }

        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double)
        , typeof(ProgressBarControl), new PropertyMetadata(1.0));


        #endregion

    }

2、界面引用

<wpfApplication2:ProgressBarControl Width="300" Value="2" VerticalAlignment="Center"></wpfApplication4:ProgressBarControl>