1월 27일 개최된 Microsoft TechDays Japan 2009 첫날 세션 “Silverlight의 미래”는 오노 모토히사가 나와 Silverlight 2의 상세한 기능과 앞으로 추가될 기능들에 대해서 소개하였다. Silverlight는 지금 어떻게 되어 있는건가? Silverlight 2는 2008년 10월에 정식 릴리즈되었다. .NET 프레임웍의 부분집합형태로서 .NET 언어로 개발할 수 있게 된 것 외에 Silverlight Tools for Visual Studio 2008 SP1에 의해 VS상에서 비주얼한 개발도 되고 여러 컨트롤 컴포넌트도 표준으로 준비되어 기존 개발 노하우를 살려 효율적으로 개발할 수 있게 되어 실무에서 이용할 수 있게 되었다고 말하였다. 실제 북경 올림픽이나 오바마 대통령 취임식 중계등의 이슈도 나오기 시작하였다. 차기 버전인 Silverlight 3에서는 H.264/ACC코덱, 3D렌러딩, GPU 이용 지원이 예정되어 있다. 그 외, 리치한 데이터바인딩 기능, 컨트롤 확대, Linux대응(Monolight)등 한층 더 표현력 향상이 기대된다. 최근 Cloud 컴퓨팅이 주목받으면서 이에 알맞은 클라이언트쪽 성능향샹도 기대된다. 여기서 동향을 파악하고 싶은 RIA기술의 하나라고 말할 수 있을 것이다. Silverlight 컨트롤 Silverlight 2에서는 버튼, 하이퍼링크, 체크박스, 데이터그리드 등 대표적인 응용프로그램에 이용되는 컴포넌트를 표준으로 제공하고 있다. 또한, Silverlight 3에 포함될 현재 개발중인 컨트롤은 Silverlight Toolkit으로 CodePlex에 공개되고 있다. 소스코드 이외, 문서나 샘플, 유닛테스트도 공개되어 있기 때문에, 실제로 다운로드하여 테스트해보는 것이 좋다. 정기적으로 릴리즈와 고객의 피드백을 통해 안정적인 상황에서는 자주 이용되는 것은 코어런타임으로서 포함되고 그 이외는 SDK의 Tools로서 릴리즈된다고 한다. 소스코드 주석에 있는 <QualityBand>가 Stable이면 안정화버전, “Mature”라면 리테일버전 일본어 지원하는 샘플페이지(한글페이지는 언제쯤 ㅠ_ㅠ) Silverlight Toolkit의 각 컨트롤 새로운 컨트롤은 WPF로부터 이식한 컨트롤과 Silverlight 독자적인 컨트롤 2가지로 나누어진다. 전자는 컴포넌트 레이아웃을 처리하는 DockPanel이나 컨텐츠를 전개하고 포함시키는 Expander, 네스트된 계층구조를 표시하는 TreeView등이 있다. DockPanel HTML의 <div>태그에 의한 레이아웃과 같은 배치가 가능 후자의 경우 입력내용을 보완하는 텍스트박스 AutoComplete나 다양한 그래프 표시가 가능한 Charting등이 있다. 컨트롤 개발팀은 WPF와 Silverlight를 같이 하고 있어, 이런 컨트롤의 WPF대응판도 준비중이라고 한다. AutoComplete, 입력보완 텍스트박스 또한, 응용프로그램 외형 통일이나 변경이 쉽게 하는 스타일도 지원되어 현재 9가지 테마가 제공된다. XAML상에서 지정하는 것만으로 간단하게 테마를 적용할 수 있다. Theming, 스타일 통일이나 변경이 쉽게 Silverlight의 미래 및 모바일 대응 Silverlight 방향성으로서 많은 사용자들에게 사용되는 Reach라는 사용자 경혐을 제공하는 Rich의 2가지 축이 되는 모바일 대응에 대한 내용도 소개되었다. Silverlight 2를 기반으로 Silverlight 2 for mobile의 CTP가 현재 2009년 제1/4분기에 나올 예정이고 2009년내에 릴리즈될 예정이라고 한다. 당초 탑재될 예정인 기기로는 Windows Mobile과 Nokia S60이라고 한다. 실제 에뮬레이터를 이용한 개발중인 데모를 봤지만, 에뮬레이터에서는 응용프로그램 시작에 시간이 다소 걸렸지만, 3D처리나 동영상 재생, 웹서비스 이용등은 PC의 브라우저에서 실행하는 것과 차이가 없었다. 실제 실용적인 레벨까지 개량된 것 같다. 추가로 개발언어 사용구분에 대해서는 가벼운 기능으로 실행 시간을 짧게 하고 싶은 경우 자바스크립트로 처리하고 고급기능을 이용하고 싶은 경우 실행시간이 좀 걸리지만, .NET 프레임웍 기반으로 구현하면 좋다고 한다. 에물레이터와 PC브라우저의 3D이미지 표시
Expander, 아이콘을 클릭하면 4개 방향으로 전개할 수 있는 컨테이너
Charting, 공통 데이터포멧으로 여러형태의 표를 표시
출처: Codezine
익스프레션 웹 사용자카페: http://cafe.naver.com/expressionweb
<StackPanel>
<Canvas Width="350" Height="200">
<Rectangle Canvas.Left="150" Canvas.Top="50" Stroke="Black" StrokeThickness="5"
Fill="Azure" Width="50" Height="150">
<Rectangle.RenderTransform>
<TransformGroup>
<!--변형축이 좌측하단-->
<RotateTransform x:Name="xform1" Angle="-90" CenterX="0" CenterY="150"/>
<!--변형축이 우측하단-->
<RotateTransform x:Name="xform2" CenterX="50" CenterY="150"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Name="btnBegin" Content="Begin" Margin="12"/>
<Button Name="btnPause" Content="Pause" Margin="12"/>
<Button Name="btnResume" Content="Resume" Margin="12"/>
<Button Name="btnStop" Content="Stop" Margin="12"/>
<Button Name="btnEnd" Content="Skip to End" Margin="12"/>
<Button Name="btnCenter" Content="Skip to Center" Margin="12"/>
</StackPanel>
<StackPanel.Triggers>
<!--외부에서도 Trigger가능-->
<EventTrigger SourceName="btnBegin" RoutedEvent="Button.Click">
<BeginStoryboard Name="story1">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="xform1"
Storyboard.TargetProperty="Angle"
From="-90" To="0"
Duration="0:0:5"/>
<DoubleAnimation
Storyboard.TargetName="xform2"
Storyboard.TargetProperty="Angle"
From="0" To="90"
Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--storyBoard에 대한 제어 가능-->
<EventTrigger SourceName="btnPause" RoutedEvent="Button.Click">
<!--정지-->
<PauseStoryboard BeginStoryboardName="story1"/>
</EventTrigger>
<EventTrigger SourceName="btnResume" RoutedEvent="Button.Click">
<ResumeStoryboard BeginStoryboardName="story1"/>
</EventTrigger>
<EventTrigger SourceName="btnStop" RoutedEvent="Button.Click">
<!--초기화-->
<StopStoryboard BeginStoryboardName="story1"/>
</EventTrigger>
<EventTrigger SourceName="btnEnd" RoutedEvent="Button.Click">
<!--진행단계의 마지막으로-->
<SkipStoryboardToFill BeginStoryboardName="story1"/>
</EventTrigger>
<EventTrigger SourceName="btnCenter" RoutedEvent="Button.Click">
<!--진행단계의 특정시간으로-->
<SeekStoryboard BeginStoryboardName="story1" Offset="0:0:2.5"/>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Background" Value="White"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform CenterX="15" CenterY="25"/>
<!--변화시길 기준좌표값-->
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard HandoffBehavior="Compose">
<!--Compose : 각 개체의 크기가 변할때 다른 개체를 가리지 않도록-->
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="LayoutTransform.ScaleX"
Duration="0:0:.5"
From="1" To="2"
FillBehavior="Stop"
AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetProperty="LayoutTransform.ScaleY"
Duration="0:0:.5"
From="1" To="2"
FillBehavior="Stop"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
Duration="0:0:1"
From="White" To="Orange"
FillBehavior="Stop"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button>0</Button>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
</StackPanel>
<Window.Resources>
<LinearGradientBrush x:Key="gBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Gray"/>
<GradientStop Offset="0.3" Color="#FF222222"/>
<GradientStop Offset="0.3" Color="Black"/>
<GradientStop Offset="0.9" Color="Black"/>
<GradientStop Offset="0.9" Color="#FF222222"/>
<GradientStop Offset="1" Color="Gray"/>
</LinearGradientBrush>
<ScaleTransform x:Key="sTransform" ScaleX="3" ScaleY="{Binding RelativeSource={RelativeSource Self}, Path=ScaleX}"/><!--ScaleX와 ScaleY 바인딩-->
</Window.Resources>
<Grid ShowGridLines="True"><!--3행2열-->
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="55"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--실제내용-->
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Fill="{StaticResource gBrush}"/>
<Rectangle Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Fill="{StaticResource gBrush}"/>
<Grid Grid.Row="1" Grid.Column="0" Background="White">
<Slider Margin="20" Orientation="Vertical" Minimum="1" Maximum="10" Height="100"
Name="slider" Value="{Binding Path=ScaleX, Source={StaticResource sTransform}, Mode=TwoWay}"/>
<!--역방향바인딩 : 영향을 주는 Slider쪽에서 Binding구현 -->
<!--양방향바인딩( two way : 서로가 서로에 영향을 줌) -->
</Grid>
<!--ScrollViewer.HorizontalScrollBarVisibility="Disabled" : 가로로 overflow생겨도
스크롤바 안생기게-->
<ListBox x:Name="pictureBox" Background="AliceBlue" Grid.Row="1" Grid.Column="1"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel /><!--자동개행-->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<!--이미지 추가-->
<Image Source="D:\[06]WPF\Day03\Day03\bin\Debug\image\Autumn Leaves.jpg"
Margin="3,8" Height="35" LayoutTransform="{StaticResource sTransform}"/>
<!--나머지이미지 생략-->
</ListBox></Grid>
초기화면 : 양방향바인딩되서 Slider의 초기위치가 ScaleX값만큼 올라가있다.
<!--다수의 속성을 같은 값으로 변화시키고 싶을때-->
<!--Height값을 Width값과 Binding시키고 Width만 DoubleAnimation-->
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="48"
Height="{Binding RelativeSource={RelativeSource self}, Path=Width}" Fill="Pink">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
From="48" To="300"
Duration="0:0:.5"
RepeatBehavior="3x"
FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
<TextBlock Text="XAML" FontSize="150pt" FontFamily="Arial Black"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin=".5,.5">
<TextBlock.RenderTransform> <!--프로퍼티엘리먼트(속성) -데이터를 한개만 가질 수 있음-->
<TransformGroup> <!--동시에 두개이상의 변형을 주려할때 사용-->
<RotateTransform x:Name="xformRotate"/> <!--Transform객체에도 이름지정 가능-->
<ScaleTransform x:Name="xformScale"/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="xformRotate"
Storyboard.TargetProperty="Angle"
From="0" To="360"
Duration="0:0:5"
RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="xformScale"
Storyboard.TargetProperty="ScaleX"
From="-1" To="1"
Duration="0:0:3"
RepeatBehavior="Forever"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Height" Value="10"/>
<Setter Property="StrokeThickness" Value="2"/>
<Style.Triggers>
<!--TargetType="{x:Type Ellipse}"라고 명시해줬기때문에 Ellipse.Loaded로 안써도 된다-->
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<!--모든 이벤트에 같은 속성을 적용시켜줄경우 여기에 명시해도 된다-->
<Storyboard FillBehavior="Stop" RepeatBehavior="Forever">
<DoubleAnimation
From="0" To="300"
Storyboard.TargetProperty="Width"
Duration="0:0:5"/>
<DoubleAnimation
From="0" To="300"
Storyboard.TargetProperty="Height"
Duration="0:0:5"/>
<DoubleAnimation
From="1" To="0"
Storyboard.TargetProperty="Opacity"
Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Ellipse Stroke="red" Margin="20,0,0,0"/>
<Ellipse Stroke="Orange" Margin="0,10,0,0"/>
<Ellipse Stroke="Yellow" Margin="0,0,20,0"/>
<Ellipse Stroke="Green" Margin="0,0,0,30"/>
<Ellipse Stroke="Blue" Margin="0,0,0,0"/>
<Ellipse Stroke="DarkBlue" Margin="0,30,10,0"/>
<Ellipse Stroke="Purple" Margin="30,0,0,10"/>
</Grid>
<Canvas Name="canvas1">
<Ellipse Width="48" Height="48" Fill="Blue" Name="ball" Canvas.Left="0" Canvas.Top="0"/>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.SizeChanged">
<!--Canvas Size가 바뀔때(폼사이즈 변경시 canvas사이즈도 변경됨)-->
<BeginStoryboard>
<Storyboard><!--움직이는 영역의 To값을 canvas의 크기로 바운딩-->
<DoubleAnimation<!--Left값 변경-->
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(Canvas.Left)"
<!--Ball이 움직이는 마지막 Left값을 Canvas의 현재Width값으로 바인딩-->
From="0" To="{Binding ElementName=canvas1, Path=ActualWidth}"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
<DoubleAnimation<!--Right값 변경-->
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(Canvas.Top)"
<!--Ball이 움직이는 마지막 Top값을 Canvas의 현재Height값으로 바인딩-->
From="0" To="{Binding ElementName=canvas1, Path=ActualHeight}"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers></Canvas>
<!--컨트롤전체에 Trigger일괄적용-->
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="HorizontalAlignment" Value="Center"/><!--적용할속성-->
<Setter Property="FontSize" Value="12"/>
<Style.Triggers>
<!--MouseEnter-->
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard HandoffBehavior="Compose">
<!--HandoffBehavior="Compose" : 다른이벤트에 간섭을 덜 받는다(?)-->
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="48"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--MouseLeave-->
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="12"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style></Window.Resources>
<Window x:Class="Day02.Ex21"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ex21" Height="300" Width="300" Name="window1" Background="White">
<!--<Window>의 이름과 기본배경 설정-->
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<RadioButton Content="Red">
<RadioButton.Triggers>
<EventTrigger RoutedEvent="RadioButton.Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="window1"
Storyboard.TargetProperty="Background.Color"
<!--<window1>의 background를 변경하는게 아니라
<background><solidbrush>를 변경해야하므로-->
To="Red" AutoReverse="True" RepeatBehavior="3x"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</RadioButton.Triggers>
</RadioButton>
</StackPanel>
</Window>
RECENT COMMENT