[프로젝트 타입 : Silverlight 4]
안녕하세요. 짱묜입니다. :) 정말 오랜만이죠? 얼마만에 강좌를 쓰는지도 모르겠습니다;; 이제부터 미뤄왔던 온라인 강좌들을 다시 써보려고 해요. 궁금한 사항이나 다뤄주었으면 하는 부분들은 글을 남기시면 참고하도록 하겠습니다.
오늘은 Resource Dictionary(이하 리소스 딕셔너리)를 다른 프로젝트로 분리하여 관리하는 방법에 대해서 알아보려고 합니다. 우리가 자주 사용하는 스타일, 템플릿과 같은 리소스들은 해당 도큐먼트에 선언하여 사용하거나 App.xaml 에 선언하여 전역으로 사용하거나, 리소스 딕셔너리로 분리하여 사용합니다. 이러한 방법들은 모두 하나의 프로젝트 안에서 이루어지게 됩니다. 그런데 만약 규모가 커져서 여러개의 프로젝트가 합쳐진 솔루션을 개발해야 할 상황이 온다면 어떻게 해야할까요?
아마도 프로젝트 마다 다른 프로젝트 안에 들어있는 리소스 딕셔너리를 일일이 참조해야 할 것이고 만약 참조한 리소스 딕셔너리가 들어있는 프로젝트가 불필요하여 제거라도 해야 하는 날에는 모든 경로를 다시 다 바꾸어주어야겠죠.아~ 생각만해도 귀찮습니다. =_=;;
이러한 리소스 딕셔너리들을 또 다른 프로젝트로 분리하여 관리한다면 이런 불상사는 생기지 않겠죠. 또한 자주 쓰는 스타일들을 템플릿화 하여 관리한다면 어떠한 프로젝트에도 가져다 쓸 수 있는 큰 자산이 되리라 생각합니다.
※ 실제 프로젝트를 생성할 때에은 비주얼 스튜디오로 프로젝트를 생성하는 것을 권장합니다. sdk 등등 여러 문제가 있으니까요. 이번 강좌는 블렌드에서 생성하는 것을 예로 들겠습니다. 실제 프로젝트에 적용하실 경우에는 센스를 발휘해주세요~
1. Expression Blend를 열고 프로젝트를 하나 생성합니다. 메인이 되는 프로젝트로 이름은 "ResourceDictionaryTest"라고 주었습니다. 이 프로젝트에는 버튼이나 레이아웃 컨트롤 등 UI 작업이 이루어질 것입니다.
2. 프로젝트를 생성하면 기본적으로 솔루션이 하나 생성되고 그 안에 프로젝트가 생기게 되는데요. 여기서 "솔루션"이란 프로젝트의 집합을 나타냅니다. 우리는 리소스 딕셔너리를 관리할 프로젝트를 하나 더 생성해야 합니다. 솔루션에 마우스 오른쪽을 갖다대고 "Add New Project" 메뉴를 클릭합니다.
3. 대화창이 뜨게 되면 "MyStyle" 이라는 이름을 주어 프로젝트를 생성합니다. 이 프로젝트에서는 UI작업이 이루어지지 않으며 리소스 딕셔너리 만을 포함할 것입니다.
프로젝트를 생성하면 다음과 같이 하나의 솔루션 안에 두개의 프로젝트가 생성되어 있는 것을 확인할 수 있습니다.
4. "MyStyle" 프로젝트에 리소스 딕셔너리를 추가하기 위해 마우스 오른쪽을 갖다 대고 "Add New Item" 항목을 클릭합니다.
5. 대화창이 나타나면 파일 타입을 "Reosurce Dictionary"로 선택하고 이름을 "ButtonStyle"이라고 줍니다.
6. "MyStyle"의 프로젝트에 App.xaml 파일을 살펴보면 다음과 같은 코드를 확인할 수 있습니다.
<ResourceDictionary>
ButtonStyle.xaml 이라는 리소스 딕셔너리가 App.xaml에 선언됨으로써 프로젝트 안의 어느 파일에서도 이 딕셔너리 안에 있는 스타일을 Key로 접근하여 쓸 수 있게 되는 것입니다. 그러나 우리는 다른 프로젝트에서 이 프로젝트의 스타일을 쓸 수 있도록 해야합니다.
7. "ResourceDictionaryTest" 프로젝트의 "References"에 마우스 오른쪽을 갖다댄 후 "Add Project Reference > MyStyle" 을 선택합니다. 참조 가능한 프로젝트인 MyStyle이 자동으로 나와요 :)
다음과 같이 프로젝트가 잘 참조 되었는지 확인하세요.
8. "ResourceDictionaryTest" 프로젝트의 App.xaml을 선택한 후 오른쪽 패널에서 "Resources" 탭을 선택합니다. (기본적으로는 Properties 탭이 선택되어 있어요.) 그리고 App.xaml에 마우스 오른쪽을 갖다 대어 "Link to Resource Dictionary > ButtonStyle.xaml" 을 선택합니다. MyStyle 프로젝트에 있는 리소스 딕셔너리에 링크를 거는 것입니다.
"ResourceDictionaryTest" 프로젝트의 App.xaml 코드를 확인해 보면 아까와 약간 다른데요. MyStyle 프로젝트에 있는 ButtonStyle.xaml 리소스 딕셔너리가 병합되어 있는 것을 확인할 수 있습니다.
<ResourceDictionary>
9. UI를 표현할 "ResourceDictionaryTest" 프로젝트의 MainPage.xaml에서 버튼을 하나 생성한 후 스타일을 만들도록 합니다.
스타일의 이름을 주고 만들어지는 스타일을 어느 곳에 저장할지 선택합니다. 우리가 참조한 ButtonStyle.xaml 리소스 딕셔너리가 보이는군요!! 실컷 만들어두고 엄한 곳에 저장하시면 아니됩니다 -_-;
11. 버튼의 스타일을 만들어 봅시다. 저는 RedHeartButton 이라는 스타일 이름에 맞게 불타는 하트를...+_+
하..하트가 맞다고요 ㅠㅠ 하트를 하트라 부르지 못하고...흐엉.. 암튼! 스타일 만드는 법은 다들 아시리라 생각하고 패스~
클릭하는 순간 스타일이 들어있는 프로젝트의 리소스 딕셔너리로 연결되어 바로 수정하면 됩니다. 너무너무 쉽죠?
버튼이나 이미지 브러시 등 같은 속성을 가지고 있는 스타일들을 리소스 딕셔너리로 나누어 관리하게 되면 우리가 웹에서 사용하는 CSS처럼 편하게 관리할 수 있습니다. 또한 어떤 프로젝트에건 참조하는것 만으로 이렇게 정리된 스타일을 갖다 쓸 수 있겠죠? 단 스타일을 정의할 때에 쓰이는 Key 는 고유해야 하기 때문에 선언하여 사용되는 범위 내에서 이름이 중복되지 않도록 주의해야 합니다. 파일 첨부합니다.
이미지가 많아서 꽤 길어졌네요. 잘 이해하셨나 모르겠어요. 혹시나 이해가 안가는 부분들이 생긴다면 댓글이나 답글을 달아주세요. 무더운 여름 더위 안먹게 조심하세요~ ㅋㅋ 전 조만간 다시 등장~ 뿅!!
안녕하세요. 짱묜입니다. :) 정말 오랜만이죠? 얼마만에 강좌를 쓰는지도 모르겠습니다;; 이제부터 미뤄왔던 온라인 강좌들을 다시 써보려고 해요. 궁금한 사항이나 다뤄주었으면 하는 부분들은 글을 남기시면 참고하도록 하겠습니다.
오늘은 Resource Dictionary(이하 리소스 딕셔너리)를 다른 프로젝트로 분리하여 관리하는 방법에 대해서 알아보려고 합니다. 우리가 자주 사용하는 스타일, 템플릿과 같은 리소스들은 해당 도큐먼트에 선언하여 사용하거나 App.xaml 에 선언하여 전역으로 사용하거나, 리소스 딕셔너리로 분리하여 사용합니다. 이러한 방법들은 모두 하나의 프로젝트 안에서 이루어지게 됩니다. 그런데 만약 규모가 커져서 여러개의 프로젝트가 합쳐진 솔루션을 개발해야 할 상황이 온다면 어떻게 해야할까요?
아마도 프로젝트 마다 다른 프로젝트 안에 들어있는 리소스 딕셔너리를 일일이 참조해야 할 것이고 만약 참조한 리소스 딕셔너리가 들어있는 프로젝트가 불필요하여 제거라도 해야 하는 날에는 모든 경로를 다시 다 바꾸어주어야겠죠.아~ 생각만해도 귀찮습니다. =_=;;
이러한 리소스 딕셔너리들을 또 다른 프로젝트로 분리하여 관리한다면 이런 불상사는 생기지 않겠죠. 또한 자주 쓰는 스타일들을 템플릿화 하여 관리한다면 어떠한 프로젝트에도 가져다 쓸 수 있는 큰 자산이 되리라 생각합니다.
※ 실제 프로젝트를 생성할 때에은 비주얼 스튜디오로 프로젝트를 생성하는 것을 권장합니다. sdk 등등 여러 문제가 있으니까요. 이번 강좌는 블렌드에서 생성하는 것을 예로 들겠습니다. 실제 프로젝트에 적용하실 경우에는 센스를 발휘해주세요~
1. Expression Blend를 열고 프로젝트를 하나 생성합니다. 메인이 되는 프로젝트로 이름은 "ResourceDictionaryTest"라고 주었습니다. 이 프로젝트에는 버튼이나 레이아웃 컨트롤 등 UI 작업이 이루어질 것입니다.
2. 프로젝트를 생성하면 기본적으로 솔루션이 하나 생성되고 그 안에 프로젝트가 생기게 되는데요. 여기서 "솔루션"이란 프로젝트의 집합을 나타냅니다. 우리는 리소스 딕셔너리를 관리할 프로젝트를 하나 더 생성해야 합니다. 솔루션에 마우스 오른쪽을 갖다대고 "Add New Project" 메뉴를 클릭합니다.
3. 대화창이 뜨게 되면 "MyStyle" 이라는 이름을 주어 프로젝트를 생성합니다. 이 프로젝트에서는 UI작업이 이루어지지 않으며 리소스 딕셔너리 만을 포함할 것입니다.
프로젝트를 생성하면 다음과 같이 하나의 솔루션 안에 두개의 프로젝트가 생성되어 있는 것을 확인할 수 있습니다.
4. "MyStyle" 프로젝트에 리소스 딕셔너리를 추가하기 위해 마우스 오른쪽을 갖다 대고 "Add New Item" 항목을 클릭합니다.
5. 대화창이 나타나면 파일 타입을 "Reosurce Dictionary"로 선택하고 이름을 "ButtonStyle"이라고 줍니다.
6. "MyStyle"의 프로젝트에 App.xaml 파일을 살펴보면 다음과 같은 코드를 확인할 수 있습니다.
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
ButtonStyle.xaml 이라는 리소스 딕셔너리가 App.xaml에 선언됨으로써 프로젝트 안의 어느 파일에서도 이 딕셔너리 안에 있는 스타일을 Key로 접근하여 쓸 수 있게 되는 것입니다. 그러나 우리는 다른 프로젝트에서 이 프로젝트의 스타일을 쓸 수 있도록 해야합니다.
7. "ResourceDictionaryTest" 프로젝트의 "References"에 마우스 오른쪽을 갖다댄 후 "Add Project Reference > MyStyle" 을 선택합니다. 참조 가능한 프로젝트인 MyStyle이 자동으로 나와요 :)
다음과 같이 프로젝트가 잘 참조 되었는지 확인하세요.
8. "ResourceDictionaryTest" 프로젝트의 App.xaml을 선택한 후 오른쪽 패널에서 "Resources" 탭을 선택합니다. (기본적으로는 Properties 탭이 선택되어 있어요.) 그리고 App.xaml에 마우스 오른쪽을 갖다 대어 "Link to Resource Dictionary > ButtonStyle.xaml" 을 선택합니다. MyStyle 프로젝트에 있는 리소스 딕셔너리에 링크를 거는 것입니다.
"ResourceDictionaryTest" 프로젝트의 App.xaml 코드를 확인해 보면 아까와 약간 다른데요. MyStyle 프로젝트에 있는 ButtonStyle.xaml 리소스 딕셔너리가 병합되어 있는 것을 확인할 수 있습니다.
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MyStyle;component/ButtonStyle.xaml"/>
9. UI를 표현할 "ResourceDictionaryTest" 프로젝트의 MainPage.xaml에서 버튼을 하나 생성한 후 스타일을 만들도록 합니다.
스타일의 이름을 주고 만들어지는 스타일을 어느 곳에 저장할지 선택합니다. 우리가 참조한 ButtonStyle.xaml 리소스 딕셔너리가 보이는군요!! 실컷 만들어두고 엄한 곳에 저장하시면 아니됩니다 -_-;
11. 버튼의 스타일을 만들어 봅시다. 저는 RedHeartButton 이라는 스타일 이름에 맞게 불타는 하트를...+_+
하..하트가 맞다고요 ㅠㅠ 하트를 하트라 부르지 못하고...흐엉.. 암튼! 스타일 만드는 법은 다들 아시리라 생각하고 패스~
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Button" HorizontalAlignment="Left" Height="64" Margin="100,68,0,0" VerticalAlignment="Top" Width="92" Style="{StaticResource RedHeartButton}"/>
</Grid>
클릭하는 순간 스타일이 들어있는 프로젝트의 리소스 딕셔너리로 연결되어 바로 수정하면 됩니다. 너무너무 쉽죠?
버튼이나 이미지 브러시 등 같은 속성을 가지고 있는 스타일들을 리소스 딕셔너리로 나누어 관리하게 되면 우리가 웹에서 사용하는 CSS처럼 편하게 관리할 수 있습니다. 또한 어떤 프로젝트에건 참조하는것 만으로 이렇게 정리된 스타일을 갖다 쓸 수 있겠죠? 단 스타일을 정의할 때에 쓰이는 Key 는 고유해야 하기 때문에 선언하여 사용되는 범위 내에서 이름이 중복되지 않도록 주의해야 합니다. 파일 첨부합니다.
ResourceDictionaryTest.zip이미지가 많아서 꽤 길어졌네요. 잘 이해하셨나 모르겠어요. 혹시나 이해가 안가는 부분들이 생긴다면 댓글이나 답글을 달아주세요. 무더운 여름 더위 안먹게 조심하세요~ ㅋㅋ 전 조만간 다시 등장~ 뿅!!
