waiting画面の作成

前提・実現したいこと

C#初心者です。

C#のwpfで、waiting画面を作成しようとしています。
フォームを2枚準備して、１枚は透過にして円弧状のプログレスバーが回り続けるものをプログラムで作ります。
もう１枚は、写真画像を表示するのみで、先程のプログレスバーの後ろの面に配置します。
出来上がると、画像の真ん中辺りで円弧状のプログレスバーがぐるぐる回っているイメージになります。

質問としては、まず、２枚重ね合わせる方法がわかりません。

画像の表示までは出来ました。
プログレスバーの作成は、以下のページを参考にしようとしているのですが、viewmodelというものをどのように作成すれば良いのかわからず、実行まで辿り着けません。

https://www.google.ie/amp/once-and-only.com/programing/c/%25E5%2586%2586%25E5%25BC%25A7%25E7%258A%25B6%25E3%2581%25AE%25E3%2583%2597%25E3%2583%25AD%25E3%2582%25B0%25E3%2583%25AC%25E3%2582%25B9%25E3%2583%2590%25E3%2583%25BC%25E3%2582%2592%25E4%25BD%259C%25E6%2588%2590%25EF%25BC%2588c-wpf%25EF%25BC%2589/%3famp=1

詳しい方おられましたら、助けて頂けないでしょうか？
よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

y_waiwai

2020/04/24 01:44

質問は編集できます追記修正しましょう

Zuishin

2020/04/24 01:44

編集ボタンを押して編集してください。新しく質問しないように。

hihijiji

2020/04/24 03:45

エスパーすると「別スレッドで動かしましょう」

Zuishin

2020/04/25 12:57

WPF にフォームはありません。Grid だと複数のコントロールを重ねて表示できるので、写真とプログレスを Grid の同じセルに入れましょう。

TN8001

2020/04/25 21:18

出す場面 * アプリの起動時に1回出すだけ * 何度も出るアニメの動き * Cの字が回転するようなもの * 0%～100%まで動いて100%に行ったら閉じる * 0%～100%まで動くが100%に行っても閉じずに何周かする上記2点どのようなつもりでしょうか？

退会済みユーザー

2020/04/26 00:33

アプリの起動中はずっとwaiting画面になるものです。 Cの字が回転するようなものを考えています。

Zuishin

2020/04/26 00:35

ああ、方法を知りたいんじゃなくてコード書いてくれる人を待ってたのか。

行動規範の内容に同意します

回答1件

退会されてしまったようですが。。。
せっかく準備したので他の方にも役立つよう回答しておきます。

まずViewModelですが、WPFにおいて必須ではありません。
なくても作れます。回答では使いませんでした。
しかし使わないとWPFの魅力が８割減なので、ぜひ「wpf mvvm」等で調べてみてください。
その際に記事中で使用されているReactivePropertyも出てくると思います。

何度も使うということですとMainWindow内に用意して、ビジー中だけすべてのコントロールの上に覆いかぶさるような作りがいいと思います。
回転し続けるＣを描いておいて、必要に応じてVisibilityで制御します。

xml:MainWindow.xaml
1<Window
2  x:Class="Questions256032.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Grid>
8
9    <!--  ここに通常のUI要素  -->
10    <Grid>
11      <Grid.RowDefinitions>
12        <RowDefinition Height="Auto" />
13        <RowDefinition Height="Auto" />
14        <RowDefinition />
15      </Grid.RowDefinitions>
16      <TextBlock
17        x:Name="textBlock"
18        Margin="10"
19        Text="ほにゃらら" />
20      <TextBox
21        Grid.Row="1"
22        Margin="10"
23        Text="なんだかんだ" />
24      <Button
25        Grid.Row="2"
26        HorizontalAlignment="Center"
27        VerticalAlignment="Center"
28        Click="Button_Click"
29        Content="なんか重い処理を始めます" />
30
31    </Grid>
32
33
34    <!--  これが上にかぶさるビジーインジケーター  -->
35    <Grid x:Name="busy" Visibility="Hidden">
36
37      <!--  ビジー中はボタン等をいじれないように半透明のGridを表示  -->
38      <Grid Background="Black" Opacity="0.2" />
39      <!--<Image Source="hoge.png" />-->
40
41      <!--  Ｃの字  -->
42      <!--  大きさを変える場合以下の50を全部変える  -->
43      <Path
44        HorizontalAlignment="Center"
45        VerticalAlignment="Center"
46        Stroke="Blue"
47        StrokeThickness="10">
48        <Path.Data>
49          <PathGeometry>
50            <PathGeometry.Figures>
51              <PathFigure StartPoint="50,0">
52                <ArcSegment
53                  IsLargeArc="True"
54                  Point="0,50"
55                  Size="50,50"
56                  SweepDirection="Clockwise" />
57              </PathFigure>
58            </PathGeometry.Figures>
59          </PathGeometry>
60        </Path.Data>
61        <Path.RenderTransform>
62          <RotateTransform CenterX="50" CenterY="50" />
63        </Path.RenderTransform>
64        <Path.Triggers>
65          <EventTrigger RoutedEvent="Loaded">
66            <BeginStoryboard>
67              <Storyboard>
68                <!--  回り続けるアニメーション Duration でスピードの変更  -->
69                <DoubleAnimation
70                  RepeatBehavior="Forever"
71                  Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
72                  To="360"
73                  Duration="0:0:1.5" />
74              </Storyboard>
75            </BeginStoryboard>
76          </EventTrigger>
77        </Path.Triggers>
78      </Path>
79    </Grid>
80  </Grid>
81</Window>

cs:MainWindow.xaml.cs
1using System.Threading;
2using System.Threading.Tasks;
3using System.Windows;
4
5namespace Questions256032
6{
7    public partial class MainWindow : Window
8    {
9        public MainWindow()
10        {
11            InitializeComponent();
12        }
13
14        private async void Button_Click(object sender, RoutedEventArgs e)
15        {
16            textBlock.Text = "重たい処理を始めるよ";
17            busy.Visibility = Visibility.Visible;
18
19            await Task.Run(() => HeavyWork());
20
21            busy.Visibility = Visibility.Hidden;
22            textBlock.Text = "終わったよ";
23        }
24
25        // なんか重たい処理をする
26        private void HeavyWork()
27        {
28            Thread.Sleep(5000);
29
30            // ＮＧ ここでは普通にはＵＩ要素に触れない
31            //textBlock.Text = "あとちょっと";
32
33            // ＯＫ
34            Dispatcher.Invoke(() => textBlock.Text = "あとちょっと");
35
36            Thread.Sleep(3000);
37        }
38    }
39}