Roaming from the Earth

Horizontal Scroll ListBox 만들기를 통해 ListBox의 구조를 약간 파악하셨고- 조금 친해졌다면!!
ListBox와 친해지기 2탄!!!
'냠냠냠 Food ListBox'를 만들어 보도록 하겠습니다.
먼저 디자인을 해주었습니다.

1. Silverlight Application Project를 하나 만들고,
ListBox를 아트보드위에 하나 그려줍니다.

Sample Data Source

2. Item Collection을 먼저 만들어 볼께요.
Data패널에서 Define New Sample Data 를 클릭해서 새로운 Data Source를 생성해 줍니다.

FoodItem이라고 제목을 지어 줬습니다.

3. Collection의 Item들의 이름을 각각 FoodImage와 Name으로 바꿔주고, 
오른쪽 화살표 달린 버튼을 클릭해서 타입을 바꿔 줍니다.

4. Image Type으로 변경하고 Browse 버튼을 클릭해서, 저장해놓은 이미지의 폴더를 선택해주겠습니다.
제가 예쁘게 오려(!?) 놓은 이미지들을 샘플로 첨부합니다.

Sample_FoodImage.zip

5. Collection을 ListBox에 Drag & Drop 해서 바인딩 해줍니다.
아트보드위에 맛난간식들 이미지와 모르는 영어들이 List를 가득채우고 있을껍니다!

6. Food Collection 오른쪽 Edit Sample Data 버튼을 클릭하여 이미지에 맞게 이름을 바꿔 줍니다.

Tip. Sample Image는 알파벳순으로 차례차례 나오고, 이미지 수가 Number of records의 숫자보다 작을때는 다시 첫번째 이미지 부터 반복됩니다.
(제가 첨부한 Sample이미지는 9장이므로 9를 적어주면되겠습니다.)


Edit Generated Item Container

Item Container에 디자인을 적용하고 이벤트 발생시 인터렉션을 설정해보겠어요.

7. Edit Additional Templates > Edit Generated Item Container > Edit a Copy

8. Style Resource의 이름을 적당히 정해줍니다.

9. Edit a Copy 를 선택해서 Style을 만들었기때문에 기본 컨트롤의 구조가 그대로 Copy되어 있는 모습입니다.
 컨트롤 구조에 조금 익숙해지면, Create Empty를 선택하여 디자인을 하면 되겠지만 아직 익숙해지기 위해 Edit a Copy하여 수정해서 쓰도록 합니다!
제가 만든 냠냠 아이들은 기족 구조가 필요없으므로 Ctrl + 좌클릭하여 다중선택하고 > 우클릭하여 Delete 선택하여 없애버립니다!

Grid의 Column을 3개로 나눠서
Normal상태에 보일 FoodImage, Food Name, Select 되었을 때의 Food Image순으로 넣어줄 겁니다.

Grid, Columns

10. Grid를 선택하고 Select툴을 사용해서 그리드를 적당히 나눠줍니다.
Grid위의 하늘색바 부분을 클릭하면 Column을 나눌 수 있습니다.

11. Layout 패널을 확장하면 나오는 ColumnDefinition 항목의 오른쪽 버튼을 클릭하면 통해
Column을 추가, 삭제 크기 설정등을 따로 할 수도 있습니다.

<Column Definition Collection Editor>

12. FoodImage를 Binding할 Image를 추가 해봅시다.
툴바 제일 아래쪽 Asset Library를 클릭하여, Image를 추가합니다.

Tip. Asset Library는 search가 쉽게 되니, 컨트롤의 앞글자 조금 적어주면 좀 더 빠르게 원하는 컨트롤을 찾아서 추가 할 수 있겠죠~

13. Normal 일 때의 작은 이미지, Select일 때의 큰이미지를 각각 하나씩 추가하고 이름을 붙여 줍시다.

14. SmallImagedml 사이즈를 42*42 정도로 지정해줍니다.
Horizontal Alignment는 왼쪽으로 정렬해줍니다.
그리고 Common Properties에서 Source 항목의 오른쪽 조그만 아이콘을 클릭해서 Data를 Binding합니다.

이렇게 생긴 Context menu에서 아래 노란 Data Binding을 선택합니다.

15. Create Data Binding 창이 뜹니다.
Data Field나 여러가지 Element의 Property라던지 선택하여 바인딩 할 수 있는 창이 뜨는 데,
Explicit Data Context를 선택하면 생성해 두었던 Sample Data Source의 Item Collection 의 리스를 볼 수 있습니다.
그중 FoodImage를 선택하고 OK를 눌러줍니다.

16. BigImage도 마찬가지로 Size를 80*80 지정해주고,
Grid의 Column위치를 2로 잡아주고, 
Alignment를 설정해준 다음,

Source > Data binding > Explicit Data Context > FoodImage 를 선택하여, FoodImage를 바인딩 해줍니다.

Tip. Grid에서의 Row와 Column은 1,2,3...의 순서가 아니라. 0,1,2,3... 의 순서로 첫번째 칸이나 줄은 0입니다.

17. 냠냠 아이들의 제목이 Binding 될 TextBlock을 추가 해 줍니다.

1) TextBlock의 위치는 Column 1, 적당한 Fontfamily와 FontSize를 잡아주고- 디자인에서와 같이 Bold도 넣어줍시다.
2) Common Properties의 Text 항목의 오른쪽 네모 버튼을 클릭해서 이미지들 Binding 한 것과 같은 방법으로
Data binding을 선택해줍니다.

18. Explicit Data Context > Name을 선택합니다.

준비물은 다 갖춰 졌네요.
이어서 State설정과 Storyboard등을 살펴보도록 하겠어요.

------------------------------------------------------------------

1. Grid의 Column과 DataBinding
2. State와 StoryBoard, Opacity Mask
3. ScrollBar Template

Expression Studio Cafe에서 Blend세미나가 있습니다!

장소 : 포스코센터 서관 5층 한국마이크로소프트 DRIVE룸

시간 : 2월 11일 (목) 19:30 - 22:00

(.. 순서입니다.

신청은 아래링크로 가면 할 수 있어요.

http://cafe.naver.com/expressionstudio/1066

세미나 마치고 스터디진행에 대한 얘기와 신청 받을 예정입니다. (아마^^;)

jungle_3.pptx

Layout Panel
- Grid
- Canvas
- StackPanel
- ScrollViewer
- Border
- WrapPanel, DockPanel, Viewbox, UniformGrid (WPF Layout Panel)

Layout Panel 별 특성

Grid
- 기본 Layout Panel
- 행, 열
- 다수 자식객체

Canvas
- Left, Top : 자식객체
- Size, Alignment가 자식객체에 영향을 미치지 않음.
- Path로 이루어진 그림 배치에 용이
- 다수 자식객체

StackPanel
- 가로, 세로 자동 정렬
- Panel의 크기만큼 자식객체 보여줌
- 다수 자식객체

ScrollViewer
- 컨트롤과 조합되어있는 레이아웃 패널
- ScrollBar가 들어있음
- 자식객체하나

Border
- BorderBrush
- Radius
- Padding
- 자식객체 하나

- WrapPanel – 자식객체 자동정렬, 너비높이조절
- DockPanel – 자식객체들이 Docking
- UniformGrid – 자식객체 자동정렬, 행열수 지정
- Viewbox – 자식객체 하나, Viewbox만큼 자식객체 조절

 


원래, 배포되고있는 WPF theme적용까지 해보려고 했는데,
시간관계상 못 한 이유로-



숙제는 :
1. WPF theme 적용하기 포스트 읽고 오기와
2. 실습때 마무리 하지 못한 UI완성 해오기 였습니다.

jungle_color.pptx

jungle_color.pps

jungle_color.ppsx

2. 참고동영상으로 보여 드렸던,

Microsoft Office Labs vision 2019
http://www.youtube.com/watch?v=8Ff7SzP4gfg&feature=player_embedded
Microsoft Office Labs vision 2019 Montage : Retail
http://www.youtube.com/watch?v=E_fIAE78tt0&feature=related

3. 학습 참고용 URL

MSDN 라이브러리 :
http://msdn.microsoft.com/ko-kr/library/default.aspx
네이버 Expression Studio Café:
http://cafe.naver.com/expressionstudio.cafe


과 슬라이드쇼를 ppt2003이전버젼과 2007버젼 첨부합니다.

Horizontal Scroll ListBox 만들기 : 1. ListBox의 구조

프로젝트를 진행하다 보면, 매우 빈번하게 쓰이는 ListBox -
하지만 이 ListBox, 처음엔 친해지기가 조금 까다롭지 않습니까?!
(아아- 나만? ;ㅁ;)

지금부터 ListBox를 주물러 보기 위해,
먼저- 요즘 열광중인 선덕여왕의 ㅇㄷㅇㄷ하고 훈훈한 ListBox를 간단하게 디자인 해보았어요.

 ItemTemplate과 Sample Date는 다음 강좌로 -


---------------------------

1. ListBox의 구조
2. Item Template과 Sample Data Binding
3. ScrollViewer와 ScrollBar

---------------------------

Microsoft Expression Blend 3 + SketchFlow Trial

System Requirements

1. .NET Framework 3.5 SP1
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=ab99342f-5d1a-413d-8319-81da479ab0d7

('' 설치 되어 있다면, 패스 하고 (..

2. Expression Blend 3 + SketchFlow
http://www.microsoft.com/downloads/details.aspx?FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb&displaylang=en

Team Foundation Server(TFS) support in Blend 3

Blend3에서 TFS 설정을 해보아요-

Visual Studio에 Team Explorer 가 잘- 돌아가고 있는 상태여야 하고,

Blend3도 제대로 설치 되어 있어야 합니다.

(사실 여기까지가 제일 어렵죠 ㅎㅎ)

그리고 추가로

Enables Team Foundation Server 2008 to work with Expression Studio 3.

http://code.msdn.microsoft.com/KB967483/Release/ProjectReleases.aspx?ReleaseId=2367

TFS를 사용하기 위한 (‘’ 이 것을 설치 해주면 끝!

Blend3에서는 Team Explorer의 솔루션 오픈이 가능하고, TFS에 체크인 체크아웃 등이 가능하네요.

TFS설정이라던지 – 는 물론 될 리가 없습니다. Blend 3 Team System 도 아니고!

먼저 TFS의 솔루션을 하나 열어 봤습니다.

VSTS에 비해 좀 허술해 보이긴 하지만, 자물쇠도 달렸고-

체크아웃도 허술해 보이는 빨간 체크를 해주는 군요.

기능은 대략

왼쪽 Blend3 과 오른쪽 VSTS 2008의 메뉴 입니다.

저는 VSTS 2008을 사용중인데, 문제 없군요.

다른 버전에선 어떤지 잘 모르겠네요.

XAML 파일을 수정하면 비쥬얼스튜디오에서는 체크아웃을 바로바로 해주는데,

Blend3에서는 체크아웃 해주진 않네요.

.cs파일에 영향을 미치는 작업을 하면 바로 체크아웃을 해줍니다.

TFS관련 설정 옵션은 아직 아무것도 되진 않습니다.

TFS를 쓰기 위한 Blend 유저들에겐 딱 적당할 정도의 기능?