통합검색
· 마을서비스란?  · 포럼마을  · 일반마을  · 테마마을  · 마을랭킹  · 활동왕
· 덱스퍼트란?  · 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 9 (Popup Window 2)  | Silverlight 2011-06-01 오후 11:39:53
 kaki104  kaki104님께 메시지 보내기kaki104님을 내 주소록에 추가합니다.kaki104님의 개인게시판 가기 번호: 152 추천:0  / 읽음:5,893

Silverlight5...Twitter Client 9 (Popup Window 2)

 

지난번에 이어서 팝업 윈도우를 완전하게 정리해봤다.

 

 

지난번에는 그리드뷰에서 작업을 했는데 이번에는 리스트 뷰에서 완성형 버전으로 만들어 보았다.

 

위의 화면 까지는 크게 달라진 것은 없다.

 

맨위의 트윗의 사진을 클릭하면

 

 

커다란 사진이 뜨면서 그 사람이 올렸던 트윗들 목록만이 표시가된다.

 

지난번에 만들었던 리얼 팝업을 좀더 정교하게 다듬었다.

 

1. 전체 작업 FLOW

 

1-1. MainPage.xaml.cs에 StaticFunctions을 추가(컬러 관련)

 

1-2. 컨버터 2개 추가

 

1-3. 블랜드로 WindowChrome.xaml에 디자인을 손봄

 

1-4. CTwitterViewModel.cs에서 개인에 대한 트윗 정보를 조회 할 수 있도록 기능 추가

 

1-5. TwitterResourceDictionary.xaml에서 몇가지를 수정

 

 

2. 실버라이트 5에서 새로 추가된 기능

 

2-1. 템플릿에서 상위 컨트롤을 바인딩 하기

 

참고 페이지

 

템플릿에서 상위의 컨트롤에 대한 바인딩을 하기가 어려웠는데..5버전 부터 기능이 추가되었다.

 

TwitterResourceDictionary.xaml파일에

 

          <Image x:Name="Profile_Image_Url" Margin="0"
     Source="{Binding User.Profile_Image_Url}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center">
           <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseLeftButtonDown">
             <i:InvokeCommandAction x:Name="MouseClickAction1"

                 Command="{Binding DataContext.DetailViewCommand, ElementName=LayoutRoot}"

                 CommandParameter="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType=ContentControl}}"/>
            </i:EventTrigger>
           </i:Interaction.Triggers>
          </Image>

 

이미지를 클릭했을 때 파라메터로 리스트 박스를 반환해야하는데 리스트 박스 이름을 적어 놓기 보다는 상위의 ContentControl을 찾아서 그걸 반환 시키기 위해 사용했다.

 

        ICommand detailview;
        public ICommand DetailViewCommand
        {
            get
            {
                if (detailview == null)
                {
                    //CommandParameter 처리 위에서 리스트박스아이템을 바인딩 하기 때문에 obj는 리스트박스 아이템이 된다.
                    detailview = new ActionCommand(obj => DetailViewOperation(obj));
                }
                return detailview;
            }
        }

        //여기서도 그냥 Object로 리스트박스아이템을 받고
        private void DetailViewOperation(Object lst)
        {
            //리스트박스아이템이라면
            if (lst.GetType().Name == "ListBoxItem")
            {

                //lst를 리스트박스아이템으로 형변환하고 그안에 DataContext를 다시 CTWitterStatus로 형변환해서

                //현재 TwitterStatus에 넣는다.
                TwitterStatus = (lst as ListBoxItem).DataContext as CTwitterStatus;
            }

 

            //전에 xaml.cs에 하드 코딩되어있는 팝업 만든느 부분을 뷰모델로 이동 시켰다.

            Window wnd = new Window();
            wnd.Width = 600;
            wnd.Height = 500;
            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;
        }

이 템플릿을 리스트 박스에서만 사용했다면 그냥 리스트 박스를 찾으라고 하면되었는데 RadGridView에서도 사용하기 때문에 일단 ContentControl로 적어 놓았다.(하지만 애석하게도 RadGridView에서는 이벤트가 제대로 먹지 않는다.)

 

 

3. 기능상으로 이상한 부분 수정

 

뷰모델 생성자에서 트윗을 조회하는 LoadTwitter()를 호출하도록 했었는데..Import()할 때도 계속 실행이 되어서 생성자에서 호출하는 것을 죽이고, 대신 LoadTwitter()를 Private에서 Public으로 변경하고 각 화면에서 호출하는 방식으로 변경했다.

 

 

4. 고정 함수

 

FromKnownColor : 컬러 이름을 입력하면 그에 맞는 색이 반환된다. 이 프로젝에서는 사용되지 않는다.

 

FromStringColor : RGB컬러를 문자열로 전달하면 색을 반환한다. 알파는 255로 고정

                            ColorConverter에서 사용된다.

 

 

4-1. 컬러 함수 사용

 

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string color = value as string;
            Brush br = new SolidColorBrush(StaticFunctions.FromStringColor(color));
            return br;
        }

트윗 데이터를 보면, User부분에 Profile_XXXX_Color라는 속성들이 있는데 그곳에 있는 색을 배경색이나 택스트 색으로 사용하기 위해서 추가한 컨버터이다.

이렇게 만들어진 컨버터는 WindowChrome.xaml에서 사용되었는데,

 

<Border BorderBrush="#FF333333"

              BorderThickness="1"

              Background="{Binding TwitterStatus.User.Profile_Background_Color,

                                                   Converter={StaticResource ColorConverter}}">

 

....

....

 

일단 색을 깔기 위해서는 항상 Border를 바닥에 깔고 시작해야한다. Grid, StackPanel 등은 자신이 색을 가질 수 없다.

위의 문장으로 보면 보더의 백그라운드에 바인딩한다. 백그라운드 프로퍼티는 브러쉬를 가지기 때문에 프로파일백그라운드컬러데이터를 컬러컨버터를 이용해서 브러쉬로 변환해서 바인딩 해주는 것이다.

 

 

5. ImageNameConverter

Profile_Image_Url에 있는 이미지명을 큰 이미지 명으로 변경하는 컨버터이다.

사용방법은 일반적인 컨버터를 사용하는 것과 동일하다.

 

 

6. 팝업이 호출된 후 개인의 트윗만을 조회하기

 

 

        #region 트윗 유저 세트
        CTwitterSet usertwitterset;
        public CTwitterSet UserTwitterSet
        {
            get
            {
                return usertwitterset;
            }
            set
            {
                if (usertwitterset != value)
                {
                    usertwitterset = value;
                    OnPropertyChange("UserTwitterSet");
                }
            }
        }
        #endregion

 

    일단 사용자용 트위터세트를 하나 추가한다.

 

 

        #region 트윗 유저 로드 커맨드
        public void LoadUserTwitter()
        {
            //현재 트윗이 없으면 바로 나간다.
            if (TwitterStatus == null)
                return;

 

            //로드커맨드 명령 실행
            if (IsBusy == false)
            {

                //리턴 데이터 파싱을 한 후에 어디다가 넣어야할지 구분하기 위한 데이터 입력
                ApiKind = "LoadUserTwitter";
                //사용자트윗세트 클리어

                UserTwitterSet.Clear();
                //비동기 호출

                webclient.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + TwitterStatus.User.Screen_Name));
                IsBusy = true;
            }
        }

 

        //ICommand는 만들어 두기는 했는데..필요할 때 사용하면 됨..이번에는 사용할 일이 아직 없는..
        ICommand loadUser;
        //로드명령
        public ICommand LoadUserCommand
        {
            get
            {
                if (loadUser == null)
                {
                    //ActionCommand를 만들어서 명령어 처리를 할 수 있도록 함
                    loadUser = new ActionCommand(() => LoadUserTwitter());
                }
                return loadUser;
            }
        }
        #endregion

        webclient_DownloadStringCompleted 내용 중 추가된 내용

 

            switch (ApiKind)
            {
                case "LoadTwitter":
                    //ToList() 지연쿼리로 리스트 형태의 데이터로 만들고 각 항목을 옵져버블컬렉션에 하나씩 추가
                    q1.OrderByDescending(p => p.Created_At).ToList().ForEach(p => TwitterSet.Insert(0, p));
                    break;
                case "LoadUserTwitter":

                    //사용자트윗세트에 처넣고 있음

                    q1.OrderBy(p => p.Created_At).ToList().ForEach(p => UserTwitterSet.Insert(0, p));
                    break;
            }

    그리고 마지막으로 WindowChrome.xaml.cs에서

 

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

            InitializeComponent();

            LayoutRoot.DataContext = TwitterViewModel;

            TwitterViewModel.LoadUserTwitter();
        }   

    생성자에서 그냥 함수를 호출하도록 했듬

    그럼 해당 사용자가 작성했던 20개의 트윗을 볼 수 있다. 추가적으로 더 보기를 원하면 뭔가 작업을 해주면 될것 같은데

    한글도 아니고 알 수 없는 문자들로 인해 그런 작업을 추가하지는 안을려고 한다.

 

 

새로 추가했던 내용은 대부분 정리를 한것 같다. 혹시 빼먹은 내용이 있으면 리플로 알려주면 추가하겠다.

 

 

첨부된 소스에 obj, bin 폴더는 제거되어있는 상태이니 리퍼런스에 사용된 dll이 없을 경우 별도로 요청하기 바란다.

소스가 아주 약간 수정되어서 다시 올린다.

 

실행링크

 

코멘트쓰기
  좋음   놀람   궁금   화남   슬픔   최고   침묵   시무룩   부끄럼   난감
* 코멘트는 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.