2010.01.06 12:00

1.RichTextArea Part 1
2.RichTextArea Part 2
3.Accessing Web Camera and Microphone
4.Right Click Mouse Events
5.MouseWheel API

6.Using Silveright Controls As Drop Targets
7.DataGrid Enhancements
8.Printing API Basics 
9.Hosting HTML Content
10.Accessing the Global Clipboard Programmatically 
11.Using the ViewBox Control 
12.Asynchronous Data Validation 
13.BiDi and Right-to-Left Support 
14.Notification API
15.Local File Access 
16.RIA Services support in Visual Studio 2010  
 

블로그 이미지 김영욱 차장 Microsoft Korea  .NET Evangelist
Enterprise UX 를 위한  UI 기술과 SOA, Cloud Computing, NUI등 다양한 분야의 접목과 응용을 통해 최적의 IT 인프라 구축을 위해서 노력하고 있다.
Email: iwinkey@hotmail.com
Blog: http://winkey.tistory.com

첫 번째 강좌를 시작하기 전에 먼저 몇 가지 체크해야 하는 것 들입니다. 우선 개발 툴과 디자인 툴에 관해서 입니다.

Silverlight 4를 개발하기 위해서는 기본적으로 Visual Studio 2010이 필요합니다. 이 이야기는 Visual Studio 2008에서는 불편하다는 이야기가 아니라 할 수 없다는 이야기 입니다. 따라서 이 강좌를 따라 해 보기 위해서는 Visual Studio 2010을 설치해 주어야 한다는 점을 강조 해 드립니다.

또 디자인 툴도 Expression Blend 4 Preview 버전을 사용하셔야 Silverlight 4 프로젝트를 사용할 수 있습니다. 이와 관련된 환경 설정은 http://www.silverlight.net/getstarted/silverlight-4-beta/ 에 가셔서 필요한 구성 요소들을 설치 할 수 있습니다.

 

개발에 필요한 문서

 

모든 환경을 설치하는데 다소 시간이 걸리기 때문에 마음 편히 먹고 진행하는 것이 정신 건강에 이롭습니다. 특히 Visual studio 2010의 경우는 시간이 꽤 많이 걸립니다. 이제 필요한 환경이 다 구축되었으면 Silverlight 4의 세계에 입문할 준비가 끝났습니다.

 

첫 번째 강좌는 RichTextArea에 관한 내용입니다. Silverlight 4에서 새롭게 추가된 RichTextArea(흔히 다른 툴이나 언어에서는 RichTextBox로 많이 부르고 있습니다.) Silverlight 4의 RichTextArea는 그 기능 만으로 보면 새로울 것 없지만 기존에 제공되지 않던 것이 이번 버전부터 제공 될 수 있게 되었다는 점에서 의미가 있습니다.

 

Silverlight 4 프로젝트를 생성하기 위해서 Visual Studio 2010을 실행 시키고 Silverlight Application 템플릿을 선택해서 프로젝트를 시작합니다. 프로젝트 이름은 RichText로 정했습니다.

 

프로젝트가 생성되고 나면 약간의 디자인 작업을 해야 합니다. Visual Studio 2010에서는 Silverlight 개발 시에 디자인 모드가 지원되지 않았지만 Visual Studio 2010 부터는 디자인 모드가 지원되기 때문에 편리하게 디자인 할 수 있습니다. 하지만 전문적인 디자인은 역시 Expression Blend를 사용해야 합니다.

 

화면에 나타난 폼 중에서 상단에 나타난 상하좌우 화살표를 클릭하면 Grid를 나눌 수 있는 상태가 됩니다.

Grid 분할 영역을 클릭하면 Grid 영역이 분할됩니다. 여기에 간단하게 소스 코드를 입력해서 디자인을 완성해 봅니다. RichTextArea와 버튼을 추가합니다. 각 각의 버튼은 볼드, 이텔릭, 크게, 작게 등 폰트와 관련된 속성을 변경하는 기능을 가지고 있습니다.

 

<UserControl x:Class="RichText.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
      <RowDefinition Height="1*" />
      <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch"
                Grid.Row="0"
                Background="Beige">
      <Button x:Name="boldButton"
              Content="Bold"
              FontWeight="Bold"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              Margin="5"
              Background="LightBlue" />
      <Button x:Name="italicsButton"
              Content="Italics"
              FontStyle="Italic"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              Margin="5"
              Background="LightBlue" />
      <Button x:Name="biggerButton"
              Content="Bigger"
              FontSize="14"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              Margin="5"
              Background="LightBlue" />
      <Button x:Name="smallerButton"
              Content="Smaller"
              FontSize="10"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              Margin="5"
              Background="LightBlue" />
    </StackPanel>
      <RichTextArea x:Name="rtArea"
                  Grid.Row="1"
                  Background="Beige"
                  FontFamily="Georgia"
                  FontSize="12"
                  HorizontalContentAlignment="Left"
                  MinHeight="50"
                  MinWidth="50"
                  TextWrapping="Wrap"
                  VerticalContentAlignment="Top"
                  VerticalScrollBarVisibility="Auto" />
  </Grid>
</UserControl>

 

이제 각 각의 버튼에 대한 C#코드를 작성해서 해당되는 기능을 완성하려고 합니다. 먼저 샘플 텍스트를 넣어줄 간단한 메소드를 추가 합니다.

 

private void FillText()
{
    rtArea.Selection.Text = "Lrem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
        + "congue, orci ut placerat dignissim, nibh odio imperdiet diam, in porta libero lacus sit amet risus."
        + "Nullam ultrices purus nec sapien pellentesque at dignissim leo facilisis. Phasellus congue convallis metus, "
        + "eu ultrices augue malesuada sit amet. Nam varius, leo ac pretium pharetra, arcu turpis varius tellus, "
        + "vitae lacinia turpis dolor vitae mauris. Maecenas lacinia laoreet justo, eget imperdiet nulla porta eu. "
        + "Etiam nec elit vel lacus rhoncus vehicula at rutrum elit. Nunc cursus, erat vel rhoncus porta, leo ipsum venenatis "
        + " nisi, nec eleifend ligula quam non massa. Sed neque odio, euismod at egestas ac, scelerisque et nisl. Cum sociis "
        + "natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ornare risus augue, nec semper  "
        + "mauris. Nam feugiat suscipit arcu, sit amet mattis purus lacinia at. Sed ut purus at arcu rhoncus elementum ac at  "
        + "enim. Morbi at quam ac magna rutrum gravida eu lacinia neque. Mauris purus augue, ornare sed vestibulum ac, lacinia  "
        + "in sapien. Ut sit amet vehicula augue. Donec a dictum felis. In hac habitasse platea dictumst.  "
        + "Pellentesque id hendrerit diam. ";
}

 

길어서 그렇지 그냥 문장을 계속 더해서 rtArea에 넣는 문장입니다. ^^ 그리고 각 버튼의 클릭 이벤트에 대한 이벤트 핸들러를 작성해 주어야 합니다.

 

boldButton.Click += new RoutedEventHandler(buttonClickHandler);
italicsButton.Click += new RoutedEventHandler(buttonClickHandler);
biggerButton.Click += new RoutedEventHandler(buttonClickHandler);
smallerButton.Click +=new RoutedEventHandler(buttonClickHandler);

 

네 개의 버튼 모두 buttonClickHandler라는 이벤트 핸들러를 호출하게 되어 있습니다. buttonClickHandler에서 다음과 같은 부분들을 추가 합니다.

 

void buttonClickHandler(object sender, RoutedEventArgs e)
{
    Button b = sender as Button;

    const double MaxFontSize = 36;
    const double MinFontSize = 10;
    const double IncrementFontSize = 2;

    if (b != null)
    {
        switch (b.Content.ToString().ToUpper())
        {
            case "BOLD":
                if (rtArea.FontWeight == FontWeights.Bold)
                {
                    rtArea.FontWeight = FontWeights.Normal;
                    b.FontWeight = FontWeights.Bold;
                }
                else
                {
                    rtArea.FontWeight = FontWeights.Bold;
                    b.FontWeight = FontWeights.Normal;
                }
                break;
            case "ITALICS":
                rtArea.FontStyle = rtArea.FontStyle == FontStyles.Italic ? FontStyles.Normal : FontStyles.Italic;
                b.FontStyle = rtArea.FontStyle == FontStyles.Italic ? FontStyles.Normal : FontStyles.Italic;
                break;
            case "BIGGER":
                rtArea.FontSize = rtArea.FontSize > MaxFontSize ? MaxFontSize : rtArea.FontSize + IncrementFontSize;
                break;
            case "SMALLER":
                rtArea.FontSize = rtArea.FontSize < MinFontSize ? MaxFontSize : rtArea.FontSize - IncrementFontSize;
                break;

        }
    }

}

어느 버튼에서 이 이벤트 핸들러를 클릭했는지 알기 위해서 sender를 버튼으로 받고 최대 글자 크기와 최소 글자 크기를 설정 하기 위해서 상수를 정의 했습니다. 그리고 증가치도 함께 설정 했습니다.

 

버튼이 null이 아닐 경우에 b.Content.ToString().ToUpper()를 거쳐서 버튼의 텍스트를 읽어 와서 어떤 버튼이 클릭 되어서 여기에 왔는지 구분 할 수 있게 했습니다.

 

BOLD의 경우 FontWeight가 Bold이면 Normal로 Normal 이면 Bold로 속성을 바꾸게 되어 있으며

ITALICS도 마찬가지로 동작을 하지만 ?를 이용한 삼항 연산자를 통해서 좀더 간결하게 표현할 수 있게 했습니다.

BIGGER와 SMALLER의 경우 폰트 크기의 최대 혹은 최소 크기가 아니면 증가값을 더하거나 뺄 수 있게 했습니다.

 

벌써 RichTextArea를 활용하는 샘플이 완성되었습니다. 이제 F5만 눌러 보시면 다음과 같은 결과물을 보실 수 있습니다.

 



여기까지 완성된 샘플 파일입니다.


신고
2010.01.06 09:00
UX Bakery에서 진행했었던 PDC 다시보기 행사에서 발표 했던 내용의 녹화분입니다.
주로 Silverlight와 관련된 내용들을 이야기 하고 있습니다.

")//]]>
저작자 표시 변경 금지
신고
2010.01.05 15:34

Happy New Year!!! Happy 2010!!!

새 해가 밝았습니다. 올 해도 이 블로그에 방문하시는 모든 분들에게 많은 은혜와 축복이 함께 하시기를 기원합니다. 2010년 첫 기획으로 First Look Silverlight 4 시리즈를 포스팅 하려고 하려고 합니다.

지난  PDC 2009에서 발표되었던 Silverlight 4는 기존의 Silverlight 3에서 비해서 재미있는 기능들이 엄청나게 많이 추가 되어서 이제까지 버전 중에서 가장 재미있는 버전이 되었습니다. 그래서 Silverlight 4의 기능을 하나 하나 열어서 살펴 보는 시간을 가지려고 합니다.

우선 목차는 아래와 같이 정해 보았습니다. 옆에 있는 날짜는 포스팅 예고 일입니다. ^^

1.RichTextArea Part 1 2010-01-05
2.RichTextArea Part 2 2010-01-05
3.Accessing Web Camera and Microphone 2010-01-06
4.Right Click Mouse Events 2010-01-06
5.MouseWheel API 2010-01-07
6.Using Silveright Controls As Drop Targets 2010-01-07
7.DataGrid Enhancements 2010-01-08
8.Printing API Basics 2010-01-08
9.Hosting HTML Content 2010-01-09
10.Accessing the Global Clipboard Programmatically 2010-01-09
11.Using the ViewBox Control 2010-01-10
12.Asynchronous Data Validation 2010-01-10
13.BiDi and Right-to-Left Support 2010-01-11
14.Notification API 2010-01-11
15.Local File Access 2010-01-12
16.RIA Services support in Visual Studio 2010 2010-01-12
17.Using MEF with Silverlight 4 for Extensibility 2010-01-13
18.COM Object Access in Trusted Applications 2010-01-13
19.Network Authentication and Trust Network Access 2010-01-14

신고
2010.01.05 09:00
UX Bakery에서 진행했었던 PDC 다시보기 행사에서 발표 했던 내용의 녹화분입니다.
주로 Silverlight와 관련된 내용들을 이야기 하고 있습니다.
")//]]>
저작자 표시 변경 금지
신고
2010.01.04 09:00
UX Bakery에서 진행했었던 PDC 다시보기 행사에서 발표 했던 내용의 녹화분입니다.
주로 Silverlight와 관련된 내용들을 이야기 하고 있습니다.

저작자 표시 변경 금지
신고
2010.01.01 09:00
UX Bakery에서 진행했었던 PDC 다시보기 행사에서 발표 했던 내용의 녹화분입니다.
주로 Silverlight와 관련된 내용들을 이야기 하고 있습니다.

저작자 표시 변경 금지
신고
2009.12.31 09:00
UX Bakery에서 진행했었던 PDC 다시보기 행사에서 발표 했던 내용의 녹화분입니다.
주로 Silverlight와 관련된 내용들을 이야기 하고 있습니다.
저작자 표시 변경 금지
신고
2009.10.12 08:21

시간 세션 발표자
18:30-19:00 등록  
19:00-20:10 Windows7 DirectX Programming 정희재 선임연구원
게임을 위한 최적의 기술인 DirectX 11이 Windows7과 함께 제공됩니다. GPU병렬처리, DirectWrite등 강력해진 DirectX 11을 이용한 개발 방법을 알려 드립니다.
20:10-20:20 휴식  
20:20-21:30 XPS Document Programming 김용현 MVP

 등록은 http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032424339&culture=ko-KR 에서 할 수 있습니다. 

신고
2009.08.13 10:10

대표적인 3D Modeling tool 3D studio max WPF에서 활용할 수 있는 XAML(no silverlight)로 컨버전하는 ZAM3D라는 tool로 유명한 Electric Rain에서 이번에는 PPT Silverlight 혹은 WPF에서 활용할 수 있는 XAML로 컨버전 할 수 있는 툴을 곧 출시하겠다고 공시했습니다.

이전에 Microsoft 내부적으로도 비슷한 시도가 있었던 것으로 알고 있습니다만 외부에서 정식 제품으로 출시하기는 처음 있는 일입니다.

현재 이 제품의 이름은 Convexion으로 알려져 있습니다. 

해당 툴이 적정한 완성도를 가지고 나올 경우 콘텐츠의 생산이 Expression을 사용하지 않고도 가능하게 되어서 XAML 기반의 콘텐츠 생산에 상당 부분 도움을 줄 수 있을 것으로 생각됩니다. PPT를 사용하는 방법은 비전문가들이 쉽게 접근할 수 있고 기존에 생산되어 있던 콘텐츠들의 재 생산이라는 측면에서 의미를 가질 수 있을 것 같습니다.

http://www.erain.com/products/convexion/?erain=Aug09


김영욱 (iwinkey@hotmail.com)
Microsoft KOREA
Enterprise Develoeper Evangelist


Windows 7 개발자들을 위한 블로그 http://blogs.msdn.com/winkey7
UX 개발자들을 위한 강좌 http://winkey.tistory.com

신고
2009.07.13 09:00

지난 봄 라스베거스에 있었던 Mix09에서 공개되었던 Expression Blend 3를 지금 다운로드 할 수 있다고 합니다. 이미 다운로드 하셨다구요? 스케치플로우는 빠지지 않았던가요? 이제 스케치플로우까지 함께 포함된 거의 완벽한 버전을 다운로드 받을 수 있게 공개 되었습니다. 지금 아래 주소를 누르시면 바로 다운로드 받을 수 있습니다.

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=92e1db7a-5d36-449b-8c6b-d25f078f3609

그 동안은 스케치플로우가 몇몇 파트너와 일부 관계자에게만 제공되었는데 이제부터는 모두다 테스트 해볼 수 있게 되었습니다. 스케치플로우는 기획자와 디자이너들이 초기의 Prototype을 개발할 때 해왔던 업무를 고스란히 시스템화 하고 효율적으로 공유할 수 있는 방법을 제공해 줍니다.


김영욱 (iwinkey@hotmail.com)
Microsoft KOREA
Enterprise Develoeper Evangelist


Windows 7 개발자들을 위한 블로그 http://blogs.msdn.com/winkey7
UX 개발자들을 위한 강좌 http://winkey.tistory.com

신고