도전2022
Expression Blend 또는 Visual Studio를 사용하여 Silverlight 시계 만들기 본문
http://msdn.microsoft.com/ko-kr/library/bb404709(v=vs.95).aspx
연습: Expression Blend 또는 Visual Studio를 사용하여 Silverlight 시계 만들기
Silverlight에서는 XAML(Extensible Application Markup Language)을 사용하여 고유한 UI(사용자 인터페이스) 요소를 만듭니다.XAML은 Expression Blend 같은 비주얼 디자인 도구 또는 Visual Studio를 사용하여 작성할 수 있습니다. 이 연습에서는 Expression Blend와 Visual Studio를 사용하여 Silverlight로 간단한 시계를 만드는 방법을 보여 줍니다. 다음 그림에서는 사용자가 만들 시계를 보여 줍니다.
이 연습을 완료하려면 다음 구성 요소가 필요합니다. 이러한 구성 요소는 Silverlight 다운로드 사이트에서 다운로드할 수 있습니다.
Expression Blend 4(선택 사항)
Visual Studio 2010
Silverlight 4 이상
시계는 다음 그림에 나와 있는 그래픽 요소로 구성됩니다.
Expression Blend에서 새 Silverlight 응용 프로그램 프로젝트를 만들려면
Expression Blend를 시작합니다. 시작 폼이 나타나면 닫기를 클릭합니다.파일 메뉴에서 새 프로젝트를 클릭합니다.
새 프로젝트 대화 상자가 표시됩니다.
프로젝트 형식 창에서 Silverlight를 선택합니다.
프로젝트 목록에서 Silverlight 응용 프로그램을 선택합니다.
이름 상자에 SilverlightClock을 입력합니다.
언어 목록에서 Visual Basic 또는 Visual C#을 선택합니다.
버전 목록에서 4.0을 선택합니다.
확인을 클릭하여 프로젝트를 만듭니다.
그런 다음 아트보드의 크기를 설정합니다.
개체 및 타임라인 패널에서 [UserControl]을 선택합니다.
속성 패널의 레이아웃에서 너비 및 높이를 400으로 설정합니다.
아트보드의 크기가 변경됩니다.
그러면 빈 프로젝트가 만들어집니다. F5 키를 눌러 응용 프로그램을 실행하면 빈 웹 페이지만 표시됩니다.
시계의 그림자를 만들려면
도구 패널에서 사각형 도구를 마우스 오른쪽 단추로 클릭하고 타원을 클릭합니다.
아트보드에서 너비와 높이가 330픽셀 정도인 타원을 그립니다. 그림을 그릴 때 Shift 키를 누르면 너비와 높이가 동일하게 유지됩니다.타원 위치를 변경해야 하는 경우 도구 패널에서 선택 도구를 클릭하고 타원 위치를 변경합니다.
그런 다음 타원 속성을 변경합니다.
속성 패널의 이름 상자에서 타원 이름을 shadowEllipse로 설정합니다.
속성 패널의 브러시에서 채우기를 클릭한 다음 단색 브러시를 클릭합니다.
색상 편집기에서 색상을 검정색으로 설정합니다.
모양에서 불투명도를 30%로 설정합니다.
그러면 타원에 반투명한 검정 채우기가 적용되어 그림자 효과를 낼 수 있습니다.
파일 메뉴에서 모두 저장을 클릭합니다.
시계의 바깥쪽 테두리를 만들려면
도구 패널에서 선택 도구를 클릭합니다.
아트보드에서 그림자 타원을 클릭하여 선택합니다.
편집 메뉴에서 복사를 선택하거나 Ctrl+C를 누릅니다.
편집 메뉴에서 붙여넣기를 선택하거나 Ctrl+V를 누릅니다.
shadowEllipse_Copy라는 이름의 새 타원이 정확히 그림자 타원 위에 나타납니다.
속성 패널에서 이름을 outerRimEllipse로 설정합니다.
그런 다음 outerRimEllipse를 간단한 그라데이션으로 채웁니다. Expression Blend에서는 몇 가지 단계를 거쳐 그라데이션을 만들 수 있습니다.개체 및 타임라인 패널에서 outerRimEllipse가 선택되어 있는지 확인합니다.
속성 패널의 모양에서 불투명도를 100%로 설정합니다.
속성 패널의 브러시에서 채우기를 클릭한 다음 그라데이션 브러시를 클릭합니다.
색상 편집기의 그라데이션 막대에서 왼쪽 그라데이션 중지점을 클릭하고 색상을 #FFE4E5F4로 설정합니다.
오른쪽 그라데이션 중지점을 클릭하고 색상을 #FFC0C0C0으로 설정합니다.
그런 다음 타원 위에서 왼쪽에서 오른쪽으로 진행되는 대신 왼쪽 위에서 오른쪽 아래로 진행되도록 선형 그라데이션의 방향을 변경합니다.
도구 패널에서 그라데이션 도구를 클릭합니다.
세로 화살표가 outerRimEllipse에 나타납니다.
마우스 포인터가 회전 아이콘으로 바뀔 때까지 마우스 포인터를 화살표 머리 또는 화살표 꼬리 근처로 이동합니다.
화살표를 회전하여 선형 그라데이션의 방향을 왼쪽 위에서 오른쪽 아래로 설정합니다.
속성 패널의 브러시에서 오른쪽 그라데이션 중지점을 왼쪽으로 끌어 그라데이션을 왼쪽에 집중시킵니다.
다음 그림에서는 그라데이션 방향을 보여 줍니다.
도구 패널에서 선택 도구를 클릭합니다.
그림자가 보이도록 outerRimEllipse를 왼쪽 위로 약간 끕니다.
이렇게 하면 오른쪽 아래에 shadowEllipse의 일부가 표시되어 그림자 효과가 나타납니다.
시계의 빗면을 만들려면
outerRimEllipse를 선택합니다.
outerRimEllipse의 복사본을 만들어 붙여 넣습니다.
속성 패널에서 outerRimEllipse 복사본의 이름을 bevelEllipse로 설정합니다.
속성 패널의 레이아웃에서 너비 및 높이를 290으로 설정합니다.
그런 다음 bevelEllipse를 선형 그라데이션으로 채웁니다. bevelEllipse는 outerRimEllipse의 복사본이므로 이미 그라데이션이 적용되어 있습니다.속성 패널의 브러시에서 왼쪽 그라데이션 중지점을 클릭하고 색상을 #FF2F2F32로 설정합니다.
오른쪽 그라데이션 중지점을 클릭하고 색상을 #FFE4E5F4로 설정합니다.
오른쪽 그라데이션 중지점이 100%가 될 때까지 이 중지점을 오른쪽으로 끕니다.
이 그라데이션은 outerRimEllipse에 적용된 그라데이션과 방향이 같습니다. 그러나 bevelEllipse 그라데이션은 outerRimEllipse에 적용된 그라데이션과는 반대로 왼쪽 위가 어두운 색이고 오른쪽 아래로 갈수록 밝아집니다. 다음 그림에서는 이 그라데이션을 보여 줍니다.
시계의 앞면을 만들려면
bevelEllipse를 선택합니다.
bevelEllipse의 복사본을 만들어 붙여 넣습니다.
속성 패널에서 bevelEllipse 복사본의 이름을 faceEllipse로 설정합니다.
속성 패널의 레이아웃에서 너비 및 높이를 270으로 설정합니다.
속성 패널의 브러시에서 채우기를 클릭하고 단색 브러시를 클릭한 다음 색상을 검정색으로 설정합니다.
이 타원을 추가하면 빗면이 보입니다.
이제 시계의 가운데 타원을 만듭니다.
시계의 가운데 타원을 만들려면
도구 패널에서 타원 도구를 클릭합니다.
시계 앞면의 가운데에 작은 타원을 그립니다. 타원을 정확히 배치하려고 하지 않아도 됩니다.속성 패널에서 이름을 centerEllipse로 설정합니다.
속성 패널의 브러시에서 스트로크를 선택하고 단색 브러시를 선택한 다음 색상을 녹색으로 설정합니다.
속성 패널의 모양에서 StrokeThickness를 8로 설정합니다.
속성 패널의 레이아웃에서 너비 및 높이를 30으로 설정합니다.
그런 다음 시계 앞면의 중앙에 가운데 타원을 배치합니다.
개체 및 타임라인 패널에서 centerEllipse를 선택합니다.
Ctrl 키를 누른 채 faceEllipse를 선택하여 centerEllipse와 faceEllipse를 모두 선택합니다.
개체 메뉴에서 맞춤을 클릭한 다음 가로 가운데를 클릭합니다.
centerEllipse가 가로로 맞춰집니다.
개체 메뉴에서 맞춤을 클릭한 다음 세로 가운데를 클릭합니다.
centerEllipse가 세로로 맞춰집니다.
이제 시계의 바늘을 만듭니다.
시계의 바늘을 만들려면
도구 패널에서 타원 도구를 마우스 오른쪽 단추로 클릭하고 사각형 도구를 클릭합니다.
시계 앞면에서 12시 위치를 나타내는 길고 얇은 사각형을 그립니다.
속성 패널에서 이름을 secondHand로 설정합니다.
속성 패널의 브러시에서 채우기를 클릭하고 단색 브러시를 클릭한 다음 색상을 빨간색으로 설정합니다.
속성 패널의 레이아웃에서 너비는 5, 높이는 80으로 설정합니다.
개체 및 타임라인 패널에서 secondHand를 선택하고 Ctrl 키를 누른 다음 faceEllipse를 선택합니다.
개체 메뉴에서 맞춤을 클릭한 다음 가로 가운데를 클릭합니다.
도구 패널에서 선택 도구를 클릭합니다.
개체 및 타임라인 패널에서 secondHand를 클릭하여 secondHand만 선택합니다.
아트보드의 왼쪽 아래 모퉁이에서 확대/축소 화살표를 클릭하여 secondHand를 확대합니다.
다음 단계에서는 사각형의 중심점을 시계 앞면의 가운데로 변경합니다. 나중에 시계 중심을 기준으로 시계 바늘이 회전하는 애니메이션 효과를 적용할 것입니다.secondHand 사각형의 중심점을 시계 앞면의 가운데로 끕니다.
필요하면 속성 패널에서 중심점을 변경할 수 있습니다. 변형을 확장하고 중심점 탭을 클릭한 다음 X 및 Y 값을 변경합니다.
다음 속성을 사용하여 분침을 나타내는 두 번째 사각형을 만듭니다.
이름 = minuteHand 채우기, 단색 브러시, 녹색
너비 = 9, 높이 = 80
가로 가운데 맞춤
시계 앞면의 가운데로 중심점 설정
다음 속성을 사용하여 시침을 나타내는 세 번째 사각형을 만듭니다.
이름 = hourHand 채우기, 단색 브러시, 녹색
너비 = 11, 높이 = 60
가로 가운데 맞춤
시계 앞면의 가운데로 중심점 설정
설정을 완료하면 시계 바늘이 서로 겹치게 됩니다.
다음 단원에서는 시계 바늘이 회전하는 애니메이션을 추가합니다. 이 작업은 시계 바늘에 적용된 RotateTransform 요소의Angle 속성에 애니메이션 효과를 적용하는 방법으로 수행합니다. 애니메이션이 올바른 RotateTransform을 대상으로 해야 하기 때문에 각 시계 바늘에 적용되는 RotateTransform 요소에 이름을 지정해야 합니다. Expression Blend UI에서RotateTransform 요소의 이름을 변경할 수 있는 방법은 없으며 이 이름은 XAML에서 변경해야 합니다.아트보드의 오른쪽 위 모퉁이에서 XAML 또는 분할 보기 탭을 클릭합니다.
이제 디자이너에서 만들어 둔 모든 개체의 XAML 태그를 볼 수 있습니다. 시계 바늘을 Rectangle 요소를 사용하여 만들어집니다.XAML에서 secondhand 사각형을 찾습니다.
다음 XAML에서와 같이 Rectangle.RenderTransform 요소 및 secondHandTransform이라는 RotateTransform을 추가하여 secondHand 사각형을 수정합니다.
<!-- Second Hand --> <Rectangle x:Name="secondHand" ...> <Rectangle.RenderTransform> <RotateTransform x:Name="secondHandTransform"/> </Rectangle.RenderTransform> </Rectangle>minuteHand 사각형을 수정하고 RotateTransform의 이름을 minuteHandTransform으로 지정합니다.
<!-- Minute Hand --> <Rectangle x:Name="minuteHand" ...> <Rectangle.RenderTransform> <RotateTransform x:Name="minuteHandTransform"/> </Rectangle.RenderTransform> </Rectangle>hourHand 사각형을 수정하고 RotateTransform의 이름을 hourHandTransform으로 지정합니다.
<!-- Hour Hand --> <Rectangle x:Name="hourHand" ...> <Rectangle.RenderTransform> <RotateTransform x:Name="hourHandTransform"/> </Rectangle.RenderTransform> </Rectangle>오른쪽 위 모퉁이에서 디자인 보기 탭을 클릭하여 디자인 보기를 표시합니다.
프로젝트를 저장합니다.
시계 바늘 애니메이션을 추가하려면
프로젝트 패널을 표시합니다.
MainPage.xaml이 선택되어 있는지 확인합니다.
XAML 또는 분할 보기 탭을 클릭하여 XAML을 표시합니다.
UserControl 시작 요소 뒤에 다음 태그를 추가하여 시계 바늘 애니메이션을 추가합니다.
<UserControl.Resources> <Storyboard x:Name="clockStoryboard"> <!-- This animation targets the hour hand transform --> <DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" Storyboard.TargetProperty="Angle" Duration="12:0:0" RepeatBehavior="Forever" To="360"/> <!-- This animation targets the minute hand transform --> <DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minuteHandTransform" Storyboard.TargetProperty="Angle" Duration="1:0:0" RepeatBehavior="Forever" To="360" /> <!-- This animation targets the second hand transform --> <DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondHandTransform" Storyboard.TargetProperty="Angle" Duration="0:1:0" RepeatBehavior="Forever" To="360" /> </Storyboard> </UserControl.Resources>이 태그는 시계 바늘에 애니메이션 효과를 적용하는 애니메이션이 포함된 Storyboard를 정의합니다. 이러한 애니메이션은 모두 각 시계 바늘 변형의 Angle 속성을 대상으로 합니다. 각 애니메이션의 Duration 속성은 원하는 애니메이션 속도에 따라 설정됩니다. 예를 들어 시침 변형의 경우 애니메이션의 기간은 시침이 시계를 완전히 한 바퀴 도는 데 걸리는 시간인 12시간으로 설정됩니다. 모든 애니메이션의 RepeatBehavior는 "Forever"로 설정됩니다. 따라서 애니메이션이 완료되면(시침이 시계를 한 바퀴 돌면) 애니메이션이 다시 시작되어 무기한 반복됩니다.
Storyboard 를 시작하려면 Loaded 이벤트를 사용하여 Storyboard에 대해 Begin 메서드를 호출합니다.
Grid 요소를 찾아 다음 Loaded 특성을 추가합니다.
이렇게 하면 응용 프로그램이 로드될 때 SetAndStartClock 이벤트 처리기가 호출됩니다.
<Grid x:Name="LayoutRoot" Background="White" Loaded="SetAndStartClock">
그런 다음 이벤트 처리기를 추가합니다.
프로젝트 패널에서 MainPage.xaml 노드를 확장하고 코드 숨김 파일 MainPage.xaml.vb 또는 MainPage.xaml.cs를 두 번 클릭합니다.
코드 숨김 파일이 코드 편집기에 열립니다.
MainPage 클래스에서 Storyboard를 시작하는 다음 SetAndStartClock 메서드를 추가합니다.
프로젝트를 저장합니다.
프로젝트 메뉴를 클릭한 다음 프로젝트 실행을 클릭하여 응용 프로그램을 빌드하고 실행합니다. F5 키를 눌러 응용 프로그램을 실행할 수도 있습니다.웹 브라우저가 열리고 시계가 실행되기 시작합니다. 그러면 시계의 초침이 이동하는 것을 확인할 수 있습니다. 다른 바늘도 이동하고 있지만 속도가 너무 느려 눈으로 감지하기는 어려울 것입니다.
시계를 현재 시간으로 설정하려면
브라우저를 닫고 MainPage.xaml.vb 또는 MainPage.xaml.cs를 엽니다.
SetAndStartClock 프로시저를 다음 코드로 바꿉니다.
이 코드는 시계 바늘을 현재 시간으로 설정합니다.
private void SetAndStartClock(object sender, EventArgs e) { // The current date and time. System.DateTime currentDate = DateTime.Now; // Find the appropriate angle (in degrees) for the hour hand // based on the current time. double hourangle = (((float)currentDate.Hour) / 12) * 360 + currentDate.Minute / 2; // The same as for the minute angle. double minangle = (((float)currentDate.Minute) / 60) * 360; // The same for the second angle. double secangle = (((float)currentDate.Second) / 60) * 360; // Set the beginning of the animation (From property) to the angle // corresponging to the current time. hourAnimation.From = hourangle; // Set the end of the animation (To property)to the angle // corresponding to the current time PLUS 360 degrees. Thus, the // animation will end after the clock hand moves around the clock // once. Note: The RepeatBehavior property of the animation is set // to "Forever" so the animation will begin again as soon as it completes. hourAnimation.To = hourangle + 360; // Same as with the hour animation. minuteAnimation.From = minangle; minuteAnimation.To = minangle + 360; // Same as with the hour animation. secondAnimation.From = secangle; secondAnimation.To = secangle + 360; // Start the storyboard. clockStoryboard.Begin(); }
응용 프로그램을 실행합니다.
이제 시계 바늘은 현재 시간으로 설정됩니다.
시계는 다음 그림에 나와 있는 그래픽 요소로 구성됩니다.
Visual Studio에서 새 Silverlight 응용 프로그램 프로젝트를 만들려면
Visual Studio를 시작합니다.
Visual Basic 또는 Visual C#에서 SilverlightClock이라는 새 Silverlight 응용 프로그램 프로젝트를 만듭니다.
새 Silverlight 응용 프로그램 대화 상자에서 새 웹 사이트에서 Silverlight 응용 프로그램 호스트 확인란의 선택을 취소하고 Silverlight 버전 목록에서 Silverlight 4를 선택합니다. 자세한 내용은 방법: 새 Silverlight 프로젝트 만들기을 참조하십시오.
시계의 그림자를 만들려면
MainPage.xaml을 엽니다.
기존 XAML을 다음 XAML로 바꾸어 시계 그림자를 만듭니다.
<UserControl x:Class="SilverlightClock.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Height="400" Width="400"> <Grid x:Name="LayoutRoot"> <!-- Shadow --> <Ellipse Fill="#FF000000" Height="330" Margin="42,42,28,28" Opacity="0.3" Width="330" /> </Grid> </UserControl>다음 그림에서는 해당 결과를 보여 줍니다.
채우기는 검정으로 설정되고 불투명도는 0.3(30%)으로 설정됩니다. 그러면 타원에 그림자와 같이 반투명한 검정 채우기가 적용됩니다. 너비, 높이 및 여백은 임의로 설정됩니다. 이러한 속성은 Grid 내에서 원의 크기와 위치를 지정합니다.
참고:Silverlight 응용 프로그램에서 대부분의 XAML 태그는 사용하는 프로시저 언어(예: Visual Basic, C# 또는 JavaScript)의 영향을 받지 않습니다.
이제 시계의 바깥쪽 테두리를 만듭니다.
시계의 바깥쪽 테두리를 만들려면
MainPage.xaml에서 그림자 타원 뒤에 다음 XAML을 추가하여 시계의 바깥쪽 테두리를 만듭니다.
<!-- Outer Rim --> <Ellipse Height="330" Margin="35,35,35,35" Stroke="#FF000000" Width="330" > <Ellipse.Fill> <LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129"> <GradientStop Color="#FFE4E5F4" /> <GradientStop Color="#FFC0C0C0" Offset="0.254"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>다음 그림에서는 해당 결과를 보여 줍니다.
그림자 타원은 아래쪽에 타원의 일부만 조금 보이도록 오른쪽 아래로 약간 이동되어 배치됩니다. 이렇게 하면 그림자 효과를 얻을 수 있습니다. 또한 바깥쪽 테두리 타원에는 선형 그라데이션이 적용됩니다. 이 선형 그라데이션은 타원의 왼쪽 위에서 빛이 오는 것 같은 효과가 나도록 배치됩니다.
이제 시계의 빗면을 추가합니다.
시계의 빗면을 만들려면
MainPage.xaml에서 바깥쪽 테두리 타원 뒤에 다음 XAML을 추가하여 시계의 빗면을 만듭니다.
<!-- Bevel --> <Ellipse Height="290" Margin="55,55,55,55" Width="290" Stroke="#FF000000"> <Ellipse.Fill> <LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129"> <GradientStop Color="#FF2F2F32"/> <GradientStop Color="#FFE4E5F4" Offset="0.987"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>다음 그림에서는 해당 결과를 보여 줍니다.
이 타원은 바깥쪽 테두리를 만드는 데 사용된 타원보다 조금 작으며 바깥쪽 테두리 타원 바로 위에 배치됩니다. 이 타원에도 선형 그라데이션이 적용되지만 이 그라데이션은 왼쪽 위가 가장 어둡고 오른쪽 아래로 갈수록 밝아집니다.
이제 시계의 앞면을 만듭니다.
시계의 앞면을 만들려면
MainPage.xaml에서 빗면 타원 뒤에 다음 XAML을 추가하여 시계의 앞면을 만듭니다.
<!-- Face --> <Ellipse Fill="#FF000000" Height="270" Margin="65,65,65,65" Stroke="#FF000000" Width="270" />
시계 앞면은 빗면 타원보다 약간 작고 검정색으로 채워진 타원으로 다른 타원 바로 위에 배치됩니다. 또한 이 타원을 추가해야만 빗면이 보입니다.
이제 시계의 가운데 타원 및 바늘을 만듭니다.
시계의 가운데 타원 및 바늘을 만들려면
MainPage.xaml에서 앞면 타원 뒤에 다음 XAML을 추가하여 시계의 가운데 타원 및 바늘을 만듭니다.
<!-- Center --> <Ellipse Fill="#FF000000" Height="30" Margin="185,185,185,185" Stroke="#FF008000" StrokeThickness="8" VerticalAlignment="Top" Width="30" /> <!-- Second Hand --> <Rectangle x:Name="secondHand" Fill="#FFFF0000" Height="80" Margin="198,90,197,0" RenderTransformOrigin="0.45,1.34" Stroke="#FF000000" VerticalAlignment="Top" Width="5" > <Rectangle.RenderTransform> <RotateTransform x:Name="secondHandTransform"/> </Rectangle.RenderTransform> </Rectangle> <!-- Minute Hand --> <Rectangle x:Name="minuteHand" Fill="#FF008000" Height="80" Margin="196,90,195,0" RenderTransformOrigin="0.45,1.34" Stroke="#FF008000" VerticalAlignment="Top" Width="9" > <Rectangle.RenderTransform> <RotateTransform x:Name="minuteHandTransform"/> </Rectangle.RenderTransform> </Rectangle> <!-- Hour Hand --> <Rectangle x:Name="hourHand" Fill="#FF008000" Height="60" Margin="195,110,194,0" RenderTransformOrigin="0.45,1.45" Stroke="#FF008000" VerticalAlignment="Top" Width="11" > <Rectangle.RenderTransform> <RotateTransform x:Name="hourHandTransform"/> </Rectangle.RenderTransform> </Rectangle>다음 그림에서는 해당 결과를 보여 줍니다. 이 그림에서는 초침, 분침, 시침이 겹쳐져 있습니다.
위의 코드에서 분침, 시침 및 초침은 위치를 결정하는 속성(예: Margin)에 대해 같은 값을 공유합니다. 그러나 각 바늘은 크기 및/또는 색이 서로 다릅니다. 예를 들어 시침은 StrokeThickness 값이 가장 크기 때문에 가장 두껍습니다.
모든 바늘에는 RotateTransform이 적용되어 있습니다. 이 변형을 사용하면 바늘의 각도를 회전할 수 있습니다. 다음 단원에서는 이 변형의 각도에 애니메이션 효과를 적용하여 시계 바늘이 이동하여 시간을 나타내도록 합니다. 각RotateTransform 요소에는 이름(예: x:Name="hourHandTransform")이 있습니다. 이름을 지정하는 이유는 애니메이션을 변형과 연결하기 위해서입니다. 또한 모든 바늘에는 RenderTransformOrigin 값이 있습니다. 이 속성은 모든 변형의 기준이 되는 점을 캔버스에 지정하는 데 사용됩니다. 시계의 중심을 기준으로 시계 바늘을 회전시킬 것이기 때문에 모든 시계 바늘의 RenderTransform 속성 값은 시계 앞면의 중앙으로 지정됩니다.
시계 바늘 애니메이션을 추가하려면
MainPage.xaml에서 UserControl 시작 요소 뒤에 다음 태그를 추가하여 시계 바늘 애니메이션을 추가합니다.
<UserControl.Resources> <Storyboard x:Name="clockStoryboard"> <!--This animation targets the hour hand transform--> <DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" Storyboard.TargetProperty="Angle" Duration="12:0:0" RepeatBehavior="Forever" To="360" /> <!--This animation targets the minute hand transform--> <DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minuteHandTransform" Storyboard.TargetProperty="Angle" Duration="1:0:0" RepeatBehavior="Forever" To="360" /> <!--This animation targets the minute hand transform--> <DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondHandTransform" Storyboard.TargetProperty="Angle" Duration="0:1:0" RepeatBehavior="Forever" To="360" /> </Storyboard> </UserControl.Resources>이 태그는 시계 바늘에 애니메이션 효과를 적용하는 애니메이션이 포함된 Storyboard를 정의합니다. Storyboard 의 이 모든 애니메이션은 각 시계 바늘 변형의 Angle 속성을 대상으로 합니다. 각 애니메이션의 Duration 속성은 원하는 애니메이션 속도에 따라 설정됩니다. 예를 들어 시침 변형의 경우 애니메이션의 기간은 시침이 시계를 완전히 한 바퀴 도는 데 걸리는 시간인 12시간으로 설정됩니다. 모든 애니메이션의 RepeatBehavior는 "Forever"로 설정됩니다. 따라서 애니메이션이 완료되면(시침이 시계를 한 바퀴 돌면) 애니메이션이 다시 시작되어 무기한 반복됩니다.
Storyboard 를 시작하려면 Loaded 이벤트를 사용하여 Storyboard에 대해 Begin 메서드를 호출합니다.
Grid 요소에서 다음 Loaded 특성을 추가합니다.
이렇게 하면 응용 프로그램이 로드될 때 SetAndStartClock 이벤트 처리기가 호출됩니다.
<Grid x:Name="LayoutRoot" Loaded="SetAndStartClock">
그런 다음 이벤트 처리기를 추가합니다.
솔루션 탐색기에서 MainPage.xaml을 확장하고 코드 숨김 파일 MainPage.xaml.vb 또는 MainPage.xaml.cs를 엽니다.
MainPage 클래스에서 Storyboard를 시작하는 다음 SetAndStartClock 메서드를 추가합니다.
프로젝트를 저장합니다.
디버그 메뉴에서 디버깅 시작을 클릭하거나 F5 키를 눌러 응용 프로그램을 실행합니다.
웹 브라우저가 열리고 시계가 실행되기 시작합니다. 그러면 시계의 초침이 이동하는 것을 확인할 수 있습니다. 다른 바늘도 이동하고 있지만 속도가 너무 느려 눈으로 감지하기는 어려울 것입니다.
시계를 현재 시간으로 설정하려면
브라우저를 닫고 MainPage.xaml.vb 또는 MainPage.xaml.cs를 엽니다.
SetAndStartClock 프로시저를 다음 코드로 바꿉니다.
이 코드는 시계 바늘을 현재 시간으로 설정합니다.
private void SetAndStartClock(object sender, EventArgs e) { // The current date and time. System.DateTime currentDate = DateTime.Now; // Find the appropriate angle (in degrees) for the hour hand // based on the current time. double hourangle = (((float)currentDate.Hour) / 12) * 360 + currentDate.Minute / 2; // The same as for the minute angle. double minangle = (((float)currentDate.Minute) / 60) * 360; // The same for the second angle. double secangle = (((float)currentDate.Second) / 60) * 360; // Set the beginning of the animation (From property) to the angle // corresponging to the current time. hourAnimation.From = hourangle; // Set the end of the animation (To property)to the angle // corresponding to the current time PLUS 360 degrees. Thus, the // animation will end after the clock hand moves around the clock // once. Note: The RepeatBehavior property of the animation is set // to "Forever" so the animation will begin again as soon as it completes. hourAnimation.To = hourangle + 360; // Same as with the hour animation. minuteAnimation.From = minangle; minuteAnimation.To = minangle + 360; // Same as with the hour animation. secondAnimation.From = secangle; secondAnimation.To = secangle + 360; // Start the storyboard. clockStoryboard.Begin(); }
응용 프로그램을 실행합니다.
이제 시계 바늘은 현재 시간으로 설정됩니다.
'작업 > Work2017' 카테고리의 다른 글
| AN228 / A CAN Physical Layer Discussion (0) | 2014.11.26 |
|---|---|
| 숭실대학교에서 관동교장 가능길(자동차) (0) | 2014.10.07 |
| 예비군 훈련 관동 교장(대중교통) (0) | 2014.10.07 |
| usa sf 미술용품 점 가다. (0) | 2014.09.29 |
| IR 소니 LIVE-SH5263B-SI-6 60LED, 90LED (0) | 2014.06.30 |