WPF进度条继续动画答案

【问题标题】：WPF Progressbar continue animationWPF进度条继续动画
【发布时间】：2010-12-24 22:16:08
【问题描述】：

我正在使用 WPF 的进度条并将值设置为最大值。但是，当达到时，动画（即绿色效果）会继续。

我怎样才能停止它并有一个完整的绿色条，没有任何动画？

例如，拿这个：

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Grid>
        <ProgressBar Height="30" Name="progressBar1" VerticalAlignment="Top" Minimum="0" Maximum="100" />
    </Grid>
</Window>

和：

public partial class Window1 : Window
{
    private double _min;
    private double _max;

    public Window1()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        _min = progressBar1.Minimum;
        _max = progressBar1.Maximum;
        Thread thread = new Thread(Start);
        thread.Start();
    }

    private void Start()
    {
        for (double i = _min; i <= _max; i++)
        {
            Thread.Sleep(50);
            double value = i;
            Dispatcher.BeginInvoke(DispatcherPriority.Normal, new Action(() => progressBar1.Value = value));
        }
    }
}

当线程结束时，我总是可以看到进度条上的动画（绿色条上的白色效果）

提前感谢您的帮助

【问题讨论】：

标签： wpf animation progress-bar

【解决方案1】：

我不完全确定您的意思，但也许您需要将 ProgressBar 的 IsIndeterminate 属性设置为 false。如果这不起作用，请给我们一些代码以进一步帮助您！

编辑：动画是 Windows Aero 风格的一部分，一些设计师为了……设计错误！因此，您不能简单地使用属性删除动画。您可以通过编辑其控件模板来更改现有进度条的视觉外观。下面是 WPF ProgressBar 的整个控件模板。注意：您需要所有资源、对 Window.Themes 的 xmlns 引用，并且您必须设置对 PresentationFramwork.Aero dll 的引用。我插入了一条评论，您可以在其中进行更改。在第二个和第三个渐变色点上将颜色 FF000000 更改为 00000000，白色光晕消失。我尝试实现一个触发器，该触发器首先显示动画，但在 Value==Maximum 时停止它，但我失败了。别人？

<Window x:Class="BlandProgressBarSpike.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    Title="Window1" Height="300" Width="300"
    Loaded="Window_Loaded">
    <Window.Resources>
        <LinearGradientBrush x:Key="ProgressBarBackground" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#BABABA" Offset="0"/>
            <GradientStop Color="#C7C7C7" Offset="0.5"/>
            <GradientStop Color="#BABABA" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#B2B2B2" Offset="0"/>
            <GradientStop Color="#8C8C8C" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarGlassyHighlight" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#50FFFFFF" Offset="0.5385"/>
            <GradientStop Color="#00FFFFFF" Offset="0.5385"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarTopHighlight" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#80FFFFFF" Offset="0.05"/>
            <GradientStop Color="#00FFFFFF" Offset="0.25"/>
        </LinearGradientBrush>
        <!-- This produces the whitish,moving glow-->
        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" StartPoint="-100,0" MappingMode="Absolute">
            <GradientStop Color="#00000000" Offset="0"/>
            <GradientStop Color="#FF000000" Offset="0.4"/>
            <GradientStop Color="#FF000000" Offset="0.6"/>
            <GradientStop Color="#00000000" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#0C000000" Offset="0"/>
            <GradientStop Color="#20000000" Offset="0.3"/>
            <GradientStop Color="#00000000" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#00000000" Offset="0"/>
            <GradientStop Color="#20000000" Offset="0.7"/>
            <GradientStop Color="#0C000000" Offset="1"/>
        </LinearGradientBrush>
        <RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft" RelativeTransform="1,0,0,1,0.5,0.5" RadiusX="1" RadiusY="1">
            <GradientStop Color="#60FFFFC4" Offset="0"/>
            <GradientStop Color="#00FFFFC4" Offset="1"/>
        </RadialGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect" EndPoint="0,0" StartPoint="0,1">
            <GradientStop Color="#60FFFFC4" Offset="0"/>
            <GradientStop Color="#00FFFFC4" Offset="1"/>
        </LinearGradientBrush>
        <RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight" RelativeTransform="1,0,0,1,-0.5,0.5" RadiusX="1" RadiusY="1">
            <GradientStop Color="#60FFFFC4" Offset="0"/>
            <GradientStop Color="#00FFFFC4" Offset="1"/>
        </RadialGradientBrush>
        <LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#90FFFFFF" Offset="0.5385"/>
            <GradientStop Color="#00FFFFFF" Offset="0.5385"/>
        </LinearGradientBrush>
        <Style x:Key="BlandStyle" TargetType="{x:Type ProgressBar}">
            <Setter Property="Foreground" Value="#01D328"/>
            <Setter Property="Background" Value="{StaticResource ProgressBarBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ProgressBarBorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid SnapsToDevicePixels="true" x:Name="Background">
                            <Rectangle Fill="{TemplateBinding Background}" RadiusX="2" RadiusY="2"/>
                            <Border Margin="1" Background="{StaticResource ProgressBarGlassyHighlight}" CornerRadius="2"/>
                            <Border Margin="1" Background="{StaticResource ProgressBarTopHighlight}" BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1"/>
                            <Rectangle Margin="1" x:Name="PART_Track"/>
                            <Decorator HorizontalAlignment="Left" Margin="1" x:Name="PART_Indicator">
                                <Grid x:Name="Foreground">
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MaxWidth="15"/>
                                        <ColumnDefinition Width="0.1*"/>
                                        <ColumnDefinition MaxWidth="15"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
                                    <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" Grid.ColumnSpan="3" Grid.RowSpan="2">
                                        <Rectangle.OpacityMask>
                                            <MultiBinding>
                                                <MultiBinding.Converter>
                                                    <Microsoft_Windows_Themes:ProgressBarHighlightConverter/>
                                                </MultiBinding.Converter>
                                                <Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
                                                <Binding Path="ActualWidth" ElementName="Background"/>
                                                <Binding Path="ActualHeight" ElementName="Background"/>
                                            </MultiBinding>
                                        </Rectangle.OpacityMask>
                                    </Rectangle>
                                    <Rectangle Margin="1,1,0,1" x:Name="LeftDark" Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}" RadiusX="1" RadiusY="1" Grid.RowSpan="2"/>
                                    <Rectangle Margin="0,1,1,1" x:Name="RightDark" Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}" RadiusX="1" RadiusY="1" Grid.Column="2" Grid.RowSpan="2"/>
                                    <Rectangle x:Name="LeftLight" Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}" Grid.Column="0" Grid.Row="2"/>
                                    <Rectangle x:Name="CenterLight" Fill="{StaticResource ProgressBarIndicatorLightingEffect}" Grid.Column="1" Grid.Row="2"/>
                                    <Rectangle x:Name="RightLight" Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}" Grid.Column="2" Grid.Row="2"/>
                                    <Border x:Name="Highlight1" Grid.ColumnSpan="3" Grid.RowSpan="2" Background="{StaticResource ProgressBarIndicatorGlassyHighlight}"/>
                                    <Border x:Name="Highlight2" Grid.ColumnSpan="3" Grid.RowSpan="2" Background="{StaticResource ProgressBarTopHighlight}"/>
                                </Grid>
                            </Decorator>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="LayoutTransform" TargetName="Background">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="LayoutTransform" TargetName="PART_Track">
                                    <Setter.Value>
                                        <RotateTransform Angle="90"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="LayoutTransform" TargetName="PART_Indicator">
                                    <Setter.Value>
                                        <RotateTransform Angle="90"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="LayoutTransform" TargetName="Foreground">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsIndeterminate" Value="true">
                                <Setter Property="Visibility" TargetName="LeftDark" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="RightDark" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="LeftLight" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="CenterLight" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="RightLight" Value="Collapsed"/>
                                <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="IsIndeterminate" Value="false">
                                <Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources> 
    <StackPanel>
        <ProgressBar Style="{StaticResource BlandStyle}" Value="{Binding Progress}" Height="30"
                     Minimum="0" Maximum="100"/>
    </StackPanel>           
</Window>

【讨论】：

IsIndeterminate 设置为 false 并不能解决我使用代码示例编辑的问题
这是个好主意...我使用了一个技巧，将条形图拍摄为位图，完成后替换为图像。丑陋，但工作:)
只要进度条不调整大小，这是一个很好的解决方案！

【解决方案2】：

我觉得是windows aero的一个特点……所有进度条都有这个效果，别以为可以停……

【讨论】：

【解决方案3】：

同意“闪烁”动画会让一些用户感到困惑。它可以在不破坏上面 Dabblernl:s 回答的 IsIndeterminate 功能的情况下被删除。

使用您可以在我替换的 Dabblernl:s 帖子中找到的 Aero 样式：

<Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" Grid.ColumnSpan="3" Grid.RowSpan="2">
  <Rectangle.OpacityMask>
    <MultiBinding>
      <MultiBinding.Converter>
        <Microsoft_Windows_Themes:ProgressBarHighlightConverter/>
      </MultiBinding.Converter>
      <Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
      <Binding Path="ActualWidth" ElementName="Background"/>
      <Binding Path="ActualHeight" ElementName="Background"/>
    </MultiBinding>
  </Rectangle.OpacityMask>
</Rectangle>

与：

<Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
  <Rectangle.OpacityMask>
    <MultiBinding>
      <MultiBinding.Converter>
        <converters:ProgressBarHighlightOverrideConverter/>
      </MultiBinding.Converter>
      <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value"/>
      <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum"/>
      <Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
      <Binding ElementName="Background" Path="ActualWidth"/>
      <Binding ElementName="Background" Path="ActualHeight"/>
    </MultiBinding>
  </Rectangle.OpacityMask>
</Rectangle>

...并添加了一个新的 MultiConverter：

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
using Microsoft.Windows.Themes;

namespace [Your namespace here]
{
  public class ProgressBarHighlightOverrideConverter : IMultiValueConverter
  {
    private readonly ProgressBarHighlightConverter converter = new ProgressBarHighlightConverter();

     public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
     {
      if (values[0] == null || values[0] == DependencyProperty.UnsetValue || 
          values[1] == null || values[1] == DependencyProperty.UnsetValue)
      {
         return null;
      }

      var value = (Double)values[0];
      var maximum = (Double)values[1];

      return value >= maximum ? null : converter.Convert(new [] {values[2], values[3], values[4]}, targetType, parameter, culture);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
      return null;
    }
  }
}

因此，我实际上所做的是将 Microsoft:s ProgressBarHighlightConverter 替换为我自己的一个，当且仅当进度条：s 值小于其最大值时，它才会依赖原始转换器。

【讨论】：