ZZANGMYON BLOG♡

[프로젝트 타입 : Silverlight 4]

안녕하세요. 짱묜입니다. 오늘은 텍스트에 이미지 배경을 넣어보도록 하겠습니다.

텍스트에 이미지 배경을 넣는 방법은 2가지가 있어요. 첫번째는 텍스트의 배경색을 이미지로 채워주는 방법이고, 두번째는 이미지를 텍스트의 Path로 Clipping 하는 방법입니다. 두번째 방법은 텍스트 내용을 고치기가 번거로우므로 첫번째 방법을 알려드리도록 할께요.

1. 프로젝트를 생성합니다.



2. 프로젝트가 생성되었다면 텍스트블럭을 하나 넣도록 합니다. 폰트의 사이즈 및 타입은 마음대로 하셔도 됩니다. 저는 "Arial Black" "40pt" 로 지정하였습니다.

       

3. 이미지를 준비합니다. 저는 여름이니 시원한 바닷물로..ㅎㅎ 다음과 같은 이미지를 준비하였습니다.


4. 텍스트블럭을 선택하고 Properties 패널 중 Brushes 패널이 있는데 4번째 "Tile Brush" 탭을 선택합니다.



5. 그리고 아래에 ImagesSource 부분의 버튼을 눌러 검색창에서 이미지를 선택합니다.



6. 이미지를 선택하고  OK 버튼을 눌러주세요.



다음과 같이 텍스트블럭의 Foreground에 바다 이미지의 타일 브러시가 채워졌나요?



7. 텍스트블럭을 보면 이렇게 글자에 이미지가 들어가게 됩니다.



8. 텍스트를 변경하여도 잘 적용이 됩니다.



간단하죠? ^^ 파일 첨부합니다. 모두 좋은하루 되세요!!

[프로젝트 타입 : Silverlight 4]

안녕하세요. 짱묜입니다. 주말 내내 소나기가 내렸다 안내렸다를 반복하네요. 변덕스러운 날씨 같으니라구..ㅋㅋ

우리는 그동안 버튼이나 스크롤뷰어 등과 같은 컨트롤의 외관을 바꾸기 위해서 스타일을 많이 사용해 왔는데요. 컨트롤의 외관을 바꾸는 경우 뿐만 아니라 같은 속성을 가지고 있는 경우에도 스타일로 지정하여 적용할 수 있습니다. 그래서 오늘은 레이아웃 컨트롤에 스타일을 적용해 보도록 하겠습니다.

레이아웃 컨트롤에는 그리드, 스택패널, 캔버스 등등이 있는 것은 다 아시죠? 우리가 작업을 하다보면 이러한 레이아웃 컨트롤도 같은 스타일로 반복되어 사용하는 경우가 많이 있는데요. 예를 들면 페이지마다 같은 위치에 같은 레이아웃으로 놓이는 컨트롤도 있겠죠? 이런 경우에 페이지마다 레이아웃 컨트롤을 복사해서 붙여넣는 것도 방법이지만 스타일로 정의하게 되면 나중에 변경사항을 각 페이지마다 적용하지 않고 레이아웃의 스타일만 변경해 주면 되기 때문에 훨씬 편리합니다.
 
여러 레이아웃 컨트롤 중 자식객체를 순차적으로 담은 스택 패널을 예제로 만들어 보겠습니다. 실버라이트 혹은 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>

자, 아래의 그림처럼 되었습니까? 가로정렬에 마진값을 가지고 배치가 되었죠.



만약 추후에 변경할 사항이 있어서 스타일을 변경한다면 여러 페이지에 들어가있는 스택패널이 모두 일괄적으로 바뀌게 되겠죠? 생각보다 너무 쉬워서 놀라셨으리라 생각합니다. ㅋㅋ 블렌드에서 만드는 방법은 클릭만 하면 되기 때문에 더욱 쉽겠죵 ^^ 이건 여러분이 한번 해보세요~~

파일 첨부합니다.

고양이도 애교가 넘친답니다. 실컷 자다가 번뜩 깨어서는 냥~ 하고 달려와서 만져달라고 부비적 거리고.. 새벽마다 목을 핥아대는 통에 -_-; 부담스러워요 ㅋㅋㅋ 우리 랑이 변태야? ㅠㅠ 손 뻗으면 와서 슥~ 하고 비비고 갑니다..(물론 지 내킬때만..)



서커스도 가능할 것 같습니다. ㅋㅋ

멍때리는 모습과 간지나는 모습!! ㅋㅋ 아래 사진은 랑이가 한 8개월쯤 사진이네용. 누워서 한량이 팔자를 만끽하고 있는...ㄷㄷ 블판 전시를 위해 게임 하나 만들어 보려고 그린건데.. 쉽지 않네요..ㅡ_ㅡ

[프로젝트 타입 : 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>

<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"/>

  </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

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>

스타일이 적용된 버튼이 들어가 있는 것을 확인할 수 있습니다. 이런식으로 스타일과 리소스 딕셔너리를 만드시면 되는데요. 자 그럼 수정은 어떻게 해야 하느냐!! 우리가 평소에 스타일을 수정하듯이 컨트롤의 "Edit Current" 메뉴를 이용하면 됩니다.



클릭하는 순간 스타일이 들어있는 프로젝트의 리소스 딕셔너리로 연결되어 바로 수정하면 됩니다. 너무너무 쉽죠?



버튼이나 이미지 브러시 등 같은 속성을 가지고 있는 스타일들을 리소스 딕셔너리로 나누어 관리하게 되면 우리가 웹에서 사용하는 CSS처럼 편하게 관리할 수 있습니다. 또한 어떤 프로젝트에건 참조하는것 만으로 이렇게 정리된 스타일을 갖다 쓸 수 있겠죠? 단 스타일을 정의할 때에 쓰이는 Key 는 고유해야 하기 때문에 선언하여 사용되는 범위 내에서 이름이 중복되지 않도록 주의해야 합니다. 파일 첨부합니다.

이미지가 많아서 꽤 길어졌네요. 잘 이해하셨나 모르겠어요. 혹시나 이해가 안가는 부분들이 생긴다면 댓글이나 답글을 달아주세요. 무더운 여름 더위 안먹게 조심하세요~ ㅋㅋ 전 조만간 다시 등장~ 뿅!!