Free Board Project 9 by Silverlight 5

이번 회에는 간단하게 메인 화면에 메인 메뉴를 출력하는 부분만 보도록 하겠다.

1. ViewModel폴더에 MainPageViewModel.cs 파일 추가

using System.ComponentModel;
using System.ComponentModel.Composition;
using System.Windows.Input;
using Microsoft.Expression.Interactivity.Core;
using SL5_BOARD.Models;
using SL5_BOARD.Web.Model;

namespace SL5_BOARD.ViewModels
{
    //메인 페이지 익스포트
    [Export(typeof(MainPageViewModel))]
    public class MainPageViewModel : INotifyPropertyChanged
    {
        #region PropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }
        #endregion

        //보드메인 모델 임포트 - 보드메인 재활용~
        [Import(typeof(BoardMain))]
        public BoardMain BoardMainData { get; set; }

        //생성자
        public MainPageViewModel()
        {
        }

        //메인 메뉴 조회 - 만들어 놓기는 했는데 사용하지는 않았는데도 목록이 보임
        public void MenuSelect()
        {
            BoardMainData.Getting();
        }

        //메뉴 체인지 커맨드
        ICommand menuChanged;
        public ICommand menuChangedCommand
        {
            get
            {
                if (menuChanged == null)
                {
                    menuChanged = new ActionCommand(para => MenuChangedOperation(para));
                }
                return menuChanged;
            }
        }
        private void MenuChangedOperation(object para)
        {
            BoardMainData.CurrentData = para as BOARD_MAIN;
        }
    }
}

소스 자체는 특이한 사항은 없다. 단지 BoardMain.cs 모델을 재사용 하는 부분만을 보면 되겠다.

 2. MainPage.xaml.cs 수정

using System;
using System.Linq;
using System.ServiceModel.DomainServices.Client;
using System.Windows;
using System.Windows.Controls;
using SL5_BOARD.Views;
using SL5_BOARD.ViewModels;
using System.ComponentModel.Composition;

 namespace SL5_BOARD
{
    public partial class MainPage : UserControl
    {
        //메인 페이지 뷰모델 임포트
        [Import(typeof(MainPageViewModel))]
        public MainPageViewModel MainPageVM { get; set; }

        public MainPage()
        {
            InitializeComponent();

            //보드메인뷰는 아직은 그냥 마구잡이 생성해서 붙여 놓음
            UserControl uc = new BoardMainView();
            IcMain.Items.Add(uc);

            //임포트 초기화 : 이명령은 뷰단에서 한번 실행되면, 그 하위 컴포넌트 들도 차례대로 인스턴스화 된다.
            CompositionInitializer.SatisfyImports(this);

            //메인페이지 뷰모델을 LayoutRoot의 DataContext에 바인딩
            LayoutRoot.DataContext = MainPageVM;
        }
    }
}

3. MainPage.xaml 수정

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:SL5_BOARD_ViewModels="clr-namespace:SL5_BOARD.ViewModels" x:Class="SL5_BOARD.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="600">

    <Grid x:Name="LayoutRoot" Background="White">
     <Grid.RowDefinitions>
      <RowDefinition Height="6*"/>
      <RowDefinition Height="20*"/>
      <RowDefinition Height="68*"/>
      <RowDefinition Height="6*"/>
     </Grid.RowDefinitions>
        <!--메인페이지 뷰모델 바인딩 : 블랜드에서 바인딩을 쉽게 하기 위해서 넣어놓은 것임 -->
     <Grid.DataContext>
      <SL5_BOARD_ViewModels:MainPageViewModel/>
     </Grid.DataContext>

     <Button x:Name="btnBoardMain" Content="게시판관리" Width="70" Height="22" HorizontalAlignment="Left" Margin="5,4,0,4"/>
     <Button x:Name="btnMstMember" HorizontalAlignment="Left" Margin="79,4,0,4" Width="70" Height="22" Content="회원 관리"/>
     <Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Right" Margin="0,4,6,4" Width="70" Height="22"/>
        <!--메인 이미지 영역-->
     <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1">
      <Border.Background>
       <LinearGradientBrush EndPoint="0.53,0.953" StartPoint="0.528,0.04">
        <GradientStop Color="#FF16BDA3" Offset="0"/>
        <GradientStop Color="#FF040E0D" Offset="1"/>
        <GradientStop Color="#FF94E0D4" Offset="0.443"/>
       </LinearGradientBrush>
      </Border.Background>
           
      <Viewbox Stretch="Fill" Margin="6,0" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="955" MaxHeight="228">
       <Image x:Name="ImgLogo" Source="Images/logoPixelImage.jpg" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Viewbox>
     </Border>

        <!--컨텐츠 영역 그리드-->
     <Grid x:Name="grdContent" Grid.Row="2" Margin="6,6,6,0">
      <Grid.RowDefinitions>
       <RowDefinition Height="163"/>
       <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="153"/>
       <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <sdk:GridSplitter HorizontalAlignment="Left" Width="8" Grid.Column="1" Grid.RowSpan="2"/>

            <!--로그인 멤버 정보 보이는 박스 영역-->
      <Border x:Name="MemberInfo" BorderBrush="#FF81C1C7" BorderThickness="4" CornerRadius="10">
       <StackPanel>
        <TextBlock TextWrapping="Wrap" Text="나의 활동" FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" Foreground="#FF3CA4AD" Margin="5,0"/>
        <StackPanel Margin="4,5,4,0" Orientation="Horizontal">
         <TextBlock TextWrapping="Wrap" Text="이름" FontSize="12" Width="40"/>
         <TextBlock TextWrapping="Wrap" Text="카키104" FontSize="12" FontWeight="Bold" Margin="5,0,0,0"/>
         <TextBlock TextWrapping="Wrap" Text="님" FontSize="12" Margin="4,0,0,0"/>
        </StackPanel>
        <StackPanel Margin="4,0" Orientation="Horizontal">
         <TextBlock TextWrapping="Wrap" Text="등급" FontSize="12" Width="40"/>
         <TextBlock TextWrapping="Wrap" Text="관리자" FontSize="12" Margin="5,0,0,0"/>
        </StackPanel>
        <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>
        <StackPanel Margin="4,0" Orientation="Horizontal">
         <TextBlock TextWrapping="Wrap" Text="덧글" FontSize="12" Width="40"/>
         <TextBlock TextWrapping="Wrap" FontSize="12" FontWeight="Bold" Margin="5,0,0,0" Foreground="{StaticResource CountColor}" Text="41"/>
        </StackPanel>
        <StackPanel Margin="4,0" Orientation="Horizontal">
         <TextBlock TextWrapping="Wrap" Text="로그인" FontSize="12" Width="40"/>
         <TextBlock TextWrapping="Wrap" Text="2011.07.12" FontSize="12" Margin="5,0,0,0"/>
        </StackPanel>
        <Button Content="글쓰기" Height="30" FontSize="14.667" FontWeight="Bold" Width="120" Margin="0,4"/>
       </StackPanel>
      </Border>

            <!--메인 메뉴 보이는 영역-->
      <Border x:Name="MainMenu" BorderBrush="#FFAED8DC" BorderThickness="4" Grid.Row="1" Margin="0,8,0,0" CornerRadius="10" Padding="6">
       <ScrollViewer BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <StackPanel Margin="0">
        <!--ItemSource : ListBox의 DataContext가 상위의 LayoutRoot가 가지는 MainPageViewModel을 상속

                                     받았기 때문에 그 안에 존재하는 BoardMainData.CollectionData 프로퍼티를 넣는다.
               ItemTemplate : BoardMainView에서 사용했던 템플릿을 그대로 사용
               ScrollViewer.HorizontalScrollBarVisibility="Disabled" : ListBoxItem의 길이가 길어서 넘어가더라도

                                     가로 스크롤바를 만들지 않음-->
         <ListBox BorderThickness="0"
                                 ItemsSource="{Binding Path=BoardMainData.CollectionData, Mode=OneWay}"
                                 ItemTemplate="{StaticResource BoardMainDataTemplate}"
                                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
        </StackPanel>
       </ScrollViewer>
      </Border>
      <ItemsControl x:Name="IcMain" Grid.Column="1" Grid.RowSpan="2" Margin="10,0,0,0"/>
     </Grid>
    </Grid>
</UserControl>

4. 이렇게 만들어 놓은 것의 장점을 보도록 하자,
일단 추가 버튼을 눌러서 게시판을 하나 추가해보자

추가 버튼을 누르자 마자 메인 메뉴에도 동을한 내용이 추가되어 바로 보인다..즉 BoardMain 모델에 데이터가 BoardMainViewModel과 MainPageViewModel에서 동일하게 사용된다는 것이다. 수정하면 수정하는 대로 바로 바로 적용이 된다. 음음.. 이쯤에서 이런 내용이 의미하는 바를 느끼면 좋은데.. 간단한 내용이니 바로 작업해서 내용을 확인해 보면 된다.