ローディングUI

コントロールの初期化処理やデータの読み込み処理に時間がかかる場合、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; }

コードのコピー

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

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>

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表示中の背景色やマウスカーソルの形状をカスタマイズすることもできます。