이것도 경험이 없으면 꽤나 찾기 어려운 것중 하나.

다음과 같이 프로젝트를 만들었다고 하죠. 프로젝트에 두 개의 사용자 컨트롤이 있고 하나의 IValueConverter가 있어요. 그리고 테스트를 충분히 해서 Release 모드로 빌드를 했다고 합시다.

그런데 디자인을 익스프레션 블렌드에서 보고 싶어졌어요. 이 프로젝트를 블렌드에서 띄우면?

이와 같이 자기 자신의 네임스페이스도 못 찾게 되죠. 이상한 점은 <UserControl.Resources> 안에 선언된 것만 못찾는다는 점이에요. 위의 코드에서 <UserControl.Resources>블럭을 삭제하면 정상적으로 뜨는 것을 확인할 수 있거든요.

문제를 해결하려면, 비주얼 스튜디오에서 빌드 모드를 Debug로 설정하고 다시 빌드한 후 블렌드에서 열면 돼요.

문제의 원인은 바로 블렌드는 항상 Debug모드로 간주되는데 비주얼 스튜디오에서 빌드할 때 Release 모드로 빌드를 했기 때문이에요.
뭔가 우습지만 막상 닥쳤을 때 찾기 어려운 문제라 기록해둡니다.

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

아마 툴 역사상 최소의 크기 내지는 최악의 클릭 영역을 가진 버튼일거에요.

 

네, 단지 사각 박스가 메뉴일 뿐더러 설정된 값의 종류에 따라 색깔도 바뀌죠. 하여간 이 버튼에 대해서 참 많은 불만이 있었는데요, What do you call that small white square icon in Expression Blend? 라는 글이 올라왔더군요.

보통 저 메뉴 버튼을 “작은 흰색 사각형 버튼”이런 식으로 부르는데요, 이 블로그 주인장은 “프로퍼티 쐐기(Property Peg)”또는 그냥 쐐기(Peg)라고 부르자고 제안을 하는 군요.

음… 댓글에도 많은 사람들이 Peg이 괜찮다고 하는데, 아무래도 우리는 익숙하지 않은 단어이기도 하고 그렇다고 쐐기나 못, 핀 이런게 와 닿지도 않네요.

혹시 블렌드의 고급 속성 옵션 버튼을 부르는 그럴 듯한 아이디어가 있나요?

+ 원문의 댓글에 달린 것들…

- 찾기 너무 작은 아이콘
- 진짜 아이콘을 쓴게 아니고 색깔을 기억하게 만드는 아이콘
- 이봐! 난 그게 메뉴인지 몰랐다고!
- 헤깔리콘(Confusicon; Confusion + Icon)
- 사기콘(Decepticon; Deception + Icon)
- 실수
- More
- …
- 여드름(Pimple)
- 찾기 힘든 세계에서 가장 작은 버튼
등등등…

ㅎㅎㅎ

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

개발자들도 블렌드를 꼭 알아야 한다는 사실!
http://blogs.msdn.com/popcon/archive/2009/07/17/s-4-blend.aspx

[+동영상 다운로드]
저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

드디어 나왔어요! 아직 공식 사이트인 silverlight.net에는 올라오지 않았지만 마이크로소프트 이반젤리스트 블로그를 중심으로 링크가 공개되었네요. 사족이지만 RTW란 Release To Web의 약자로 정식 버전이 맞아요^^
설치는 전과 마찬가지로 기존에 설치된 모든 실버라이트 관련 설치를 제거하고 다음 링크에서 새로 설치하면 돼요.

[개발자 필수]

[디자이너 필수 + 개발자도 어지간하면 설치]

[End-user용 실버라이트 3]

참고로 Blend 3 with SketchFlow는 일종의 RC버전으로 Final은 2주 정도 후에 나온다고 '유력한' 소식통이 전해왔어요.
자세한 리뷰는 나중에 하기로 하고 인증샷들만….

 

RTW 버전은 3.0.40624.0 즉, 6월 24일에 이미 최종 버전의 빌드가 되었다는 것을 알 수 있죠.

 

 

블렌드 3 설치 화면. 와~우 깔끔해졌어요~

 

 

블렌드 3 + 스케치플로우! 근데 저기서 춤 추는지 뭐 하는지 포즈 잡는 사람들은 뭔가…=_=

블렌드 3의 새 아이콘. 음… 판단 유보.

 

새 프로젝트 만들기. 좀 더 많은 종류의 프로젝트를 지원하면서 창도 늘어났네요. 당연한 얘기지만 실버라이트 2는 지원하지 않아요.

 

변경된 블렌드 3의 화면. Asset을 좀 더 빠르게 접근할 수 있도록 구성했군요. 그런데 모니터 해상도가 높아야 좋을 것 같네요. 해상도 작으면 오밀조밀해서 답답할 듯. 노트북 유저들 안습 ㅠ.ㅜ

 

드디어 공개된 스케치 플로우!! 우와아아앙 빨리 써보고 싶다아아아아 >_<

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

XAP 사이즈, 압축하지 않겠는가?에서 얘기한 것 처럼 실버라이트 배포에 가장 중요한 점 중 하나는 바로 용량을 줄이는거죠. 그래서 배경화면이나 복잡한 디자인 등에 사용하는 이미지 파일은 프로젝트에 포함하지 않고 웹 서버쪽에 두는 것이 정석이에요. 그런데 이렇게 하면 개발자들이야 어차피 디자인을 보면서 작업하는 일이 많지 않아서 별로 문제가 안되지만, 디자이너들에겐 치명적인 문제가 되죠. 생각해보세요 배경화면을 보면서 디자인을 해야 하는데 이미지가 프로젝트에 없어서 보이지 않는다니!

요컨대, 다음과 같이 배경 이미지 한장을 보여주는 아주 간단한 샘플을 놓고 보죠.

image image

최초로 Images 폴더에 ducks.jpg를 추가하면 기본적으로 Build Action이 Resource가 되어 프로젝트를 빌드할 때 어셈블리에 리소스로 포함되고 이 이미지의 용량은 고스란히 XAP파일의 용량이 증가하는 결과로 이어지죠. 그렇다고 이미지를 삭제하고 웹서버에만 놓기엔 디자이너가 볼 수가 없어서 애매하죠.

이럴 때는 간단하게 해당 이미지 파일을 프로젝트에 그대로 놓은 상태에서 Build Action만 None으로 설정하세요.

image

이렇게 하면 비주얼 스튜디오의 디자인 뷰에는 나오지 않지만 블렌드로 열어보면…

image

잘 보이죠? 그러면서도 배포 사이즈는 이미지의 크기가 빠지게 되죠.

별거 없지만 첨부된 프로젝트를 보면서 참고하세요.


저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

개발자들이 블렌드에서 작업을 하기 꺼려하는 이유 중 하나는 바로 XAML을 직접 편집할 때 인텔리센스를 지원하지 않는 다는 점이죠!

잘 알려지진 않았지만 블렌드는 외부 애드인을 사용할 수 있는 준비가 되어 있는데요, 이미 블렌드 2의 CTP 시절에 애드인을 사용하여 인텔리센스를 지원하는 방법이 코드플렉스에 소개되었었죠.

참고 : Intellisense For Expression Blend

당연하겠지만 버전 문제로 위의 링크에 있는 코드는 제대로 동작하지 않아요. 다행히 소스를 제공하기에 새 블렌드 버전에 맞춰서 어셈블리 참조만 바꿔서 동작하도록 수정했고 설치도 한방에 되도록 간단한 커맨드 라인 툴도 만들었어요.

 

파일을 다운 받아 압축을 해제한 후 install.cmd를 반드시! 관리자 권한으로 실행하면 다음과 같이 설치되었다는 메시지가 표시되고 끝. 간단하죠?

그런데 블렌드의 애드인은 설정 등의 값으로 설정하는 것이 아니라 매 실행마다 파라미터를 통해 전달해줘야 해요. 그래서 Blend.exe를 직접 실행해서는 안되고 바로 가기 링크를 바꿀 필요가 있죠. 위의 설치 과정에서 자동으로 바로 가기의 링크도 수정해줘요. 단, 해당 바로 가기는 Windows Vista 이상에서만 동작할거에요. XP에서 사용중이라면 다음과 같은 커맨드라인 파라미터를 사용하여 애드인을 실행해야 해요.

start Blend.exe -addin:Addins\Expression.Blend.IntelliSense.dll

위의 명령어는 블렌드가 설치된 C:\Program Files\Microsoft Expression\Blend 2\Blend.bat 라는 이름으로 자동으로 복사가 되니 참고하세요.

 

여튼 이렇게 프로그램 바로 가기로 실행하면…

XAML 뷰에서 인텔리센스가 지원되는 것을 볼 수 있어요. 물론 비주얼 스튜디오에서 지원하는 것에 비교하면 정말 허접하지만 그나마 없는 것보다는 낫네요. 또 한가지 아쉬운 점은 Split 모드에서는 인텔리센스가 지원되지 않는 다는 점인데 혹시 관심 있는 분이라면 코드플렉스에서 소스를 다운받아 수정해 볼 수도 있겠죠.

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

컴퍼넌트 및 컨트롤 개발자/디자이너에게 반드시 필요한 기능이죠. 보통 우리가 컨트롤을 디자인 할 때에는 특히, 데이터 바인딩을 사용하는 컨트롤의 경우에는 실제 데이터가 표시될 자리에는 아직 아무런 데이터가 들어가지 않았기 때문에 디자이너들이 그 곳에 임의의 값이 어떤 형태로 들어갈지 알 수 없다는 문제점이 있죠. 바로 이럴 때 System.ComponentModel.DesignerProperties 클래스를 유용하게 사용할 수 있어요.

우선 샘플 프로젝트부터 받아 보시죠.

먼저 간단하게 유저 컨트롤을 하나 만들어서 테스트 해 보죠. 컨트롤의 이름은 MyUserControl이라고 하고 크기는 100x100으로 아무것도 없는 컨트롤이에요. 그리고 코드 비하인드에 다음과 같이 간단한 코드를 넣어보죠.

public MyUserControl()
{
    InitializeComponent();
    TextBlock tb = new TextBlock();

    if (DesignerProperties.GetIsInDesignMode(this) == true)
    {
        // Design-time
        LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
        tb.Text = "in Design";
    }
    else
    {
        // Run-time
        LayoutRoot.Background = new SolidColorBrush(Colors.Green);
        tb.Text = "in Runtime";
    }

    LayoutRoot.Children.Add(tb);
}

DesignerProperties.GetIsInDesignMode() 메서드는 주어진 UIElement가 현재 디자인 모드에서 렌더링 되고 있는지 여부를 반환해요. 해당 UIElement가 디자인 모드 즉, Blend에서 렌더링 되고 있다면 true를, 웹브라우저 등에서 렌더링 되고 있다면 false를 반환하는거죠.

위의 코드는 컨트롤이 인스턴스화 될 때 디자인 모드에서는 파란색으로 컨트롤을 채우고 "in Design"이란 문자열을 출력하고 런타임에서는 녹색으로 컨트롤을 채우고 "in Runtime"이란 문자열을 출력하도록 작성되었어요.

비주얼 스튜디오에서 MyUserControl을 볼까요?

아무것도 안나오죠? 이것은 비주얼 스튜디오의 XAML 뷰어(코드명 사이더)는 해당 UserControl을 새로 생성하는 것이 아니라 단지 XAML을 분석하여 보여준다는 것을 알 수 있죠.

블렌드의 경우도 마찬가지에요.

 

자, 다음으로 MyUserControl을 XAML에서 추가하여 사용하는 Page.xaml을 한번 볼까요?

비주얼 스튜디오의 XAML 뷰어에서는 디자인 모드가 아닌 런타임으로 판단하는군요. 이것은 아마도 버그내지는 잘못된 판단이 아닐까 싶어요. 아무리 사이더에서 실제로 디자인 하는게 불가능하더라도 엄연히 이 시점은 '디자인'상태니까요.

반면, 블렌드에서는 디자인 모드를 정상적으로 인식하는 것을 볼 수 있죠.

그렇다면 브라우저에서는? 당연히 런타임으로 나오겠죠?

 

DesignerProperties 클래스가 유용하게 쓰이는 경우는 앞에서 말했던 것처럼 동적으로 변경되는 값의 샘플 값을 디자이너에게 보여주고 싶을 때인데요 이 외에도 이 클래스를 반드시 써야 하는 경우도 있어요. 바로 몇몇 코드는 블렌드에서 처리할 수 없어서 에러를 발생시키는 원인이 되기도 해요.

이렇게 말이죠. 이게 당해보면 진짜 환장할 노릇이거든요. 왜냐면 유저 컨트롤 그 자체에서는 잘 보이는데 그 컨트롤을 사용한 다른 컨트롤의 디자인에서만 안보이니까요.

어떤 경우에 위와 같은 에러가 나오는지 완전히 정리되지는 않았지만 한가지 확실한 것은 IsolatedStorage가 사용되었을 때에요. IsolatedStorage를 쓸 때의 주의점과 해결 방법은 다음 포스팅에서 설명할께요.

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo


티스토리 툴바