画像付きのxamlカスタムプログレスバー

debugcn 投稿 Dev

fs_dm

10枚の画像を使用してカスタムのアニメーションプログレスバーを作成したいと思います。ここで、5ミリ秒ごとにリソースイメージを変更するTimer`sTickを使用します。

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（私が推測するように）スレッドを使用するため、十分ではありません。そのため、処理が遅くなることがあります。画像のソースを別の方法で変更する方法はありますか？

リスト

私でさえ、私のプロジェクトのコードビハインドを使用して同様のアニメーションを作成していました。問題は、画像をバッファリングしてロードする必要がある最初のサイクルにあり、時間がかかるため、アニメーションは2番目のサイクルから正しく機能し始めます。
最終的に使用した回避策の修正は、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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-07-13

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

画像付きのxamlカスタムプログレスバー

画像付きのxamlカスタムプログレスバー

マーク付きのカスタムHTMLプログレスバー

ブートストラップ-プログレスバー付きのカスタムアラート

画像付きのSVGプログレスバー

プログレスバーのカスタムフォーム

カスタムプログレスバーを設定するときのNoSuchMethodError

プログレスバー付きの Redux フォーム

Androidのカスタムプログレスバー？

Android用のカスタムプログレスバー

カスタムプログレスバーの方法

iOSのカスタムプログレスバー

中央に画像があるカスタム円形プログレスバー

カラープレート付きのAndroidプログレスバー

ナンバーピッカー付きのカスタムレイアウトダイアログ

カスタム画像付きのUWPコマンドバー

色付きのドロップダウン画像付きのカスタムスピナー

プログレスバー付きのタブのスクリプト

角度-素材：プログレスバーのカスタムカラー？

スライダー付きのタイムラインプログレスバー

カスタム添付プロパティのテンプレートバインディング

円形のプログレスバー付きのカウントダウンタイマー

Androidのカウントダウンタイマー付きの円形プログレスバー

ユーザーフォーム付きのExcelVBAプログレスバー

Androidがカメラ画像、ビデオをプログレスバー付きのサーバーにアップロード

プログレスバー付きのタイマーを使用して次のフォームを開く

プログレスバー付きの24時間カウントダウンタイマー

プログレスバー付きのカウントダウンタイマー？

カスタムシェイププログレスバー

プログレスバー付きのフォームを読み込む

XAMLとC＃を使用したWindows Phone8アプリのカスタムプログレスバーの構築