【WPF控件】簡約實用，進度百分比跟隨顯示的Progressbar

話不多說先上圖：

有三部分組成：1. 底下灰色條部分   2.上層塗色部分  3. 百分比顯示部分

<Style TargetType="{x:Type ProgressBar}">
                <Setter Property="Maximum" Value="100" />
                <Setter Property="Height" Value="70" />
                <Setter Property="Value" Value="20" />
                <Setter Property="Foreground" Value="#40a2c2"/>
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ProgressBar}">
                            <Grid x:Name="Root">
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="35" ></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid  Grid.Row="0">
                                    <Canvas Grid.Row="0" Height="38">
                                        <Canvas x:Name="Tooltip" Canvas.Left="{Binding ActualWidth, ElementName=PART_Indicator,Converter={StaticResource progressBarValueLocationConverter}}">
                                            <Image x:Name="Shape_5" Height="30" Canvas.Left="4" Source="percentagebar_Images/Shape 5.png" Canvas.Top="2" Width="43">
                                                <Image.Effect>
                                                    <DropShadowEffect BlurRadius="3" Color="Black" Direction="-90" Opacity="0.43" ShadowDepth="2"/>
                                                </Image.Effect>
                                            </Image>
                                            <TextBlock Text="{Binding Value,  RelativeSource={RelativeSource AncestorType={x:Type ProgressBar}},Converter={StaticResource progressBarValueTextFormatConverter}}" Foreground="White" FontWeight="Bold" FontSize="13" FontFamily="Helvetica75-Bold" IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" Canvas.Left="13" LineHeight="13" TextAlignment="Left" TextWrapping="Wrap" Canvas.Top="9.56">
                                                <TextBlock.Effect>
                                                    <DropShadowEffect BlurRadius="0" Color="Black" Direction="-270" Opacity="1" ShadowDepth="1"/>
                                                </TextBlock.Effect>
                                            </TextBlock>
                                        </Canvas>
                                    </Canvas>
                                </Grid>

                                <Path  Grid.Row="1" x:Name="PART_Track" Data="F1M8,1C8,1 335,1 335,1 338.866,1 342,4.134 342,8 342,11.866 338.866,15 335,15 335,15 8,15 8,15 4.134,15 1,11.866 1,8 1,4.134 4.134,1 8,1z"  Canvas.Left="0" Canvas.Top="0">
                                    <Path.Effect>
                                        <DropShadowEffect BlurRadius="0" Color="White" Direction="-90" Opacity="0.26" ShadowDepth="1"/>
                                    </Path.Effect>
                                    <Path.Fill>
                                        <SolidColorBrush Color="Black" Opacity="0.23137254901960785"/>
                                    </Path.Fill>
                                </Path>
                                <Border Grid.Row="1" x:Name="PART_Indicator" BorderBrush="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,2,0,0" Height="12" MaxWidth="338" Background="{TemplateBinding Foreground}" CornerRadius="7.5,7.5,7.5,7.5" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></Border>
                               
                            </Grid>
                            <!--<ControlTemplate.Triggers>
                                <Trigger Property="Orientation" Value="Vertical">
                                    <Setter Property="LayoutTransform" TargetName="Root">
                                        <Setter.Value>
                                            <RotateTransform Angle="-90" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>-->
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

樣式代碼裏可以看到 Tamplate裏有兩層，一層是上標進度百分比，一層是進度條。

由於上標和進度條base我是直接在Blend裏導入psd圖層生成的代碼 所以是畫布格式的。這也註定了整個圖形不可改變，除非改變path或者Image。

另外下層的兩個Border 命名必須是x:Name="PART_Track" 和 x:Name="PART_Indicator" 這是進度條樣式規定。

關於註釋部分，因爲我是path畫出來的base 本就橫向，無法改成縱向，所以無法縱向屬性觸發，有大神有好的解決方法請留言賜教。

上標的位置是綁定爲x:Name="PART_Indicator"的寬度，所以可以跟隨顯示。 textbook顯示的是ProgressBar的Value值。這部分做了兩個Convert轉換器，分別是將畫布Left值轉成（x:Name="PART_Indicator"的寬度-25）、將textbook的文字格式化爲ProgressBar的Value值+“%”。

public class ProgressBarValueLocationConverter :IValueConverter
    {
    
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((double)value - 25);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return 0;
        }
    }


public class ProgressBarValueTextFormatConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value.ToString() + "%";
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

完成^^

使用的時候，可以改變Value值，Foreground值 

<ProgressBar  Foreground="Black" Value="10" HorizontalAlignment="Center" VerticalAlignment="Center"></ProgressBar>