コントロールの初期化処理やデータの読み込み処理に時間がかかる場合、IsLoadingUIVisible プロパティを true に設定して、ロード中のインジケータ（ローディングUI）を表示することができます。データの読み込みが完了した後でIsLoadingUIVisible を false に設定して、ローディングUIを非表示にします。
また、ローディングUIはUIスレッドで表示されるため、UIスレッドがブロックされないように実装する必要があります。
以下のサンプルでは、Taskクラスを使用してデータソースを作成しています。
| C# |
コードのコピー |
|---|---|
private async void Button_Click(object sender, RoutedEventArgs e) { this.gcSpreadGrid.IsLoadingUIVisible = true; List<Product> products = new List<Product>(); await Task.Yield(); await Task.Run(() => { for (int i = 0; i<100; i++) { products.Add(new Product() { ・・・ }); Task.Delay(200).GetAwaiter().GetResult(); } }); this.gcSpreadGrid.ItemsSource = products; this.gcSpreadGrid.IsLoadingUIVisible = false; } | |
| Visual Basic |
コードのコピー |
|---|---|
Private Async Sub Button_Click(sender As Object, e As RoutedEventArgs) gcSpreadGrid.IsLoadingUIVisible = True Dim products As New List(Of Product) Await Task.Yield() Await Task.Run( Sub() For i As Integer = 0 To 100 products.Add(New Product() With { ・・・}) Next Task.Delay(200).GetAwaiter().GetResult() End Sub ) gcSpreadGrid.ItemsSource = products gcSpreadGrid.IsLoadingUIVisible = False End Sub | |
デフォルトではローディングUIが表示されている間は、次のようにコントロールはグレー表示となりスピナーが表示されます。また、コントロールからフォーカスが外れ、マウスカーソルも待機状態に変更されます。
ローディングUIのカスタマイズ
ローディングUIは、次のようにControlTemplateを作成してカスタマイズできます。
| XAML |
コードのコピー |
|---|---|
<Window.Resources> <Storyboard x:Name="spinner" x:Key="spinner" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="180"/> <EasingDoubleKeyFrame KeyTime="00:00:01" Value="359"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Style TargetType="{x:Type sg:LoadingUI}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type sg:LoadingUI}"> <Grid Background="#3F7F7F7F" Cursor="Wait"> <Canvas x:Name="canvas" Height="24" Width="24" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"> <Canvas.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Canvas.RenderTransform> <Path Data="F1 M 10.000,2.918 C 6.123,2.918 2.964,6.050 2.920,9.917 L 0.002,9.917 C 0.046,4.441 4.514,0.000 10.000,0.000 C 15.487,0.000 19.954,4.441 19.999,9.917 L 17.080,9.917 C 17.036,6.050 13.878,2.918 10.000,2.918 Z" UseLayoutRounding="False" Canvas.Top="1.932" Canvas.Left="1.937"> <Path.Fill> <LinearGradientBrush MappingMode="Absolute" StartPoint="399.906,240.414" EndPoint="419.903,240.414"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.26" Color="#ff7f7f7f"/> <GradientStop Offset="1.00" Color="#ff323232"/> </LinearGradientBrush.GradientStops> <LinearGradientBrush.Transform> <MatrixTransform Matrix="-1.000,0.000,0.000,-1.000,419.905,245.373" /> </LinearGradientBrush.Transform> </LinearGradientBrush> </Path.Fill> </Path> <Path Data="F1 M 17.080,9.917 C 17.080,9.945 17.083,9.972 17.083,10.000 C 17.083,13.904 13.905,17.082 10.000,17.082 C 6.095,17.082 2.917,13.904 2.917,10.000 C 2.917,9.972 2.920,9.945 2.920,9.917 L 0.002,9.917 C 0.002,9.945 0.000,9.972 0.000,10.000 C 0.000,15.514 4.485,20.000 10.000,20.000 C 15.514,20.000 20.000,15.514 20.000,10.000 C 20.000,9.972 19.999,9.945 19.999,9.917 L 17.080,9.917 Z" UseLayoutRounding="False" Canvas.Top="1.932" Canvas.Left="1.937"> <Path.Fill> <LinearGradientBrush MappingMode="Absolute" StartPoint="489.491,230.414" EndPoint="509.491,230.414"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0.00" Color="#ffffffff"/> <GradientStop Offset="0.73" Color="#ff7f7f7f"/> </LinearGradientBrush.GradientStops> <LinearGradientBrush.Transform> <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-489.491,245.373" /> </LinearGradientBrush.Transform> </LinearGradientBrush> </Path.Fill> </Path> <Canvas.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource spinner}"/> </EventTrigger> </Canvas.Triggers> </Canvas> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> | |
上記のテンプレートを適用した結果は次のようになります。
また、テンプレートの「<Grid Background="#3F7F7F7F" Cursor="Wait">」を変更することで、ローディングUI表示中の背景色やマウスカーソルの形状をカスタマイズすることもできます。
関連トピック