it개발자스터디공간

<레이아웃 - Grid>

Grid 는 그 동안 많이 접해왔던 표 ,

Table 과 같은 형태의 패널입니다.

그래서 좀 더 쉽게 사용 할 수 있습니다

Grid 내에 정의된 열 및 행에서는 Star(*)

크기 조정을 활용하여 나머지 공간을

비율에 따라 배분할 수 있습니다.

행이나 열의 높이 또는 너비로 Star 를 선택하면

사용 가능한 나머지 공간 중 일정 비율이 가중치에

따라 해당 열이나 행에 할당됩니다.

이는 열이나 행에 들어 있는 내용의 크기에 따라

공간을 균등하게 분해하는 Auto의 동작과 대조됩니다.

XAML(Extensible Application Markup Language)

사용 시 이 값은 * 또는 2*로 나타냅니다.

첫 번째 경우에는 행 또는 열에 사용 가능한

공간과 같은 공간이 할당되고 

두 번째 경우에는 행 또는 열에 사용 가능한 공간의

2배가 할당되는 방식입니다.

별표를 사용한 크기 조정에 대한 자세한 내용은

별표를 사용한 크기 조정 샘플을 참조하시면

됩니다. 이 방법과 HorizontalAlingment 및

VerticalAlignment 값을 Stretch 로 지정하여

비율에 따라 공간을 배분하는 방법을 결합하면

화면공간의 백분율에 따라 레이아웃 공간을

나눌 수 있습니다.

이러한 방식으로 공간을 배분할 수 있는

레이아웃 패널은 Grid뿐 입니다.

이제 다음 예제를 통해 Grid 를 이용해 간단한

로그인 창의 레이아웃을 만들어 보겠습니다.

웨이서 사용한 프로젝트에 Grid 라는 이름으로

새로운 창을 추강하겠습니다.

그리고 Grid.xaml 에 다음 코드를 작성합니다.

이제 실행 결과를 확인보겠습니다.

어떤 가요?

Grid 를 이용한 멋진 로그인창이 생성되었습니다

#오라클자바교육센터#오라클자바#오라클#자바#구로자바학원#구로오라클학원#구로오라클#구로자바

#구로오라클학원#WPF#WPF강좌#WPF강의#WPF자료#WPF예제자료#WPF예제

​< 레이아웃 - DockPanel>

​​

오늘의 과정은 레이아웃 과정중에서 DockPanel

​

과정에 대한 공부를 해볼 차례이네요

화면에서 DockPanel 자식요소 위치를 Dock 속성

및 DockPanel 아래에서 이러한 자식 요소의

상대적인 순서에 따라 결정합니다.

따라서 Dock 속성 값이 같은 여러 자식 요소가

DockPanel 아래에서 이러한 자식의 순서에 따라

화면에 서로 다르게 배치도힐 수 있습니다.

DockPanel은 자식 요소를 순서대로 반복하면서

여유공간에 따라 각 요소를 배치하므로 자식의

순서가 위치에 영향을 주게 됩니다.

다음 예제에서는 연결된 속성인 Dock 속성을

사용하여 분할된 공간의 Top 위치에 동일한 두

Border 요소를 도킹합니다.

셋째 Border 요소는

​너비가 100픽셀로 설정된 상태로 Left에

​도킹됩니다

​

넷째 Border는 화면의 Botton 에 도킹됩니다.

​마지막 Border 요소는 자동으로

남은 공간을 채웁니다. PanelSamPle 프로젝트에

​새로운 Winodw를 추가합니다​

그리고 추가된 Window의 이름을 "Dockpanel"

이라고 변경하겠습니다.

그런 다음 DockPanel.xaml에 <Grid> </Grid>

부분을 삭제 후 그 자리에 DockPanel 컨트롤을

올리고 다음 코드를 작성합니다.

이제 코드 작성은 끝이 났습니다. 실행을 시켜

결과를 확인해 볼 차례인데 위에서 설명했듯이

Dockpanel의 자식요소의 순서에 따라 화면에 

배치가 달라진다고 했는데 정말 그런지 여러분들이

순서를 바꾸어 가며 실행시켜 확인해보세요..!

저는 실행 후 세 번째 순서에 있던

​

"Dock = Bottom" 이라 쓰여진 노란색의

Border 컨트롤을 제일 아래로 순서를 변경하였더니

다음과 같은 실행 결과가 나타나내요.

​DockPanel 은 기본적으로 마지막 자식 요소를

할당되지 않은 나머지 영역을 채우도록 합니다.

이 동작을 방지하려면 Dockpanel 의

LastChileFill = "False" 로 설정해 주십시요

(Good Bye~!)​

​

​#오라클교육센터/#오라클/#자바/#오라클자바/#구로오라클#구로오라클자바교육센터/#구로오라클학원#구로자바학원

<레이아웃-Canvas>

Canvas는 가장 단순한 패널입니다. 쉽게 생각하면

모눈종이라고 생각할 수 있습니다.

Canvas의 기본 Heght 및 Width 속성은 0이지만,

자식 요소의 크기를 자동으로 지정하는 요소의

자식일 떄는 예외입니다.

Canvas의 자식 요소는 크기가 조정되지 않으며

지정된 좌표에 배치되기만 합니다.

기본적인 크기 조정 제약 조건이나 맞춤을 적용할

필요가 없거나 적용하지 않으려는 경우 이러한

기능을 유연하게 활용할 수 있습니다.

Canvas의 자식 요소에는 항상 요청되는 전체크기가

할당되며, Canvas 내에서는 가로 및 세로 맞춤이

적용되지 않습니다.

이 말은 Canvas 크기가 달라지더라고 Canvas

안의 요소의 크기는 변하지 않는다는 것입니다.

그럼 이제부터 Canvas 컨트롤을 사용하는

예제를 만들어 보고 Canvas의 크기가 변하여도

자식요소의 크기가 변하는지 변하지 않는지

확인해 보겠습니다.

그 전에 한가지 가정을 해서 진행하면 한 화면에

TextBlock,Button,Image 가 있고 이미지와 버튼은

창의 크기가 변해도 고정된 사이즈를  유지해야

함을 가정합니다.

그럼 이제 Visual Studio 를 열어 PenelSample 라는

이름으로 새로운 프로젝트를 생성합니다.

그런 다음 Window1의 이름을 Canvas 로 변경하고

이미지 하나를 추가하겠습니다.

Canvas.xaml에서 <Grid> </Grid> 부분을 삭제 후 그

자리에 Canvas 컨트롤을 올려놓고 자식요소로

TextBlock , Button , Image 컨트롤을 올려보겠습니다

이제 빌드하여 결과를 확인합니다.

만일 오류가 발생한다면 App.xaml 의 Startup Uri

를 확인하셔야 합니다 ^ㅇ^

마지막 으로 Window 의 크기를 변화시켜 Canvas 안의

자식 요소들의 크기가 영향을 받는지 확인해보죠

이처럼 Canvas 를 사용할때는 고정된

레이아웃 고정된 이미지를 나타낼 때

사용됨이 적당할 것입니다.

#오라클자바교육센터/#오라클/#자바/#Java/#오라클자바

/#WPF/#WPF강의/#WPF자료

<문서(Document)>

문서는 WPF에서 제공되는 기능중 하나로 텍스트

위주의 콘텐츠타입의 광범위한 문서 기능을

통해 기존 Windows에 비해 보다 쉽게 액세스하고,

읽을 수 있도록 디자인된 고품질 콘텐츠를 작성할수있

습니다. 향상된 기능 및 품질과 더불어 WPF에서는

문서 표시, 패키지 및 보안에 대한 통합 서비스도

제공합니다.

그럼 문서 샘플을 만들어 보도록합시다.

위에서와 동일한 방법으로 "Document"라는

Window를 추가하겠습니다.

문서를 작성하는데 있어서 두가지의 문서 컨트롤이

있는데 하나는 고정 문서 컨트롤(DocumnetViewer)와

유동 문서 컨트롤이 있습니다.

각각은 사용함에 있어 약간의 차이점이 있는데

문서 콘텐츠의 특성에 따라 사용이 달라집니다.

고정 문서 콘텐츠는 DocumnetViewer 컨트롤을 사용

하며 FixedDocument 콘텐츠를 표시하도록

디자인 되어있습니다.

유동 문서 콘텐츠는 세 가지 컨트롤인

FlowDocumentReader , FlowDocumentpageViewer

및 FlowDocumentScrollViewer 를 사용하여

표시되어 집니다.

FlowDocumentScrollViewer 컨트롤을 사용하여

예제를 만들어 보겠습니다.

새로 추가한 "Document.xaml" 에

아래 코드를 작성하겠습니다.

그럼 App.xaml을 수정한 후에 실행을 합니다.

위 코드에서 사용한 FlowDocumentScrollViewer

는 콘텐츠를 연속 스크롤 모드에서 유동 콘텐트를

볼 수 있는 컨트롤을 제공합니다.

#WPF/#WPF강좌/#WPF자료/#WPF강의/#WPF강의자료

#오라클자바교육센터/#오라클/#자바/#JAVA#ORACLE

즐거운 주말 보내세요~

<그래픽>

​

​WPF는 이전에 특수한 라이브러리 및 Microsoft 

​

Windows GDI+ 에서만 사용할 수 있었던 기능인

​

고급그리기 및 애니메이션 기능을 제공합니다.

​

이제 WPF는 멀미티미어,백터그래픅,애니메이션

​

및 콘텐츠 컴퍼지션에 대한 지원을 제공하므로

​

개발자는 흥미로운 사용자 인터페이스 및 콘테츠를

​

쉽게 빌드할 수 있습니다.

​

Microsoft Visual Studio .Net 또는 심지어

​

텍스트 편집기(예:Microsoft 메모장)를 사용하여

​

백터 그래픽이나 복잡한 애니메이션을 만들고

​

미더으를 응용프로그램에 통합할 수 있습니다.

​

*2차원 도형*

​

WPF에서는 다음 그림에 나오는 사각형 및 타원

처럼 일반적인 벡터 기반의 2차원 도형

라이브러리를 제공합니다.

위의 이러한 WPF 도형들은 단순한 도형이 아니라

이러한 도형은 키보드나 마우스 입력을 포함한

대부분의 일반 컨트롤들의 동작과 동일한 동작이

가능하도록 프로그래밍이 가능합니다.

​

위에서 만든 프로젝트에 "2D_Graphic" 이란

이름으로 새로운 Window를 추가하겠습니다

다음으로 XAML로 원을 만들고 코드 비하인드

페이지에서 원의 클릭 이벤트를 작성합니다.

이제 실행을 하여 결과를 보겠습니다.

실행 시킬 때 App.xaml의 StartupUri 를

변경해주시고요~

#WPF/#WPF강의자료/#WPF자료/#WPF강의

​

​

#WPF/#WPF강의자료/#WPF자료/#WPF강의

#오라클자바교육센터/#오라클/#자바/#오라클자바/#IT교육/#프로그래밍

​<애니메이션>

WPF 의 애니메이션을 사용하면 컨트롤과 요소를

​

​늘리거나 흔들거나 회전하거나 점점 흐리게 만들어

​

​보다 효과적인 페이지 전달효과를 줄 수있습니다.

​

​WPF 에서는 대부분의 속성에 애니메이션 효과를

​

​줄 수 있으므로 대부분의 WPF 개체뿐만 아니라

​

​직접 만든 사용자 지정개체에 WPF를 통하여서

​

애니메이션 효과를 줄 수 있습니다.

​

​예제를 통하여 컨트롤의 모양을 바꿔보도록하죠.

​

​Visual Studio 를 열어 AnimationTest 라는

​

​이름으로 새로운 프로젝트를 생성합니다.

다음으로 저는 솔류션 탐색기에서 Window의 이름

만 Animation 으로 변경하겠습니다.

이 예제에서는 두 단추에 애니메이션 효과를 적용

하여 뷰에서 두 단추를 페이드 인&아웃 합니다.

첫 번째 Button 의 불투명도는 5초의 Duration

동안 1.0부터 0.0까지 변합니다.

두 번쨰 단추에도 애니메이션 효과를 적용하지만

전체 단추의 불투명도가 아니라 단추의 Backgrond

를 그르니느데 사용되는 SolidColorBrush 의

불투명도에 애니메이션 효과가 적용됩니다.

​

이 예제를 실행하면 첫 번쨰 단추가 뷰에서 완전히

페이드 인 되고 페이드 아웃되는 동안 두번째

단추의 배경만 뷰에서 페이드 인되고 페이드 아웃

됩니다 텍스트와 테두리는 완전히 불투명한 상태를

유지하게되는 효과입니다.

​

(WPF 강좌예제 자료)

이제 실행을 시켜 버튼의 애니메이션을 확인합니다

예제에서는 Double 값을 생성하는 애니메이션

형식인 DoubleAnimation 을 사용하여 Button 의

Opacity 속성에 애니메이션 효과를 적용합니다.

결과적으로 Button 이 뷰에서 페이드 인 된 후

페이드 아웃이 됩니다.

​

WPF 강좌 예제자료

​

 #WPF 교육 / #WPF 강좌자료 / #WPF예제 / #WPF 교육파일 / #오라클자바교육센터

⁠​

<리소스>

리소스(Resource)란 런타임에 검색되어 사용자

인터페이스에 표시되는 문자열 또는 이미지 등의

포함 데이터를 나타냅니다.

우리는 리소스를 이용하여 컨트롤의 모양이나

데이터들을 변경할 수 있습니다.

이미 앞 자료에서 만든 예제에서 ListBox의

데이터를 바인딩 하기 위해 Key가 "rsCarList" 라는

리소스를 사용한적 있었습니다.

WPF 에서는 계층적 구조 내에 정의된 요소들이

리소스를 사용할 수 있도록 지원을 제공하며

원하는 만큼 "ComName" 라는 이름을 가진

리소스 요소를 추가 할 수 있었습니다.

그럼 이제부터 리소스를 이용하여 컨트롤의

모양을 변경시켜 보는 예제를 만들어보겠습니다.

Visual Studio 를 열어 ResourceTest

라는 이름으로 새로운 프로젝트를 생성합니다.

그런 다음 아래 코드와 같이 Window1.xaml

페이지에 Label , Button 컨트롤들을 올리겠습니다

다음은 Label 의 스타일을 변경하게 될 리소스를

Window1.xaml의 <Grid> 부분 위에

아래와 같은 코드를 같이 추가 합니다.

이번에는 버튼을 클릭 되었을 때 Label에

리소스를 적용시킬 이벤트를 생성합니다.

버튼의 이벤트 생성은 디자인 뷰에서 버튼을

더블 클릭하여 각각의 버튼에 이벤트를 생성합니다

그럼 이벤트 헨들러가 생성이 되었고

Window1.xaml.cs 페이지도 이동하여

이벤트의 코드를 작성하겠습니다.

위의 코드를 다 실행을 시켜 결과를 얻으면..

⁠

위의 결과에서 보듯이 버튼을 클릭 했을때 리소스

를 Label의 스타일로 적용시켜 간단히 Label의

외관을 변경시킬 수 있었습니다.

이처럼 리소스를 이용하여 데이터를 변경할 수도

있고 효율적으로 작업을 할 수 있게 됩니다.

​⁠<컨트롤 템플릿>

⁠

컨트롤 템플릿은 WPF 스타일 및 템플릿 모델에서

제공되는 다양한 기능 중 하나로 컨트롤의

시각화를 다양하게 변경할 경우 사용됩니다.

그럼 컨트롤템플릿을 이용하여 버튼컨트롤의

외관을 변경하는 예제를 만들어 보겠습니다.

​

우선 Visual Studion 를 열어 'ContreolTemplate'

라는 이름으로 새로운 프로젝트를 생성합니다.

이후 아래의 코드를 작성합니다.

​

다음으로 우리가 만든 컨트롤이 정말 버튼인지를

확인하기 위해 클릭되었을 때 버튼의 동작을

정의하는 클릭이벤트를 작성하겠습니다.

Window.xaml.cs 페이지의 Window 클래스

안에 다음의 코드를 작성합니다.

이제 실행을 시켜 컨트롤템플릿이

적용된 버튼의 모양을 보도록 하겠습니다.

다음과 같이 버튼의 외관이 템플릿에 정의한 데로

Ellipse로변경되고 색상도 바뀐것을 볼수있습니다

그럼 정말 버튼인지를 확인해 보기 위해서

클릭을 해보게 되면

비하인드페이지에 정의한 클릭이벤트의

메시지 창이 나타날 것입니다.