실버라이트에는 각 컨트롤에 Style을 적용시켜 사용할수 있다''

스타일은 HTML의 CSS의 개념과 흡사한 개념이며;
실버라이트에서는 스타일과 더불어 템플릿이라는 개념을 제공하여 사용자가 컨트롤을 쉽게
만들수 있게 하였다;

스타일은 쉽게 말해 컨트롤들의 속성을 미리 정의해 놓고 나중에 불러서 쓰는것이고
템플릿은 컨트롤내의 모양, 형태, 이벤트발생시 처리로직이라던지 그런것을 바꿔줄수 있는것이다;

이번 포스트의 목적인 스타일을 알아보자면
스타일의 사용하는 이유는 재사용성이라는 측면이 가장 큰것 같고, 속성의 변경시 쉽게 정의 부분만
변경하게되면 그 스타일을 적용받는 모든 컨트롤의 속성이 변경되기 때문에 간단하게 유지보수 할수 있게 된다;
그리고 마지막 장점이라면 코드가 간결해진다 이정도로 생각해 볼수 있지 않을까;;


그럼 스타일을 어떻게 정의하고 어떻게 적용시키는지 알아보겠다;

>> 실버라이트 응용프로그램 프로젝트를 생성하여 page.xaml에 아래와 같이
    버튼 9개를 넣어 보았다;



<Button  Content="버튼1" Grid.Row="0" Grid.Column="0"/>
<Button  Content="버튼2" Grid.Row="0" Grid.Column="1"/>
<Button  Content="버튼3" Grid.Row="0" Grid.Column="3"/>
<Button  Content="버튼4" Grid.Row="1" Grid.Column="0"/>
<Button  Content="버튼5" Grid.Row="1" Grid.Column="1"/>
<ButtoContent="버튼6" Grid.Row="1" Grid.Column="2"/>
<Button  Content="버튼7" Grid.Row="2" Grid.Column="0"/>
<Button  Content="버튼8" Grid.Row="2" Grid.Column="1"/>
<Button  Content="버튼9" Grid.Row="2" Grid.Column="2"/>


>> 스타일을 정의 하기 위해 app.xaml 코드로 가서

     <Application.Resources> 태그속에 스타일을 적용한다!
 <Style TargetType="Button" x:Key="MyButtonStyle">
       <Setter Property="FontFamily" Value="Gungsuh"/>
       <Setter Property="FontSize" Value="20"/>
       <Setter Property="Foreground" Value="#FFFF0000"/>           
</Style>
       TargetType은 변경할 컨트롤의 타입명 x:Key는 나중에 불러다 쓸 스타일의 이름이다;
         Setter 어트리뷰트 값으로 Property
에는 변경하고 싶은 속성을  Value에는  값을 입력하면 된다;
         간단하게 나는 폰트를 궁서체로 글씨 크기는 20 폰트 색상을 빨강으로 입력해 보았다;  쉽다;


>>이제 page.xaml에 있는 버튼들에 속성을 줘보자;

<
Button  Content="버튼1" Grid.Row="0" Grid.Column="0"
Style="{StaticResource MyButtonStyle}"/>


Style
="{StaticResource MyButtonStyle} 간단하게 이 구문만 추가하면 버튼에 스타일이 입혀지게 된다!
여기서 StaticResource 옆에 자신이 정의한 스타일의 Key를 넣으면 된다;
버튼이 궁서체 20pt 빨간색으로 바뀐것을 볼수있다



버튼 색상을 파란색으로 바꾸어야할때..

스타일을 쓰지 않은 코드에서는 9개에 속성값을 일일이 변경해야하는 번거로움이 있겠지만
스타일을 사용한 코드는 app.xaml에있는 스타일의 정의만 살짝 변경해주면 쉽게 컨트롤의
속성을 변경 할 수있다



Posted by 맨날맑음
,