통합검색
· 마을서비스란?  · 포럼마을  · 일반마을  · 테마마을  · 마을랭킹  · 활동왕
· 덱스퍼트란?  · TECBOX   · PRSBOX   · 이용안내  
· DEXT제품군  · 솔루션베이  · S/W & ESD 컴포넌트
· 프로그램베이
· LiveSeminar  · LiveConference
WPF & Silverlight 포럼마을입니다.
  마을등급 WPF & Silverlight   이 마을은 포럼마을 입니다이 마을은 자유가입제 마을 입니다 마을소개 페이지로 이동 전입신청
마을촌장촌장 서학수 주민 728 since 2008-07-17
우리마을 공지사항
질문&답변
강좌&팁
자유게시판
자료실
앨범
[마을 게시판]
WPF 강좌
랑데브 게시판
칼럼 게시판
개발자 고충상담
Dev Talk
자유토론방
벼룩시장
재나미 우스개
구인/프로젝트 정보
사람인 채용 게시판
  고객지원 게시판
마이 데브피아
 나의 e-Money 내역
 활동왕 My Page
 스크랩한 게시글보기
 쪽지관리
 주소록관리

 강좌&팁
 SL5...Twitter Client 8 (Popup Window)  | Silverlight 2011-05-26 오전 12:21:34
 kaki104  kaki104님께 메시지 보내기kaki104님을 내 주소록에 추가합니다.kaki104님의 개인게시판 가기 번호: 151 추천:0  / 읽음:6,247

Silverlight5...Twitter Client 8 (Popup Window)

 

 

1. 상세 정보를 보기 위한 팝업 윈도우 만드는 방법을 알아보자

 

머 좀 모양이 마음에 드는 것은 아닌데 나중에 수정할 것 생각하고 그냥 보자. 난 디자이너가 아니다.

 

기존에 만들었던 GridViewView.xaml에 몇가지 작업을 추가해서

 

리스트 중에 한개를 선택하고 그리드 헤더를 더블 클릭하면 나오도록 만들었다.

 

 

2. Child Window

 

팝업 윈도우를 만들기 위해서 프로젝트에 추가하는 윈도우로 상세정보나 추가 정보등을 출력할때 사용된다.

굿이 말로 떠들 필요도 없이 다들 어디다가 사용할지 모양만 보면 알 수 있다.

 

2-1. Child Window 추가

 

View폴더 -> 오른쪽 마우스 클릭 -> Add -> New Item -> Silverlight Child Window -> 이름에 UserChildView라고 치고

OK누르면 윈도우가 하나 만들어진다.

 

2-2. UserChildView 디자인

 

복잡한 디자인은 블랜드를 사용했다. 블랜드를 사용해서 디자인하면 xaml 코드가 너저분하지만, 디자인은 하기는 정말 편하다.

디자인 기본은 트위터에서 사용자 한명을 선택했을 때 나오는 화면을 비슷하게 흉내 내에서 만들었다.

 

지금 디자인은 상단에 내용만 만들어 놓은 것이고 하단부에 리스트 형태로 나오도록 추가할 계획이다.

디자인을 할때는 내용들을 대충 입력하면서 만든다.

 

2-3. 바인딩

 

바인딩을 하기 위해서는 LayoutRoot의 DataContext에 뷰모델이 존재하는 것이 바인딩하는데 도움이 된다.

그래서

 

   <Grid.DataContext>
    <Devpia_ViewModel:CTwitterViewModel/>
   </Grid.DataContext>

or

 

    <d:DesignProperties.DataContext>
        <Devpia_ViewModel:CTwitterViewModel/>
    </d:DesignProperties.DataContext>

 

이런 내용을 입력해 놓고 블랜드에서 바인딩을 하면 편하게 할 수 있다. (바인딩을 할 수 있는 목록들이 표시가 된다.)

 

2-4. Child Window 호출

 

    GridViewView.xaml에 있는 dataGrid에 마우스 버튼 다운 이벤트를 생성하고 아래 코드를 입력한다.

 

        private void dataGrid_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            //double click
            if (e.ClickCount == 2 && this.dataGrid.SelectedItem != null)
            {
                TwitterViewModel.TwitterStatus = dataGrid.SelectedItem as CTwitterStatus;

 

                UserChildView ucv = new UserChildView();
                ucv.Show();
            }
        }

 

    여기서 ViewModel에서 ActionCommand를 사용하지 아니한 이유는..실버라이트 5에서 새로 추가된 더블 클릭이벤트를 테스트 해보기 위해서이다.

    그런데, 문제가 데이터그리드의 헤더에서만 저 이벤트가 호출이 된다는 것인데..차후에 수정해야 할것 같다.

 

    위의 소스는 현재 트위터뷰모델의 TwitterStatus를 데이터그리드의 선택되어 있는 항목을 지정하고 바로 새로 추가한 차일드 윈도우를 생성해서 바로 보여주기를 하는 것이다.

 

    그렇게 차일드 윈도우가 생성되면

 

UserChildView.xaml.cs

    

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Devpia.ViewModel;
using System.ComponentModel.Composition;

namespace Devpia
{
    public partial class UserChildView : ChildWindow
    {
        [Import(typeof(CTwitterViewModel))]
        public CTwitterViewModel TwitterViewModel { get; set; }

        public UserChildView()
        {
            CompositionInitializer.SatisfyImports(this);

            InitializeComponent();

            LayoutRoot.DataContext = TwitterViewModel;
        }

        private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }
    }
}

 

 

    차일드 윈도우가 생성이 되면서 트위터뷰모델을 임포트 받고 임포트 받은 뷰모델을 LayoutRoot.DataContext에 입력을 해주면 이미 트위터뷰모델은 현재 트윗이 지정되어있는 상태이기 때문에 그 내용을 화면에 보여주게 된다.

 

 

2-5. 기본적인 차일드 윈도우의 사용법 마무리

 

    차일드 윈도우는 그냥 만들고 Show()함수 호출하면 크게 무리가 없다.

    그런데, 마음에 앙드는 부분이 몇가지가 있는데. 그중에 하나는 완전한 팝업 윈도우가 아니라는 것이다. 실버라이트5의 새로운 기능인 완전 팝업 윈도우도 추가해보자

 

 

3. 완전 팝업 윈도우

 

 

위의 스샷을 보면 완전 팝업 윈도우라는 것이 무엇인지 단적으로 알 수 있다.

 

일반 적인 차일드 윈도우는 트윗터 클라이언트 화면을 벗어 날 수 없지만, 완전 팝업은 우리가 알고 있던 일반적인 팝업과 동일한 형태를 가지고 화면의 어느 위치라도 올 수 있다.

 

제약 조건으로는 OOB형태일 경우에만 만들 수 있고, 실버라이트5에서만 지원한다.

 

3-1. UserControl 추가

 

View 폴더에 WindowChrome.xaml이라는 실버라이트 유저 컨트롤을 추가한다.

 

 

3-2. 디자인

 

UserChildView.xaml에서 만들어 놓았던 디자인을 거의 비슷하게 이동시킨다.

 

WindowChrome.xaml

 

<UserControl x:Class="Devpia.View.WindowChrome"
    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:Devpia_ViewModel="clr-namespace:Devpia.ViewModel"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="500">
   
 <Border BorderThickness="1">
  <Border.Background>
   <ImageBrush ImageSource="http://a1.twimg.com/images/themes/theme7/bg.gif" Stretch="None"/>
  </Border.Background>
  <Grid x:Name="LayoutRoot" Margin="-1">
   <Grid.RowDefinitions>
    <RowDefinition Height="Auto" MinHeight="162" />
    <RowDefinition/>
    <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>

   <Grid.DataContext>
    <Devpia_ViewModel:CTwitterViewModel/>
   </Grid.DataContext>

   <Border BorderBrush="#FF333333" BorderThickness="1" Background="#FFEBEBEB">
    <Grid Margin="-1">
     <Grid.RowDefinitions>
      <RowDefinition Height="Auto" MinHeight="51"/>
      <RowDefinition Height="Auto" MinHeight="31"/>
      <RowDefinition Height="Auto" MinHeight="43"/>
      <RowDefinition/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.303*"/>
      <ColumnDefinition Width="0.697*"/>
     </Grid.ColumnDefinitions>
     <Image x:Name="imgProfile_Image_Url" Margin="0" Source="{Binding TwitterStatus.User.Profile_Image_Url}" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Width="128" Height="128" Grid.RowSpan="4"/>
     <TextBlock x:Name="lblName" HorizontalAlignment="Left" Grid.Column="1" Margin="8,8,0,0" Text="{Binding TwitterStatus.User.Name}" FontSize="26.667"/>
     <StackPanel Grid.Column="1" Grid.Row="1" d:LayoutOverrides="Width" Orientation="Horizontal" Margin="8,0,0,0">
      <TextBlock x:Name="tbScreenName" TextWrapping="Wrap" Text="{Binding TwitterStatus.User.Screen_Name}" Margin="0" FontSize="18.667" VerticalAlignment="Bottom" d:LayoutOverrides="Width"/>
      <TextBlock x:Name="tbLocation" TextWrapping="Wrap" Text="{Binding TwitterStatus.User.Location}" Margin="10,0,0,0" FontSize="14.667" VerticalAlignment="Bottom" Foreground="#FF5E5E5E"/>
     </StackPanel>
     <TextBlock x:Name="tbDescription" TextWrapping="Wrap" Text="{Binding TwitterStatus.User.Description}" Grid.Column="1" Grid.Row="2" FontSize="14.667" FontStyle="Italic" Foreground="#FF5E5E5E" Margin="8,0,0,0"/>
                    <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal" Margin="8,0,0,0">
                        <HyperlinkButton x:Name="hlbUrl" Content="{Binding TwitterStatus.User.Url}" HorizontalAlignment="Left" Foreground="#FF990000" NavigateUri="{Binding TwitterStatus.User.Url}"/>
                        <TextBlock x:Name="tbLang" TextWrapping="Wrap" Text="{Binding TwitterStatus.User.Lang}" Margin="10,0,0,0"/>
     </StackPanel>
    </Grid>
   </Border>

   <Button x:Name="OKButton" Width="75" Height="23" Margin="0" HorizontalAlignment="Right" Grid.Row="2" Content="닫기" Click="OKButton_Click" />
  </Grid>
 </Border>

</UserControl>

3-3. cs 코딩

 

WindowChrome.xaml.cs 를 작성한다.

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel.Composition;
using Devpia.ViewModel;

namespace Devpia.View
{
    public partial class WindowChrome : UserControl
    {
        [Import(typeof(CTwitterViewModel))]
        public CTwitterViewModel TwitterViewModel { get; set; }

 

        private Window _parentWindow = null;
        public Window ParentWindow
        {
            get { return _parentWindow; }
            set { _parentWindow = value; }
        }

        public WindowChrome()
        {
            CompositionInitializer.SatisfyImports(this);

            InitializeComponent();

            LayoutRoot.DataContext = TwitterViewModel;
        }

        private void OKButton_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            _parentWindow.Close();
        }

    }
}

 

여기서도 UserChildView.xaml.cs와 거의 비슷하나  굵은 글씨 부분이 약간 차이가 있다.

 

 

3-4 호출

 

아까의 호출 부분에 코드를 추가한다.

 

GridViewView.xaml.cs 일부분

 

 

        private void dataGrid_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            //double click
            if (e.ClickCount == 2 && this.dataGrid.SelectedItem != null)
            {
                TwitterViewModel.TwitterStatus = dataGrid.SelectedItem as CTwitterStatus;

 

                UserChildView ucv = new UserChildView();
                ucv.Show();

 

                Window wnd = new Window();
                wnd.Width = 500;
                wnd.Height = 400;
                wnd.Title = "사용자 정보 & 트윗";
                wnd.Content = BuildWindowContents(wnd);
                wnd.Visibility = System.Windows.Visibility.Visible;

            }
        }

 

        private FrameworkElement BuildWindowContents(Window window)
        {
            Grid grid = new Grid();

            WindowChrome chrome = new WindowChrome();
            chrome.ParentWindow = window;
            grid.Children.Add(chrome);

            return grid;
        }

위의 굵은 글씨 부분을 추가하고 실행하면 상단의 그림과 같은 화면을 볼 수 있다.

 

 

4. 여러가지 좀 마음에 앙드는 부분이 있지만..팝업 윈도우를 만드는 방법에 대한 간단한 설명이라고만 보면 좋겠다.

좀더 시간을 두고 몇군데를 고치면 보기 좋은 화면이 나올것 같은데..

이번에 프로젝을 기흥에서 하게되어서..새벽별 보고 출근해서 저녁별을 보고 퇴근해야할 것같은 불길한 분위기라

언제 수정을 해서 올릴 수 있을지는 잘 모르겠다.

이런 실버라이트의 기본 차일드 윈도우 말고 RadControl에서 제공하는 차일드 윈도우가 있는데 그부분에 대한 설명도 시간이 대면 다시 추가 하겠다.

 

 

5. 실버라이트나 WPF부터는 책은 기대하지 않는것이 좋다. 아마도.. 책이 나올때 쯤이면 새로운 기술이 벌서 나와서 사용되고 있을 것이고 책에 나온 기술은 벌써 지난 기술이 되었을 것이다.  추천 방법은 교육센터를 꾸준히 계속 다니는 것이다. 배울려고 하는 의지마 있으면 길은 있게 마련이니까..

 

 

6. 실행 데모 링크

 

7. 이번 내용은 자신이 직접 만들어 보기 바란다.(소스는 다음에 공개 하겠다)

 

코멘트쓰기
  좋음   놀람   궁금   화남   슬픔   최고   침묵   시무룩   부끄럼   난감
* 코멘트는 500자 이내(띄어쓰기 포함)로 적어주세요.
목록 보기   지금 보고 계시는 글을 회원님의 my Mblog >> 스크랩에 넣어두고 다음에 바로 보실 수 있습니다.  
회사소개  |   개인정보취급방침  |  제휴문의  |   광고문의  |   E-Mail 무단수집거부  |   고객지원  |   이용안내  |   세금계산서
사업자등록번호 안내: 220-81-90008 / 통신판매업신고번호 제 2017-서울구로-0055호 / 대표: 홍영준, 서민호
08390, 서울시 구로구 디지털로32길 30, 1211호 / TEL. 02_6719_6200 / FAX. 02-6499-1910
Copyright ⓒ (주) 데브피아. All rights reserved.