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>

WPF 水平进度条的相关教程结束。