5주 강 대 기
실버라이트와 윈도우폰 7
도형과 브러쉬
실버라이트와 윈도우폰 7
◦ Extensible Application Markup Language (XAML)
◦ Expression Blend for Windows Phone(또는 익스프레 션 스튜디오 4 얼티밋)
◦ 코드 비하읶드
◦ Visual Studio 2010 Express for Windows Phone (또 는 비주얼 스튜디오 2010)
윈도우폰은 실버라이트 기반 UI를 사용함
실버라이트에선 XML 기반 언어읶 Extensible
Application Markup Language (XAML; 재믈이 라고 발음함)을 사용해 시각적읶 화면을 표현하고, 코드 비하읶드(Code Behind) 기법을 통해 XAML 로 어플리케이션 로직을 분리함
디자읶과 프로그래밍이 독립적으로 짂행될 수 있
음을 의미함
XAML은 어플리케이션 생성 시 디자이너와 개발자
실버라이트에서 화면의 디자읶이나 애니메이션과 같은 시각적읶 UI 요소들은 XAML 태그로 선언됨 디자이너들은 자싞이 생각하는 기능과 표현을 XAML 형태로 표시하는 툴로 실버라이트의 화면을 디자읶함 이러한 툴로 마이크로소프트는 마이크로소프트 익 스프레션이라는 제품군을 제공하고 있음 기존의 툴에서 나온 데이터를 XAML의 형태로 바 꾸어주는 툴도 있음
윈도우폰의 경우는 Expression Blend for
사용자 읶터페이스를 디자읶하는 방법 ◦ 젃차적 방법 – C나 Java 프로그램 코드로 ◦ 선언적 방법 – HTML 언어를 통해 표현하여 안드로이드의 경우, 둘 다 지원 ◦ 젃차적 방법 – Java 코드 ◦ 선언적 방법 – XML 표현 ◦ 하이브리드 – HTML/CSS 와 JavaScript 안드로이드에서 추천하는 방법은 XML 표현이나, 게임같이 생동감 있는 화면을 만들기 위해서는 Java 코드에 의한 방법이 필수적임
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="@color/background" android:layout_height="fill_parent" android:layout_width="fill_parent" android:padding="30dip" android:orientation="horizontal"> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="center"> <TextView android:text="@string/main_title" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:layout_marginBottom="25dip" android:textSize="24.5sp" /> <Button android:id="@+id/continue_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/continue_label" /> <Button android:id="@+id/new_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/new_game_label" /> <Button android:id="@+id/about_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/about_label" /> <Button android:id="@+id/exit_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/exit_label" /> </LinearLayout> </LinearLayout>
import android.content.Context; import android.view.View;
public class MyView extends View {
public MyView(Context context) {
super(context); }
Microsoft Expression Blend 실행
File New Project Windows Phone
“MY APPLICATION” 을 “나의 응용 프로그램”
1) 프로퍼티 탭에서 변경하는 방법
2) Design View의 해당 문자열을 더블 클릭한 후
수정
3) XAML View의 XAML 화면에서 수정
코드가 뒤에 숨겨져 있음을 의미함 ◦ 이벤트 핸들러와 같이 별도의 상호작용이 필요한 애플리 케이션 로직이 구현된 코드(비하읶드 코드)가 XAML 하위 에 별도로 존재함을 의미 실버라이트의 비하읶드 코드 – 비주얼 베이직, C#, JavaScript 윈도우폰 – C#
윈도우 애플리케이션 프로젝트는 비주얼 스튜디오
2010과 익스프레션 블렊드 갂에 서로 호환됨
익스프레션 블렊드에 의해 생성된 윈도우폰 애플
리케이션 프로젝트를 비주얼 스튜디오 2010에서 활용하는 예제
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button Content="응용 프로그램 타이 틀 보이기" Height="72" Margin="28,90,27,0" VerticalAlignment="Top" Click="Button_Click" /> </Grid>
실버라이트와 윈도우폰 7
◦ Extensible Application Markup Language (XAML)
◦ Expression Blend for Windows Phone(또는 익스프레 션 스튜디오 4 얼티밋)
◦ 코드 비하읶드
◦ Visual Studio 2010 Express for Windows Phone (또 는 비주얼 스튜디오 2010)
실버라이트와 윈도우폰 7 도형과 브러쉬
도형과 브러쉬 ◦ 도형(Shape) Ellipse (타원) Line (직선) Path (패스) Polygon (다각형) Polyline (복선) Rectangle (사각형) ◦ 브러쉬(Brush) SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush
실버라이트에선 도형을 사용자 읶터페이스(UI) 요 소의 컨텐츠로 사용할 수 있음 도형 개체 – System.Windows.Shapes.Shape ◦ Ellipse - 타원 ◦ Line - 직선 ◦ Path - 패쓰 ◦ Polygon – 폴리곢(다각형) ◦ Polyline – 폴리라읶(읷본어로는 복선) ◦ Rectangle - 사각형
공통 속성 설명 Fill 도형의 내부를 그리는 Brush Stretch 도형의 늘림 방식 Stroke 도형의 윤곽선을 그리는 Brush StrokeThickness 도형의 윤곽선 두께 Fill과 Stoke 속성은 도형 개체를 그릴 때 값을 설 정하지 않으면 화면에 보이지 않게 되므로 반드시 설정 도형 개체가 Canvas 개체 안에서 사용되는 경우, Canvas의 연결 속성읶 Canvas.Left와 Canvas.Top을 사용하여 자식 개체의 젃대 위치를 지정함
타원을 그릴 수 있는 기능 지원 Width 와 Height 속성으로 크기를 정함 Fill과 Stroke로 내부와 테두리의 색상 지정함 <Ellipse Height="100" HorizontalAlignment="Left" Margin="85,216,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="291" Fill="White" />
화면의 두 좌표 사이에서 직선을 그리는 컨트롤
자체 속성으로 시작점과 끝점의 좌표를 가짐
<Line Stroke="Red" StrokeThickness="5"
X1="100" Y1="300" X2="300" Y2="500" />
속성 이름 속성 설명
X1,Y1 시작점의 X,Y 좌표
개발자가 도형 모양을 재정의해서 그릴 수 있는 기
능을 제공하는 컨트롤
기존의 제공되는 도형 외의 형태를 갖는 도형이 필
요할 때 사용함
도형의 Geometry 개체를 이용할 수 있음
◦ LineGeometry, RectangleGeometry, EllipseGeometry 클래스를 이용해서 유사한 도형을 표현할 수도 있고
◦ PathGeometry같이 복잡한 도형의 컨트롤도 만들 수 있 음
속성 이름 속성 설명
Data 속성에 들어가는 문자열은 미니 언어(mini language)를 사용함 ◦ Move – M ◦ 제어점 – C ◦ 수평선 – H ◦ http://wrb.home.xs4all.nl/Articles/Article_WPFPath MiniLang_02.htm
<Path Stroke="Red" StrokeThickness="5"
Data="M 100,200 C 100,25 400,350 400,175 H 28" />
다각형을 만들어 표시하는 컨트롤 다수의 점들을 수용하는 속성으로 Points ◦ 시작점과 끝점은 자동 연결됨 ◦ 점이 하나만 있으면 렊더링이 안됨 FillRule은 열거형 값으로 다각형의 내부를 채우는 규칙을 지정함
FillRule은 열거형 값으로 다음 둘 중 하나임 ◦ Nonzero – 내부를 완젂히 채움 ◦ EvenOdd – 다각형의 점들을 모두 연결했을 때, 다각형의 내부에 또 다른 다각형이 만들어지면, 생성된 다각형의 내부가 빈 형식이 됨 <Polygon Points="100,200, 400,200, 100,400, 250,50, 400,400" Fill="Red" FillRule="EvenOdd"/> 속성 이름 속성 설명 FillRule 다각형의 내부를 채우는 방법 Points 다각형을 이루는 모든 점들의 좌표
여러 개의 점들을 연결해 도형을 만드는 Polygon 과 비슷한 성질의 도형 컨트롤 시작점과 끝점이 자동 연결되지 않기 때문에 닫힌 도형의 형태가 되지 않음 <Polyline Points="100,200, 400,200, 100,400, 250,50, 400,400" Stroke="White" StrokeThickness="10" Fill="Red" FillRule="EvenOdd"/>
화면에 사각형을 표시하는 컨트롤 Width 와 Height 속성으로 크기를 정할 수 있음 Fill 과 Stroke 속성으로 도형의 내부 영역과 윤곽 선 색을 지정함 Rectangle 젂용 컨트롤 속성읶 RadiusX 와 RadiusY 를 정의함 – 사각형 모서리의 둥근 정도 를 지정함
영역의 안을 채우는 역할 영역 – 컨트롤에 의해 생기는 영역으로 Fill 과 Stroke 속성으로 바꿀 수 있는 부분을 말하며, 이 속성들을 XAML에서 더 자세히 지정할 수 있음 브러쉬 종류 설명 SolidColorBrush 지정된 영역을 단읷 색상으로 채움 LinearGradientBrush 지정된 영역을 선형 그라데이션으로 채움 RadialGradientBrush 지정된 영역을 원형 그라데이션으로 채움 ImageBrush 지정된 영역을 이미지로 채움 VideoBrush 지정된 영역을 동영상으로 채움 (윈도우폰7은 지원 안 됨)
단읷 색상으로 채움 색상 코드
◦ 투명도(16비트), 빨갂색(16비트), 녹색(16비트),파란색(16비트)
<Rectangle Height="137" HorizontalAlignment="Left" Margin="84,152,0,0" Name="rectangle1" Stroke="White" StrokeThickness="10" VerticalAlignment="Top" Width="297" > <Rectangle.Fill> <SolidColorBrush Color="Red"/> </Rectangle.Fill> </Rectangle>
하나의 선 위에 그라데이션을 채우는 것 GradientStop 개체를 사용하면 선을 따라 그라데이션의 색과 해 당 위치를 지정할 수 있음 <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green"
Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush>
방사형으로 그라데이션 효과를 채우게 함
LinearGradientBrush가 선을 축으로 했다면
RadialGradientBrush는 원을 축으로 그림
GradientOrigin에 그라데이션의 시작점을 넣어주
고 나머지 브러쉬의 그라데이션은 해당 속성읶 Center, RadiusX, RadiusY에 지정함
속성 이름 속성설명
GradientOrigin 그라데이션의 시작 지점 지정
Center 그라데이션의 중심점 지정
RadiusX 방사형 그라데이션의 가로 반지름 지정
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5, 0.5" Center="0.5, 0.5" RadiusX="0.5"
RadiusY="0.5">
<GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green"
Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/> </RadialGradientBrush>
소스 이미지를 브러쉬로 지정해서 원하는 개체를 그리는 경우 기본적으로 그리고 있는 영역의 크기에 맞게 이미 지를 늘려서 채우는 동작을 사용하므로, 이미지의 왜곡이 있을 수 있음 따라서, 상황에 맞게 Stretch 속성을 변경해서 사 용함 이미지는 ImageBrush 클래스의 ImageSource 속 성에서 지정하고 JPEG이나 PNG 형식의 이미지로 그림 속성 이름 속성설명 ImageSource 소스 이미지를 지정
<Grid.Background> <ImageBrush
ImageSource="/WindowsPhoneApplication1;c omponent/Images/Lighthouse.jpg"/>
도형과 브러쉬
◦ 도형(Shape)
Ellipse, Line, Path, Polygon, Polyline, Rectangle ◦ 브러쉬(Brush)
SolidColorBrush, LinearGradientBrush,
실버라이트와 윈도우폰 7
도형과 브러쉬
아이솔레이티드 스토리지 ◦ 스토리지 종류 ◦ 곾렦 네임스페이스 및 클래스 ◦ 아이솔레이티드 스토리지를 이용하는 애플리케이션 만들 기 프로젝트 생성 및 화면 디자읶 아이솔레이티드 스토리지 사용을 위한 네임스페이스 설정 각 버튺에 대한 이벤트 핸들러 추가 Write 버튺에 대한 이벤트 핸들러 구현 Read 버튺에 대한 이벤트 핸들러 구현 아이솔레이티드 셋팅 스토리지로의 변경
윈도우폰 7에서 사용할 수 있는 유읷한 저장공갂 레지스트리나 데이터베이스와 같은 저장 공갂은 사용할 수 없음 보안적읶 측면으로 읶해, 다른 애플리케이션에서 파읷을 교차해서 접근할 수 없음 ◦ 안드로이드나 아이폰도 마찬가지임
◦ 안드로이드의 경우, Android Interface Definition Language (AIDL)
즉, 이 공갂에서 생성된 파읷들은 이 파읷을 생성
아이솔레이티드 스토리지는 두 가지 형태
◦ 아이솔레이티드 파읷 스토리지 (Isolated File Storage) – 읷반적읶 디렉토리 및 파읷 구조와 비슷함
◦ 아이솔레이티드 셋팅 스토리지 (Isolated Setting
Storage) – 딕셔너리, 해쉬 테이블, 또는 레지스트리와 비 슷함
아이솔레이티드 스토리지의 네임 스페이스는 System.IO.IsolatedStorage 에 위치하며, 곾렦된 클 래스는 다음과 같음 System.IO.IsolatedStorageException : 예외 곾리 System.IO.IsolatedStorageFile : 애플리케이션의 저 장소를 곾리하고 파읷과 디렉토리를 사용 System.IO.IsolatedStorageSettings : 딕셔너리형 데 이터를 곾리 System.IO.IsolatedFileStream : IsolatedStorage의 파읷 스트림
우선 아이솔레이티드 파읷 스토리지를 사용하는
방법을 알아봄
그 다음 아이솔레이티드 셋팅 스토리지를 사용하
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="25,54,0,0" Name="textBox1" Text=""
VerticalAlignment="Top" Width="407" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="25,246,0,0" Name="textBox2" Text=""
VerticalAlignment="Top" Width="407" IsReadOnly="True" />
<Button Content="Write" Height="72"
HorizontalAlignment="Left" Margin="39,132,0,0"
Name="button1" VerticalAlignment="Top" Width="160" /> <Button Content="Read" Height="72"
HorizontalAlignment="Left" Margin="39,324,0,0"
Name="button2" VerticalAlignment="Top" Width="160" /> </Grid>
아이솔레이티드 스토리지에 접근하기 위해서는 다
음의 두 가지 네임 스페이스를 설정해야 함 using System.IO;
아이솔레이티드 스토리지에서 데이터를 인고 쓰기 위한 버튺 이벤트 핸들러를 추가함
namespace IsolatedStorage {
public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); }
private void button1_Click(object sender, RoutedEventArgs e) {
}
private void button2_Click(object sender, RoutedEventArgs e) {
} } }
GetUserStoreForApplication() 메소드를 통해 시스템 으로부터 저장소를 얻어옴 이를 기반으로 애플리케이션에서 사용하기 위한 디렉 토리는 CreateDirectory 메소드를 사용해 제작함 이렇게 만든 디렉토리에 파읷을 인고 쓰기 위해서는 IsolatedStorageFileStream 클래스가 필요함 ◦ 이 경우, 생성자는 다음과 같이 구성함 ◦ IsolatedStorageFileStream(“생성한 디렉토리를 포함한 파읷 경로”, “FileMode의 하나의 열거값”, “IsolatedStorageFile 이 름”) 그리고 입력된 문자열은 StreamWriter 클래스의 WriteLine 메소드를 이용해 저장함
private void button1_Click(object sender, RoutedEventArgs e) { if (textBox1.Text.Length <= 0) return; IsolatedStorageFile myStore = IsolatedStorageFile.GetUserStoreForApplication(); myStore.CreateDirectory("MyFolder");
StreamWriter writeFile = new StreamWriter(new IsolatedStorageFileStream("MyFolder\\MyFile.txt",File Mode.OpenOrCreate,myStore));
writeFile.WriteLine(textBox1.Text); writeFile.Close();
읷단 아이솔레이티드 스토리지에 접근하는 방법은
Write 버튺에 대한 부분과 동읷함
이번에는 인어들여야 하므로, StreamReader 클래
private void button2_Click(object sender, RoutedEventArgs e) {
IsolatedStorageFile myStore =
IsolatedStorageFile.GetUserStoreForApplication(); StreamReader readFile = null;
try {
readFile = new StreamReader(new
IsolatedStorageFileStream("MyFolder\\MyFile.txt", FileMode.Open, myStore)); textBox2.Text = readFile.ReadLine(); readFile.Close(); } catch { textBox2.Text = " 에러 발생! 디렉토리와 파읷을 인을 수 없습니다."; } }
다양한 형태나 많은 양의 데이터를 곾리하기 위해 서는 아이솔레이티드 파읷 스토리지가 더 적합하 겠지만, 환경 변수나 설정 값과 같은 비교적 갂략 한 데이터를 곾리하는 데는 번거로울 수 있음 이런 경우, 아이솔레이티드 셋팅 스토리지를 사용 하는 것이 더 효율적임
private void button1_Click(object sender, RoutedEventArgs e) {
if (textBox1.Text.Length <= 0) return;
IsolatedStorageSettings.ApplicationSettings["Message"] = textBox1.Text; }
private void button2_Click(object sender, RoutedEventArgs e) { try { textBox2.Text = IsolatedStorageSettings.ApplicationSettings["Message"].ToString(); } catch { textBox2.Text = " 키를 찾을 수 없음 "; } }
사용하기에는 아이솔레이티드 셋팅 스토리지가 훨 씬 더 수월함 데이터의 양이 많다면 아이솔레이티드 셋팅 스토 리지가 더 비효율적임 따라서, 아이솔레이티드 스토리지를 사용하는 데 있어서는 저장 및 곾리하고자 하는 데이터의 특성 에 맞춰 아이솔레이티드 스토리지를 선택해야 함
아이솔레이티드 스토리지 ◦ 스토리지 종류 ◦ 곾렦 네임스페이스 및 클래스 ◦ 아이솔레이티드 스토리지를 이용하는 애플리케이션 만들 기 프로젝트 생성 및 화면 디자읶 아이솔레이티드 스토리지 사용을 위한 네임스페이스 설정 각 버튺에 대한 이벤트 핸들러 추가 Write 버튺에 대한 이벤트 핸들러 구현 Read 버튺에 대한 이벤트 핸들러 구현 아이솔레이티드 셋팅 스토리지로의 변경
실버라이트와 윈도우폰 7
◦ Extensible Application Markup Language (XAML)
◦ Expression Blend for Windows Phone
◦ 코드 비하읶드
◦ Visual Studio 2010 Express for Windows Phone
도형과 브러쉬
◦ 도형(Shape)
Ellipse, Line, Path, Polygon, Polyline, Rectangle
◦ 브러쉬(Brush)
SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush
아이솔레이티드 스토리지 ◦ 스토리지 종류 ◦ 곾렦 네임스페이스 및 클래스 ◦ 아이솔레이티드 스토리지를 이용하는 애플리케이션 만들기 프로젝트 생성 및 화면 디자읶 아이솔레이티드 스토리지 사용을 위한 네임스페이스 설정 각 버튺에 대한 이벤트 핸들러 추가 Write 버튺에 대한 이벤트 핸들러 구현 Read 버튺에 대한 이벤트 핸들러 구현 아이솔레이티드 셋팅 스토리지로의 변경
