[silverlight] drag & grop

SilverLight 2009. 6. 2. 13:44 posted by 무명시인
*.xaml 은 다음처럼 구성한다..



 
    
                
    





*.xaml.cs 는 다음처럼구성한다.



 using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace ActionHandler02
{
    public partial class Page : UserControl
    {
        private bool isMouseDown = false;
        private Point lastPoint = new Point();
        private Point offset = new Point();

        public Page()
        {
            InitializeComponent();

            this.myTextBlock.MouseLeftButtonUp += new MouseButtonEventHandler(MyTextBlock_MouseLeftButtonUp);
            this.myTextBlock.MouseLeftButtonDown += new MouseButtonEventHandler(MyTextBlock_MouseLeftButtonDown);
            this.myTextBlock.MouseMove += new MouseEventHandler(myTextBlock_MouseMove);
        }

        void myTextBlock_MouseMove(object sender, MouseEventArgs e)
        {
            if (this.isMouseDown)
            {
                //마지막 좌표
                this.lastPoint = e.GetPosition(null);

                //텍스트블럭의 위치지정
                this.myTextBlock.SetValue(Canvas.LeftProperty, (this.lastPoint.X - this.offset.X));
                this.myTextBlock.SetValue(Canvas.TopProperty, (this.lastPoint.Y - this.offset.Y));
            }
        }

        void MyTextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)         
        {
            //mouse캡춰를 System.Windows.UIElement 로 설정            
            this.myTextBlock.CaptureMouse();

            this.isMouseDown = true;

            //실버라이트 플러그인에서 위치 파악
            this.lastPoint = e.GetPosition(null);

            this.offset.X = this.lastPoint.X - Convert.ToDouble(this.myTextBlock.GetValue(Canvas.LeftProperty));
            this.offset.Y = this.lastPoint.Y - Convert.ToDouble(this.myTextBlock.GetValue(Canvas.TopProperty));
        }       
        
        void MyTextBlock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            //mouse캡춰를 System.Windows.UIElement 해제
            this.myTextBlock.ReleaseMouseCapture();
            this.isMouseDown = false;
        }
    }
}

[silverlight] Grid 사용하기

SilverLight 2009. 4. 22. 15:35 posted by 무명시인
사용자 삽입 이미지

Silverlight 에서 사용하는 대표적인 컨테이너 컴포넌트 이다.

사용법은 위처럼..

<Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions>  

컬럼을 지정하는 Element 와..

<Grid.RowDefinitions><RowDefinition></RowDefinition></Grid.RowDefinitions>

로우를 지정하는 Element 를 사용한다..

.cs 에서도 동적으로 제어가 가능하다.

사용자 삽입 이미지

(1) (2)(3) Row, Column 을 추가한다.

(4)(5)  Row, Column 을 제거한다,

[Silverlight] 실버라이트와 Javascript 연동

SilverLight 2009. 4. 20. 14:26 posted by 무명시인
사용자 삽입 이미지


사용자 삽입 이미지
사용자 삽입 이미지



사용자 삽입 이미지
사용자 삽입 이미지



[Silverlight] BrowserInformation

SilverLight 2009. 4. 15. 14:27 posted by 무명시인
사용자 삽입 이미지

(1) BrowserVersion -> 브라우져 버젼

(2) CookiesEnabled -> 쿠키 사용여부

(3) Name                -> 브라우져 이름

(4) Platform             -> 운영체제

(5) UserAgent          -> 브라우져에서 서버로 보내지는 브라우져의 헤더값

[Silverlight] 경로이동

SilverLight 2009. 4. 15. 14:15 posted by 무명시인
사용자 삽입 이미지

(1) 현재창에서 이동

(2) 새창에서 이동.

Navigate() 메소드는 HTMLDOM의 window.open()함수와 같다.

[Silverlight] 경고창, 확인창, 입력창

SilverLight 2009. 4. 15. 14:05 posted by 무명시인
실버라이트에서 또한 간단한 코드로 경고창, 확인창, 입력창을 띄울 수 있다.

사용자 삽입 이미지


공통적으로 System.Windows.Browser.HtmlWindow 클래스에 속해있는 메소드를 사용한다.

일반 웹폼을 사용하는 것처럼..

메소드 명이 같다(Alert, Confirm, Prompt)..

(1) 실버라이트에 텍스트 박스를 한개 두고 입력값을 경고창으로 보여준다.

(2) 확인창의 예/아니오 값이 HTML 페이지의 텍스트 박스에 보여준다.

(3) 입력창에 입력한 값을 보여준다.

(4) HTML 텍스트박스에 값을 넣어준다.

[Silverlight] QueryString 을 가져와보자..

SilverLight 2009. 4. 15. 13:42 posted by 무명시인

사용자 삽입 이미지

(1) Window  개체와 Document 개체를 선언한다.

(2) 지난번 아티클에서 확인한 Html 페이지의 텍스트 박스 개체

(3) id 라는 키의 QueryString 을 가져와서 텍스트 박스에 뿌려준다.

사용자 삽입 이미지


이런식으로 QueryString 을 가져온다..

[Silverlight] Silverlight 와 HtmlDOM

SilverLight 2009. 4. 14. 15:10 posted by 무명시인

실버라이트와 HTML 은 밀접한 관련이 있다..

그렇지.. 결국은 웹페이지 위에 올려서 돌아 가는 것이니..

그리 하여..

실버라이트와 HTML DOM 에 대하여 간략하게 알아보자 ..

사용자 삽입 이미지


(1) 은 Silverlight.createObjectEx 메소드가 담긴 .js 이다..

(2) 는 지난번 아티클에서 설명한 Silverlight.createObjectEx 메소드

(3) 은 확인하기 좋은 텍스트 박스..

사용자 삽입 이미지

System.Windows.Browser.HtmlDocument 클래스는 HTML 관련 처리의 모든것을 담당하는 클래스 이다..

GetElementById 라는 메소드는 어디서 많이 보지 않았는가??

System.Windows.Browser.HtmlElement 클래스는 HTML 객체를 찾아다 담을수있다..

SetPropertySetStyleAttribute 메소드는 상태와 스타일을 설정해주는 함수이다..

매우 직관적이지 않는가??

책에 있는 예제를 타이핑후 옮겨본다..




실버라이트 프로젝트를 웹사이트에 올려서 돌리면..

(구체적으로 말하자만.. 자동으로 만들어 주는 웹사이트에 있는 .js 에서 생기는)..

제목에 적은 Silverlight.createObjectEx()  통해 돌아간다..

물론, Object 태그로 돌려도 관계는 없겠지만..

조금더 확장적인 Silverlight 를 구동 하려면..

아무래도 마소가 쥐어주는걸 사용하라는 말이겠지..

<script type="text/javascript" src="Silverlight.js"></script>

<div id="divSilverlight">

        <script type="text/javascript" language="javascript">
            Silverlight.createObjectEx(
            {
                source: "ClientBin/SilverlightApplication1.xap"
                , parentElement: document.getElementById("divSilverlight")
                , id: "sexybearSilverlight"
                , properties:
                    {
                        height: "50%"
                        , width: "50%"
                        , background: "transparent"
                        , isWindowless: "true"
                        , frameRate: "30"
                        , inplaceInstallPrompt: true
                        , version: "2.0"
                        , ignoreBrowserVer: "true"
                        , enableHtmlAccess: "true"
                    }
                , event: {}
            }

        );
        </script>

    </div>


Silverlight.createObjectEx()  메서드를 통해 실버라트를 웹사이트에 얻는 것은 위와 같은 코드를 통해서이다..

검색을 해보니..

책보가 설명이 더 잘되어 있더라...ㅋ

아래는 테리님 블로그에서 훔쳐 왔습니다.ㅋ

실버라이트 컨트롤은 CreateObjectEX() 메소드를 통해 웹 페이지에 표시됩니다. 이 메소드는 Silverlight.js 파일에 정의된 자바스크립트 클래스인 Silverlight의 정적 메소드입니다.


Silverlight.CreateObjectEX() 메소드는 실버라이트 컨트롤 인스턴스를 생성하고 웹 페이지에 추가하기 위해 사용됩니다. 먼저 실버라이트 플러그인의 설치여부를 확인한후 설치되지 않았을경우 설치에 대한 정보를 보여주며 브라우저 종류를 검색하고 해당 브라우저에 맞는 실버라이트 컨트롤를 표시 기술을 자동으로 선택해줍니다. 다음은 CreateObjectEX() 메소드에서 사용되는 파라미터표 입니다.


파라미터 설명
source 실버라이트 컨트롤이 포함된 XAML 파일의 경로입니다.
parentElement 실버라이트 컨트롤이 호스팅되는 웹 페이지의 DOM 엘리먼트입니다.
id 웹페이지 DOM에서 실버라이트 컨트롤에 할당된 ID 입니다.
properties 높이, 너비, 배경과 같은 실버라이트 컨트롤의 속성을 정의합니다.
envents 실버라이트 컨트롤의 load와 error 이벤트 핸들러를 정의합니다.
initParams 실버라이트 컨트롤이 로딩될 때 전달할 초기 값을 정의합니다.
context OnLoad 이벤트에서 접근이 가능한 유일한 식별자 입니다. 하나의 페이지에서 여러 개의 실버라이트 컨트롤을 호스팅할 때 사용합니다.

[표1] CreateObjectEX 메소드 파라미터


다음은 파라미터중 properties의 세부 속성표입니다.

속성 설명
width 실버라이트 컨트롤의 너비를 설정합니다.
height 실버라이트 컨트롤의 높이를 설정합니다.
background 실버라이트 컨트롤의 배경색를 설정합니다.
isWindowless 실버라이트 컨트롤을 창 없이 표시할지 여부를 설정합니다. 기본값은 “false”입니다. “true”로 설정시 HTML 컨트롤을 실버라이트 컨트롤 위에 표시할 수 있습니다.
frameRate 컨트롤이 초당 랜더링 되는 최대 수를 설정합니다.
inplaceInstallPrompt 실버라이트 플러그인 설치에 대한 추가 정보 표시여부를 설정합니다.
version 실버라이트 플러그인의 버전을 설정합니다.
ignorBroswerVer 실버라이트 플러그인이 설치되고 실행될 때 브라우저 버전을 무시할지 여부를 설정합니다.
enableHtmlAccess 실버라이트 컨트롤이 웹 페이지 DOM 개체 접근 가능여부를 설정합니다.

[표2] 파라미터 properties의 세부 속성



[SilverLight]DataBinding 01

SilverLight 2008. 9. 16. 15:20 posted by 무명시인




이번에 훈스닷넷 세미나..
자료를 보던중..
궁금증이 생겨..
확인..
데이타를 바인딩 할때..
아래 세가지는 같은 방법이다..
킁킁,,

방법 하나.

------------------------------------------------------------------------------------------------
Page.Xaml -->

 <Canvas x:Name="cvLists" Background="Aqua" Width="400" Height="300">
            <TextBlock x:Name="tblTitle" Canvas.Top="5"  ></TextBlock>
            <TextBlock x:Name="tblContentS" Canvas.Top="20" Text="{Binding Content}" ></TextBlock>
            <TextBlock x:Name="tblRegDate" Canvas.Top="35" Text="{Binding RegDate, Converter={StaticResource DateConverter}}"></TextBlock>
            <TextBlock x:Name="tblHit" Canvas.Top="50" Text="{Binding Path=HitCount}"></TextBlock>
            <Image x:Name="imgThumbnail" Canvas.Left="65"
                   Width="20" Height="20"
                   Source="{Binding Thumbnail}"></Image>
            <Button x:Name="btnHit" Width="100" Height="20" Content="HIT" Canvas.Top="205"></Button>
        </Canvas>

Page.Xaml.cs
.....
     cvLists.DataContext = board;
......
그러니까 컨태이너 컨트롤의 DataContext 에 데이타를 바인딩 하는 방법

방법 두울.
------------------------------------------------------------------------------------------------

Page.Xaml --> 똑같이 바인딩 식을 빼고..

Page.Xaml.cs
            Binding binding = new Binding();    // System.Windows.Data.Binding;
            binding.Source = board;                // 데이타 원형
            binding.Path = new PropertyPath("Title");  // 속성
            tblTitle.SetBinding(TextBlock.TextProperty, binding); // 바인딩 타겟 컨트롤


System.Windows.Data.Binding  클래스 사용..

방법 두울.
------------------------------------------------------------------------------------------------
Page.Xaml --> 똑같이 바인딩 식을 빼고..

Page.Xaml.cs


 Board board = new Board();
...
tblTitle.Text = board.Title;
...

그러니까 예전 처럼..