안녕하세요. 짱묜입니다. 주말 내내 소나기가 내렸다 안내렸다를 반복하네요. 변덕스러운 날씨 같으니라구..ㅋㅋ
우리는 그동안 버튼이나 스크롤뷰어 등과 같은 컨트롤의 외관을 바꾸기 위해서 스타일을 많이 사용해 왔는데요. 컨트롤의 외관을 바꾸는 경우 뿐만 아니라 같은 속성을 가지고 있는 경우에도 스타일로 지정하여 적용할 수 있습니다. 그래서 오늘은 레이아웃 컨트롤에 스타일을 적용해 보도록 하겠습니다.
레이아웃 컨트롤에는 그리드, 스택패널, 캔버스 등등이 있는 것은 다 아시죠? 우리가 작업을 하다보면 이러한 레이아웃 컨트롤도 같은 스타일로 반복되어 사용하는 경우가 많이 있는데요. 예를 들면 페이지마다 같은 위치에 같은 레이아웃으로 놓이는 컨트롤도 있겠죠? 이런 경우에 페이지마다 레이아웃 컨트롤을 복사해서 붙여넣는 것도 방법이지만 스타일로 정의하게 되면 나중에 변경사항을 각 페이지마다 적용하지 않고 레이아웃의 스타일만 변경해 주면 되기 때문에 훨씬 편리합니다.
여러 레이아웃 컨트롤 중 자식객체를 순차적으로 담은 스택 패널을 예제로 만들어 보겠습니다. 실버라이트 혹은 WPF로 프로젝트를 하나 생성합니다. 오늘의 예제는 실버라이트 프로젝트 타입이지만 WPF도 상관없습니다.
LayoutGrid에 스택패널과 그 안에 자식객체로 사각형 컨트롤 3개를 넣습니다.
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
<Rectangle Fill="Blue" Width="100" Height="100"></Rectangle>
<Rectangle Fill="Yellow" Width="100" Height="100"></Rectangle>
</StackPanel>
</Grid>
그럼 다음과 같이 보여지겠죠?
이제 스택패널의 스타일을 리소스 안에 선언해주도록 하겠습니다. 리소스의 위치는 이전에도 말했지만 어느 곳에 선언하느냐에 따라 적용되는 범위가 달라집니다. 리소스 딕셔너리 파일을 하나 생성하고 그 안에 넣었습니다.(리소스 딕셔너리를 생성하여 스타일을 넣는 법은 http://zzangmyon.com/179 참고하세요)
다음은 스택패널의 스타일입니다.
<Style x:Key="StackPanelStyle" TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Margin" Value="20,20,0,0"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="Auto"/>
</Style>
1. x:Key의 이름은 "StackPanelStyle" 이라 하고 TargetType은 "StackPanel" 로 지정하였습니다.
2. 스택패널은 기본적으로 Orientation이 "Vertical"로 설정되어 있어 자식객체가 세로로 정렬됩니다. 이것을 "Horizontal"로 바꾸고 가로로 정렬되도록 합니다.
3. HorizontalAlignment 와 VerticalAlignment 는 "Left"와 "Top"으로 설정하여 항상 페이지의 왼쪽 상단에 위치하게 합니다.
4. Margin 값은 "20,20,0,0" 으로 주어 상단과 왼쪽으로 부터의 공백을 20으로 주었습니다.
5. Width와 Height는 "Auto"로 주어 자식객체의 길이에 따라 자동으로 늘어나게 합니다.
이렇게 만들어진 스타일을 그리드 안에 넣었던 스택패널에 적용하기만 하면 됩니다. 굵은 부분을 보세요!
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Style="{StaticResource StackPanelStyle}" >
<Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
<Rectangle Fill="Blue" Width="100" Height="100"></Rectangle>
<Rectangle Fill="Yellow" Width="100" Height="100"></Rectangle>
</StackPanel>
</Grid>
만약 추후에 변경할 사항이 있어서 스타일을 변경한다면 여러 페이지에 들어가있는 스택패널이 모두 일괄적으로 바뀌게 되겠죠? 생각보다 너무 쉬워서 놀라셨으리라 생각합니다. ㅋㅋ 블렌드에서 만드는 방법은 클릭만 하면 되기 때문에 더욱 쉽겠죵 ^^ 이건 여러분이 한번 해보세요~~
파일 첨부합니다.
LayoutControlStyle.zip
