Rich Internet Application

1. 2010 1학기 Rich Internet Application 동서대학교 김남우

2. Trigger & EventTrigger • EventName • Trigger를 발생시키기 위한 Event Name • SourceName • Event를 처리할 ControlName <Grid x:Name="LayoutRoot"> …… <i:Interaction.Triggers> …… <i:EventTrigger EventName="Click"> …… </i:EventTrigger> …… </i:Interaction.Triggers> …… </Grid>

3. Added Assembly for Action <UserControl x:Class="TriggerActionExample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression .Interactions” mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

4. Ex. of Trigger & Action <Grid x:Name="LayoutRoot"> <Button Content="Click Me" x:Name="button" Width="100" Height="100"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ic:ChangePropertyAction PropertyName="Width" TargetName="button" Value="200"> </ic:ChangePropertyAction> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Grid>

5. Action 대상 자신

6. ChangePropertyAction • TargetName : ChangePropertyAction으로 변경시키고자 하는 ControlName • PropertyName : 변경시킬 Control의 Property Name • Value : 변경될 값 • Ease : Control의 값이 변경될 때 사용할 Animation 지정 • Duration : Ease Property가 설정된 경우, Animation의 재생 시간

7. ChangePropertyAction <Grid x:Name="LayoutRoot" Width="400"> <Button Content="ChangedPropertyAction" Width="100" Height="100” HorizontalAlignment="Left"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ic:ChangePropertyAction TargetName="rect1" PropertyName="Width" Value="120"/> <ic:ChangePropertyAction TargetName="rect1" PropertyName="Height" Value="120"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> <Rectangle x:Name="rect1" Fill="Red" Width="100" Height="100" HorizontalAlignment="Right"/> </Grid> TargetName="rect1" [rect1]

8. GoToStateAction • TargetName : GoToStateAction으로 변경시키고자 하는 ControlName • StateName : 변경될 State Name

9. GoToStateAction <Grid x:Name="LayoutRoot" Width="400"> <Button Content="GoToStateAction" Width="100" Height="100" HorizontalAlignment="Left"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ic:GoToStateAction TargetName="button1" StateName="MouseOver"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> <Button x:Name="button1" Width="100" Height="100" Content="StateTest" HorizontalAlignment="Right"/> </Grid>

10. RemoveElementAction • TargetName : RemoveElementAction으로 삭제하고자 하는 ControlName

11. RemoveElementAction <Grid x:Name="LayoutRoot" Width="400"> <Button Content="RemoveElementAction" Width="140" Height="100" HorizontalAlignment="Left"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ic:RemoveElementAction TargetName="rect1"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> <Rectangle x:Name="rect1" Fill="Red" Width="100" Height="100" HorizontalAlignment="Right"/> </Grid>

12. ControlStoryboardAction • Storyboard를 Control하기 위한 Action • ControlStoryboardOption : Storyboard를 Control하는 방법 • Play, Pause, Stop 등 6가지 조작 방법 • Storyboard : Control할 StoryboardName

13. ControlStoryboardAction <UserControl x:Class="ControlStoryboardActionTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression .Interactions“ mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

14. ControlStoryboardAction <Grid x:Name="LayoutRoot" Width="400"> <Grid.Resources> <Storyboard x:Key="Storyboard1"> <DoubleAnimation Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width" To="200"/> </Storyboard> </Grid.Resources> <Button Content="ControlStoryboard" Width="140" Height="100“ HorizontalAlignment="Left"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <im:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Storyboard1}"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> <Rectangle x:Name="rect1" Fill="Red" Width="100" Height="100" HorizontalAlignment="Right"/> </Grid>

15. HyperlinkAction • 특정 URL로 이동하기 위한 Action • NavigateUrl : HyperlinkAction에 의해 이동할 URL • TargetWindow : 이동하는 Page를 새 창, 현재 창 또는 특정 창을 이용할 것인지를 • 선택하기 위한 Action

16. HyperlinkAction <Grid x:Name="LayoutRoot" Width="400"> <Button Content="HyperlinkAction" Width="140" Height="100"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ic:HyperlinkAction NavigateUri="http://www.daum.net" TargetWindow="_blank"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Grid>

17. PlaySoundAction • Audio File을 재생하기 위해 사용하는 Action • 지원 File Format : mp3, asf, asx, wma, wmv • Source : 재생될 Audio File의 경로 • Volume : Volume 크기 (0~1)

18. PlaySoundAction <UserControl x:Class="ControlStoryboardActionTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression .Interactions“ mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

19. PlaySoundAction <Grid x:Name="LayoutRoot" Width="400"> <Button Content="PlaySoundAction" Width="140" Height="100"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <im:PlaySoundAction Source="./1.mp3" Volume="100"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Grid>