首页 > Windows开发 > 详细

WPF ProgressBar 样式

时间:2016-05-20 19:07:23      阅读:296      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!