WPF ProgressBar 样式

Posted 2020-07-09 AlvinLiang

希望写个ProgressBar的样式，在progress value不同的时候显示不同的颜色的progress bar

1.写转换器

public class ProgressBarValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double v = (double)value;

            string imageUri = "../Images/progress bar_1.png";

            if (v > 80)
            {
                imageUri = "../Images/progress bar_3.png";
            }
            else if (v > 50)
            {
                imageUri = "../Images/progress bar_2.png";
            }

            BitmapImage img = new BitmapImage(new Uri(imageUri, UriKind.Relative));

            return img;
        }

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

2.创建样式

    <c:ProgressBarValueConverter x:Key="pbConverter"/>
    <Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Image Name="PART_Track" Source="../Images/progress bar.png" HorizontalAlignment="Left" Stretch="Fill"/>
                        <Image Name="PART_Indicator" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, Converter={StaticResource pbConverter}}"
                                   HorizontalAlignment="Left" Stretch="Fill"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

3.设置progress bar的style

 

progress bar.png: 

progress bar_1.png: 

progress bar_2.png:

progress bar_3.png:

 

------------------------------------------------------------------

 

如果仅仅是希望创建一个扁平化的progress bar，那么连转换器都可以不用写

<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Image Name="PART_Track" Source="../Images/Flat Progress Bar.png" HorizontalAlignment="Left" Stretch="Fill"/>
                        <Image Name="PART_Indicator" Source="../Images/Flat Progress Bar_1.png" HorizontalAlignment="Left" Stretch="Fill"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Flat Progress Bar.png：

Flat Progress Bar_1.png：