Taedi's Blog (2012.04...) ::

Silverlight 2 Controls Review 강좌목록

Silverlight 2008/10/27 23:24

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight Toolkit 2008년 12월 버전 릴리즈 (0)	2008/12/10
Silverlight Tools(RC1) 한국어버전 출시 (2)	2008/11/25
2008 PDC에서 Silverlight Tools 및 Toolkit release & Themes 가 발표되었습니다. (2)	2008/10/29
Silverlight 2 Controls Review 강좌목록 (0)	2008/10/27
Silverlight 2 Controls Review - ProgressBar (0)	2008/10/27
Silverlight 2 Controls Review - TabControl (0)	2008/10/25
Silverlight 2 워터마크 컨트롤 (WatorMarked Text Box Control) (2)	2008/10/24
Silverlight 2 Controls Review - GridSplitter (0)	2008/10/22

Controls, Silverlight, Silverlight 2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/296

Silverlight 2 Controls Review - ProgressBar

Silverlight 2008/10/27 15:32

ProgressBar 컨트롤은 현재 프로그램의 로드되는 상태를 나타내며, 그림이나 동영상같은 멀티미디어 파일을 다운로드 또는 업로드 하는 현재 상태를 퍼센트로 보여줄 수 있습니다.

아래 예제는 동영상을 다운로드 하면서 진행상태를 보여주고 동영상을 재생을 재생을 합니다.

MediaElement, TextBlack, ProgressBar 컨트롤을 Xaml 코드뷰에서 추가해주거나 Blend에서 추가해줍니다. MediaElement는 다운로드한 동영상을 재생하고 TextBlack는 다운로드 되는 상태를 퍼센트로 보여줍니다.

Xaml

<UserControl x:Class="ControlTest17.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="290" Height="260">

<ProgressBar Margin="32,0,105,31" x:Name="pgsLoad" Minimum="0"

VerticalAlignment="Bottom" Height="19"/>

<TextBlock Height="19" HorizontalAlignment="Right" Margin="0,0,-8,31"

VerticalAlignment="Bottom" Width="97" Text="TextBlock"

TextWrapping="Wrap" x:Name="tbResult"/>

</Grid>

</UserControl>

C# Code

using System;

using System.Net;

using System.Windows.Controls;

namespace ControlTest17

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

WebClient webclient = new WebClient();

webclient.OpenReadAsync(new Uri("Silverlight.wmv",

UriKind.RelativeOrAbsolute));

webclient.DownloadProgressChanged += new

DownloadProgressChangedEventHandler(webclient_DownloadProgressChanged);

webclient.OpenReadCompleted +=

new OpenReadCompletedEventHandler(webclient_OpenReadCompleted);

}

void webclient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

{

if (e.Error == null)

{

try

{

mediaElement.SetSource(e.Result);

mediaElement.Play();

}

catch (Exception ex) {}

}

void webclient_DownloadProgressChanged(object sender,

DownloadProgressChangedEventArgs e)

{

pgsLoad.Value = e.ProgressPercentage;

tbResult.Text = e.ProgressPercentage.ToString() + "% Completed";

}

WebClient 클래스를 이용하여 웹에서 동영상 경로를 설정하고 DownloadProgressChanged 메소드는 다운로드 되고 있는 상태를 PregressBar, TextBlack에 다운로드 되고 있는 결과를 보여줍니다. ebclient_OpenReadCompleted 이벤트는 조건문을 통하여 다운로드 중 에러가 발생했는지 체크를 하고 에러가 없으면 결과값을 보여줍니다.

ControlTest17.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight Tools(RC1) 한국어버전 출시 (2)	2008/11/25
2008 PDC에서 Silverlight Tools 및 Toolkit release & Themes 가 발표되었습니다. (2)	2008/10/29
Silverlight 2 Controls Review 강좌목록 (0)	2008/10/27
Silverlight 2 Controls Review - ProgressBar (0)	2008/10/27
Silverlight 2 Controls Review - TabControl (0)	2008/10/25
Silverlight 2 워터마크 컨트롤 (WatorMarked Text Box Control) (2)	2008/10/24
Silverlight 2 Controls Review - GridSplitter (0)	2008/10/22
SilverlightContrib Controls 릴리즈 (0)	2008/10/21

Controls, ProgressBar, Silverlight, Silverlight 2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/295

Silverlight 2 Controls Review - TabControl

Silverlight 2008/10/25 21:59

TabControl은 여러 페이지 사이를 빠르게 전환하는데 유용한 컨트롤입니다. 기본적인 사용법은 아래 Xaml 코드와 같습니다.

<basics:TabControl Margin="50,50,55,0" UseLayoutRounding="True" Height="152" TabStripPlacement="Top" SelectedIndex="1"

VerticalAlignment="Top">

<basics:TabItem Header="Tab 1"><TextBlock Text="텝의 기초 1" /></basics:TabItem>

<basics:TabItem Header="Tab 2"> <TextBlock Text="텝의 기초 2" /></basics:TabItem>

<basics:TabItem Header="Tab 3"><TextBlock Text="텝의 기초 3" /></basics:TabItem>

<basics:TabItem Header="Tab 4"><TextBlock Text="텝의 기초 4" /></basics:TabItem>

</basics:TabControl>

기본적인 TabControl을 생성했을때 보여지는 결과입니다. 4개의 TabItem이 들어가 있습니다.

ControlTest16 - TabControl 기초.zip

TabControl 안에는 독립적으로 TabItem 컨트롤이 존재하며 TabItem 안에는 Button이나 TextBox 같은 Input 관련 컨트롤이나 레이아웃을 구성할 수 있는 StackPanel, Canvas 같은 페널을 추가할 수 있습니다. 아래코드는 TabItem에 Button 컨트롤을 삽입한 것입니다.

<basics:TabItem Header="Tab 1" >

</basics:TabItem>

TabItem에 Button 컨트롤이 추가된 모습입니다.

Grid 패널을 이용하여 여러가지 컨트롤을 배치 할 수 있습니다.

<basics:TabItem Header="Tab 1" >

</basics:TabItem>

여러가지 컨트롤을 배치한 모습입니다.

Tab의 타이틀에 이미지(또는 아이콘)를 집어넣을 수 있습니다. StackPanel 컨트롤을 추가하고 자식 엘리먼트로 이미지 컨트롤을 이용해 Source 프로퍼티에 이미지경로를 지정합니다.

<basics:TabItem Width="100">

<basics:TabItem.Header>

</StackPanel>

</basics:TabItem.Header>

</basics:TabItem>

텝의 타이틀에 이미지를 추가한 모습입니다.

텝의 타이틀에 이미지 추가하는 것처럼 컨텐츠에 이미지를 추가할 수 있습니다. 이미지 컨트롤의 Source 프로퍼티에 인터넷에 있는 그림의 경로를 지정할 수 있습니다.

<basics:TabItem Header="Tab 4">

</StackPanel>

</basics:TabItem>

웹의 경로를 지정하여 이미지를 출력한 모습입니다.

Xaml Code

<basics:TabControl Margin="50,50,55,0" UseLayoutRounding="True" TabStripPlacement="Top" SelectedIndex="1"

VerticalAlignment="Top" Height="152" >

<basics:TabItem Header="Tab 1" >

</basics:TabItem>

<basics:TabItem Header="Tab 2">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</basics:TabItem>

<basics:TabItem Width="100">

<basics:TabItem.Header>

</StackPanel>

</basics:TabItem.Header>

</basics:TabItem>

<basics:TabItem Header="Tab 4">

</StackPanel>

</basics:TabItem>

</basics:TabControl>

<basics:TabControl Margin="50,0,55,28" UseLayoutRounding="True" TabStripPlacement="Top"

SelectedIndex="1" VerticalAlignment="Bottom" Height="127" x:Name="Tab2">

</basics:TabControl>

텝의 전환은 텝의 타이틀을 클릭함으로서 가능하고 텝의 위치는 Dock 타입이며 TabStripPlacement 프로퍼티를 이용하면 Top, Bottom, Left, Right 4가지 방향으로 배치 할 수 있습니다. 또 텝을 삭제하고 추가할 수 있습니다.

다음 코드는 텝을 사방으로 전환하고, 추가, 삭제할 수 있는 예제입니다.

Xaml Code

<basics:TabControl Margin="50,0,55,28" UseLayoutRounding="True" TabStripPlacement="Top"

SelectedIndex="1" VerticalAlignment="Bottom" Height="127" x:Name="Tab2">

</basics:TabControl>

<Button Height="26" HorizontalAlignment="Right" Margin="0,0,55,195"

VerticalAlignment="Bottom" Width="93" Content="텝 삭제"

x:Name="TabItemDel" Click="TabItemDel_Click"/>

</ComboBox>

<Button Margin="47,0,0,195" Content="텝 추가" Height="26"

VerticalAlignment="Bottom" HorizontalAlignment="Left"

Width="93" x:Name="TabItemAdd" Click="TabItemAdd_Click"/>

C# Code

/// <summary>

/// TabItem Add

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void TabItemAdd_Click(object sender, RoutedEventArgs e)

{

// Tab Create

TabItem tabitem = new TabItem();

int tcnt = 0;

for (int i = 0; i<Tab2.Items.Count; i++)

{

tcnt = tcnt + 1;

tabitem.Header = "Tab " + tcnt;

}

Tab2.Items.Add(tabitem);

}

/// <summary>

/// TabItem Delete

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void TabItemDel_Click(object sender, RoutedEventArgs e)

{

int tabcnt = Tab2.Items.Count;

if (tabcnt > 0)

{

Tab2.Items.RemoveAt(tabcnt - 1);

}

else

{

MessageBox.Show("삭제할 텝이 없습니다.");

return;

}

/// <summary>

/// TabItem Orientation

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void ComboBox_SelectionChanged(object sender,

SelectionChangedEventArgs e)

{

int cboitem = cboOrientation.SelectedIndex;

if (cboitem < 0)

return;

switch (cboitem)

{

case 0:

Tab2.TabStripPlacement = Dock.Top;

break;

case 1:

Tab2.TabStripPlacement = Dock.Bottom;

break;

case 2:

Tab2.TabStripPlacement = Dock.Left;

break;

case 3:

Tab2.TabStripPlacement = Dock.Right;

break;

}

ControlTest16.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

2008 PDC에서 Silverlight Tools 및 Toolkit release & Themes 가 발표되었습니다. (2)	2008/10/29
Silverlight 2 Controls Review 강좌목록 (0)	2008/10/27
Silverlight 2 Controls Review - ProgressBar (0)	2008/10/27
Silverlight 2 Controls Review - TabControl (0)	2008/10/25
Silverlight 2 워터마크 컨트롤 (WatorMarked Text Box Control) (2)	2008/10/24
Silverlight 2 Controls Review - GridSplitter (0)	2008/10/22
SilverlightContrib Controls 릴리즈 (0)	2008/10/21
Silverlight 2 Controls Review - Grid 2 (1)	2008/10/18

Controls, Silverlight, Silverlight 2, TabControl

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/291

Silverlight 2 Controls Review - GridSplitter

Silverlight 2008/10/22 11:04

그리드는 키보드 혹은 마우스등을 이용하여 행과 열의 크기를 자유자재로 조절할 수 있다는 큰 특징이 있습니다. 이것을 가능케하는 컨트롤이 바로 GridSplitter(그리드스플리터) 컨트롤입니다.

GridSplitter는 HorizontalAlignment의 기본 값은 Right이고 VerticalAligument의 기본 값은 Stretch이기 때문에, 기본적으로 특정한 셀의 오른쪽에 도킹됩니다. GridSplitter의 올바른 사용은 적어도 한방향으로 Strect 정렬을 하는 것입니다.

GridSplitter를 마우스를 좌우 또는 위아래로 드래그(drag)하게 되면 드래그한 GridSplitter의 주변의 Grid 및 셀안의 자식 엘리먼트 크기는 자동 조절됩니다.

그리드(Grid)의 열(Column)을 지정합니다. <ColumnDefinition Width="5"/>는(은) GridSplitter가 위치할 셀입니다.

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

그리드(Grid)의 행(Row)을 지정합니다. <RowDefinition Height="5" />는(은) GridSplitter가 위치할 셀입니다.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

그리드의 자식 엘리먼트 입니다

GridSplitter 입니다. GridSplitter 역시 Grid의 자식엘리먼트로 위치하며 Rectangle의 사이사이에 들어갑니다. ColumnSpan 프로퍼티는 GridSplitter가 속한 행 또는 열을 합쳐서 하나의 셀로 사용할 수 있도록 하여 GridSplitter를 마우스도 드래그 할때 어느 위치에서든 크기 조절을 가능토록 합니다. ShowsPreview 프로퍼티는 크기를 조절할 때 이웃한 셀과 자식엘리먼트의 크기가 자동으로 조절되면서 변경된 크기를 미리 보여줍니다. HorizontalAlignment와 VerticalAlignment의 프로퍼티 값은 Stretch를 주어 GridSplitter가 들어간 셀크기 만큼 GridSplitter크기를 채우겠다는 뜻입니다.

<basics:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

<basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="0" Grid.Column="3" Grid.RowSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="0" Grid.Column="5" Grid.RowSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

Xaml

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="ControlTest15.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="340" Height="340">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<basics:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"/>

<basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="0" Grid.Column="3" Grid.RowSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="0" Grid.Column="5" Grid.RowSpan="7"

ShowsPreview="True" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" />

</Grid>

</UserControl>

ControlTest15.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Controls Review - ProgressBar (0)	2008/10/27
Silverlight 2 Controls Review - TabControl (0)	2008/10/25
Silverlight 2 워터마크 컨트롤 (WatorMarked Text Box Control) (2)	2008/10/24
Silverlight 2 Controls Review - GridSplitter (0)	2008/10/22
SilverlightContrib Controls 릴리즈 (0)	2008/10/21
Silverlight 2 Controls Review - Grid 2 (1)	2008/10/18
Silverlight 2 Controls Review - Grid 1 (0)	2008/10/18
Silverlight 2 RC1 Tool 한국어버전 출시 (0)	2008/10/17

Controls, GridSplitter, Silverlight, Silverlight 2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/271

Silverlight 2 Controls Review - Grid 2

Silverlight 2008/10/18 23:36

Grid 패널의 행(Row)과 열(Column) 크기 조절

절대 크기 조절(abslute sizing) : RowDefinition에 Height나 ColumnDefinition에 Width의 값을 숫자로 설정한다는 것은 다른 컨트롤처럼 장치 독립적인 필셀을 사용한다는 의미와 같습니다. 절대 크기를 설정한 열과 행들을 일반적인 타입과 비교해 보면 그리드의 크기나 엘리먼트의 크기가 변해도 줄어들거나 늘어나지 않습니다.

아래코드는 임의로 행과 열에 필셀값을 할당하는 예제입니다.

Xaml

<UserControl x:Class="ControlTest13.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</UserControl>

자동 크기(autosizing) : 이전처럼 Height나 Width가 Auto로 설정되면 Silverlight와 WPF에서 기본 값이 설정된 것처럼 자식 엘리먼트들이 필요한 공간만 허용하고 더 이상 가질 수 없습니다. 행은 엘리먼트 중에서 가장 높이가 큰 값을 설정되고, 열은 엘리먼트 중 가장 넓은 값이 설정됩니다. 지역화나 다른 언어 환경때문에 짤릴 염려가 있는 텍스트가 포함되었다면 절대 크기를 설정하는 것보다 이 값을 설정하는 것이 더 좋은 선택입니다.

아래 코드는 RowDefinition Height와 ColumnDefinition Width의 크기를 Auto를 지정하여 자식 엘리먼트의 크기에 Grid 패널의 셀크기를 자동으로 맞추는 예제입니다.

Xaml

<UserControl x:Class="ControlTest13.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</UserControl>

비율 기반 크기(propositional sizing or star sizing) : 이용 가능한 공간을 동일한 비율이나 크기로 나누는 특별한 방법입니다. 비율로 지정된 행이나 열을 Grid의 크기가 변하면 그에 따라 줄어들거나 늘어납니다.

다음에 나오는 코드들은 특별한 값(*:아스터리스크)을 사용하여 일정크기의 비율만큼 크기를 지정합니다.

1) 여러개의 RowDefinition Height와 ColumnDefinition Width의 크기를 *(아스트리스크)를 지정하는 경우

Xaml

<UserControl x:Class="ControlTest13.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</TextBlock>

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Grid>

</UserControl>

나머지 Grid의 셀들은 자동으로 같은 크기로 지정됩니다.

2) RowDefinition Height와 ColumnDefinition Width의 크기를 더 크게 가지려면 단순히 *(아스트리스크)를 사용하는 것보다 2* 또는 2.5*처럼 그 앞에 계수를 사용할 수 있습니다. ColumnDefinition Width를 2*로 설정하면 *를 가진 열보다 폭이 정확히 두 배가 됩니다.

여기서 남아 있는 공간(remaning space) 이라는 의미는 Grid의 높이나 폭에서 절대 크기나 자동 크기로 설정된 값을 뺀 것입니다.

Xaml

<UserControl x:Class="ControlTest13.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</TextBlock>

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Grid>

</UserControl>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 워터마크 컨트롤 (WatorMarked Text Box Control) (2)	2008/10/24
Silverlight 2 Controls Review - GridSplitter (0)	2008/10/22
SilverlightContrib Controls 릴리즈 (0)	2008/10/21
Silverlight 2 Controls Review - Grid 2 (1)	2008/10/18
Silverlight 2 Controls Review - Grid 1 (0)	2008/10/18
Silverlight 2 RC1 Tool 한국어버전 출시 (0)	2008/10/17
Silverlight 2 Controls Review - StackPanel (0)	2008/10/17
Silverlight 2 RC1(RTW) 설치(VS2008 영문버전 기준) (0)	2008/10/14

Controls, GRID, Silverlight, Silverlight 2

트랙백 0개 , 댓글 1개

http://www.taedi.kr/trackback/263

세티 2008/10/21 15:32 ADDR EDIT/DEL REPLY
잘 보고 가여~~ ㅎㅎ

Silverlight 2 Controls Review - StackPanel

Silverlight 2008/10/17 20:20

StackPanel 컨트롤은 이용하기 간편하고 유용한 패널입니다. Stack이라는 단어가 쌓다라는 뜻이라서 자식 엘리먼트들이 추가되는 순서대로 누적됩니다. 가장 먼저 추가된 엘리먼트가 가장 밑으로 갑니다. 자식 엘리먼트에서 사용하는 첨부프로퍼티는 없으며 오직 오리엔테이션(Orientation) 프로퍼티를 사용해서 조정합니다.. Horizontal이나 Vertical 중 하나를 설정할 수 있고 기본값은 Vertical(세로)입니다.

아래 예제는 오리엔테이션(Orientation) 프로퍼티의 현재설정상태에 따라 버튼을 클릭하면 Horizontal이나 Vertical중 하나를 설정하는 예제입니다.

Xaml

<UserControl x:Class="ControlTest12.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="821" Height="300">

<Button Height="29" Width="64" Content="정렬 전환" x:Name="btnOrientation"

Click="btnOrientation_Click"/>

</StackPanel>

</UserControl>

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace ControlTest12

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

}

private void btnOrientation_Click(object sender, RoutedEventArgs e)

{

if (stackOri.Orientation == Orientation.Vertical)

{

stackOri.Orientation = Orientation.Horizontal;

btnOrientation.Content = "가로정렬";

}

else

{

stackOri.Orientation = Orientation.Vertical;

btnOrientation.Content = "세로정렬";

}

ControlTest12.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Controls Review - Grid 2 (1)	2008/10/18
Silverlight 2 Controls Review - Grid 1 (0)	2008/10/18
Silverlight 2 RC1 Tool 한국어버전 출시 (0)	2008/10/17
Silverlight 2 Controls Review - StackPanel (0)	2008/10/17
Silverlight 2 RC1(RTW) 설치(VS2008 영문버전 기준) (0)	2008/10/14
Silverlight 2 Released!! - x줄타게 기다렸습니다. (0)	2008/10/14
Silverlgith 2 Release (0)	2008/10/14
Silverlight 2 Controls Review - Canvas (0)	2008/10/13

Controls, Silverlight, Silverlight 2, StackPanel

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/261

Silverlight 2 Controls Review - Canvas

Silverlight 2008/10/13 18:39

Canvas는 가장 기본적인 패널입니다. Canvas는 명시적인 좌표값을 이용해서 엘리먼트의 위치를 결정합니다. 그러나 오래된 UI 시스템과 다른 점이 한가지 있는데 Canvas는 사방을 자신의좌표값으로 사용할 수 있습니다.

Canvas 는 Left/Top 첨부 프로퍼티를 가지고 있으며 이를 통해서 엘리먼트 위치를 조정할 수 있습니다.

Xaml

<UserControl x:Class="ControlTest11.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Canvas.Background>

</LinearGradientBrush>

</Canvas.Background>

<TextBox Height="24" Width="117" Canvas.Left="15" Canvas.Top="12"

Text="TextBox" TextWrapping="Wrap"/>

<Button Height="25" Width="72" Canvas.Left="152" Canvas.Top="11"

Content="Button"/>

<TextBox Width="117" Text="TextBox" TextWrapping="Wrap"

Height="24" Canvas.Left="62" Canvas.Top="127"/>

<Button Content="Button" Height="25" Width="72" Canvas.Left="199"

Canvas.Top="126"/>

<TextBox Width="117" Text="TextBox" TextWrapping="Wrap"

Height="24" Canvas.Left="124" Canvas.Top="222"/>

<Button Content="Button" Height="25" Width="72" Canvas.Left="261"

Canvas.Top="221"/>

</Canvas>

</Grid>

</UserControl>

Canvas 패널안에 있는 자식 컨트롤은 Left/Top 첨부 프로퍼티를 이용하여 Canvas 내의 위치를 자유롭게 조절할 수 있습니다.

Z-index 첨부 프로퍼티를 이용하여 Canvas 내의 자식컨트롤이 겹처 있을때 보이는 순서를 지정할 수있습니다.

<UserControl x:Class="ControlTest11.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Canvas.Background>

</LinearGradientBrush>

</Canvas.Background>

<Rectangle Height="97" Width="135.612" Canvas.Left="42" Canvas.Top="40"

Fill="#FFE89696" Stroke="#FF000000" Canvas.ZIndex="1"/>

<Ellipse Height="108" Width="108" Canvas.Left="125" Canvas.Top="94"

Fill="#FFBAE896" Stroke="#FF000000" />

</Canvas>

</Grid>

</UserControl>

Canvas 내의 엘리먼트(자식컨트롤)의 Left/Top 첨부프로퍼티 값은 부모 컨트롤인 Canvas를 기준으로 위치가 정해집니다.

기본적으로 사각형이 뒤에 있었고 원이 앞에 위치해 있었습니다. 사각형에 Canvas.ZIndex="1" 첨부프로퍼티에 1을 주면 사각형이 앞으로 위치하게 됩니다.

순서는 한 번 정해지면 고정되는 것이 아니고, 패너러 클래스를 상속받은 모든 클래스들은 ZIndex 첨부프로퍼티를 이용해서 자식 엘리먼트의 순서를 마음대로 저정할 수 있슶니다. Zindex는 기본값이 0이며 음수일 수도 있습니다. 큰 값을 가진 엘리먼트가 작은 값을 가진 엘리먼트보다 상위에서 렌더링되기 때문에 최소값을 가진 엘리먼트는 가장 밑에 보이고 최대값을 가진 엘리먼트가 가장 위에 보입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 RC1(RTW) 설치(VS2008 영문버전 기준) (0)	2008/10/14
Silverlight 2 Released!! - x줄타게 기다렸습니다. (0)	2008/10/14
Silverlgith 2 Release (0)	2008/10/14
Silverlight 2 Controls Review - Canvas (0)	2008/10/13
Silverlight 2 Controls Review - Border (0)	2008/10/11
Silverlight 2 Controls Review - HyperlinkButton (0)	2008/10/10
Silverlight 2 Controls Review - ToggleButton (0)	2008/10/08
Silverlight DeepZoom + Virtual Earth (0)	2008/10/08

Canvas, Controls, Silverlight, Silverlight2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/260

Silverlight 2 Controls Review - Border

Silverlight 2008/10/11 09:59

Border 컨트롤은 다른 컨트롤의 외곽에 경계를 그어주는 역활을 합니다. 이미지 경계에 외곽선을 주어 돋보이게 할 수도 있고 Button, TextBox 컨트롤등을 프로그램내에서 동일 기능 하는 컨트롤끼리 묶어서 외곽선을 표시해 줄 수도 있습니다.

기본적인 Xaml 구문입니다.

<Border x:Name="border" BorderThickness="4" Margin="33,34,36,38"

BorderBrush="Black" Width="409" Height="250"/>

BorderThickness는 Border의 외곽선 두께를 지정합니다. BorderBrush는 색을 지정하며, Width는 가로길이 Height는 세로 길이를 지정합니다.

Border의 BorderBrush에 그라데이션(Gradatikon) 효과를 줄 수 있습니다.

<Border.BorderBrush>

</LinearGradientBrush>

</Border.BorderBrush>

</Border>

Border에 Background를 줄 수 있습니다.

<Border.Background>

<ImageBrush.ImageSource>

</ImageBrush.ImageSource>

</ImageBrush>

</Border.Background>

</Border>

</Grid>

ImageBrush의 Stretch 프로퍼티는 Background Image를 Border의 외각선에 맞추는 설정을 합니다.

BitmapImage의 UriSource 프로퍼티는 이미지의 경로를 지정합니다. 웹에 있는 이미지의 Url로 지정이 가능하며 웹서버의 로컬에 있는 이미지도 가져올 수 있습니다.

Border에 CornerRadius 프로퍼티를 이용하여 Round 효과를 줄 수 있습니다.

<Border x:Name="border" BorderThickness="4" Margin="33,34,36,38" Width="409" Height="250"

BorderBrush="Black" CornerRadius="10" />

Border을 컨트롤을 이용하여 다양한 효과를 얻어낼 수 있으며, Silverlight에서 제공되는 기본적인 컨트롤의 믿믿한 디자인에 Style효과를 줄 수도 있지만, Border을 이용하여 간단하게 효과를 줄 수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Released!! - x줄타게 기다렸습니다. (0)	2008/10/14
Silverlgith 2 Release (0)	2008/10/14
Silverlight 2 Controls Review - Canvas (0)	2008/10/13
Silverlight 2 Controls Review - Border (0)	2008/10/11
Silverlight 2 Controls Review - HyperlinkButton (0)	2008/10/10
Silverlight 2 Controls Review - ToggleButton (0)	2008/10/08
Silverlight DeepZoom + Virtual Earth (0)	2008/10/08
Silverlight 2 Controls Review - Slider (0)	2008/10/07

border, Controls, Silverlight, Silverlight2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/257

Silverlight 2 Controls Review - HyperlinkButton

Silverlight 2008/10/10 17:04

HyperlinkButton 컨트롤은 웹의 특정 Url을 주어 Link연결해 주는 기능을 합니다.

기본적인 Xaml 구문입니다. NavigateUrl 은 Link 연결할 Url 값을 저정하고 TargetName는 Url을 Calll 할때 웹브라이저를 여는 프로퍼티입니다.

TargetName = _blank, _media, _search = 창을 새로 뛰울때
TargetName = _parent, _self, _top, “” = 기존창에서 열때

<HyperlinkButton x:Name="hyperBlog" NavigateUri="http://www.taedi.kr

TargetName="_blank" "/>

HyperlinkButton 기능구현 방법

Xaml

<UserControl x:Class="ControlTest10.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="260" Height="160">

<HyperlinkButton Margin="17,19,0,0" VerticalAlignment="Top" Height="23"

Content="Naver" x:Name="hyperNamver"

HorizontalAlignment="Left" Width="113"

NavigateUri="http://www.naver.com" TargetName="_blank" />

<HyperlinkButton Margin="17,49,0,0" x:Name="hyperDaum" Content="Daum"

Width="113" HorizontalAlignment="Left"

NavigateUri="http://www.daum.com" TargetName="_blank"

Height="23" VerticalAlignment="Top"/>

<HyperlinkButton Margin="16,78,0,59" x:Name="hyperGoogle" Content="Google"

HorizontalAlignment="Left" Width="113"

NavigateUri="http://www.google.co.kr" TargetName="_blank"/>

<HyperlinkButton Margin="17,0,0,30" x:Name="hyperBlog"

Content="Blog" HorizontalAlignment="Left" Width="113"

NavigateUri="http://www.taedi.kr" TargetName="_blank"

VerticalAlignment="Bottom" Height="23"/>

</Grid>

</UserControl>

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace ControlTest10

{

public partial class Page : UserControl

{

private HyperlinkButton hyperNaver;

private HyperlinkButton hyperDaum;

private HyperlinkButton hyperGoogle;

private HyperlinkButton hyperBlog;

public Page()

{

InitializeComponent();

hyperNaver = new HyperlinkButton();

hyperDaum = new HyperlinkButton();

hyperGoogle = new HyperlinkButton();

hyperBlog = new HyperlinkButton();

hyperNaver.Click += new RoutedEventHandler(hyperNaver_Click);

hyperDaum.Click += new RoutedEventHandler(hyperDaum_Click);

hyperGoogle.Click += new RoutedEventHandler(hyperGoogle_Click);

hyperBlog.Click += new RoutedEventHandler(hyperBlog_Click);

hyperNaver.Margin = new Thickness(17, 0, 0, 30);

hyperNaver.Content = "Naver";

hyperNaver.Height = 27;

hyperNaver.Width = 113;

hyperNaver.VerticalAlignment = VerticalAlignment.Top;

hyperNaver.HorizontalAlignment = HorizontalAlignment.Left;

hyperDaum.Margin = new Thickness(17, 25, 0, 0);

hyperDaum.Content = "Daum";

hyperDaum.Height = 27;

hyperDaum.Width = 113;

hyperDaum.VerticalAlignment = VerticalAlignment.Top;

hyperDaum.HorizontalAlignment = HorizontalAlignment.Left;

hyperGoogle.Margin = new Thickness(17, 50, 0, 0);

hyperGoogle.Content = "Google";

hyperGoogle.Height = 27;

hyperGoogle.Width = 113;

hyperGoogle.VerticalAlignment = VerticalAlignment.Top;

hyperGoogle.HorizontalAlignment = HorizontalAlignment.Left;

hyperBlog.Margin = new Thickness(16, 75, 0, 59);

hyperBlog.Content = "Blog";

hyperBlog.Height = 27;

hyperBlog.Width = 113;

hyperBlog.VerticalAlignment = VerticalAlignment.Top;

hyperBlog.HorizontalAlignment = HorizontalAlignment.Left;

this.LayoutRoot.Children.Add(hyperNaver);

this.LayoutRoot.Children.Add(hyperDaum);

this.LayoutRoot.Children.Add(hyperGoogle);

this.LayoutRoot.Children.Add(hyperBlog);

}

void hyperNaver_Click(object sender, RoutedEventArgs e)

{

hyperNaver.NavigateUri = new Uri("http://www.naver.com");

hyperNaver.TargetName = "_Blank";

}

void hyperDaum_Click(object sender, RoutedEventArgs e)

{

hyperDaum.NavigateUri = new Uri("http://www.daum.net");

hyperDaum.TargetName = "_Blank";

}

void hyperGoogle_Click(object sender, RoutedEventArgs e)

{

hyperGoogle.NavigateUri = new Uri("http://www.google.co.kr");

hyperGoogle.TargetName = "_Blank";

}

void hyperBlog_Click(object sender, RoutedEventArgs e)

{

hyperBlog.NavigateUri = new Uri("http://www.taedi.kr");

hyperBlog.TargetName = "_Blank";

}

HyperLinkButton 변수를 선언합니다. 그리고 Page() 생성자에서 HyperLinkButton 을 그리기 위한 각 프로퍼티를 선언하고, Click 이벤트를 선언합니다.

각각 선언된 이벤트안에는 특정 링크를 연결하고TargetName를 지정합니다.

Xaml로 코딩하는것 보다 C#에서 동적으로 HyperLinkButton 을 만드는 것이 코드량이 훨씬 많지요.. 이럴땐 다이렉트로 매번 같은 작업을 반복하는 것보다 사용자 정의 컽트롤로 HyperLinkButton을 만든다음 그것을 가져와 사용하는 편이 코드의 중복을 줄일 수 있고 효율적인 코딩작업을 할 수 있습니다

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlgith 2 Release (0)	2008/10/14
Silverlight 2 Controls Review - Canvas (0)	2008/10/13
Silverlight 2 Controls Review - Border (0)	2008/10/11
Silverlight 2 Controls Review - HyperlinkButton (0)	2008/10/10
Silverlight 2 Controls Review - ToggleButton (0)	2008/10/08
Silverlight DeepZoom + Virtual Earth (0)	2008/10/08
Silverlight 2 Controls Review - Slider (0)	2008/10/07
Silverlight 2 RC0 버전 Fullscreen 테스트 (0)	2008/10/06

Controls, HyperlinkButton, Silverlight, Silverlight2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/259

Silverlight 2 Controls Review - ToggleButton

Silverlight 2008/10/08 04:56

ToggleButton 컨트롤은 2가지의 기능을 수행할때, 현재의 상태를 유지하거나 해제할때 사용합니다..Silverlight 1.x 버전때는 지원되지 않았으며 Silverlight 2에 새롭게 추가된 컨트롤입니다. 기존에는 주로 꼼수를 만들어 기능을 구현합니다. ToggleButton 컨트롤이 추가되면서 기존에 삽질해가며 만들었던 수고를 덜 수 있게 되었습니다.

Xaml에서 ToggleButton 컨트롤의 기본적인 구문입니다.

ToggleButton의 현재 눌려진 상태를 IsChecked로 체크하며 프로퍼티 값은 Bool이며 Ture, False 값을 줄 수 있습니다.

다음 예제는 ToggleButton의 IsChecked 프로퍼티를 이용하여 현재 ToggleButton의 상태를 True/False로 나타냅니다.

Xaml Code

<UserControl x:Class="ControlTest8.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<ToggleButton Margin="115,44,117,0" VerticalAlignment="Top" Height="33"

x:Name="tgMessage" Content="Toggle" Click="tgMessage_Click"

IsChecked="True"/>

</Grid>

</UserControl>

C# Code

using System.Windows;

using System.Windows.Controls;

namespace ControlTest8

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

}

private void tgMessage_Click(object sender, RoutedEventArgs e)

{

if (tgMessage.IsChecked == true)

MessageBox.Show("Silverlight 2 ToggleButton Good");

else

MessageBox.Show("Silverlight 2 ToggleButton Bed");

}

mediaelement_CurrentStateChanged 이벤트는 현재 동영상이 재생되는지 체크하여 Timer의 Start(), Stop() 함수를 호출합니다.

IsChecked 프로퍼티 값이 True면 현재 Click 유지되는 상태입니다.

ControlTest8.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Controls Review - Canvas (0)	2008/10/13
Silverlight 2 Controls Review - Border (0)	2008/10/11
Silverlight 2 Controls Review - HyperlinkButton (0)	2008/10/10
Silverlight 2 Controls Review - ToggleButton (0)	2008/10/08
Silverlight DeepZoom + Virtual Earth (0)	2008/10/08
Silverlight 2 Controls Review - Slider (0)	2008/10/07
Silverlight 2 RC0 버전 Fullscreen 테스트 (0)	2008/10/06
Silverlight 2 RC0 Developer Runtime이 다시 릴리즈 되었습니다. (0)	2008/10/06

Controls, Silverlight, Silverlight2, ToggleButton

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/256

Silverlight 2 Controls Review - Slider

Silverlight 2008/10/07 09:48

Slider 컨트롤은 어떠한 현재 진행이나 상태값을 보여주거나 직접 슬라이더의 value 값을 좌우로 조절하면서 값을 설정 하는데 사용하기도 합니다.

기본적인 Xaml 구문입니다.

주요프로퍼티는 Maximum, Minimum, Value입니다. Maximum는 최고값을, Minimum는 최저값을 설정합니다. 그리고 Value는 현재 값을 설정하거나 대입합니다.

다음 데모는 Red(빨간색), Green(녹색), Blue(파란색)을 대입하여 color picker 를 만드는 프로그램입니다.

Xaml Code

<UserControl x:Class="ControlTest7.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="455" Height="201">

<Slider Margin="205.88,39,67.12,0" VerticalAlignment="Top" Height="27"

Maximum="255" ValueChanged="sdrRed_ValueChanged" x:Name="sdrRed"

Value="-2" SmallChange="0.1"/>

<Slider Margin="205.88,0,67.12,41" Maximum="255" x:Name="sdrBlue"

ValueChanged="sdrBlue_ValueChanged" SmallChange="0.1" Height="27"

VerticalAlignment="Bottom" />

<Slider Margin="205.124,86,67.876,88" Maximum="255" x:Name="sdrGreen"

ValueChanged="sdrGreen_ValueChanged" SmallChange="0.1"/>

<TextBox Height="22" HorizontalAlignment="Right" Margin="0,41,19,0"

VerticalAlignment="Top" Width="38" Text=""

TextWrapping="Wrap" x:Name="txtRed"/>

<TextBox HorizontalAlignment="Right" Margin="0,0,19,44" Width="38"

Text="" TextWrapping="Wrap" x:Name="txtBlue"

VerticalAlignment="Bottom" Height="22"/>

<TextBox HorizontalAlignment="Right" Margin="0,90,19,89" Width="38"

Text="" TextWrapping="Wrap" x:Name="txtGreen"/>

<Rectangle HorizontalAlignment="Left" Margin="14,18,0,12" Width="171"

Fill="#FFFFFFFF" Stroke="#00000000" x:Name="rect"

StrokeThickness="1" />

</Grid>

</UserControl>

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace ControlTest7

{

public partial class Page : UserControl

{

SolidColorBrush rectColor;

// 현재 칼라 변수값 지정

private byte bRed;

private byte bGreen;

private byte bBlue;

public Page()

{

InitializeComponent();

}

/// <summary>

/// Red Color

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void sdrRed_ValueChanged(object sender,

RoutedPropertyChangedEventArgs<double> e)

{

txtRed.Text = Math.Round(sdrRed.Value, 0).ToString();

bRed = byte.Parse(txtRed.Text);

MixColor(255, byte.Parse(txtRed.Text), bGreen, bBlue);

}

/// <summary>

/// /// Green Color

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void sdrGreen_ValueChanged(object sender,

RoutedPropertyChangedEventArgs<double> e)

{

txtGreen.Text = Math.Round(sdrGreen.Value, 0).ToString();

bGreen = byte.Parse(txtGreen.Text);

MixColor(255, bRed, byte.Parse(txtGreen.Text), bBlue);

}

/// <summary>

/// Blue Color

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void sdrBlue_ValueChanged(object sender,

RoutedPropertyChangedEventArgs<double> e)

{

txtBlue.Text = Math.Round(sdrBlue.Value, 0).ToString();

bBlue = byte.Parse(txtBlue.Text);

MixColor(255, bRed, bGreen, byte.Parse(txtBlue.Text));

}

/// <summary>

/// 칼라 조합 메소드

/// </summary>

/// <param name="a"></param>

/// <param name="red"></param>

/// <param name="green"></param>

/// <param name="blue"></param>

public void MixColor(byte a, byte red, byte green, byte blue)

{

rectColor = new SolidColorBrush(Color.FromArgb(a, red, green, blue));

rect.Fill = rectColor;

}

mediaelement_CurrentStateChanged 이벤트는 현재 동영상이 재생되는지 체크하여 Timer의 Start(), Stop() 함수를 호출합니다.

TextBox에 출력되는 값을 Byte로 변환하여 칼라를 혼합해주는 MixColor() 메소드에 대입해줍니다.

Color클래스의 FromArgb() 메소드는 Byte형으로 Alpha, Red, Green, Blue 순으로 매개변수를 대입합니다. 아래표는 Color 생성자에 관한 표입니다.

Color color;
color = new Color(); color.R = 255; color.G = 0; color.B = 0; color.A = 255;	기본생성자 R,G,B,A 프로퍼티를 수동으로 설정
color = Color.FromRgb(255, 0, 0);	프로퍼티 : Byte R, Byte G, Byte B
color = Color.FromArgb(255, 255, 0, 0);	프로퍼티 : Byte Alpha, Byte R, Byte G, Byte B
color = Colors.Red;	미리 정의된 Colors클래스의 정적 프로퍼티

ControlTest7.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Controls Review - HyperlinkButton (0)	2008/10/10
Silverlight 2 Controls Review - ToggleButton (0)	2008/10/08
Silverlight DeepZoom + Virtual Earth (0)	2008/10/08
Silverlight 2 Controls Review - Slider (0)	2008/10/07
Silverlight 2 RC0 버전 Fullscreen 테스트 (0)	2008/10/06
Silverlight 2 RC0 Developer Runtime이 다시 릴리즈 되었습니다. (0)	2008/10/06
Silverlight 2 Controls Review - MediaElement (0)	2008/10/04
Silverlight 2 Controls Review - ListBox (0)	2008/10/03

Controls, Silverlight, Silverlight2, slider

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/249

Silverlight 2 Controls Review - MediaElement

Silverlight 2008/10/04 19:51

MediaElement 컨트롤은 Silverlight 의 가장 큰 장점으로 이야기 하고 있는 멀티미디어 관련 프로그램을 제작하는데 있어 필수 컨트롤입니다.

비디오/오디오의 다양한 코덱을 지원합니다. 실버라이트 지원코덱은 여기(Supported Media Formats and Protocols in Silverlight)에서 확인하시기 바랍니다. 그리고 차후에는 차세대 코덱인 H.264 및 AAC 포맷을 지원한다고 합니다. 관련 내용은 공도님 블로그에 H.264 및 AAC 지원글을 참고하세요.

Xaml에서 MediaElement 컨트롤의 기본 구문입니다.

주요프로퍼티를 보면 우선 Source는 재생할 미디어의 경로입니다. AutoPlay는 기본적으로 재생이 지정된 미디어의 자동재생 설정을 지정합니다. Volume는 오디오 소리크기를 설정하고 IsMute는 소리 끄고 키는 설정을 합니다.

<MediaElement x:Name="mediaelement" Source="Silverlight.wmv" AutoPlay="True"

Volume="1.0" IsMuted="True"/>

다음 예제는 재생, 정지, 일시정지 기능을 가진 간단한 동영상 플레이어 입니다. 또 현재 동영상이 플레이되는 위치(Position)를 표시하기 위해 슬라이더와 TextBlock을 이용하였습니다.

Xaml Code

<UserControl x:Class="ControlTest6.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<MediaElement x:Name="mediaelement" Source="Silverlight.wmv" AutoPlay="False"

Volume="1.0" Margin="28.5,16,30.5,66"/>

<Button Height="30" HorizontalAlignment="Left" Margin="68,0,0,10"

VerticalAlignment="Bottom" Width="77" Content="Play" x:Name="cboPlay"

Click="cboPlay_Click"/>

<Button Height="30" Margin="168,0,155,10" VerticalAlignment="Bottom"

Content="Pause" x:Name="cboPause" Click="cboPause_Click"/>

<Button Height="30" Margin="0,0,54,11" VerticalAlignment="Bottom" Content="Stop"

HorizontalAlignment="Right" Width="77" x:Name="cboStop" Click="cboStop_Click"/>

<Slider Height="21" Margin="14,0,51,49.5" VerticalAlignment="Bottom"

x:Name="sdrPlayState" Maximum="1"/>

<TextBlock Height="21.5" HorizontalAlignment="Right" Margin="0,0,8,45.5"

VerticalAlignment="Bottom" Width="36.5" Text="00:00"

TextWrapping="Wrap" x:Name="tbPosition"/>

</Grid>

</UserControl>

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Diagnostics;

using System.Windows.Threading;

namespace ControlTest6

{

public partial class Page : UserControl

{

private DispatcherTimer timer;

public Page()

{

InitializeComponent();

timer = new DispatcherTimer();

timer.Interval = TimeSpan.FromMilliseconds(50);

timer.Tick += new EventHandler(timer_Tick);

mediaelement.CurrentStateChanged +=

new RoutedEventHandler(mediaelement_CurrentStateChanged);

}

private void cboPlay_Click(object sender, RoutedEventArgs e)

{

mediaelement.Play();

}

private void cboPause_Click(object sender, RoutedEventArgs e)

{

mediaelement.Pause();

}

private void cboStop_Click(object sender, RoutedEventArgs e)

{

mediaelement.Stop();

}

void timer_Tick(object sender, EventArgs e)

{

if (mediaelement.NaturalDuration.TimeSpan.TotalSeconds > 0)

{

tbPosition.Text = string.Format("{0:00}:{1:00}",

mediaelement.Position.Minutes,

mediaelement.Position.Seconds);

sdrPlayState.Value = mediaelement.Position.TotalSeconds /

mediaelement.NaturalDuration.TimeSpan.TotalSeconds;

}

void mediaelement_CurrentStateChanged(object sender, RoutedEventArgs e)

{

if (mediaelement.CurrentState == MediaElementState.Playing)

{

timer.Start();

}

else

{

timer.Stop();

}

Silverlight 1.x에서 사용했던 HtmlTimer은 없어지고 2008년 3월에 Silverlight 2 beta 1이 출시되면서 새로 DispatherTimer 클래스가 생겼습니다. 그러므로 위 예제에서는 System.Windows.Threading.DispatherTimer 네임스페이스를 선언하고 DispatherTimer를 사용합니다. 사용법은 상현넘님 블로그를 참고하시면 되며, 또 Silverlight 2 이후 변경된 다른 사항까지 보실 수 있슶니다.

timer.Interval은 50초로 지정합니다.

timer_Tick이벤트는 현재 재생되고 있는 동영상의 위치를 슬라이더와 TextBlock에 표시하기 위해 현재 재생되고 있는 시간을 동영상의 전체시간으로 나누어서 슬라이더의 value 프로퍼티에 대입해줍니다. 동영상 재생시간 표시는 string.Format 함수를 사용하여 재생되는 현재 시간을 분과 초로 출력되게 합니다.

mediaelement_CurrentStateChanged 이벤트는 현재 동영상이 재생되는지 체크하여 Timer의 Start(), Stop() 함수를 호출합니다.

invalid-file

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Controls Review - Slider (0)	2008/10/07
Silverlight 2 RC0 버전 Fullscreen 테스트 (0)	2008/10/06
Silverlight 2 RC0 Developer Runtime이 다시 릴리즈 되었습니다. (0)	2008/10/06
Silverlight 2 Controls Review - MediaElement (0)	2008/10/04
Silverlight 2 Controls Review - ListBox (0)	2008/10/03
Silverlight 2 RC0 Fullscreen mode 문제 (0)	2008/10/03
Silverlight 2 Controls Review - ComboBox (0)	2008/10/01
Silverlight 2 Controls Review - CheckBox, RadioButton (0)	2008/09/30

Controls, MediaElement, Silverlight, Silverlight2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/247

Silverlight 2 Controls Review - ListBox

Silverlight 2008/10/03 01:34

Listbox 은 항목을 리스트 형식으로 보여주는 컨트롤입니다. 기본적인 Xaml 디자인은 다음과 같습니다.

Xaml에서 Data Binding 할 경우는 listBoxItem 태그를 사용합니다.

</ListBox>

C#에서 동적으로 항목(Item)을 추가, 삭제, 전체삭제 하는 방법은 아래코드와 같습니다.

// 추가(Add)

lstLation.Items.Add(txtAdd.Text);

// 삭제(Remove)

lstLation.Items.Remove("미국"); // 오브젝트명으로 삭제

lstLation.Items.RemoveAt(2); // 항목의 인덱스번호로 삭제

// 전체삭제

lstLation.Items.Clear();

ListBox는 Xaml에서 데이터를 바인딩할 수 있고 C#에서도 동적으로 데이터 바인딩이 가능합니다. 또한 TextBox, TextBlack, ComboBox등 다른 컨트롤을 직접 바인딩 할 수도 있는 매우 사용범위가 큰 컨트롤입니다.

다음 아래데모는 데이터를 추가, 삭제, 전체삭제 할 수 있는 간단한 프로그램입니다.

Xaml Code

<UserControl x:Class="ControlTest4.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="345" Height="265">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ListBox Margin="25,24,0,80" Width="155" HorizontalAlignment="Left"

x:Name="lstLation" />

<TextBox Height="22" Margin="202,27,141,0"

VerticalAlignment="Top" Text=""

TextWrapping="Wrap" x:Name="txtAdd"

RenderTransformOrigin="2.136,-8.909"/>

<Button Margin="202,71,141,0" Content="추가" VerticalAlignment="Top"

Height="22" x:Name="btnAdd" Click="btnAdd_Click"

RenderTransformOrigin="0.582,0.25"/>

<Button Margin="202,105,141,0" Content="삭제" VerticalAlignment="Top"

Height="22" x:Name="btnRemove" Click="btnRemove_Click"

RenderTransformOrigin="0.582,0.25"/>

<Button Margin="202,137,141,152" Content="전체삭제" x:Name="btnClear"

Click="btnClear_Click" RenderTransformOrigin="0.582,0.25"/>

</Grid>

</UserControl>

C# Code

using System.Windows;

using System.Windows.Controls;

namespace ControlTest4

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

}

private void btnAdd_Click(object sender, RoutedEventArgs e)

{

if (txtAdd.Text == "" || txtAdd.Text == null)

{

MessageBox.Show("새로운 항목을 입력해주세요.");

return;

}

for (int i = 0; i < lstLation.Items.Count; i++)

{

if (lstLation.Items[i].ToString() == txtAdd.Text)

{

MessageBox.Show("동일한 항목이 있습니다.");

return;

}

// 추가(Add)

lstLation.Items.Add(txtAdd.Text);

txtAdd.Text = "";

}

private void btnRemove_Click(object sender, RoutedEventArgs e)

{

if (lstLation.Items.Count > 0)

{

// 삭제(Remove)

int index = lstLation.SelectedIndex;

lstLation.Items.RemoveAt(index); // 오브젝트명으로 삭제

}

else

{

MessageBox.Show("삭제할 항목이 없습니다.");

return;

}

private void btnClear_Click(object sender, RoutedEventArgs e)

{

if (lstLation.Items.Count < 0)

{

MessageBox.Show("삭제할 항목이 없습니다.");

return;

}

// 전체삭제

lstLation.Items.Clear();

}

btnAdd_Click 이벤트는 txtAdd.Text에 입력된 항목을 ListBox에 추가하는 이벤트 입니다. ListBox에 등록된 항목과 동일하면 등록할 수 없다는 메시지 박스를 출력하고 Return 을 수행하며 이벤트를 빠져나갑니다.

btnAdd_Click 이벤트는 등록된 항목이 있는지, 선택된 항목이 있는지를 검색하여 선택한 항목을 ListBox에서 삭제를 합니다. RemoveAt는 선택된 항목의 인덱스값을 받아서 삭제를 합니다.
btnClear_Click이벤트는 ListBox에 항목이 있는지 검색하고 항목이 없으면 메시지르 뿌리고 있으면 선택된 항목을 삭제합니다.

ControlTest4.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 RC0 버전 Fullscreen 테스트 (0)	2008/10/06
Silverlight 2 RC0 Developer Runtime이 다시 릴리즈 되었습니다. (0)	2008/10/06
Silverlight 2 Controls Review - MediaElement (0)	2008/10/04
Silverlight 2 Controls Review - ListBox (0)	2008/10/03
Silverlight 2 RC0 Fullscreen mode 문제 (0)	2008/10/03
Silverlight 2 Controls Review - ComboBox (0)	2008/10/01
Silverlight 2 Controls Review - CheckBox, RadioButton (0)	2008/09/30
Silverlight 2 Controls Review - DatePicker, Calendar (0)	2008/09/28

Controls, ListBox, Silverlight, Silverlight 2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/243

Silverlight 2 Controls Review - ComboBox

Silverlight 2008/10/01 12:34

ComboBox는 Silverlight 2 RC0이(가) 출시 되면서 추가된 컨트롤입니다. ListBox와 사용면에서 전체적으로 동일한 기능을 수행하지만 DropDown 형으로 르로그램 UI를 디자인할 때 좁은 공간에서 좀더 ListBox보다 유연한 디자인을 할 수 있습니다. 기본 사용법은 Xaml에서 디자인하는 방법과 동적으로 C#(CS) 코드에서 생성할 수 있습니다.

Xaml Data Binding

<ComboBox VerticalAlignment="Top" Width="110" Height="28" HorizontalAlignment="Left"

Margin="31,25,0,0" x:Name="cboItem">

<ComboBox.Items>

</ComboBox.Items>

</ComboBox>

C# Code Data Binding

cboCustomer.Items.Add("항목 1");

cboCustomer.Items.Add("항목 2");

cboCustomer.Items.Add("항목 3");

cboCustomer.Items.Add("항목 4");

cboCustomer.Items.Add("항목 5");

ComboBox에서 항목 선택했을경우

ComboBox에서 항목 펼침

항목을 기본(Default)으로 선택할 경우입니다.

동적으로 항목(Item)을 간단하게 바인딩하는 ComboBox 예제입니다.

Xaml Code

<UserControl x:Class="ControlTest5.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<ComboBox VerticalAlignment="Top" Height="26"

Margin="32,29,193,0" x:Name="cboCustomer"/>

</Grid>

</UserControl>

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace ControlTest5

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

List<CustomerData> cstData = new List<CustomerData>();

cstData.Add(new CustomerData()

{ UserID = "MrHong", UserName= "홍길동", UserNation="Korea"});

cstData.Add(new CustomerData()

{ UserID = "Taedi", UserName = "정태호", UserNation = "Korea" });

cstData.Add(new CustomerData()

{ UserID = "david", UserName = "대니스", UserNation = "USA" });

cboCustomer.ItemsSource = cstData;

cboCustomer.SelectedIndex = 1;

}

public class CustomerData

{

public string UserID { get; set; }

public string UserName { get; set; }

public string UserNation { get; set; }

public override string ToString()

{

return UserID + " / " + UserName + " / " + UserNation;

}

ControlTest5.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight' 카테고리의 다른 글

Silverlight 2 Controls Review - MediaElement (0)	2008/10/04
Silverlight 2 Controls Review - ListBox (0)	2008/10/03
Silverlight 2 RC0 Fullscreen mode 문제 (0)	2008/10/03
Silverlight 2 Controls Review - ComboBox (0)	2008/10/01
Silverlight 2 Controls Review - CheckBox, RadioButton (0)	2008/09/30
Silverlight 2 Controls Review - DatePicker, Calendar (0)	2008/09/28
Silverlight 2.0 RC0 관련 필요 유틸리티 (0)	2008/09/27
Silverlight Version 2 RC0 Released!! (0)	2008/09/27

combobox, Controls, Silverlight, Silverlight 2

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/245

Flash Movie 실행하기

WPF 2008/08/07 03:49

WPF에서 Flash Movie를 재생하는 데모를 만들어보겠습니다. ActiveX 컨트롤 사용하는 방법과 동일하며 AxInterop.ShockwaveFlashObjects.dll 이 필요합니다. dll이 로컬에 존재한다면 참조에 추가하면 되고 없으면 여기에서 다운로드 받으시면 됩니다.

AxInterop.ShockwaveFlashObjects.dll이 추가되었습니다.

로컬에 있는 Flash Movie를 가져와 WPF에서 재생을 합니다.

xaml code

<Window x:Class="WPFControlSwf.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="400" Width="400">

</Grid>

</Window>

cs code

using System.Windows;

using System.Windows.Forms.Integration;

using AxShockwaveFlashObjects;

namespace WPFControlSwf

{

public partial class Window1 : Window

{

public Window1()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(Window1_Loaded);

}

void Window1_Loaded(object sender, RoutedEventArgs e)

{

WindowsFormsHost host = new WindowsFormsHost();

AxShockwaveFlash swfPlayer = new AxShockwaveFlash();

host.Child = swfPlayer;

grid.Children.Add(host);

swfPlayer.Movie = "c://flash.swf";

swfPlayer.Play();

}

코드 설명

using AxShockwaveFlashObjects;

Flash 관련 네임스페이스를 선언합니다.

swfPlayer.Movie = "c://flash.swf";

swfPlayer.Play();

Movie프로퍼티는 Flash Movie 경로를 지정하고 Play() 메소드는 WPF 프로그램이 실행될때 Flash Movie를 자동으로 재생하도록 합니다.

Summary

전자문서나 전자도서 같은 프로그램에서 모든 콘텐츠를 WPF나 Silverlight로 개발하기에 한계가 있으므로 전자도서의 컨텐츠를 개발했을때 그 컨텐츠를 이용하기 위한 좋은 방법이 될것입니다. 제가 얼마전에 참여했던 디지털 교과서가 그 좋은 예라 할수 있습니다. 그리고 ActiveX로 개발된 컨텐츠라면 그 어떤것도 WPF에서 실행할 수가 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'WPF' 카테고리의 다른 글

모니터 해상도(Tip) (0)	2008/09/15
Aero Glass(에어로 글래스) 사용하기 (0)	2008/08/24
Flash Movie 실행하기 (0)	2008/08/07
ActiveX 컨트롤 사용하기 (0)	2008/07/21
윈폼(Winform) 컨트롤 사용하기 (0)	2008/07/14
News Reader SDK 공개 (0)	2008/01/17
Color와 Colors 구조체를 객체 생성 및 색 지정 (0)	2008/01/08
클래스를 상속받아 윈도우 응용 프로그램 구현하기 (0)	2008/01/08

Controls, Falsh, WPF

트랙백 0개 , 댓글 0개

http://www.taedi.kr/trackback/184

티스토리 툴바

검색결과 리스트

Controls에 해당되는 글 34건

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'Silverlight' 카테고리의 다른 글

설정

트랙백

댓글

글

'WPF' 카테고리의 다른 글

설정

트랙백

댓글

사이드 메뉴

NOTICE