[C#/WPF] Storyboad 클래스 : 스토리보드 객체를 대화형으로 제어하기

■ Storyboad 클래스를 사용해 스토리보드 객체를 대화형으로 제어하는 방법을 보여준다.

▶ 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>

<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>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

        #region Field

        /// <summary>
        /// 스토리보트
        /// </summary>
        private Storyboard storyboard;

        #endregion

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

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            NameScope.SetNameScope(this, new NameScope());

            #region 버튼을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Name   = "rectangle";
            rectangle.Width  = 100;
            rectangle.Height = 100;
            rectangle.Fill   = Brushes.Blue;

            #endregion

            RegisterName(rectangle.Name, rectangle);

            #region Begin 버튼을 생성한다.

            Button beginButton = new Button();

            beginButton.Width   = 100;
            beginButton.Height  = 30;
            beginButton.Content = "Begin";

            beginButton.Click += beginButton_Clicked;

            #endregion
            #region Pause 버튼을 생성한다.

            Button pauseButton = new Button();

            pauseButton.Margin  = new Thickness(10, 0, 0, 0);
            pauseButton.Width   = 100;
            pauseButton.Height  = 30;
            pauseButton.Content = "Pause";

            pauseButton.Click += pauseButton_Clicked;

            #endregion
            #region Resume 버튼을 생성한다.

            Button resumeButton = new Button();

            resumeButton.Margin  = new Thickness(10, 0, 0, 0);
            resumeButton.Width   = 100;
            resumeButton.Height  = 30;
            resumeButton.Content = "Resume";

            resumeButton.Click += resumeButton_Clicked;

            #endregion
            #region Skip to Fill 버튼을 생성한다.

            Button skipToFillButton = new Button();

            skipToFillButton.Margin  = new Thickness(10, 0, 0, 0);
            skipToFillButton.Width   = 120;
            skipToFillButton.Height  = 30;
            skipToFillButton.Content = "Skip to Fill";

            skipToFillButton.Click += new RoutedEventHandler(skipToFillButton_Clicked);

            #endregion
            #region Stop 버튼을 생성한다.

            Button stopButton = new Button();

            stopButton.Content = "Stop";

            stopButton.Margin  = new Thickness(10, 0, 0, 0);
            stopButton.Width   = 100;
            stopButton.Height  = 30;

            stopButton.Click += stopButton_Clicked;

            #endregion
            #region 컨트롤 스택 패널을 생성한다.

            StackPanel controlStackPanel = new StackPanel();

            controlStackPanel.Margin      = new Thickness(0, 50, 0, 0);
            controlStackPanel.Orientation = Orientation.Horizontal;

            controlStackPanel.Children.Add(beginButton);
            controlStackPanel.Children.Add(pauseButton);
            controlStackPanel.Children.Add(resumeButton);
            controlStackPanel.Children.Add(skipToFillButton);
            controlStackPanel.Children.Add(stopButton);

            #endregion
            #region 스택 패널을 생성한다.

            StackPanel stackPanel = new StackPanel();

            stackPanel.HorizontalAlignment = HorizontalAlignment.Center;
            stackPanel.VerticalAlignment   = VerticalAlignment.Center;

            stackPanel.Children.Add(rectangle);
            stackPanel.Children.Add(controlStackPanel);

            #endregion
            #region 더블 애니메이션을 생성한다.

            DoubleAnimation doubleAnimation = new DoubleAnimation();

            doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(5000));
            doubleAnimation.From     = 1.0;
            doubleAnimation.To       = 0.0;

            #endregion
            #region 스토리보드를 생성한다.

            storyboard = new Storyboard();

            storyboard.Children.Add(doubleAnimation);

            Storyboard.SetTargetName(doubleAnimation, rectangle.Name);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            #endregion

            Content = stackPanel;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Begin 버튼 클릭시 처리하기 - beginButton_Clicked(sender, e)

        /// <summary>
        /// Begin 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void beginButton_Clicked(object sender, RoutedEventArgs e)
        {
            this.storyboard.Begin(this, true);
        }

        #endregion
        #region Pause 버튼 클릭시 처리하기 - pauseButton_Clicked(sender, e)

        /// <summary>
        /// Pause 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void pauseButton_Clicked(object sender, RoutedEventArgs e)
        {
            this.storyboard.Pause(this);
        }

        #endregion
        #region Resume 버튼 클릭시 처리하기 - resumeButton_Clicked(sender, e)

        /// <summary>
        /// Resume 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void resumeButton_Clicked(object sender, RoutedEventArgs e)
        {
            this.storyboard.Resume(this);
        }

        #endregion
        #region Skip To Fill 버튼 클릭시 처리하기 - skipToFillButton_Clicked(sender, e)

        /// <summary>
        /// Skip To Fill 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void skipToFillButton_Clicked(object sender, RoutedEventArgs e)
        {
            this.storyboard.SkipToFill(this);
        }

        #endregion
        #region Stop 버튼 클릭시 처리하기 - stopButton_Clicked(sender, e)

        /// <summary>
        /// Stop 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stopButton_Clicked(object sender, RoutedEventArgs e)
        {
            this.storyboard.Stop(this);
        }

        #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

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 스토리보트

/// </summary>

private Storyboard storyboard;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

NameScope.SetNameScope(this, new NameScope());

#region 버튼을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Name = "rectangle";

rectangle.Width = 100;

rectangle.Height = 100;

rectangle.Fill = Brushes.Blue;

#endregion

RegisterName(rectangle.Name, rectangle);

#region Begin 버튼을 생성한다.

Button beginButton = new Button();

beginButton.Width = 100;

beginButton.Height = 30;

beginButton.Content = "Begin";

beginButton.Click += beginButton_Clicked;

#endregion

#region Pause 버튼을 생성한다.

Button pauseButton = new Button();

pauseButton.Margin = new Thickness(10, 0, 0, 0);

pauseButton.Width = 100;

pauseButton.Height = 30;

pauseButton.Content = "Pause";

pauseButton.Click += pauseButton_Clicked;

#endregion

#region Resume 버튼을 생성한다.

Button resumeButton = new Button();

resumeButton.Margin = new Thickness(10, 0, 0, 0);

resumeButton.Width = 100;

resumeButton.Height = 30;

resumeButton.Content = "Resume";

resumeButton.Click += resumeButton_Clicked;

#endregion

#region Skip to Fill 버튼을 생성한다.

Button skipToFillButton = new Button();

skipToFillButton.Margin = new Thickness(10, 0, 0, 0);

skipToFillButton.Width = 120;

skipToFillButton.Height = 30;

skipToFillButton.Content = "Skip to Fill";

skipToFillButton.Click += new RoutedEventHandler(skipToFillButton_Clicked);

#endregion

#region Stop 버튼을 생성한다.

Button stopButton = new Button();

stopButton.Content = "Stop";

stopButton.Margin = new Thickness(10, 0, 0, 0);

stopButton.Width = 100;

stopButton.Height = 30;

stopButton.Click += stopButton_Clicked;

#endregion

#region 컨트롤 스택 패널을 생성한다.

StackPanel controlStackPanel = new StackPanel();

controlStackPanel.Margin = new Thickness(0, 50, 0, 0);

controlStackPanel.Orientation = Orientation.Horizontal;

controlStackPanel.Children.Add(beginButton);

controlStackPanel.Children.Add(pauseButton);

controlStackPanel.Children.Add(resumeButton);

controlStackPanel.Children.Add(skipToFillButton);

controlStackPanel.Children.Add(stopButton);

#endregion

#region 스택 패널을 생성한다.

StackPanel stackPanel = new StackPanel();

stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

stackPanel.VerticalAlignment = VerticalAlignment.Center;

stackPanel.Children.Add(rectangle);

stackPanel.Children.Add(controlStackPanel);

#endregion

#region 더블 애니메이션을 생성한다.

DoubleAnimation doubleAnimation = new DoubleAnimation();

doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(5000));

doubleAnimation.From = 1.0;

doubleAnimation.To = 0.0;

#endregion

#region 스토리보드를 생성한다.

storyboard = new Storyboard();

storyboard.Children.Add(doubleAnimation);

Storyboard.SetTargetName(doubleAnimation, rectangle.Name);

Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

#endregion

Content = stackPanel;

}

#endregion

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

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

#region Begin 버튼 클릭시 처리하기 - beginButton_Clicked(sender, e)

/// <summary>

/// Begin 버튼 클릭시 처리하기

/// </summary>

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

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

private void beginButton_Clicked(object sender, RoutedEventArgs e)

{

this.storyboard.Begin(this, true);

}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Clicked(sender, e)

/// <summary>

/// Pause 버튼 클릭시 처리하기

/// </summary>

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

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

private void pauseButton_Clicked(object sender, RoutedEventArgs e)

{

this.storyboard.Pause(this);

}

#endregion

#region Resume 버튼 클릭시 처리하기 - resumeButton_Clicked(sender, e)

/// <summary>

/// Resume 버튼 클릭시 처리하기

/// </summary>

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

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

private void resumeButton_Clicked(object sender, RoutedEventArgs e)

{

this.storyboard.Resume(this);

}

#endregion

#region Skip To Fill 버튼 클릭시 처리하기 - skipToFillButton_Clicked(sender, e)

/// <summary>

/// Skip To Fill 버튼 클릭시 처리하기

/// </summary>

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

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

private void skipToFillButton_Clicked(object sender, RoutedEventArgs e)

{

this.storyboard.SkipToFill(this);

}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Clicked(sender, e)

/// <summary>

/// Stop 버튼 클릭시 처리하기

/// </summary>

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

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

private void stopButton_Clicked(object sender, RoutedEventArgs e)

{

this.storyboard.Stop(this);

}

#endregion

}

TestProject.zip