검색결과 리스트
Silverlight 2에 해당되는 글 17건
- 2008/11/25 Silverlight Tools(RC1) 한국어버전 출시 (2)
- 2008/10/29 2008 PDC에서 Silverlight Tools 및 Toolkit release & Themes 가 발표되었습니다. (2)
- 2008/10/27 Silverlight 2 Controls Review 강좌목록
- 2008/10/27 Silverlight 2 Controls Review - ProgressBar
- 2008/10/25 Silverlight 2 Controls Review - TabControl
- 2008/10/22 Silverlight 2 Controls Review - GridSplitter
- 2008/10/21 SilverlightContrib Controls 릴리즈
- 2008/10/18 Silverlight 2 Controls Review - Grid 2 (1)
- 2008/10/17 Silverlight 2 Controls Review - StackPanel
- 2008/10/14 Silverlight 2 RC1(RTW) 설치(VS2008 영문버전 기준)
- 2008/10/14 Silverlight 2 Released!! - x줄타게 기다렸습니다.
- 2008/10/08 Silverlight DeepZoom + Virtual Earth
- 2008/10/03 Silverlight 2 Controls Review - ListBox
- 2008/10/01 Silverlight 2 Controls Review - ComboBox
- 2008/09/30 Silverlight 2 Controls Review - CheckBox, RadioButton
글
Silverlight Tools(RC1) 한국어버전 출시
11월 24일 월요일자로 버전업이 되었습니다. 다운로드 : Silverlight_Tools.exe
영문버전버도 약 한달 늦게 나왔습니다. 자세한 내용은 철수네 소프트웨어세상 블로그를 참고하시면 됩니다. 변경된 내용은 다음과 같습니다.
- Visual Basic 및 C# 프로젝트 템플릿
- XAML용 Intellisense 및 코드 생성기
- XAML 디자인 미리 보기
- Silverlight 응용 프로그램의 디버깅
- Mac용 Silverlight 응용 프로그램의 원격 디버깅
- 웹 참조 지원
- WCF 템플릿
- 팀 빌드 및 명령줄 빌드 지원
- Expression Blend와 통합
가장 크게 좋아진것은 무엇보다도 Silverlight 2 SDK 도움말이 바로 한국어로 출시되었다는 것입니다.
다운로드 하러 가기
덧) RC1의 버전은 언제 바뀔까요.. 이젠 버전만 바뀌면 될것 같습니다.
'Silverlight' 카테고리의 다른 글
| SilverlightTeskTop Application Program (0) | 2008/12/12 |
|---|---|
| Silverlight ChartBuilder 소스코드 및 데모 업데이트 (0) | 2008/12/12 |
| 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 |
글
새벽부터 PDC 2008에 관한 기사와 블로그 글들이 쏟아지고 있습니다. 아!! 이제 또 정신 못차리게 되겠구나, 바빠지겠구나 라는 생각이 듭니다. ^^
Microsoft® Silverlight™ Tools for Visual Studio 2008 SP1 정식 버전이 최종 릴리즈 되었습니다. 다운로드는 여기에서 받으세요, 영문판만 발표된 것 같은데 각 언어권별로 같이 릴리즈 되었네요, 그런데 한글판은 아직 출시안된 것 같습니다. 한글판은 좀 기달려야 할 것 같습니다. (철수네 소프트웨어 세상 블로그를 참고하세요)
또. Toolkit release & Themes도 같이 발표되었습니다. 기존 WPF와 ASP.NET AJAX에 있었던 좋은 컨트롤들이 포함되어 발표되었습니다.
발표된 Toolkit 안에 포함된 컨트롤입니다.
- AutoCompleteBox
- Chart
- DockPanel
- Label
- Expander
- TreeView
- UpDown
- ViewBox
- WrapPanel
- ImplicitStyleManager
이와관련해서 공도님이 정성스럽게 정리를 해주셨습니다. 또 Jesse Liberty의 블로그에 소스코드까지 첨부되어서
자세히 분석되어져 있습니다.
실버라이트도 개발툴과 런타임이 최종적으로 정식 릴리즈 되었으니 시장에서 플래시와의 대대적인 한판싸움은 피할 수 없게 된 것 같습니다. 뭐 서로 상생해 가면서 발전할 수 있다면 더욱 좋은 것이겠지요. 실버라이트의 시장에서의 파급효과가 얼마나 커질지 앞으로가 주목됩니다.
'Silverlight' 카테고리의 다른 글
| Silverlight ChartBuilder 소스코드 및 데모 업데이트 (0) | 2008/12/12 |
|---|---|
| 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 강좌목록
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 Controls Review - ToggleButton
Silverlight 2 Controls Review - HyperlinkButton
Silverlight 2 Controls Review - Border
Silverlight 2 Controls Review - Canvas
Silverlight 2 Controls Review - StackPanel
Silverlight 2 Controls Review - Grid 1
Silverlight 2 Controls Review - Grid 2
Silverlight 2 Controls Review - GridSplitter
Silverlight 2 Controls Review - TabControl
Silverlight 2 Controls Review - ProgressBar
Silverlight 2 컨트롤의 주요 프로퍼티 사용법 및 이벤트를 중심으로 간단한 소스코드를 첨부하여 강좌를 적성하였습니다. 이후 작성될 컨트롤 강좌는 목록에 계속 추가해 나가도록 하겠습니다.
'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 |
글
Silverlight 2 Controls Review - 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">
<Grid x:Name="LayoutRoot" Background="White">
<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"/>
<MediaElement Margin="30,20.5,25,66.5" x:Name="mediaElement" AutoPlay="True"/>
</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'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 |
글
Silverlight 2 Controls Review - TabControl
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이 들어가 있습니다.
TabControl 안에는 독립적으로 TabItem 컨트롤이 존재하며 TabItem 안에는 Button이나 TextBox 같은 Input 관련 컨트롤이나 레이아웃을 구성할 수 있는 StackPanel, Canvas 같은 페널을 추가할 수 있습니다. 아래코드는 TabItem에 Button 컨트롤을 삽입한 것입니다.
<basics:TabItem Header="Tab 1" >
<Button x:Name="btnTab1" Content="Click Me" Width="60" Height="25"/>
</basics:TabItem>
TabItem에 Button 컨트롤이 추가된 모습입니다.
Grid 패널을 이용하여 여러가지 컨트롤을 배치 할 수 있습니다.
<basics:TabItem Header="Tab 1" >
<Button x:Name="btnTab1" Content="Click Me" Width="60" Height="25"/>
</basics:TabItem>
여러가지 컨트롤을 배치한 모습입니다.
Tab의 타이틀에 이미지(또는 아이콘)를 집어넣을 수 있습니다. StackPanel 컨트롤을 추가하고 자식 엘리먼트로 이미지 컨트롤을 이용해 Source 프로퍼티에 이미지경로를 지정합니다.
<basics:TabItem Width="100">
<basics:TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="tab_isleaf.png" />
<TextBlock Text="Tab 3" Margin="2,0,0,0"/>
</StackPanel>
</basics:TabItem.Header>
</basics:TabItem>
텝의 타이틀에 이미지를 추가한 모습입니다.
<basics:TabItem Header="Tab 4">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="http://fs.textcube.com/blog/0/2349/attach/XV3tNbRAgR.png"
Height="150" Width="80"/>
</StackPanel>
</basics:TabItem>
웹의 경로를 지정하여 이미지를 출력한 모습입니다.
<basics:TabControl Margin="50,50,55,0" UseLayoutRounding="True" TabStripPlacement="Top" SelectedIndex="1"
VerticalAlignment="Top" Height="152" >
<basics:TabItem Header="Tab 1" >
<Button x:Name="btnTab1" Content="Click Me" Width="60" Height="25"/>
</basics:TabItem>
<basics:TabItem Header="Tab 2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbPhone" Text="Phone" Grid.Column="0" Grid.Row="0"/>
<TextBlock x:Name="tbName" Text="Name" Grid.Column="0" Grid.Row="1"/>
<TextBlock x:Name="tbAddress" Text="Address" Grid.Column="0"
Grid.Row="2"/>
<TextBox x:Name="txtPhone" Grid.Column="1" Grid.Row="0"/>
<TextBox x:Name="txtName" Grid.Column="1" Grid.Row="1"/>
<TextBox x:Name="txtAddress" Grid.Column="1" Grid.Row="2"/>
<Button x:Name="btnResult" Content="등록" Grid.Row="3"
Grid.ColumnSpan="2"/>
</Grid>
</basics:TabItem>
<basics:TabItem Width="100">
<basics:TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="tab_isleaf.png" />
<TextBlock Text="Tab 3" Margin="2,0,0,0"/>
</StackPanel>
</basics:TabItem.Header>
</basics:TabItem>
<basics:TabItem Header="Tab 4">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="http://fs.textcube.com/blog/0/2349/attach/XV3tNbRAgR.png"
Height="150" Width="80"/>
</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 VerticalAlignment="Bottom" Height="26" Margin="149,0,157,195" x:Name="cboOrientation" SelectionChanged="ComboBox_SelectionChanged">
<ComboBoxItem Content="Top"/>
<ComboBoxItem Content="Bottom"/>
<ComboBoxItem Content="Left"/>
<ComboBoxItem Content="Right"/>
</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;
}
}
'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 |
글
Silverlight 2 Controls Review - GridSplitter
그리드는 키보드 혹은 마우스등을 이용하여 행과 열의 크기를 자유자재로 조절할 수 있다는 큰 특징이 있습니다. 이것을 가능케하는 컨트롤이 바로 GridSplitter(그리드스플리터) 컨트롤입니다.
GridSplitter는 HorizontalAlignment의 기본 값은 Right이고 VerticalAligument의 기본 값은 Stretch이기 때문에, 기본적으로 특정한 셀의 오른쪽에 도킹됩니다. GridSplitter의 올바른 사용은 적어도 한방향으로 Strect 정렬을 하는 것입니다.
GridSplitter를 마우스를 좌우 또는 위아래로 드래그(drag)하게 되면 드래그한 GridSplitter의 주변의 Grid 및 셀안의 자식 엘리먼트 크기는 자동 조절됩니다.
그리드(Grid)의 열(Column)을 지정합니다. <ColumnDefinition Width="5"/>는(은) GridSplitter가 위치할 셀입니다.
<!--Grid의 Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
그리드(Grid)의 행(Row)을 지정합니다. <RowDefinition Height="5" />는(은) GridSplitter가 위치할 셀입니다.
<!--Grid의 Row-->
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="5" />
<RowDefinition Height="80" />
<RowDefinition Height="5" />
<RowDefinition Height="80" />
<RowDefinition Height="5" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
그리드의 자식 엘리먼트 입니다
<!--자식 엘리먼트-->
<Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"/>
<Rectangle Grid.Row="2" Grid.Column="0" Fill="Green"/>
<Rectangle Grid.Row="4" Grid.Column="0" Fill="Blue"/>
<Rectangle Grid.Row="6" Grid.Column="0" Fill="Yellow"/>
<Rectangle Grid.Row="0" Grid.Column="2" Fill="Green"/>
<Rectangle Grid.Row="2" Grid.Column="2" Fill="Blue"/>
<Rectangle Grid.Row="4" Grid.Column="2" Fill="Yellow"/>
<Rectangle Grid.Row="6" Grid.Column="2" Fill="Red"/>
<Rectangle Grid.Row="0" Grid.Column="4" Fill="Blue"/>
<Rectangle Grid.Row="2" Grid.Column="4" Fill="Yellow"/>
<Rectangle Grid.Row="4" Grid.Column="4" Fill="Red"/>
<Rectangle Grid.Row="6" Grid.Column="4" Fill="Green"/>
<Rectangle Grid.Row="0" Grid.Column="6" Fill="Yellow"/>
<Rectangle Grid.Row="2" Grid.Column="6" Fill="Red"/>
<Rectangle Grid.Row="4" Grid.Column="6" Fill="Green"/>
<Rectangle Grid.Row="6" Grid.Column="6" Fill="Blue"/>
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 x:Name="LayoutRoot" Background="White">
<!--Grid의 Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<!--Grid의 Row-->
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="5" />
<RowDefinition Height="80" />
<RowDefinition Height="5" />
<RowDefinition Height="80" />
<RowDefinition Height="5" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
<!--자식 엘리먼트-->
<Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"/>
<Rectangle Grid.Row="2" Grid.Column="0" Fill="Green"/>
<Rectangle Grid.Row="4" Grid.Column="0" Fill="Blue"/>
<Rectangle Grid.Row="6" Grid.Column="0" Fill="Yellow"/>
<Rectangle Grid.Row="0" Grid.Column="2" Fill="Green"/>
<Rectangle Grid.Row="2" Grid.Column="2" Fill="Blue"/>
<Rectangle Grid.Row="4" Grid.Column="2" Fill="Yellow"/>
<Rectangle Grid.Row="6" Grid.Column="2" Fill="Red"/>
<Rectangle Grid.Row="0" Grid.Column="4" Fill="Blue"/>
<Rectangle Grid.Row="2" Grid.Column="4" Fill="Yellow"/>
<Rectangle Grid.Row="4" Grid.Column="4" Fill="Red"/>
<Rectangle Grid.Row="6" Grid.Column="4" Fill="Green"/>
<Rectangle Grid.Row="0" Grid.Column="6" Fill="Yellow"/>
<Rectangle Grid.Row="2" Grid.Column="6" Fill="Red"/>
<Rectangle Grid.Row="4" Grid.Column="6" Fill="Green"/>
<Rectangle Grid.Row="6" Grid.Column="6" Fill="Blue"/>
<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>
'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 |
글
SilverlightContrib Controls 릴리즈
Silverlight 2 용 쓸만한 컨트롤 라이브러리가 나왔습니다.
오픈소스 형태로 Codeplex에 공개되었으며 http://silverlightcontrib.org/ 에서 데모와 소스를 다운로드 할 수 있습니다.
공개된 소스코드에는 5개의 컨트롤과 8개의 라이브러리가 포함되어 있습니다.
Controls
- Color Picker
- Gauge Control
슬라이더 게이지 입니다. 사용자가 선택한 게이지의 양만큼 퍼센트(%)로 출력합니다.
- Star Selector
- Enhanced Metafile (EME)
- Cool Menu
Libraries
- Zip
- Byte utilities
- String utilities
- Simple text parser
- Animation Tweening
- Wheel Mouse listener
Live Demo : http://silverlightcontrib.org/demo/
Source Down : http://www.codeplex.com/silverlightcontrib/Release/ProjectReleases.aspx?ReleaseId=17497
'Silverlight' 카테고리의 다른 글
| 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 |
| Silverlight 2 Controls Review - StackPanel (0) | 2008/10/17 |
글
Silverlight 2 Controls Review - Grid 2
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 x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<!--네 개의 행을 선언-->
<Grid.RowDefinitions>
<RowDefinition Height="100"/> <!--값을 넣어서 픽셀크기를 고정-->
<RowDefinition Height="70"/>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="160"/>
</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 x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<!--네 개의 행을 선언-->
<Grid.RowDefinitions>
<RowDefinition Height="100"/> <!--값을 넣어서 픽셀크기를 고정-->
<RowDefinition Height="70"/>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="160"/>
</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 x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<!--네 개의 행을 선언-->
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="2.5*" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--자식 엘리먼트 추가-->
<TextBlock TextWrapping="Wrap" Grid.Column="0" Grid.Row="0">
<Run Foreground="#FFFFFFFF" Text="안녕하세요 태디입니다. "/>
</TextBlock>
<Button Grid.Column="2" Grid.Row="2" Content="Click Me" FontSize="36" />
<Ellipse Grid.Row="3" Stroke="#FF000000">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF41515"/>
<GradientStop Color="#FF47A341" Offset="1"/>
<GradientStop Color="#FFFDFDFD" Offset="0.482"/>
</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 x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<!--네 개의 행을 선언-->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--자식 엘리먼트 추가-->
<TextBlock TextWrapping="Wrap" Grid.Column="0" Grid.Row="0">
<Run Foreground="#FFFFFFFF" Text="안녕하세요 태디입니다. "/>
</TextBlock>
<Button Grid.Column="2" Grid.Row="2" Content="Click Me" FontSize="36" />
<Ellipse Grid.Row="3" Stroke="#FF000000">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF41515"/>
<GradientStop Color="#FF47A341" Offset="1"/>
<GradientStop Color="#FFFDFDFD" Offset="0.482"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>
'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 |
글
Silverlight 2 Controls Review - StackPanel
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">
<StackPanel x:Name="stackOri">
<Button Height="29" Width="64" Content="버튼 가"/>
<Button Height="29" Width="64" Content="버튼 나"/>
<Button Height="29" Width="64" Content="버튼 다"/>
<Button Height="29" Width="64" Content="버튼 라"/>
<Button Height="29" Width="64" Content="버튼 마"/>
<Button Height="29" Width="64" Content="버튼 바"/>
<Button Height="29" Width="64" Content="버튼 사"/>
<Button Height="29" Width="64" Content="버튼 아"/>
<Button Height="29" Width="64" Content="버튼 자"/>
<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 = "세로정렬";
}
}
}
}
'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 |
글
Silverlight 2 RC1(RTW) 설치(VS2008 영문버전 기준)
Silverlight 2 RC1 버전이 릴리즈 되었습니다.
※ Visual Studio 2008 영문 버전을 기준으로 한 설치입니다.
실치에 필요한 프로그램 목록
1. Silverlight 2 Runtime
2. Microsoft® Silverlight™ Tools for Visual Studio 2008 SP1 (RC1)
3. Microsoft Expression Blend™ 2 Service Pack 1
4. Deep Zoom Composer
Silverlight 2 프로그램을 실행하려면 런타임이 필요합니다.
1. Silverlight 2 Runtime Install (설치 생략 가능)
(참고로 Silverlight 2 Runtime는 2번 Silverlight Tools를 설치하면 자동적으로 설치됩니다.)
Silverlight 2 Runtime는 여기에서 받으세요. 기존에 설치된 Silverlight 2 beta 2, Silverlight 2 RC0용 Runtime는 모두 삭제하시기 바랍니다.
Runtime를 설치하고 설치버전을 확인하면 Silverlight 2 실행할 수 있는 환경이 구성됩니다.
2. Microsoft® Silverlight™ Tools for Visual Studio 2008 SP1 (RC1) Setup
(Silverlight Runtime, Silverlight SDK는 Silverlight Tools를 설치하면 자동적으로 Install 됩니다.)
Vistuall Studio 2008 에서 Silverlight 2 프로그래밍을 하기 위한 Add-in을 설치를 하여야 합니다. 다운로드는 여기 에서 하면 됩니다.파일명은 Silverlight_Tools.exe 입니다.
기존 Beta 1, 2, RC0의 Add-in은 모두 제거해야 합니다. 설치는 영문 버전을 기준으로 합니다. 현재 실행중인 웹브라우저를 모두 종료해야 합니다.
동의에 체크하고 다음 버튼을 클릭합니다.
설치가 완료되면 Visual Studio 2008 새 프로젝트 대화상자에 설치여부를 확인여부를 체크하면 됩니다.
기본적으로 Silverlight 2 Runtime 와 개발 Tool을 설치하면 Silverlight 2 SDK 까지 설치가 됩니다.
3. Microsoft Expression Blend™ 2 Service Pack 1 Setup
이전에 설치되었던 Blend 2를 제거해 주세요. 다운로드는 여기에서 하면 되며, 파일명은 BlendV2SP1_en.exe 입니다. 이번 버전은 Silverlight 2가 정식릴리즈 되면서 Blend 2도 Preeview 딱지를 때게 되었습니다.
(이전에 설치한 Blend 2 Service Pack Preeview 만 삭제하고 Microsoft Expression Blend™ 2 Trial 는 반드시 설치가 되어 있어야 Blend 2 Service Pack 1이 정상적으로 설치됩니다.. 만약 삭제하셨다면 여기 를 클릭하여 다운로드하여 다시 설치해 주십시오)
I Accept 버튼을 클립하고 다음 설치를 진행합니다.
설치가 완료되었다면 버전체크 후 설치를 종료 합니다.
4. Deep Zoom Composer
치기존에 설치되었던 Deep Zoom Composer를 제거 해주세요. 다운로드는 여기에서 하면 됩니다. 파일명은 Deep Zoom Composer.msi 이며 영문 버전입니다.
동의를 선택하고 다음 버튼을 클릭하여 설치를 계속 진행합니다.
설치할 위치를 지정하고 다음 버튼을 클릭하여 설치를 계속 진행합니다.
설치가 완료되면 철치버전의 버전을 체크하고 설치종료를 합니다.
'Silverlight' 카테고리의 다른 글
| 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 |
| Silverlight 2 Controls Review - Border (0) | 2008/10/11 |
글
Silverlight 2 Released!! - x줄타게 기다렸습니다.
Silverlight 2 는 http://silverlight.net/GetStarted/ 에서 다운로드 가능합니다.
자!!! 이제 발바닥에 땀띠나게 달려봅니다. 고고고~~~
'Silverlight' 카테고리의 다른 글
| 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 |
| Silverlight 2 Controls Review - Border (0) | 2008/10/11 |
| Silverlight 2 Controls Review - HyperlinkButton (0) | 2008/10/10 |
글
Silverlight DeepZoom + Virtual Earth
최근에 Silverlight에 DeepZoom 기술을 써서 Virtual Earth mashup Ria Application이 많이 발표되는 것 같습니다. 여기에는 개인이나 회사 할거 없이 다양한 아이디어를 통해서 서비스를 확대하고 나아가 상업적인 비지니스 아이템으로까지 연결하는 것 같습니다. 아직 국내보다는 외국에서 적용사례가 더 많이 나오는 것 같습니다.
고로, 이즈음 해서 Silverlight Virtual Earth Application 개발을 위해 필요한 정보들을 정리해보도록 하겠습니다.
1. Silverlight 2
http://www.silverlight.net
http://blogs.msdn.com/silverlight_sdk/default.aspx (Silverlight SDK)
2. Expression Blend & Design(Doopzoom Composer)
http://blogs.msdn.com/expression/default.aspx
http://memorabilia.hardrock.com/ (Deepzoom Demo)
3. Virtual Earth SDK
http://msdn.microsoft.com/en-us/library/aa905677.aspx (Microsoft Virtual Earth SDK:MSDN)
4. Demo 및 Source
http://blogs.msdn.com/silverlight_sdk/archive/2007/05/02/Using-Opacity-with-a-Silverlight-_2F00_-Virtual-Earth-Mashup--Remix.aspx (Silverlight / Virtual Earth Mashup)
http://channel9.msdn.com/posts/Dan/DeepEarth-Virtual-Earth-using-Silverlight-DeepZoom/ (Channel9)
http://blogs.msdn.com/lutzg/archive/2008/08/19/synchronizing-images-with-the-deep-zoom-content.aspx
http://code.msdn.microsoft.com/SLVE
http://gilverlight.net/search/EARTH (Pigmap)
http://gilverlight.net/2693
http://www.codeplex.com/Project/ProjectDirectory.aspx?ProjectSearchText=Silverlight%20Virtual%20Earth (Codeplex에서 진행하는 다양한 오픈 프로젝트)
5. 기타 Silverlight Virtual Earth 관련 포럼
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=1555698&SiteID=1
※ DeepEarth 데모 동영상
Silverlight Virtual Earth pilot
IDV Solutions Silverlight Map Drawing
휴즈플로우에서 진행하는 Diggmap같은 서비스나 위치추적, 모바일 기기등을 이용한 길찾기 서비스등 Silverlight에 Deepzoom과 Virtual Earth을 적용하여 활용하면 다양한 적용사례를 가까운 시간안에 만나볼 수 있을 듯 합니다. 조만간에 Silverlight 2가 발표가 될것 같은데, 내심 Virtual Earth가 Silverlight안에 Control 형태로 지원됐으면 하는 바램이 있습니다.
'Silverlight' 카테고리의 다른 글
| 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 |
| Silverlight 2 Controls Review - MediaElement (0) | 2008/10/04 |
글
Silverlight 2 Controls Review - ListBox
Listbox 은 항목을 리스트 형식으로 보여주는 컨트롤입니다. 기본적인 Xaml 디자인은 다음과 같습니다.
<ListBox x:Name="lstLation" />
Xaml에서 Data Binding 할 경우는 listBoxItem 태그를 사용합니다.
<ListBox x:Name="lstLation">
<ListBoxItem Content="미국"></ListBoxItem>
<ListBoxItem Content="영국"></ListBoxItem>
<ListBoxItem Content="독일"></ListBoxItem>
<ListBoxItem Content="프랑스"></ListBoxItem>
<ListBoxItem Content="일본"></ListBoxItem>
<ListBoxItem Content="네덜란드"></ListBoxItem>
<ListBoxItem Content="대한민국"></ListBoxItem>
<ListBoxItem Content="홍콩"></ListBoxItem>
<ListBoxItem Content="스페인"></ListBoxItem>
<ListBoxItem Content="페루"></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 x:Name="LayoutRoot" Background="White" Width="470" Height="311">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.949*"/>
<ColumnDefinition Width="0.051*"/>
</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에 항목이 있는지 검색하고 항목이 없으면 메시지르 뿌리고 있으면 선택된 항목을 삭제합니다.
'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 |
글
Silverlight 2 Controls Review - ComboBox
Xaml Data Binding
<ComboBox VerticalAlignment="Top" Width="110" Height="28" HorizontalAlignment="Left"
Margin="31,25,0,0" x:Name="cboItem">
<ComboBox.Items>
<ComboBoxItem Content="항목 1" />
<ComboBoxItem Content="항목 2" />
<ComboBoxItem Content="항목 3" />
<ComboBoxItem Content="항목 4" />
<ComboBoxItem Content="항목 5" />
</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)으로 선택할 경우입니다.
<ComboBoxItem Content="항목 1" IsSelected="True" />
동적으로 항목(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">
<Grid x:Name="LayoutRoot" Background="White">
<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;
}
}
}
'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 |
글
Silverlight 2 Controls Review - CheckBox, RadioButton
CheckBox는 다중선택을 할 수 있는 컨트롤이고, RadioButton은 단일 선택을 할 수 있는 컨트롤입니다.
두 컨트롤 모두 옵션 및 항목리스트에서 무엇인가를 선택할 때 자주 사용하는 컨트롤입니다.
1.x 버전에서는 지원되지 않다가 Silverlight 2 beta 1 부터 포함된 컨트롤입니다. 프로그램에서 Button, TextBox 컨트롤등과 가장 많이 사용되는 컨트롤중에 하나입니다.
다음 데모는 CheckBox, RadioButton 컨트롤을 이용하여 특정 항목을 선택 하는 프로그램입니다.
Xaml Code
<UserControl x:Class="ControlTest3.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<CheckBox Height="26" HorizontalAlignment="Left" Margin="42,37,0,0"
VerticalAlignment="Top" Width="108" Content="사과" x:Name="chkApple"/>
<CheckBox Height="26" HorizontalAlignment="Left" Margin="42,64,0,0"
VerticalAlignment="Top" Width="115" Content="배" x:Name="chkEmbryo"/>
<CheckBox Height="26" HorizontalAlignment="Left" Margin="42,90,0,0"
VerticalAlignment="Top" Width="115" Content="수박" x:Name="chkWatermelon"/>
<RadioButton Height="23" HorizontalAlignment="Right" Margin="0,37,28,0"
VerticalAlignment="Top" Width="98" Content="서울" x:Name="rdoSeoul" />
<RadioButton Height="23" HorizontalAlignment="Right" Margin="0,90,29,0"
VerticalAlignment="Top" Width="98" Content="대구" x:Name="rdoDaegu"/>
<RadioButton Height="23" HorizontalAlignment="Right" Margin="0,62,29,0"
VerticalAlignment="Top" Width="98" Content="부산" x:Name="rdoBusan"/>
<TextBlock HorizontalAlignment="Left" Margin="34,141,0,23" Width="85"
Text="" TextWrapping="Wrap" x:Name="tbChkResult"/>
<TextBlock HorizontalAlignment="Right" Margin="0,141,39,23" Width="85"
Text="" TextWrapping="Wrap" x:Name="tbRdoResult"/>
<Button Margin="157,0,161,27" Content="choice" VerticalAlignment="Bottom"
Height="43" x:Name="btnResult" Click="btnResult_Click"/>
</Grid>
</UserControl>
C# Code
using System.Windows;
using System.Windows.Controls;
namespace ControlTest3
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void btnResult_Click(object sender, RoutedEventArgs e)
{
string chkResult = string.Empty;
if (chkApple.IsChecked == true) { chkResult = "사과 "; }
if (chkEmbryo.IsChecked == true) { chkResult = chkResult + "배 "; }
if (chkWatermelon.IsChecked == true) { chkResult = chkResult + "수박"; }
tbChkResult.Text = chkResult;
string rdoResult = string.Empty;
if (rdoSeoul.IsChecked == true) { rdoResult = "서울"; }
else if (rdoBusan.IsChecked == true) { rdoResult = "부산"; }
else if(rdoDaegu.IsChecked == true) { rdoResult = "대구"; }
tbRdoResult.Text = rdoResult;
}
}
}
'Silverlight' 카테고리의 다른 글
| 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 |
| Silverlight 2 Controls Review- TextBox, Button, TextBlock (0) | 2008/09/27 |
^^ 앗 유용한 정보 감사합니다.
전 영문이여서 다시 설치할 필요가 없겠네욤 ^^ ~
네 VS2008을 한국어 버전으로 사용하시는 분들에게는 매우 유용한 내용이 될것이라 생각됩니다. 중요한건 도움말이 한국어로 나왔다는 것이 되겠죠^^