티스토리 뷰

반응형

일단 디자인 레이아웃은..실버라이트 코리아의 디자인을 빼꼈다는..쿨럭 ^^;;;;;디자인 해줄 분이 없는 관계로..ㅜㅜ 그냥 기본 디자인만 잡아 봤고, 이제 슬슬 본격 적으로 사용해야할 폴더들을 만들어 놓고, 리소스딕셔너리도 추가해 놓구 ㅎㅎ

1. 기본 메인 디자인

디자인 정말 거시기한.. 다시 한번 디자인 해주실 구해야 겠다는..손좀 들어보시죠??(ㅡㅡ+) 이것이 통짜 실버라이트 게시판...이 될 예정인 화면! 냐하하..음음..이 소스는..덩치가 큰 관계로 일부 파일만 첨부를 해서 올리도록 하겠다..(머 소스 업어두 아무도 신경쓰지 앙치만..ㅜㅜ 나랑 같이 만들고 있는 사람 손좀;;)

2. 중요 부분

2-1. 폴더 추가
SL5_BOARD 프로젝
-> Images, Models, Resources, ViewModels, Views

2-2. 일단 기존에 있던 내용들은 싹다 지우고 새로 그린 것이고, 이렇게 디자인을 할때 블랜드를 사용하지 앙고 디자인 하면 무지 스트레스 받으니, 미리미리 블랜드 사용법도 익혀 두는 것이 정신 건강에 도움이 된다는..

2-3. 이미지는 뷰박스로 싸메서 사용한다. 그래야 이미지 크기가 변경대구 하더라도 보기 좋다.

<Viewbox Stretch="Fill" Grid.Row="1" Margin="6,0">
 <Image x:Name="ImgLogo" Source="Images/logoPixelImage.jpg" Stretch="None"/>
</Viewbox>

참, 여기서...프로젝트에 이미지를 포함하고 불러다가 사용할 때.. 이미지 파일의 속성에 들어가서 Build Action을 꼭 Resource로 지정하고 불러다가 사용해야한다. 음음..이거 몰라서 몇 시간 허비하면 눈물난다..

2-4. 동일한 스타일이나, 컬러등은 리소스로 만들어서 사용한다. 이 리소스 만드는 작업이 블랜드를 사용하면 메뉴 하나 클릭하면 바로 만들어 지지만 VS2010에서는 일일이 수작업으로 만들어야 한다.

* 수동 작업 방법
Resources폴더에서 Add -> New Item -> Resources File 추가

BoardResourceDictionary.xaml

 <ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <SolidColorBrush x:Key="CountColor" Color="#FFFF1E1E"/>
 <!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>


 App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="SL5_BOARD.App"
             >
    <Application.Resources>
       
     <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
       <ResourceDictionary Source="Resources/BoardResourceDictionary.xaml"/>
      </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
       
    </Application.Resources>
</Application>


이렇게 만들어 놓으면 어떤 화면이서든지 리소스를 xaml에 바로 적용할 수 있다.

<StackPanel Margin="4,0" Orientation="Horizontal">
 <TextBlock TextWrapping="Wrap" Text="게시물" FontSize="12" Width="40"/>
 <TextBlock TextWrapping="Wrap" Text="44" FontSize="12" FontWeight="Bold" Margin="5,0,0,0" Foreground="{StaticResource CountColor}"/>
</StackPanel>

2-5. 디자인 하면서 까다로운 작업 중 하나가.. 스크롤 관련 문제이다..이 화면도 메뉴 부분을 스크롤 시키기 위해서 약간 시간이 걸렸는데.. 머리를 열심히 굴려야 왜 저렇게 해야하는지 이해가 된다..이걸 VS2010에서만 작업해서 만들려고 하면 ...머리에서 쥐가..쿨럭..

<Border x:Name="MainMenu" BorderBrush="#FFAED8DC" BorderThickness="4" Grid.Row="1" Margin="0,8,0,0" CornerRadius="10" Padding="6">
 <ScrollViewer BorderThickness="0">
  <StackPanel Margin="0">
   <ListBox BorderThickness="0">
    <ListBoxItem Content="전체글보기" BorderThickness="0"/>
    <ListBoxItem Content="카페태그보기"/>
    <ListBoxItem Content="베스트게시물"/>
    <ListBoxItem Content="소셜앱"/>
    <ListBoxItem Content="공지/수요소식"/>
    <ListBoxItem Content="매일매일 출석~"/>
    <ListBoxItem Content="자기소개~"/>
    <ListBoxItem Content="자유로운글"/>
    <ListBoxItem Content="멋쟁이 사진첩"/>
    <ListBoxItem Content="자유사진첩"/>
    <ListBoxItem Content="세미나/행사/자료"/>
    <ListBoxItem Content="회원작품"/>
    <ListBoxItem Content="RIA 구현 사례"/>
    <ListBoxItem Content="구인/구직"/>
    <ListBoxItem Content="운영자카페"/>
    <ListBoxItem Content="운영자게시판"/>
    <ListBoxItem Content="실버라이트"/>
    <ListBoxItem Content="강좌"/>
    <ListBoxItem Content="Tips And Tricks"/>
   </ListBox>
  </StackPanel>
 </ScrollViewer>
</Border>

2-6. 메인 컨텐츠가 들어갈 부분은 ItemsControl로 작업 했다. 그곳에 다른 곳에서 만들어 놓은 UserControl을 계속 번갈아 가며 올릴 것이다. 음..이것 말고 Page를 쓸까 생각해 봤는데..Page를 사용했을 때 네비게이션 기능 말고는..별로 없는 것 같아서..이번에는 이걸로 하기로 했다.


3. 디자인이 되니 뭔가 보이는 것 같다. 빨리 진행해서 이번주 안에 1차 완성을 할 수 있었으면 한다. 그리고...디자인 해줄 분 다시 한번 구한당..ㅜㅜ

 ****첨부 파일은 SL5_BOARD 프로젝트만 포함되었다..전체 소스가 아니니 실행은 앙된다..^^;;; 전체 소스가 필요한 사람은 리플로 요청을 하면 개별 적으로 보내 주는 것으로....하지만 본인이 직접 만들어 봐야 실력이 늘어나니..열심히 화이팅~

반응형
댓글