【WPF控件】简约实⽤，进度百分⽐跟随显⽰的Progressbar 话不多说先上图：
有三部分组成：1. 底下灰⾊条部分  2.上层涂⾊部分  3. 百分⽐显⽰部分margin属性值可以为百分比
<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 progressBar                                            <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                                                <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                                    <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
</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。