검색결과 리스트
Silverlight2에 해당되는 글 10건
- 2008/12/12 SilverlightTeskTop Application Program
- 2008/12/12 Silverlight ChartBuilder 소스코드 및 데모 업데이트
- 2008/12/10 Silverlight Toolkit 2008년 12월 버전 릴리즈
- 2008/10/18 Silverlight 2 Controls Review - Grid 1
- 2008/10/13 Silverlight 2 Controls Review - Canvas
- 2008/10/11 Silverlight 2 Controls Review - Border
- 2008/10/10 Silverlight 2 Controls Review - HyperlinkButton
- 2008/10/08 Silverlight 2 Controls Review - ToggleButton
- 2008/10/07 Silverlight 2 Controls Review - Slider
- 2008/10/04 Silverlight 2 Controls Review - MediaElement
글
SilverlightTeskTop Application Program
메일도 보낼 수 있는 것 같습니다.
소스코드를 다운로드하여 테스트 해보고 싶으시면 여기에서 받으시면 됩니다. 단 웹사이트에 아이디, 이름, 이메일, 비밀번호의 간단한 개인정보를 입력후 가입을 해야 합니다.
※ 가입하기가 귀찮다면 직접 다운로드 CodePlex에서 다운로드 하시면 됩니다. : SilverlightDesktop 01.90.00
윈도우 비스타를 환경에서 테스트 해볼 수 있도록 설치가이드가 제공됩니다.(비스타는 프로페셔널이상에 IIS 웹서버가 설치되어 있어야 합니다.)
실버라이트 데스크탑 어플리케이션의 아키텍쳐입니다. (출처 : http://silverlightdesktop.net/Default.aspx)
'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 |
글
Silverlight ChartBuilder 소스코드 및 데모 업데이트
데모사이트, 소스코드 다운로드
더 자세히 보려면... 여기를 클릭하세요
'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 |
글
Silverlight Toolkit 2008년 12월 버전 릴리즈
2008년 12월 버전 Silverlight Toolkit가 릴리즈 되었습니다.
Silverlight Toolkit December 2008 Download
- Components in the Preview Quality Band
- Components in the Stable Quality Band
새로 추가된 컨트롤
Sample Demo Site : 보러가기
테마
- Bureau Black
- Bureau Blue
- Shiny Red
- Expression Dark
- Expression Light
- Rainier Purple
- Rainier Orange
- Shiny Blue
- Shiny Red
- Whistler Blue
Sample Demo Site : 보러기기
'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 |
글
Silverlight 2 Controls Review - Grid 1
Grid는 여러 가지 기능을 복합적으로 가진 패널입니다. 실버라이트에서 Canvas 패널과 함께 가장 많이 쓰이는 패널중에 하나입니다. 특히 실버라이트는 그리드를 기본 패널로 하고 있으며, 여러 행과 열로 자식 엘리먼트를 배치 할 수 있도록 해 주며 이를 조절할 수 있는 기능을 제공해 줍니다. 그리드를 통해서 작업하는 것은 HTML 안에서 테이블로 다루는 것과 아주 유사합니다.
4×2 행과 열을 만들고 기본적으로 1셀에 1개의 자식 엘리먼트를 집어넣는 예제입니다.
<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 />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--자식 엘리먼트를 배치-->
<Button x:Name="btnL1" Content="0×0" Width="100"
Height="50" Grid.Column="0" Grid.Row="0" />
<Button x:Name="btnL2" Content="0×1" Width="100"
Height="50" Grid.Column="0" Grid.Row="1" />
<Button x:Name="btnL3" Content="0×2" Width="100"
Height="50" Grid.Column="0" Grid.Row="2" />
<Button x:Name="btnL4" Content="0×3" Width="100"
Height="50" Grid.Column="0" Grid.Row="3" />
<Button x:Name="btnR1" Content="1×0" Width="100"
Height="50" Grid.Column="1" Grid.Row="0" />
<Button x:Name="btnR2" Content="1×1" Width="100"
Height="50" Grid.Column="1" Grid.Row="1" />
<Button x:Name="btnR3" Content="1×2" Width="100"
Height="50" Grid.Column="1" Grid.Row="2" />
<Button x:Name="btnR4" Content="1×3" Width="100"
Height="50" Grid.Column="1" Grid.Row="3" />
</Grid>
</UserControl>
예제에 표시된 점선은 Grid의 설정을 강조하기 위해 Grid 컨트롤 안에 ShowGridLines="True" 프로퍼티를 선언하였습니다.
Grid.Column="0" Grid.Row="0" 프로퍼티를 사용하여 Grid안에 자식 엘리먼트의 위치를 지정합니다. Column과 Row의 값이 각각 0이면 가장 처음 셀에 위치합니다.
RowDefinitions 엘리먼트는 행을 만들며 그안에 RowDefinition 엘리먼트 개수는 행의 개수를 지정합니다.
4×2 행과 열을 만들고 기본적으로 1셀에 1개의 자식 엘리먼트를 집어넣으며 엘리먼트의 Height와 Width의 크기만큼 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="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--자식 엘리먼트를 배치-->
<Button x:Name="btnL1" Content="0×0" Width="100"
Height="50" Grid.Column="0" Grid.Row="0" />
<Button x:Name="btnL2" Content="0×1" Width="100"
Height="50" Grid.Column="0" Grid.Row="1" />
<Button x:Name="btnL3" Content="0×2" Width="100"
Height="50" Grid.Column="0" Grid.Row="2" />
<Button x:Name="btnL4" Content="0×3" Width="100"
Height="50" Grid.Column="0" Grid.Row="3" />
<Button x:Name="btnR1" Content="1×0" Width="100"
Height="50" Grid.Column="1" Grid.Row="0" />
<Button x:Name="btnR2" Content="1×1" Width="100"
Height="50" Grid.Column="1" Grid.Row="1" />
<Button x:Name="btnR3" Content="1×2" Width="100"
Height="50" Grid.Column="1" Grid.Row="2" />
<Button x:Name="btnR4" Content="1×3" Width="100"
Height="50" Grid.Column="1" Grid.Row="3" />
</Grid>
</UserControl>
다음 예제는 HTML의 ColSpan, RowSpan 처럼 두개의 셀을 합쳐서 쓰는 효과를 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 />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--두 개의 열을 선언-->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--자식 엘리먼트를 배치-->
<Button x:Name="btnL1" Content="1" Width="100"
Height="50" Grid.ColumnSpan="2" />
<Button x:Name="btnL2" Content="2" Width="100"
Height="50" Grid.RowSpan="4" Grid.Column="0" />
<Button x:Name="btnL3" Content="3" Width="100"
Height="50" Grid.RowSpan="4" Grid.Column="2" />
<Button x:Name="btnL4" Content="4" Width="100"
Height="50" Grid.ColumnSpan="2" Grid.Row="3" />
</Grid>
</UserControl>
ColumnSpan과 RowSpan은 한개의 자식 엘리먼트를 여러개의 셀을 합쳐서 사용하고자 할때 사용합니다.
'Silverlight' 카테고리의 다른 글
| 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 Released!! - x줄타게 기다렸습니다. (0) | 2008/10/14 |
글
Silverlight 2 Controls Review - Canvas
Canvas는 가장 기본적인 패널입니다. Canvas는 명시적인 좌표값을 이용해서 엘리먼트의 위치를 결정합니다. 그러나 오래된 UI 시스템과 다른 점이 한가지 있는데 Canvas는 사방을 자신의좌표값으로 사용할 수 있습니다.
Canvas 는 Left/Top 첨부 프로퍼티를 가지고 있으며 이를 통해서 엘리먼트 위치를 조정할 수 있습니다.
<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">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Margin="22,14,29,24">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</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">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Margin="22,14,29,24">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</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이며 음수일 수도 있습니다. 큰 값을 가진 엘리먼트가 작은 값을 가진 엘리먼트보다 상위에서 렌더링되기 때문에 최소값을 가진 엘리먼트는 가장 밑에 보이고 최대값을 가진 엘리먼트가 가장 위에 보입니다.
'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 |
글
Silverlight 2 Controls Review - Border
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 x:Name="border" BorderThickness="4" Margin="33,34,36,38" Width="409" Height="250">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF26A783"/>
<GradientStop Color="#FF165478" Offset="0.987"/>
<GradientStop Color="#FFFFFFFF" Offset="0.527"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
Border에 Background를 줄 수 있습니다.
<Border x:Name="border" BorderThickness="4" Margin="33,34,36,38"
Width="409" Height="250" BorderBrush="Black" CornerRadius="10">
<Border.Background>
<ImageBrush x:Name="imgBarkground" Stretch="UniformToFill">
<ImageBrush.ImageSource>
<BitmapImage x:Name="bmpBackground" UriSource="f22.png"/>
</ImageBrush.ImageSource>
</ImageBrush>
</Border.Background>
</Border>
</Grid>
ImageBrush의 Stretch 프로퍼티는 Background Image를 Border의 외각선에 맞추는 설정을 합니다.
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을 이용하여 간단하게 효과를 줄 수 있습니다.
'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 |
글
Silverlight 2 Controls Review - HyperlinkButton
기본적인 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">
<Grid x:Name="LayoutRoot" Background="White">
<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을 만든다음 그것을 가져와 사용하는 편이 코드의 중복을 줄일 수 있고 효율적인 코딩작업을 할 수 있습니다
'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 |
글
Silverlight 2 Controls Review - ToggleButton
Xaml에서 ToggleButton 컨트롤의 기본적인 구문입니다.
<ToggleButton x:Name="tgMessage" />
ToggleButton의 현재 눌려진 상태를 IsChecked로 체크하며 프로퍼티 값은 Bool이며 Ture, False 값을 줄 수 있습니다.
<ToggleButton x:Name="tgMessage" Content="Toggle" IsChecked="True"/>
다음 예제는 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">
<Grid x:Name="LayoutRoot" Background="White">
<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");
}
}
}
IsChecked 프로퍼티 값이 True면 현재 Click 유지되는 상태입니다.
'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 |
글
Silverlight 2 Controls Review - Slider
기본적인 Xaml 구문입니다.
<Slider x:Name="sdrRed"/>
주요프로퍼티는 Maximum, Minimum, Value입니다. Maximum는 최고값을, Minimum는 최저값을 설정합니다. 그리고 Value는 현재 값을 설정하거나 대입합니다.
<Slider x:Name="sdrRed" Maximum="255" Minimum="0" Value="1"/>
다음 데모는 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">
<Grid x:Name="LayoutRoot" Background="White">
<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;
}
}
}
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클래스의 정적 프로퍼티 |
'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 |
글
Silverlight 2 Controls Review - MediaElement
MediaElement 컨트롤은 Silverlight 의 가장 큰 장점으로 이야기 하고 있는 멀티미디어 관련 프로그램을 제작하는데 있어 필수 컨트롤입니다.
비디오/오디오의 다양한 코덱을 지원합니다. 실버라이트 지원코덱은 여기(Supported Media Formats and Protocols in Silverlight)에서 확인하시기 바랍니다. 그리고 차후에는 차세대 코덱인 H.264 및 AAC 포맷을 지원한다고 합니다. 관련 내용은 공도님 블로그에 H.264 및 AAC 지원글을 참고하세요.
<MediaElement x:Name="mediaelement"/>
주요프로퍼티를 보면 우선 Source는 재생할 미디어의 경로입니다. AutoPlay는 기본적으로 재생이 지정된 미디어의 자동재생 설정을 지정합니다. Volume는 오디오 소리크기를 설정하고 IsMute는 소리 끄고 키는 설정을 합니다.
<MediaElement x:Name="mediaelement" Source="Silverlight.wmv" AutoPlay="True"
Volume="1.0" IsMuted="True"/>
다음 예제는 재생, 정지, 일시정지 기능을 가진 간단한 동영상 플레이어 입니다. 또 현재 동영상이 플레이되는 위치(Position)를 표시하기 위해 슬라이더와 TextBlock을 이용하였습니다.
<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">
<Grid x:Name="LayoutRoot" Background="White">
<MediaElement x:Name="mediaelement" Source="Silverlight.wmv" AutoPlay="False"
Volume="1.0" Margin="28.5,16,30.5,66"/>
<!--Play-->
<Button Height="30" HorizontalAlignment="Left" Margin="68,0,0,10"
VerticalAlignment="Bottom" Width="77" Content="Play" x:Name="cboPlay"
Click="cboPlay_Click"/>
<!--Pause-->
<Button Height="30" Margin="168,0,155,10" VerticalAlignment="Bottom"
Content="Pause" x:Name="cboPause" Click="cboPause_Click"/>
<!--Stop-->
<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() 함수를 호출합니다.
'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 |
ControlTest13_1.zip