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自定義進度條與圖像

回答

相關問題