2017-10-22 66 views
0

我在wpf中有一個靜態加載器圖像,我可以通過使用WPFAnimatedGIF nuget包輕鬆地將它用作加載gif,但它看起來像是一種矯枉過正。WPF爲gif效果旋轉加載圖像

我的應用程序中只有一個場景需要顯示忙碌指示符。

沒有什麼可以觸發的,它是我窗口中的一個隱藏對象,並且在一定條件下它變得可見。因此,它應該始終旋轉並顯示爲一個正常的動畫加載gif。

我至今嘗試過

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

形象地說,我現在用的就是

enter image description here

+0

您可以使用永不結束的動畫,但它有[缺點](https://www.codeproject.com/Articles/ 49853 /更好-WPF的圓形進度條)。 – Funk

回答

3

這種風格的動畫一個RotateTransform在30個步驟的角度時,圖像元素可見。

<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> 
0

我知道這個問題已經有了答案,但有一個不同的方法H。只需使用進度,並設置IsIndeterminate爲True:

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

風格是從Material Design In XAML Toolkit。有沒有必要使用GIF作爲繁忙的指標,我前段時間犯了同樣的錯誤