블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Notice

2011.05.27 13:24 기타/Windows Phone

아래 사이트에서 Windows Phone "Mango" Training Course를 살펴보실수 있습니다.~

http://msdn.microsoft.com/en-us/wp7mangotrainingcourse

신고
posted by 정홍주
2011.05.25 13:44 기타/Windows Phone

Windows Phone Developer Tools 7.1 Beta

Windows Phone Mango 에 대한 내용이 새롭게 출시되었습니다.

개발관련 새로운 내용은 아래 사이트를 참고해보십시오.

http://msdn.microsoft.com/en-us/library/ff637516(v=VS.92).aspx 

Windows Phone Developer Tools는 아래 사이트에서 다운로드 가능합니다.

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=77586864-ab15-40e1-bc38-713a95a56a05&displaylang=en 

 Visual Studio 2010이 설치되어 있다면 Service Pack 1을 먼저 설치해야만 합니다.

실행파일을 다운로드 받아 실행해서 설치를 시작합니다. 

설치가 완료되었으며 VS 2010에서 Windows Phone 프로젝트를 살펴볼 수 있습니다.

Visual Basic으로도 개발이 가능하다는 것을 알 수 있으며 프로젝트 템플릿이 다양하게 나타나는 것을 확인 가능합니다. 

개발에 대한 구체적인 내용은 이후 블로그에서 다루어보도록 하겠습니다.

신고
posted by 정홍주
2011.05.16 08:30 기타/Windows Phone

Expression Blend for Windows Phone - Hello World(2)

이어서 커스텀 버튼에 애니메이션을 추가해보도록 합니다. 애니메이션은 Visual State Manager로 지정합니다. Expression Blend 4에서 Object and Timeline의 내용이 ClickMeButton Edit Template에 위치되어 있지 않다면 ClickMeButton 오른쪽 클릭해서 Edit Template에서 Edit Current를 선택합니다.

왼쪽 상단의 States 탭을 선택합니다.

States Unfocused를 선택하고 Border 컨트롤의 BorderBrush 속성의 고급 속성에서 Opacity 값을 0으로 아래와 같이 지정합니다.

States에서 Pressed 를 선택하고 Transform Translate X, Y 2씩 증가시킵니다.



Banner Text에 애니메이션을 추가해보도록 합니다. Object and Timeline의 아래 아이콘을 클릭해서 Object and Timeline를 빠져나갑니다.


Object and Timeline의 오른쪽 메뉴의 “+” 를 클릭하고 New 메뉴를 선택합니다.

이름은 AnimateBanner로 지정합니다.


애니메이션 작업 영역으로 이동하기 위해서는 F6을 클릭하면 됩니다. 다시 돌아가려면 F6을 클릭하면 됩니다.


 
Object and Timeline
에서 BannerTextBlock을 선택하고 노란색 막대를 “1” 의 위치로 이동합니다.


Transform scale 속성의 X “-1” 로 지정합니다.

다시 노란색 막대를 “2”로 이동시키고 Transform Scale X“1”로 변경합니다.

Play 버튼으로 애니메이션 결과를 테스트할 수 있습니다.

노란색 막대의 처음에 위치한 부분을 클릭합니다.


속성 창에서 Easing Function을 지정할 것입니다. “Cube InOut”을 선택합니다.

프로젝트를 저장하고 VS 2010으로 이동합니다. 다시 로드하겠냐는 창에서는 예를 선택합니다.

MainPage.xaml의 변경된 사항을 확인하고 MainPage.xaml.cs로 이동합니다.

버튼의 클릭 이벤트에 아래와 같은 코드를 추가해서 애니메이션을 시작하게 합니다.

private void ClickMeButton_Click(object sender, RoutedEventArgs e)

{

BannerTextBlock.Text = MessageTextBox.Text;

MessageTextBox.Text = String.Empty;

this.AnimateBanner.Begin();

}

 

프로젝트를 빌드하고 실행해서 결과를 확인합니다.

“Cube InOut” 애니메이션에 대한 내용을 확인할 수 있습니다.


이상으로 Expression Blend를 이용한 Windows Phone Application의 레이아웃, 색상, 속성, 상태, 애니메이션에 대한 내용을 알아보았습니다.

신고
posted by 정홍주
2011.05.09 08:30 기타/Windows Phone

 

 Expression Blend for Windows Phone- Hello World(1)

앞에서 VS 2010을 통한 Windows Phone에 대한 내용을 알아보았는데 여기서는
Expression Blend 4 for Windows Phone
에서 Windows Phone Application Project 에 애니메이션 등을 추가하는 내용에 대한 부분을 알아봅니다. 본 내용은 Windows Phone 7 Training Kit의 내용을 참조했습니다.

VS 2010의 솔루션 탐색기에서 MainPage.xaml을 오른쪽 클릭하여 Expression Blend에서 열기를 클릭합니다.

 

  그럼 동일한 프로젝트를 VS 2010 Expression Blend 4 에서 동시에 열게 됩니다.

  

Object and Timeline 에서 ClickMeButton을 오른쪽 클릭하여 Edit Template에서  “Create Empty” 를 선택합니다

  

ControlTemplate Resource 생성 창에서는 이름을 FancyButton으로 지정하고 OK 를 선택합니다. 

  

Object and Timeline Grid를 오른쪽 클릭해서 Border 컨트롤로 변경합니다. 

  

Border 컨트롤을 선택하고 오른쪽 속성 창에서 아래와 같이 속성 값을 설정합니다.

  

Brush 속성에서는 Gradient Brush를 선택하고 왼쪽의 값은 #FFADADAD, 오른쪽의 값은 #FF0A0A0A 로 지정합니다. 

  

BorderBrush 속성은 #FFC0C0C0로 지정합니다. 

  

Asset 탭에서 ContentPresenter를 검색해서 더블클릭하고 컨트롤을 추가합니다. 

  

ContentPresenter 컨트롤을 선택하고 오른쪽 속성창에서 중앙 정렬을 선택해서 Center에 표시되게 되게 합니다. 

  

프로젝트를 저장하고 빌드해서 실행해보면 아래와 같이 커스텀 버튼이 나타나는 것을 알 수 있습니다. 

 

Expression Blend를 통해 손쉽게 레이아웃과 색상, 속성 등을 수정할 수 있다는 것을 알아보았습니다. 내용이 길어 다음 내용에서 상태와 애니메이션에 대한 내용을 알아보도록 하겠습니다.

 

 

신고
posted by 정홍주
2011.05.02 08:30 기타/Windows Phone

 

VS 2010 에서 Windows Phone Application 프로젝트를 생성해서 프로젝트 구조 및 Windows Phone 7 응용 프로그램에 대한 내용을 알아보고 간단한 디자인과 코드를 추가해서 디버깅, 실행해보도록 하겠습니다.

먼저 VS 2010을 시작하여 Silverlight for Windows Phone 프로젝트를 생성합니다.

프로젝트이름을 HelloWindowsPhone 이라는 프로젝트로 생성합니다.
 

생성된 프로젝트의 디자인, 솔루션 탐색기, App.xaml 등을 살펴봅니다 

프로젝트를 빌드하고 프로젝트를 시작해봅니다. 잠시 시간이 지나면 아래와 같은 에뮬레이터 화면을 볼 수 있습니다. 

    

이제 간단한 사용자 디자인을 해보도록 합니다. 아래와 같은 디자인으로 구성됩니다.

 

 

솔루션 탐색기에서 MainPage.xaml을 더블클릭하고 XAML 편집기에서 아래와 같이 코드를 작성합니다. 디자인 창으로 컨트롤을 끌어다 놓거나 XAML을 편집합니다.

Grid RowDefiniton을 아래와 같이 추가합니다  

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>


StackPanel 부분을 아래와 같이 변경합니다.

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

<TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Hello Phone" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel 

ContentGrid의 하위 콘텐트를 아래와 같이 구성합니다. TextBox Button으로 구성됩니다.

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentGrid" Grid.Row="1">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBox Grid.Column="0" Name="MessageTextBox" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="20,20,10,20"/>

<Button Grid.Column="1" Name="ClickMeButton" Content="Click Me" HorizontalAlignment="Right" Padding="4" Margin="10,20,20,20" />

</Grid 

방금 위에서 수정한 Grid 아래 TextBlock을 아래와 같이 추가합니다.

<Grid Grid.Row="2">

<TextBlock Name="BannerTextBlock" FontSize="30"

Foreground="#FFFF9A00" HorizontalAlignment="Stretch"

TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" />

</Grid
 

Click-Me 라는 버튼을 더블 클릭하거나 속성 창의 이벤트에서 Click 이벤트를 생성합니다

  

이벤트의 C# 코드는 아래와 같이 작성합니다.

private void ClickMeButton_Click(object sender, RoutedEventArgs e)

{

BannerTextBlock.Text = MessageTextBox.Text;

MessageTextBox.Text = String.Empty;

 

작성한 C# 코드의 첫 라인에 커서를 위치시키고 F9를 클릭해서 중단점을 아래와 같이 설정합니다 

 

에뮬레이터에서 장치의 키보드를 이용해서 값을 입력하고 버튼을 클릭하면 중단점으로 이동하게 됩니다 

  

중단점에서 지역 창이나 커서를 이용해서 사용자가 입력한 값을 확인할 수 있습니다.

F11을 눌러 한 단계씩 실행해봅니다 

 

이상으로 Windows Phone 7 Hello World를 살펴보았습니다. C#은 동일하고 XAML Silverlight 3 에서의 내용과 동일합니다. C# Silverlight 에 대한 내용을 알고 계시면 Windows Phone 7 에 쉽게 접근이 가능합니다.

VS 2010 뿐만 아니라 Expression Blend for Windows Phone을 통해서 XAML 디자인과 애니메이션 등을 진행할 수 있습니다.

 

신고
posted by 정홍주
2011.02.07 08:30 기타/Windows Phone
Windows Phone 7 Developer Tool이 다시 업데이트 되었습니다.
업데이트 내용은 Emulator와 도구 등이 업데이트 되었습니다.

관련 링크는 아래를 참고하면 됩니다. 업데이트된 내용으로 Windows Phone 7 에 대한 내용을 다루어 보도록 하겠습니다.

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=49B9D0C5-6597-4313-912A-F0CCA9C7D277

위 링크에서 파일을 다운로드 받아 먼저 WindowsPhoneDeveloperResources_en-US_Patch1.msp 패치 파일을 설치하고 VS10-KB2486994-x86.exe 패치 파일을 설치합니다.


신고
posted by 정홍주
2011.01.23 22:21 기타/Windows Phone

UPDATE 다른 곳에 썻던 내용을 이곳에 통합하기 위해 옮겼습니다.


 

MSDN 영문 사이트의 Main Page에 보면 Windows Phone Developer Tool Release 라는 내용에 대한 이미지를 볼 수 있습니다. 릴리스 시점은 추석 연휴 시작하기 전인 9 16일입니다.

아직 관련 소식에 대한 업데이트가 없어 릴리스에 대한 내용을 알아보도록 하겠습니다.

이미지를 클릭하면 블로그로 이동해서 내용을 살펴보시면 여러 유용한 정보를 알려주고 있으니 Windows Phone 7에 관심 있는 분은 방문해보시기 바랍니다.

http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/09/16/windows-phone-developer-tools-are-final.aspx

 

도구가 새로 릴리스 되었으니 다운로드 받아 설치해보도록 하겠습니다. 개발도구 등의 사이트는 아래 사이트를 방문하면 됩니다.

http://developer.windowsphone.com/windows-phone-7/

이전 버전의 도구(Beta) 가 설치되어 있다면 제거합니다. 도구를 다운로드 받아 설치를 진행합니다. 이전 버전보다는 더 많은 구성요소가 설치됩니다. Expression Blend 4 가 있다면 Expression Blend 4 Add-in for Windows Phone 도구도 설치됩니다.

현재는 Windows Phone Developer Tool 은 영문 버전만 제공되고 있습니다.

설치가 다 되고 나면 Visual Studio 2010에서 새 프로젝트를 생성하려고 하면 Silverlight for Windows Phone에 대한 내용을 볼 수 있으며 아래와 같은 프로젝트 템플릿을 확인할 수 있습니다.

Expression Blend 4 에서도 마찬가지로 Windows Phone에 대한 프로젝트 템플릿을 확인할 수 있습니다.


프로젝트 템플릿을 보면 이전 버전(Beta)와 다르게 CodePlex에서 소개하던 Panorama, Pivot 에 대한 프로젝트 템플릿이 나타나는 것을 알 수 있습니다.

 

아직 설치를 하지 않으셨다면 설치해서 Windows Phone 개발을 시작해보시기 바랍니다.

앞으로의 블로깅은 모바일에 대한 새로운 기능 위주로 작성할 예정입니다.

 



신고
posted by 정홍주
prev 1 2 next