xaml自定义进度条与图像

我想使用10张图像制作自定义动画进度条。现在我用一个Timer`s蜱改变每5毫秒资源图片：xaml自定义进度条与图像

XAML：

<Grid> 
     <Image HorizontalAlignment="Stretch" 
       Margin="0" 
       VerticalAlignment="Top" 
       Stretch="Fill" 
      x:Name="imageProgressBar"/> 
    </Grid>

C＃

private void StartAnimation() 
{ 
     if (IsAnimating) return; 

     _timer = new DispatcherTimer(); 
     _timer.Interval = FrameDuration; 
     _timer.Tick += TimerTick; 
     _timer.Start(); 
    } 


    private void StopAnimation() 
    { 
     if (!IsAnimating) return; 

     _timer.Stop(); 
     _timer = null; 
    } 


    private void TimerTick(object sender, object e) 
    { 
     if (FramesCount == 0 || _frames == null) return; 

     _currentFrame++; 
     _currentFrame = _currentFrame % FramesCount; 

     if (_currentFrame < _frames.Count) 
      imageProgressBar.Source = _frames[_currentFrame]; 
    }

这种变体的作品，但它不够好，因为它使用UI（我猜）线程处理，这就是为什么它有时慢。有什么办法改变图像来源不同吗？

来源

2016-06-21 dmitriy

这可能是改变并随后重新渲染图像，这比渲染源头的速度慢得多。由于您的需求非常特别，因此可能需要马上加载所有10张图片，然后改变其不透明度或可见度以实现您以后的效果。 – Logan

@dmitriy检查jerrynixon的定制进度环关联[链接]（http://blog.jerrynixon.com/2015/06/lets-code-build-custom-progress-ring-in.html）希望这可以帮助。 .. – Krth

感谢您的回复。 @Logan我只是想过，但因为我是新的XAML，我无法考虑如何实现它 – dmitriy

即使我使用后台代码为我的项目创建了类似的动画。问题出现在第一个周期，当图像需要读取缓冲和加载需要时间，因此动画从第二个周期开始正常工作。
解决方法解决，我结束了使用被定义在XAML本身的故事板（因为它是更容易）和装载图像在XAML同时更新自己的知名度

XAML代码：

<Storyboard x:Name="Storyboard_Loading" RepeatBehavior="Forever"> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading1"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.1"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading2"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.2"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading3"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading4"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.4"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading5"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading6"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.6"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading7"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.7"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading8"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.8"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading9"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.9"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading10"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:1"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading11"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:1.1"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="pageLoading12"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:1.2"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 

    </UserControl.Resources> 
    <Grid Background="#3F000000"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="150"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="150"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid Grid.Row="1" Grid.Column="1" x:Name="GridLoading" > 
      <!--<ProgressRing IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" Foreground="#EF4D17"/>--> 
      <Image x:Name="pageLoading" Source="ms-appx:///Assets/ProgressBar/page_loading_1.png" /> 
      <Image x:Name="pageLoading1" Source="ms-appx:///Assets/ProgressBar/page_loading_1.png"/> 
      <Image x:Name="pageLoading2" Source="ms-appx:///Assets/ProgressBar/page_loading_2.png"/> 
      <Image x:Name="pageLoading3" Source="ms-appx:///Assets/ProgressBar/page_loading_3.png"/> 
      <Image x:Name="pageLoading4" Source="ms-appx:///Assets/ProgressBar/page_loading_4.png"/> 
      <Image x:Name="pageLoading5" Source="ms-appx:///Assets/ProgressBar/page_loading_5.png"/> 
      <Image x:Name="pageLoading6" Source="ms-appx:///Assets/ProgressBar/page_loading_6.png"/> 
      <Image x:Name="pageLoading7" Source="ms-appx:///Assets/ProgressBar/page_loading_7.png"/> 
      <Image x:Name="pageLoading8" Source="ms-appx:///Assets/ProgressBar/page_loading_8.png"/> 
      <Image x:Name="pageLoading9" Source="ms-appx:///Assets/ProgressBar/page_loading_9.png"/> 
      <Image x:Name="pageLoading10" Source="ms-appx:///Assets/ProgressBar/page_loading_10.png"/> 
      <Image x:Name="pageLoading11" Source="ms-appx:///Assets/ProgressBar/page_loading_11.png"/> 
      <Image x:Name="pageLoading12" Source="ms-appx:///Assets/ProgressBar/page_loading_12.png"/> 
     </Grid> 
     <!--<Grid Grid.Row="1" x:Name="GridLoading" Background="#3F000000"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Image Grid.Column="1" x:Name="Image_Progress_Bar" /> 
     </Grid>--> 
    </Grid>

来源

2016-06-23 05:05:21 Jerin

谢谢@Jerin，这正是我想要做的！ – dmitriy

很高兴为您提供帮助。 – Jerin

xaml自定义进度条与图像

回答

相关问题