码迷,mamicode.com
首页 > Windows程序 > 详细

WPF ProgressBar 样式

时间:2016-05-20 19:07:45      阅读:2257      评论:0      收藏:0      [点我收藏+]

标签:

希望写个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:

技术分享

WPF ProgressBar 样式

标签:

原文地址:http://www.cnblogs.com/AlvinLiang/p/5513096.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!