본문 바로가기

Controls32

Silverlight 2 Controls Review 강좌목록 그동안 써왔던 Silverlight 2 Controls Review 강좌목록을 정리했습니다. Silverlight 2 Controls Reivew - TextBox, Button, TextBlack Silverlight 2 Controls Review - DataPicker, Calendar Silverlight 2 Controls Review - CheckBox, RadioButton Silverlight 2 Controls Review - ComboBox Silverlight 2 Controls Review - ListBox Silverlight 2 Controls Review - MediaElement Silverlight 2 Controls Review - Slider Silverlight 2 C.. 2008. 10. 27.
Silverlight 2 Controls Review - ProgressBar ProgressBar 컨트롤은 현재 프로그램의 로드되는 상태를 나타내며, 그림이나 동영상같은 멀티미디어 파일을 다운로드 또는 업로드 하는 현재 상태를 퍼센트로 보여줄 수 있습니다. 아래 예제는 동영상을 다운로드 하면서 진행상태를 보여주고 동영상을 재생을 재생을 합니다. MediaElement, TextBlack, ProgressBar 컨트롤을 Xaml 코드뷰에서 추가해주거나 Blend에서 추가해줍니다. MediaElement는 다운로드한 동영상을 재생하고 TextBlack는 다운로드 되는 상태를 퍼센트로 보여줍니다. Xaml C# Code using System; using System.Net; using System.Windows.Controls; namespace ControlTest17 { publ.. 2008. 10. 27.
Silverlight 2 Controls Review - TabControl TabControl은 여러 페이지 사이를 빠르게 전환하는데 유용한 컨트롤입니다. 기본적인 사용법은 아래 Xaml 코드와 같습니다. 기본적인 TabControl을 생성했을때 보여지는 결과입니다. 4개의 TabItem이 들어가 있습니다. TabControl 안에는 독립적으로 TabItem 컨트롤이 존재하며 TabItem 안에는 Button이나 TextBox 같은 Input 관련 컨트롤이나 레이아웃을 구성할 수 있는 StackPanel, Canvas 같은 페널을 추가할 수 있습니다. 아래코드는 TabItem에 Button 컨트롤을 삽입한 것입니다. TabItem에 Button 컨트롤이 추가된 모습입니다. Grid 패널을 이용하여 여러가지 컨트롤을 배치 할 수 있습니다. 여러가지 컨트롤을 배치한 모습입니다. T.. 2008. 10. 25.
Silverlight 2 Controls Review - GridSplitter 그리드는 키보드 혹은 마우스등을 이용하여 행과 열의 크기를 자유자재로 조절할 수 있다는 큰 특징이 있습니다. 이것을 가능케하는 컨트롤이 바로 GridSplitter(그리드스플리터) 컨트롤입니다. GridSplitter는 HorizontalAlignment의 기본 값은 Right이고 VerticalAligument의 기본 값은 Stretch이기 때문에, 기본적으로 특정한 셀의 오른쪽에 도킹됩니다. GridSplitter의 올바른 사용은 적어도 한방향으로 Strect 정렬을 하는 것입니다. GridSplitter를 마우스를 좌우 또는 위아래로 드래그(drag)하게 되면 드래그한 GridSplitter의 주변의 Grid 및 셀안의 자식 엘리먼트 크기는 자동 조절됩니다. 그리드(Grid)의 열(Column)을 .. 2008. 10. 22.
Silverlight 2 Controls Review - Grid 2 Grid 패널의 행(Row)과 열(Column) 크기 조절 절대 크기 조절(abslute sizing) : RowDefinition에 Height나 ColumnDefinition에 Width의 값을 숫자로 설정한다는 것은 다른 컨트롤처럼 장치 독립적인 필셀을 사용한다는 의미와 같습니다. 절대 크기를 설정한 열과 행들을 일반적인 타입과 비교해 보면 그리드의 크기나 엘리먼트의 크기가 변해도 줄어들거나 늘어나지 않습니다. 아래코드는 임의로 행과 열에 필셀값을 할당하는 예제입니다. Xaml 자동 크기(autosizing) : 이전처럼 Height나 Width가 Auto로 설정되면 Silverlight와 WPF에서 기본 값이 설정된 것처럼 자식 엘리먼트들이 필요한 공간만 허용하고 더 이상 가질 수 없습니다. 행은.. 2008. 10. 18.
Silverlight 2 Controls Review - StackPanel StackPanel 컨트롤은 이용하기 간편하고 유용한 패널입니다. Stack이라는 단어가 쌓다라는 뜻이라서 자식 엘리먼트들이 추가되는 순서대로 누적됩니다. 가장 먼저 추가된 엘리먼트가 가장 밑으로 갑니다. 자식 엘리먼트에서 사용하는 첨부프로퍼티는 없으며 오직 오리엔테이션(Orientation) 프로퍼티를 사용해서 조정합니다.. Horizontal이나 Vertical 중 하나를 설정할 수 있고 기본값은 Vertical(세로)입니다. 아래 예제는 오리엔테이션(Orientation) 프로퍼티의 현재설정상태에 따라 버튼을 클릭하면 Horizontal이나 Vertical중 하나를 설정하는 예제입니다. Xaml C# using System; using System.Collections.Generic; using S.. 2008. 10. 17.
Silverlight 2 Controls Review - Canvas Canvas는 가장 기본적인 패널입니다. Canvas는 명시적인 좌표값을 이용해서 엘리먼트의 위치를 결정합니다. 그러나 오래된 UI 시스템과 다른 점이 한가지 있는데 Canvas는 사방을 자신의좌표값으로 사용할 수 있습니다. Canvas 는 Left/Top 첨부 프로퍼티를 가지고 있으며 이를 통해서 엘리먼트 위치를 조정할 수 있습니다. Xaml Canvas 패널안에 있는 자식 컨트롤은 Left/Top 첨부 프로퍼티를 이용하여 Canvas 내의 위치를 자유롭게 조절할 수 있습니다. Z-index 첨부 프로퍼티를 이용하여 Canvas 내의 자식컨트롤이 겹처 있을때 보이는 순서를 지정할 수있습니다. Canvas 내의 엘리먼트(자식컨트롤)의 Left/Top 첨부프로퍼티 값은 부모 컨트롤인 Canvas를 기준으로.. 2008. 10. 13.
Silverlight 2 Controls Review - HyperlinkButton HyperlinkButton 컨트롤은 웹의 특정 Url을 주어 Link연결해 주는 기능을 합니다. 기본적인 Xaml 구문입니다. NavigateUrl 은 Link 연결할 Url 값을 저정하고 TargetName는 Url을 Calll 할때 웹브라이저를 여는 프로퍼티입니다. TargetName = _blank, _media, _search = 창을 새로 뛰울때 TargetName = _parent, _self, _top, “” = 기존창에서 열때 HyperlinkButton 기능구현 방법 Xaml C# using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using Sys.. 2008. 10. 10.
Silverlight 2 Controls Review - ToggleButton ToggleButton 컨트롤은 2가지의 기능을 수행할때, 현재의 상태를 유지하거나 해제할때 사용합니다..Silverlight 1.x 버전때는 지원되지 않았으며 Silverlight 2에 새롭게 추가된 컨트롤입니다. 기존에는 주로 꼼수를 만들어 기능을 구현합니다. ToggleButton 컨트롤이 추가되면서 기존에 삽질해가며 만들었던 수고를 덜 수 있게 되었습니다. Xaml에서 ToggleButton 컨트롤의 기본적인 구문입니다. ToggleButton의 현재 눌려진 상태를 IsChecked로 체크하며 프로퍼티 값은 Bool이며 Ture, False 값을 줄 수 있습니다. 다음 예제는 ToggleButton의 IsChecked 프로퍼티를 이용하여 현재 ToggleButton의 상태를 True/False로 .. 2008. 10. 8.
Silverlight 2 Controls Review - Slider Slider 컨트롤은 어떠한 현재 진행이나 상태값을 보여주거나 직접 슬라이더의 value 값을 좌우로 조절하면서 값을 설정 하는데 사용하기도 합니다. 기본적인 Xaml 구문입니다. 주요프로퍼티는 Maximum, Minimum, Value입니다. Maximum는 최고값을, Minimum는 최저값을 설정합니다. 그리고 Value는 현재 값을 설정하거나 대입합니다. 다음 데모는 Red(빨간색), Green(녹색), Blue(파란색)을 대입하여 color picker 를 만드는 프로그램입니다. Xaml Code C# Code using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows.. 2008. 10. 7.
Silverlight 2 Controls Review - MediaElement MediaElement 컨트롤은 Silverlight 의 가장 큰 장점으로 이야기 하고 있는 멀티미디어 관련 프로그램을 제작하는데 있어 필수 컨트롤입니다. 비디오/오디오의 다양한 코덱을 지원합니다. 실버라이트 지원코덱은 여기(Supported Media Formats and Protocols in Silverlight)에서 확인하시기 바랍니다. 그리고 차후에는 차세대 코덱인 H.264 및 AAC 포맷을 지원한다고 합니다. 관련 내용은 공도님 블로그에 H.264 및 AAC 지원글을 참고하세요.Xaml에서 MediaElement 컨트롤의 기본 구문입니다. 주요프로퍼티를 보면 우선 Source는 재생할 미디어의 경로입니다. AutoPlay는 기본적으로 재생이 지정된 미디어의 자동재생 설정을 지정합니다. Vol.. 2008. 10. 4.
Silverlight 2 Controls Review - ListBox Listbox 은 항목을 리스트 형식으로 보여주는 컨트롤입니다. 기본적인 Xaml 디자인은 다음과 같습니다. Xaml에서 Data Binding 할 경우는 listBoxItem 태그를 사용합니다. C#에서 동적으로 항목(Item)을 추가, 삭제, 전체삭제 하는 방법은 아래코드와 같습니다. // 추가(Add) lstLation.Items.Add(txtAdd.Text); // 삭제(Remove) lstLation.Items.Remove("미국"); // 오브젝트명으로 삭제 lstLation.Items.RemoveAt(2); // 항목의 인덱스번호로 삭제 // 전체삭제 lstLation.Items.Clear(); ListBox는 Xaml에서 데이터를 바인딩할 수 있고 C#에서도 동적으로 데이터 바인딩이 가능합.. 2008. 10. 3.