[C#/WPF] 백그라운드 스레드로 차단 작업 처리하기

■ 일기 예보를 검색하는 원격 프로시저 호출을 모방한다. 별도의 작업자 스레드를 사용하여 이 호출을 실행하고 완료되면 UI 스레드의 Dispatcher에서 업데이트 메소드를 예약한다.

▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <DrawingGroup x:Key="RainingDrawingGroupKey">
            <DrawingGroup.Children>
                <GeometryDrawing
                    Geometry="
M6.76 153.24 A13.5345 13.4115 90 0 1 17.84 128.71 A15.0216 14.8851 90 0 1 32.61 108.53 A19.4786 19.3016
90 0 1 69.53 104.8 A16.5876 16.4369 90 0 1 89.83 121.26 A10.1653 10.073 90 0 1 104.6 133.06 A15.6154
15.4735 90 0 1 124.91 153.24 L6.76 153.24 Z">
                    <GeometryDrawing.Pen>
                        <Pen
                            Thickness="1"
                            Brush="Gray" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Brush>
                        <LinearGradientBrush>
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Offset="0.0" Color="White"     />
                                <GradientStop Offset="1.0" Color="LightGray" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </GeometryDrawing.Brush>
                </GeometryDrawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing
                            Geometry="
M5.95 91.74 A35.3025 34.9817 90 0 1 5.01 103.12 A5.61727 5.56623 90 0 1 3.13 106.13 A3.80121 3.76667
-90 0 0 5.95 111.5 A5.44469 5.39522 -90 0 0 10.5 105.02 A26.575 26.3335 -90 0 0 5.95 91.74 Z M3.18
130.95 A35.3025 34.9817 90 0 1 2.24 142.33 A5.61719 5.56615 90 0 1 0.36 145.34 A3.80124 3.7667 -90
0 0 3.18 150.71 A5.44469 5.39522 -90 0 0 7.72 144.23 A26.5749 26.3334 -90 0 0 3.18 130.95 Z M21.66
110.71 A35.3025 34.9817 90 0 1 20.72 122.1 A5.61727 5.56623 90 0 1 18.84 125.1 A3.80122 3.76668
-90 0 0 21.66 130.47 A5.44471 5.39524 -90 0 0 26.21 123.99 A26.5749 26.3334 -90 0 0 21.66 110.71
Z M41.09 93.32 A35.3024 34.9816 90 0 1 40.15 104.71 A5.61747 5.56642 90 0 1 38.27 107.71 A3.80121
3.76667 -90 0 0 41.09 113.08 A5.44469 5.39522 -90 0 0 45.63 106.6 A26.575 26.3335 -90 0 0 41.09
93.32 Z M52.37 110.71 A35.3025 34.9817 90 0 1 51.43 122.1 A5.61747 5.56642 90 0 1 49.55 125.1 A3.80121
3.76667 -90 0 0 52.37 130.47 A5.44469 5.39522 -90 0 0 56.91 123.99 A26.575 26.3335 -90 0 0 52.37
110.71 Z M67.41 90.48 A35.3024 34.9816 90 0 1 66.47 101.86 A5.61747 5.56642 90 0 1 64.59 104.86
A3.80121 3.76667 -90 0 0 67.41 110.24 A5.44469 5.39522 -90 0 0 71.95 103.76 A26.575 26.3335 -90
0 0 67.41 90.48 Z M82.45 110.71 A35.3025 34.9817 90 0 1 81.51 122.1 A5.61747 5.56642 90 0 1 79.63
125.1 A3.80121 3.76667 -90 0 0 82.45 130.47 A5.44469 5.39522 -90 0 0 86.99 123.99 A26.575 26.3335
-90 0 0 82.45 110.71 Z M67.41 133.48 A35.3025 34.9817 90 0 1 66.47 144.86 A5.61747 5.56642 90 0
1 64.59 147.86 A3.80121 3.76667 -90 0 0 67.41 153.24 A5.44469 5.39522 -90 0 0 71.95 146.76 A26.575
26.3335 -90 0 0 67.41 133.48 Z M41.09 133.48 A35.3025 34.9817 90 0 1 40.15 144.86 A5.61747 5.56642
90 0 1 38.27 147.86 A3.80121 3.76667 -90 0 0 41.09 153.24 A5.44469 5.39522 -90 0 0 45.63 146.76
A26.575 26.3335 -90 0 0 41.09 133.48 Z">
                            <GeometryDrawing.Brush>
                                <LinearGradientBrush>
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0.0" Color="Blue"       />
                                        <GradientStop Offset="0.5" Color="MediumBlue" />
                                        <GradientStop Offset="1.0" Color="Blue"       />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </GeometryDrawing.Brush>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                    <DrawingGroup.Transform>
                        <TranslateTransform
                            X="17"
                            Y="65" />
                    </DrawingGroup.Transform>
                </DrawingGroup>
            </DrawingGroup.Children>
        </DrawingGroup>
        <DrawingGroup x:Key="SunnyDrawingGroupKey">
            <DrawingGroup.Children>
                <GeometryDrawing
                    Geometry="
M8.85 41.07 A53.4063 36.0963 -1.5 0 0 32.81 56.39 A176.023 34.7393 -82.77 0 0 30.96 29.48 A41.3095 36.4713
-162.8 0 0 44.23 50.04 A24.3287 2.62955 -74.97 0 0 53.08 27.24 A23.4226 5.77856 -97.65 0 0 61.92
49.66 A117.859 97.3275 -88.46 0 0 77.77 31.35 L75.19 56.39 A56.1767 42.6929 -171.79 0 0 95.1 45.18
A52.3347 15.5189 -74 0 0 82.2 65.36 A20.4525 3.85006 -5.14 0 0 106.16 67.23 A94.2464 31.8154 -11.62
0 0 86.25 78.81 A32.4058 16.4271 -0.4 0 0 108 89.65 A26.4725 3.83251 -7.16 0 0 82.2 96.75 A70.9645
39.7124 -159.18 0 0 97.31 114.69 A41.289 5.19876 9.99 0 1 75.19 107.59 A352.489 285.063 -52.69 0
0 75.19 132.62 A49.0409 22.2854 -152.61 0 0 59.34 112.44 A23.129 4.93305 -86.68 0 0 53.08 135.24
A25.4231 2.95392 -102.41 0 0 44.23 110.2 A27.7847 9.86429 -26.79 0 0 26.54 128.14 A123.684 43.8677
-98.31 0 0 30.96 105.72 a12.5105 0.527272 -16.92 1 0 -22.116 6.72664 A68.6524 39.3859 -25.17 0 0
22.12 92.54 A33.5368 7.04228 -8.3 0 0 0 90.02 A22.9471 2.22166 -22.95 0 0 20.27 78.81 A47.1813 38.6246
-6 0 0 0 65.36 A54.9062 23.4971 -177.4 0 0 23.96 65.36 A83.7028 35.4682 -142.76 0 0 8.85 41.07 Z">
                    <GeometryDrawing.Pen>
                        <Pen
                            Thickness="1"
                            Brush="Orange" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Brush>
                        <LinearGradientBrush>
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Offset="0.0" Color="Yellow" />
                                <GradientStop Offset="1.0" Color="Gold"   />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </GeometryDrawing.Brush>
                </GeometryDrawing>
                <GeometryDrawing>
                    <GeometryDrawing.Geometry>
                        <EllipseGeometry
                            Center="54 80.5"
                            RadiusX="30"
                            RadiusY="30" />
                    </GeometryDrawing.Geometry>
                    <GeometryDrawing.Pen>
                        <Pen
                            Thickness="1"
                            Brush="Orange" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Brush>
                        <RadialGradientBrush GradientOrigin="0.75 0.25">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Offset="0.0"  Color="Yellow" />
                                <GradientStop Offset="0.75" Color="Gold"   />
                                <GradientStop Offset="0.9"  Color="Orange" />
                                <GradientStop Offset="1.0"  Color="Gold"   />
                            </RadialGradientBrush.GradientStops>
                        </RadialGradientBrush>
                    </GeometryDrawing.Brush>
                </GeometryDrawing>
            </DrawingGroup.Children>
        </DrawingGroup>
    </Application.Resources>
</Application>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<Application x:Class="TestProject.MainApplication"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

<DrawingGroup.Children>

<GeometryDrawing

Geometry="

M6.76 153.24 A13.5345 13.4115 90 0 1 17.84 128.71 A15.0216 14.8851 90 0 1 32.61 108.53 A19.4786 19.3016

90 0 1 69.53 104.8 A16.5876 16.4369 90 0 1 89.83 121.26 A10.1653 10.073 90 0 1 104.6 133.06 A15.6154

15.4735 90 0 1 124.91 153.24 L6.76 153.24 Z">

<GeometryDrawing.Pen>

<Pen

Thickness="1"

Brush="Gray" />

</GeometryDrawing.Pen>

<GeometryDrawing.Brush>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

<DrawingGroup.Children>

<GeometryDrawing

Geometry="

M5.95 91.74 A35.3025 34.9817 90 0 1 5.01 103.12 A5.61727 5.56623 90 0 1 3.13 106.13 A3.80121 3.76667

-90 0 0 5.95 111.5 A5.44469 5.39522 -90 0 0 10.5 105.02 A26.575 26.3335 -90 0 0 5.95 91.74 Z M3.18

130.95 A35.3025 34.9817 90 0 1 2.24 142.33 A5.61719 5.56615 90 0 1 0.36 145.34 A3.80124 3.7667 -90

0 0 3.18 150.71 A5.44469 5.39522 -90 0 0 7.72 144.23 A26.5749 26.3334 -90 0 0 3.18 130.95 Z M21.66

110.71 A35.3025 34.9817 90 0 1 20.72 122.1 A5.61727 5.56623 90 0 1 18.84 125.1 A3.80122 3.76668

-90 0 0 21.66 130.47 A5.44471 5.39524 -90 0 0 26.21 123.99 A26.5749 26.3334 -90 0 0 21.66 110.71

Z M41.09 93.32 A35.3024 34.9816 90 0 1 40.15 104.71 A5.61747 5.56642 90 0 1 38.27 107.71 A3.80121

3.76667 -90 0 0 41.09 113.08 A5.44469 5.39522 -90 0 0 45.63 106.6 A26.575 26.3335 -90 0 0 41.09

93.32 Z M52.37 110.71 A35.3025 34.9817 90 0 1 51.43 122.1 A5.61747 5.56642 90 0 1 49.55 125.1 A3.80121

3.76667 -90 0 0 52.37 130.47 A5.44469 5.39522 -90 0 0 56.91 123.99 A26.575 26.3335 -90 0 0 52.37

110.71 Z M67.41 90.48 A35.3024 34.9816 90 0 1 66.47 101.86 A5.61747 5.56642 90 0 1 64.59 104.86

A3.80121 3.76667 -90 0 0 67.41 110.24 A5.44469 5.39522 -90 0 0 71.95 103.76 A26.575 26.3335 -90

0 0 67.41 90.48 Z M82.45 110.71 A35.3025 34.9817 90 0 1 81.51 122.1 A5.61747 5.56642 90 0 1 79.63

125.1 A3.80121 3.76667 -90 0 0 82.45 130.47 A5.44469 5.39522 -90 0 0 86.99 123.99 A26.575 26.3335

-90 0 0 82.45 110.71 Z M67.41 133.48 A35.3025 34.9817 90 0 1 66.47 144.86 A5.61747 5.56642 90 0

1 64.59 147.86 A3.80121 3.76667 -90 0 0 67.41 153.24 A5.44469 5.39522 -90 0 0 71.95 146.76 A26.575

26.3335 -90 0 0 67.41 133.48 Z M41.09 133.48 A35.3025 34.9817 90 0 1 40.15 144.86 A5.61747 5.56642

90 0 1 38.27 147.86 A3.80121 3.76667 -90 0 0 41.09 153.24 A5.44469 5.39522 -90 0 0 45.63 146.76

A26.575 26.3335 -90 0 0 41.09 133.48 Z">

<GeometryDrawing.Brush>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

</DrawingGroup.Children>

<DrawingGroup.Transform>

<TranslateTransform

X="17"

Y="65" />

</DrawingGroup.Transform>

</DrawingGroup>

</DrawingGroup.Children>

</DrawingGroup>

<DrawingGroup.Children>

<GeometryDrawing

Geometry="

M8.85 41.07 A53.4063 36.0963 -1.5 0 0 32.81 56.39 A176.023 34.7393 -82.77 0 0 30.96 29.48 A41.3095 36.4713

-162.8 0 0 44.23 50.04 A24.3287 2.62955 -74.97 0 0 53.08 27.24 A23.4226 5.77856 -97.65 0 0 61.92

49.66 A117.859 97.3275 -88.46 0 0 77.77 31.35 L75.19 56.39 A56.1767 42.6929 -171.79 0 0 95.1 45.18

A52.3347 15.5189 -74 0 0 82.2 65.36 A20.4525 3.85006 -5.14 0 0 106.16 67.23 A94.2464 31.8154 -11.62

0 0 86.25 78.81 A32.4058 16.4271 -0.4 0 0 108 89.65 A26.4725 3.83251 -7.16 0 0 82.2 96.75 A70.9645

39.7124 -159.18 0 0 97.31 114.69 A41.289 5.19876 9.99 0 1 75.19 107.59 A352.489 285.063 -52.69 0

0 75.19 132.62 A49.0409 22.2854 -152.61 0 0 59.34 112.44 A23.129 4.93305 -86.68 0 0 53.08 135.24

A25.4231 2.95392 -102.41 0 0 44.23 110.2 A27.7847 9.86429 -26.79 0 0 26.54 128.14 A123.684 43.8677

-98.31 0 0 30.96 105.72 a12.5105 0.527272 -16.92 1 0 -22.116 6.72664 A68.6524 39.3859 -25.17 0 0

22.12 92.54 A33.5368 7.04228 -8.3 0 0 0 90.02 A22.9471 2.22166 -22.95 0 0 20.27 78.81 A47.1813 38.6246

-6 0 0 0 65.36 A54.9062 23.4971 -177.4 0 0 23.96 65.36 A83.7028 35.4682 -142.76 0 0 8.85 41.07 Z">

<GeometryDrawing.Pen>

<Pen

Thickness="1"

Brush="Orange" />

</GeometryDrawing.Pen>

<GeometryDrawing.Brush>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="54 80.5"

RadiusX="30"

RadiusY="30" />

</GeometryDrawing.Geometry>

<GeometryDrawing.Pen>

<Pen

Thickness="1"

Brush="Orange" />

</GeometryDrawing.Pen>

<GeometryDrawing.Brush>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

</DrawingGroup.Children>

</DrawingGroup>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="ShowClockStoryboardKey">
            <DoubleAnimation
                Storyboard.TargetName="clockImage"
                Storyboard.TargetProperty="Opacity"
                Duration="00:00:00.1"
                From="0"
                To="1" />
            <DoubleAnimation
                Storyboard.TargetName="clockScaleTransform"
                Storyboard.TargetProperty="ScaleX"
                Duration="00:00:00.5"
                From="0"
                To="1" />
            <DoubleAnimation
                Storyboard.TargetName="clockScaleTransform"
                Storyboard.TargetProperty="ScaleY"
                Duration="00:00:00.5"
                From="0"
                To="1" />
            <DoubleAnimation
                Storyboard.TargetName="clockHandRotateTransform"
                Storyboard.TargetProperty="Angle"
                From="0"
                To="360"
                Duration="00:00:02"
                RepeatBehavior="Forever" />
        </Storyboard>
        <Storyboard x:Key="HideClockStoryboardKey"
            Completed="hideClockStoryboard_Completed">
            <DoubleAnimation
                Storyboard.TargetName="clockImage"
                Storyboard.TargetProperty="Opacity"
                Duration="00:00:00.25"
                From="1"
                To="0" />
            <DoubleAnimation
                Storyboard.TargetName="clockScaleTransform"
                Storyboard.TargetProperty="ScaleX"
                Duration="00:00:00.25"
                From="1"
                To="0" />
            <DoubleAnimation
                Storyboard.TargetName="clockScaleTransform"
                Storyboard.TargetProperty="ScaleY"
                Duration="00:00:00.25"
                From="1"
                To="0" />
        </Storyboard>
        <Storyboard x:Key="ShowWeatherStoryboardKey">
            <DoubleAnimation
                Storyboard.TargetName="weatherImage"
                Storyboard.TargetProperty="Opacity"
                Duration="00:00:00.1"
                To="1" />
            <DoubleAnimation
                Storyboard.TargetName="weatherImageScaleTransform"
                Storyboard.TargetProperty="ScaleX"
                Duration="00:00:00.5"
                From="0"
                To="1" />
            <DoubleAnimation
                Storyboard.TargetName="weatherImageScaleTransform"
                Storyboard.TargetProperty="ScaleY"
                Duration="00:00:00.5"
                From="0"
                To="1" />
        </Storyboard>
        <Storyboard x:Key="HideWeatherStoryboardKey"
            Completed="hideWeatherStoryboard_Completed">
            <DoubleAnimation
                Storyboard.TargetName="weatherImage"
                Storyboard.TargetProperty="Opacity"
                Duration="00:00:00.1"
                To="0" />
        </Storyboard>
        <DrawingImage x:Key="RainingDrawingImageKey"
            Drawing="{StaticResource RainingDrawingGroupKey}" />
        <DrawingImage x:Key="SunnyDrawingImageKey"
            Drawing="{StaticResource SunnyDrawingGroupKey}" />
    </Window.Resources>
    <Grid Name="rootGrid"
        Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Button Name="fetchButton" Grid.Row="0"
            Height="30"
            Content="Fetch Forecast" />
        <Image Name="clockImage" Grid.Row="1"
            Margin="10"
            Stretch="Uniform"
            RenderTransformOrigin="0.5 0.5"
            Opacity="0">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <EllipseGeometry
                                            Center="50 50"
                                            RadiusX="45"
                                            RadiusY="45" />
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Brush>
                                        <LinearGradientBrush
                                            StartPoint="0.5 0"
                                            EndPoint="0.5 1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0.0" Color="LightGray" />
                                                <GradientStop Offset="0.5" Color="#ccccff"   />
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Pen>
                                        <Pen
                                            Thickness="5"
                                            Brush="Black" />
                                    </GeometryDrawing.Pen>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <LineGeometry
                                            StartPoint="50 50"
                                            EndPoint="50 10">
                                            <LineGeometry.Transform>
                                                <RotateTransform x:Name="clockHandRotateTransform"
                                                    Angle="0"
                                                    CenterX="50"
                                                    CenterY="50" />
                                            </LineGeometry.Transform>
                                        </LineGeometry>
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Pen>
                                        <Pen
                                            Thickness="5"
                                            StartLineCap="Round"
                                            EndLineCap="Triangle"
                                            Brush="Black" />
                                    </GeometryDrawing.Pen>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <EllipseGeometry
                                            Center="50 50"
                                            RadiusX="45"
                                            RadiusY="45" />
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush GradientOrigin="0.75 0.25">
                                            <RadialGradientBrush.GradientStops>
                                                <GradientStop Offset="0.0"  Color="#99ffffff"   />
                                                <GradientStop Offset="0.5"  Color="Transparent" />
                                                <GradientStop Offset="0.75" Color="#99ffffff"   />
                                                <GradientStop Offset="1.0"  Color="#33000000"   />
                                            </RadialGradientBrush.GradientStops>
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <EllipseGeometry
                                            Center="50 50"
                                            RadiusX="45"
                                            RadiusY="45" />
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Brush>
                                        <LinearGradientBrush
                                            StartPoint="0.75 0.1"
                                            EndPoint="0.25 0.9">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0.0" Color="#99ffffff"   />
                                                <GradientStop Offset="0.5" Color="Transparent" />
                                                <GradientStop Offset="1.0" Color="#99000000"   />
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
            <Image.RenderTransform>
                <ScaleTransform x:Name="clockScaleTransform" />
            </Image.RenderTransform>
        </Image>
        <Image Name="weatherImage" Grid.Row="1"
            Margin="10"
            Opacity="0"
            RenderTransformOrigin="0.5 0.5">
            <Image.RenderTransform>
                <ScaleTransform x:Name="weatherImageScaleTransform" />
            </Image.RenderTransform>
        </Image>
        <TextBlock Name="weatherTextBlock" Grid.Row="2"
            Margin="10"
            HorizontalAlignment="Center" />
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<DoubleAnimation

Storyboard.TargetName="clockImage"

Storyboard.TargetProperty="Opacity"

Duration="00:00:00.1"

From="0"

To="1" />

<DoubleAnimation

Storyboard.TargetName="clockScaleTransform"

Storyboard.TargetProperty="ScaleX"

Duration="00:00:00.5"

From="0"

To="1" />

<DoubleAnimation

Storyboard.TargetName="clockScaleTransform"

Storyboard.TargetProperty="ScaleY"

Duration="00:00:00.5"

From="0"

To="1" />

<DoubleAnimation

Storyboard.TargetName="clockHandRotateTransform"

Storyboard.TargetProperty="Angle"

From="0"

To="360"

Duration="00:00:02"

RepeatBehavior="Forever" />

</Storyboard>

<Storyboard x:Key="HideClockStoryboardKey"

Completed="hideClockStoryboard_Completed">

<DoubleAnimation

Storyboard.TargetName="clockImage"

Storyboard.TargetProperty="Opacity"

Duration="00:00:00.25"

From="1"

To="0" />

<DoubleAnimation

Storyboard.TargetName="clockScaleTransform"

Storyboard.TargetProperty="ScaleX"

Duration="00:00:00.25"

From="1"

To="0" />

<DoubleAnimation

Storyboard.TargetName="clockScaleTransform"

Storyboard.TargetProperty="ScaleY"

Duration="00:00:00.25"

From="1"

To="0" />

</Storyboard>

<DoubleAnimation

Storyboard.TargetName="weatherImage"

Storyboard.TargetProperty="Opacity"

Duration="00:00:00.1"

To="1" />

<DoubleAnimation

Storyboard.TargetName="weatherImageScaleTransform"

Storyboard.TargetProperty="ScaleX"

Duration="00:00:00.5"

From="0"

To="1" />

<DoubleAnimation

Storyboard.TargetName="weatherImageScaleTransform"

Storyboard.TargetProperty="ScaleY"

Duration="00:00:00.5"

From="0"

To="1" />

</Storyboard>

<Storyboard x:Key="HideWeatherStoryboardKey"

Completed="hideWeatherStoryboard_Completed">

<DoubleAnimation

Storyboard.TargetName="weatherImage"

Storyboard.TargetProperty="Opacity"

Duration="00:00:00.1"

To="0" />

</Storyboard>

<DrawingImage x:Key="RainingDrawingImageKey"

Drawing="{StaticResource RainingDrawingGroupKey}" />

<DrawingImage x:Key="SunnyDrawingImageKey"

Drawing="{StaticResource SunnyDrawingGroupKey}" />

</Window.Resources>

<Grid Name="rootGrid"

Margin="10">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button Name="fetchButton" Grid.Row="0"

Height="30"

Content="Fetch Forecast" />

<Image Name="clockImage" Grid.Row="1"

Margin="10"

Stretch="Uniform"

RenderTransformOrigin="0.5 0.5"

Opacity="0">

<Image.Source>

<DrawingImage.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="50 50"

RadiusX="45"

RadiusY="45" />

</GeometryDrawing.Geometry>

<GeometryDrawing.Brush>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</GeometryDrawing.Brush>

<GeometryDrawing.Pen>

<Pen

Thickness="5"

Brush="Black" />

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing.Geometry>

<LineGeometry

StartPoint="50 50"

EndPoint="50 10">

<LineGeometry.Transform>

<RotateTransform x:Name="clockHandRotateTransform"

Angle="0"

CenterX="50"

CenterY="50" />

</LineGeometry.Transform>

</LineGeometry>

</GeometryDrawing.Geometry>

<GeometryDrawing.Pen>

<Pen

Thickness="5"

StartLineCap="Round"

EndLineCap="Triangle"

Brush="Black" />

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="50 50"

RadiusX="45"

RadiusY="45" />

</GeometryDrawing.Geometry>

<GeometryDrawing.Brush>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="50 50"

RadiusX="45"

RadiusY="45" />

</GeometryDrawing.Geometry>

<GeometryDrawing.Brush>

<LinearGradientBrush

StartPoint="0.75 0.1"

EndPoint="0.25 0.9">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</GeometryDrawing.Brush>

</GeometryDrawing>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingImage.Drawing>

</DrawingImage>

</Image.Source>

<Image.RenderTransform>

</Image.RenderTransform>

</Image>

<Image Name="weatherImage" Grid.Row="1"

Margin="10"

Opacity="0"

RenderTransformOrigin="0.5 0.5">

<Image.RenderTransform>

</Image.RenderTransform>

</Image>

<TextBlock Name="weatherTextBlock" Grid.Row="2"

Margin="10"

HorizontalAlignment="Center" />

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Threading;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Threading;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Delegate
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Delegate

        /// <summary>
        /// 단순 대리자
        /// </summary>
        private delegate void SimpleDelegate();

        /// <summary>
        /// 단일 인자 대리자
        /// </summary>
        /// <param name="argument">인자</param>
        private delegate void SingleArgumentDelegate(string argument);

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 시계 표시하기 스토리보드
        /// </summary>
        private Storyboard showClockStoryboard;

        /// <summary>
        /// 시계 숨기기 스토리보드
        /// </summary>
        private Storyboard hideClockStoryboard;

        /// <summary>
        /// 날씨 표시하기 스토리 보드
        /// </summary>
        private Storyboard showWeatherStoryboard;

        /// <summary>
        /// 날씨 숨기기 스토리 보드
        /// </summary>
        private Storyboard hideWeatherStoryboard;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            Loaded                 += Window_Loaded;
            this.fetchButton.Click += fetchButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.showClockStoryboard   = (Storyboard)Resources["ShowClockStoryboardKey"  ];
            this.hideClockStoryboard   = (Storyboard)Resources["HideClockStoryboardKey"  ];
            this.showWeatherStoryboard = (Storyboard)Resources["ShowWeatherStoryboardKey"];
            this.hideWeatherStoryboard = (Storyboard)Resources["HideWeatherStoryboardKey"];
        }

        #endregion
        #region Fetch Forecast 버튼 클릭시 처리하기 - fetchButton_Click(sender, e)

        /// <summary>
        /// Fetch Forecast 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void fetchButton_Click(object sender, RoutedEventArgs e)
        {
            this.fetchButton.IsEnabled = false;

            this.fetchButton.Content = "Contacting Server";

            this.weatherTextBlock.Text = string.Empty;

            this.hideWeatherStoryboard.Begin(this);

            SimpleDelegate simpleDelegate = new SimpleDelegate(FetchWeatherFromServer);

            simpleDelegate.BeginInvoke(null, null);
        }

        #endregion
        #region 시계 숨기기 스토리보드 완료시 처리하기 - hideClockStoryboard_Completed(sender, e)

        /// <summary>
        /// 시계 숨기기 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hideClockStoryboard_Completed(object sender, EventArgs e)
        {
            this.showWeatherStoryboard.Begin(this);
        }

        #endregion
        #region 날씨 숨기기 스토리보드 완료시 처리하기 - hideWeatherStoryboard_Completed(sender, e)

        /// <summary>
        /// 날씨 숨기기 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hideWeatherStoryboard_Completed(object sender, EventArgs e)
        {
            this.showClockStoryboard.Begin(this, true);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region UI 업데이트하기 - UpdateUI(weather)

        /// <summary>
        /// UI 업데이트하기
        /// </summary>
        /// <param name="weather">날씨</param>
        private void UpdateUI(string weather)
        {
            if(weather == "sunny")
            {
                this.weatherImage.Source = (ImageSource)Resources["SunnyDrawingImageKey"];
            }
            else if(weather == "rainy")
            {
                this.weatherImage.Source = (ImageSource)Resources["RainingDrawingImageKey"];
            }

            this.showClockStoryboard.Stop(this);
            this.hideClockStoryboard.Begin(this);

            this.fetchButton.IsEnabled = true;
            this.fetchButton.Content   = "Fetch Forecast";

            this.weatherTextBlock.Text = weather;
        }

        #endregion
        #region 서버에서 날씨 가져오기 - FetchWeatherFromServer()

        /// <summary>
        /// 서버에서 날씨 가져오기
        /// </summary>
        private void FetchWeatherFromServer()
        {
            Thread.Sleep(4000);

            Random random = new Random();

            string weather;

            weather = random.Next(2) == 0 ? "rainy" : "sunny";

            this.rootGrid.Dispatcher.BeginInvoke(DispatcherPriority.Normal, new SingleArgumentDelegate(UpdateUI), weather);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

using System;

using System.Threading;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Threading;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Delegate

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Delegate

/// <summary>

/// 단순 대리자

/// </summary>

private delegate void SimpleDelegate();

/// <summary>

/// 단일 인자 대리자

/// </summary>

/// <param name="argument">인자</param>

private delegate void SingleArgumentDelegate(string argument);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 시계 표시하기 스토리보드

/// </summary>

private Storyboard showClockStoryboard;

/// <summary>

/// 시계 숨기기 스토리보드

/// </summary>

private Storyboard hideClockStoryboard;

/// <summary>

/// 날씨 표시하기 스토리 보드

/// </summary>

private Storyboard showWeatherStoryboard;

/// <summary>

/// 날씨 숨기기 스토리 보드

/// </summary>

private Storyboard hideWeatherStoryboard;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

Loaded += Window_Loaded;

this.fetchButton.Click += fetchButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

/// <summary>

/// 윈도우 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void Window_Loaded(object sender, RoutedEventArgs e)

{

this.showClockStoryboard = (Storyboard)Resources["ShowClockStoryboardKey" ];

this.hideClockStoryboard = (Storyboard)Resources["HideClockStoryboardKey" ];

this.showWeatherStoryboard = (Storyboard)Resources["ShowWeatherStoryboardKey"];

this.hideWeatherStoryboard = (Storyboard)Resources["HideWeatherStoryboardKey"];

}

#endregion

#region Fetch Forecast 버튼 클릭시 처리하기 - fetchButton_Click(sender, e)

/// <summary>

/// Fetch Forecast 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void fetchButton_Click(object sender, RoutedEventArgs e)

{

this.fetchButton.IsEnabled = false;

this.fetchButton.Content = "Contacting Server";

this.weatherTextBlock.Text = string.Empty;

this.hideWeatherStoryboard.Begin(this);

SimpleDelegate simpleDelegate = new SimpleDelegate(FetchWeatherFromServer);

simpleDelegate.BeginInvoke(null, null);

}

#endregion

#region 시계 숨기기 스토리보드 완료시 처리하기 - hideClockStoryboard_Completed(sender, e)

/// <summary>

/// 시계 숨기기 스토리보드 완료시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void hideClockStoryboard_Completed(object sender, EventArgs e)

{

this.showWeatherStoryboard.Begin(this);

}

#endregion

#region 날씨 숨기기 스토리보드 완료시 처리하기 - hideWeatherStoryboard_Completed(sender, e)

/// <summary>

/// 날씨 숨기기 스토리보드 완료시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void hideWeatherStoryboard_Completed(object sender, EventArgs e)

{

this.showClockStoryboard.Begin(this, true);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region UI 업데이트하기 - UpdateUI(weather)

/// <summary>

/// UI 업데이트하기

/// </summary>

/// <param name="weather">날씨</param>

private void UpdateUI(string weather)

{

if(weather == "sunny")

{

this.weatherImage.Source = (ImageSource)Resources["SunnyDrawingImageKey"];

}

else if(weather == "rainy")

{

this.weatherImage.Source = (ImageSource)Resources["RainingDrawingImageKey"];

}

this.showClockStoryboard.Stop(this);

this.hideClockStoryboard.Begin(this);

this.fetchButton.IsEnabled = true;

this.fetchButton.Content = "Fetch Forecast";

this.weatherTextBlock.Text = weather;

}

#endregion

#region 서버에서 날씨 가져오기 - FetchWeatherFromServer()

/// <summary>

/// 서버에서 날씨 가져오기

/// </summary>

private void FetchWeatherFromServer()

{

Thread.Sleep(4000);

Random random = new Random();

string weather;

weather = random.Next(2) == 0 ? "rainy" : "sunny";

this.rootGrid.Dispatcher.BeginInvoke(DispatcherPriority.Normal, new SingleArgumentDelegate(UpdateUI), weather);

}

#endregion

}

TestProject.zip