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>
作者：
唐宋元明清2188
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
