Question

我在wpf中有一个静态加载器图像，我可以通过使用WPFAnimatedGIF nuget包轻松地将它用作加载gif，但它看起来像是一种过度杀伤。

我的应用程序中只有一个场景，我想显示一个忙碌的指示器。

没有什么可以触发，它是我窗口中的隐藏物体，在某些条件下它变得可见。因此它应该始终旋转并显示为正常的动画加载gif。

到目前为止我尝试了什么

 <Image RenderTransformOrigin=".5,.5" Width="44" Height="44" Source="BusyIndicator.gif">
        <Image.RenderTransform>
            <RotateTransform Angle="45" />                
        </Image.RenderTransform>
    </Image>

我正在使用的图片是

Answer 1

当Image元素可见时，此Style以30度为单位设置RotateTransform的角度。

<Style TargetType="Image" x:Key="BusyIndicatorStyle">
    <Setter Property="Width" Value="44"/>
    <Setter Property="Height" Value="44"/>
    <Setter Property="Source" Value="BusyIndicator.png"/>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsVisible" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetProperty="RenderTransform.Angle">

                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="30"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="60"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="90"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="120"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="210"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="240"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.9" Value="270"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="300"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="330"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

...
<Image Style="{StaticResource BusyIndicatorStyle}" />

为了避免使用包含许多DiscreteDoubleKeyFrames的动画，您可以从DoubleAnimation派生并添加Step属性：

public class DoubleAnimationWithSteps : DoubleAnimation
{
    public static readonly DependencyProperty StepProperty = DependencyProperty.Register(
        nameof(Step), typeof(double), typeof(DoubleAnimationWithSteps));

    public double Step
    {
        get { return (double)GetValue(StepProperty); }
        set { SetValue(StepProperty, value); }
    }

    protected override double GetCurrentValueCore(
        double from, double to, AnimationClock animationClock)
    {
        var value = base.GetCurrentValueCore(from, to, animationClock);

        if (Step > 0d)
        {
            value = Step * Math.Floor(value / Step);
        }

        return value;
    }

    protected override Freezable CreateInstanceCore()
    {
        return new DoubleAnimationWithSteps();
    }
}

您可以这样使用它：

<Storyboard RepeatBehavior="Forever">
    <local:DoubleAnimationWithSteps
        Storyboard.TargetProperty="RenderTransform.Angle"
        Duration="0:0:1.2" To="360" Step="30"/>
</Storyboard>

Answer 2

我知道这个问题已经有了答案，但有一种不同的方法。只需使用ProgressBar并将IsIndeterminate设置为True：

<ProgressBar Visibility="{Binding IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MaterialDesignCircularProgressBar}" IsIndeterminate="True" Width="36"/>

样式来自Material Design In XAML Toolkit。没有必要使用GIF作为繁忙的指标，我前一段时间犯了同样的错误

WPF为gif效果旋转加载图像

2 个答案: