은광초등학교 1월 14일 수요일 수업 2학기 두번째시간
안녕하세요, 은광초등학교 나름 막내?? 짱가입니다.^^
2학기를 맞이하여 처음으로 있는 수업에 간단한 피자 파티?를 하고!
교장선생님과 함께 색깔에대한 silverlight예제를 만들어 보기로 했어요.
사실 윗쪽여백은 TopProperty, 옆쪽 여백은 LeftProperty를 지정해줘야한다는 것을 알지만,
Color 는 어떤 값을 지정해야좋을지 알지 못하기 때문에!!
silverlight 의 기본적 그래픽요소들에 대해서 알아보도록 하겠습니다.
첫째로, silverlight 에서 색을 지정할경우에 우리는 Brush 브러쉬를 사용하는데요!
여기서 사용될수있는 Brush의 종류에는 3가지가 있습니다.
1. SolidColorBrush – 단색으로 채워주는 브러쉬
2. LinearGradientBrush 및 RadialGradientBrush- (선형, 원형)그라디언트로 채워주는 브러쉬
3. VideoBrush – 비디오로 채워주는 브러쉬
(이렇게 3개의 브러쉬중에 오늘은 간단한 1번 SolidBrush를 사용하기로 하였습니다.)
두번째로, 색상의 표현 방법으로는
1. 기본적으로 지원하는 Colors 를 이용하여 미리 설정되어있는 색을 사용할수있습니다.
ex) Colors.Black, Colors.White…..
2. ARGB( alpha, red, green, blue) 값으로 설정해줄수있습니다.
cf) Color.FromArgb(255,255,255,255)
+ RGB컬러가 아닐경우에 silverlight안에서 알고리즘 로직을 구현하여 RGB로 컨버팅 하여 사용하는 방법을 사용하시면 됩니다^^
(오늘 수업에서는 1번, 2번 방법과, Ahsb 컬러에서 Argb컬러로 변환해서 사용하는 방법을 사용했습니다.)
세번째, 도형의 색상을 설정해줄수있는 속성
1. Fill - 도형 안의 색을 채워줄 경우
2. Stroke – 도형의 테두리 색을 바꿔줄 경우
여기까지 색상에대한 기본적인 설정을 알아보았습니다
(자세한내용은 MSDN에서 참조해주세요^^:;)
그럼 이제 이 속성들을 변경해가면서 오늘의 예제들을 진행해 보도록 하겠습니다.
[첫번째 예제 Color_1. 클릭을 할때마다 색이 변하는 상자]
[두번째 예제 color_2. slidBar를 이용한 색상 변환]
[세번째 예제 color_3. 색칠하기 놀이패러디_선택된 부분 색 바꿔주기]
[네번째 예제 color_4. 색이 다른 네모상자 배열하기]
[다섯번째 예제 color_5. HSB형태 색으로 네모상자 배열하기]
[여섯번째 예제 color_6. 무지개 빛깔 네모상자 배열하기]
(각 예제들은 연속되어 있으므루 차례 차례 해보시기를 권장합니다^^;;)
[첫번째 예제 Color_1. 클릭을 할때마다 색이 변하는 상자]
1. silverlight application 프로젝트를 하나 만들고, Page.xaml파일에 UserControlLoaded설정과Grid를 Canvas로 변환하여 줍니다.
2. Blend에서 자신이 원하는 색으로 네모상자를 하나 만들어주고 이름을 myRect라고 붙혀줍니다.
3. Page.xaml.cs코드에 넘어와서 myRect에 마우스 왼쪽버튼 이벤트를 받아들이는 핸들러를 생성하여줍니다.
4. 생성된 핸들러안에서 myRect의 색을 랜덤한 값으로 변경하여줍니다.
ARGB 색의 각 속성은 0~255의 값을 갖으므로 random 함수를 사용해서 생성시켜주고,
fromArgb은 인자값으로 byte를 받아오기 떄문에 byte형으로 타입을 변환시켜줍니다.
5. 이제 상자에 마우스왼족버튼클릭하면 색이바꾸게 설정해주시면 됩니다^^
(이하 다른 예제들은 주석처리 해놨으므로 실행해보면 다 알수있으실꺼에요^^)
열공하세요^^
Color_1.zip
이 글은 스프링노트에서 작성되었습니다.