WPF 自定義進度條

WPF設計界面過程中，有時需要設計一種可以手動滑動修改並實時顯示的進度條

進度條，效果如下：

顏色、圖標、節點什麼的，都可以重新替換。

 前端XMAL代碼： 

<UserControl x:Class="WpfApplication4.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>

後臺代碼見下章節