SILVERLIGHT Archives - 9 중 9 번째 페이지

[C#/SILVERLIGHT] TranslateTransform 엘리먼트 사용하기

■ TranslateTransform 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Rectangle
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.RenderTransform>
        <TranslateTransform
            X="20"
            Y="20" />
    </Rectangle.RenderTransform>
</Rectangle>

<Rectangle

Width="100"

Height="100"

Fill="Blue">

<Rectangle.RenderTransform>

<TranslateTransform

X="20"

Y="20" />

</Rectangle.RenderTransform>

</Rectangle>

[C#/SILVERLIGHT] VideoBrush 엘리먼트 사용하기

■ VideoBrush 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <MediaElement x:Name="mediaElement"
        Opacity="0"
        IsMuted="True"
        IsHitTestVisible="False"
        Source="sample.mp4" />
    <Rectangle
        Width="400"
        Height="300">
        <Rectangle.Fill>
            <VideoBrush
                SourceName="mediaElement"
                Stretch="UniformToFill" />
        </Rectangle.Fill>
    </Rectangle>
</Grid>

<Grid>

<MediaElement x:Name="mediaElement"

Opacity="0"

IsMuted="True"

IsHitTestVisible="False"

Source="sample.mp4" />

<Rectangle

Width="400"

Height="300">

<Rectangle.Fill>

<VideoBrush

SourceName="mediaElement"

Stretch="UniformToFill" />

</Rectangle.Fill>

</Rectangle>

</Grid>

[C#/SILVERLIGHT] Behavior 클래스 : 투명도 Behavior 구현하기

■ Behavior<T> 클래스에서 투명도 Behavior를 구현하는 방법을 보여준다. ▶ Expression Blend 참조 추가 (XAML)


Microsoft.Expression.Interactions

Microsoft.Expression.Interactions

▶ 예제 코드 (C#)


using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Interactivity;

namespace TestProject
{
    /// <summary>
    /// 투명도 비헤이비어
    /// </summary>
    public class OpacityBehavior : Behavior<UIElement>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected
        //////////////////////////////////////////////////////////////////////////////// Function

        #region 부착시 처리하기 - OnAttached()

        /// <summary>
        /// 부착시 처리하기
        /// </summary>
        protected override void OnAttached()
        {
            base.OnAttached();

            AssociatedObject.MouseWheel += new MouseWheelEventHandler(AssociatedObject_MouseWheel);
        }

        #endregion

        #region 탈착중 처리하기 - OnDetaching()

        /// <summary>
        /// 탈착중 처리하기
        /// </summary>
        protected override void OnDetaching()
        {
            base.OnDetaching();

            AssociatedObject.MouseWheel -= new MouseWheelEventHandler(AssociatedObject_MouseWheel);
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 결합 객체 마우스 휠시 처리하기 - AssociatedObject_MouseWheel(sender, e)

        /// <summary>
        /// 결합 객체 마우스 휠시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void AssociatedObject_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            if(e.Delta > 0)
            {
                AssociatedObject.Opacity = Math.Max(0d, AssociatedObject.Opacity - 0.1d);
            }
            else if(e.Delta < 0)
            {
                AssociatedObject.Opacity = Math.Min(1d, AssociatedObject.Opacity + 0.1d);
            }
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Input;

using System.Windows.Interactivity;

namespace TestProject

{

/// <summary>

/// 투명도 비헤이비어

/// </summary>

public class OpacityBehavior : Behavior<UIElement>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

//////////////////////////////////////////////////////////////////////////////// Function

#region 부착시 처리하기 - OnAttached()

/// <summary>

/// 부착시 처리하기

/// </summary>

protected override void OnAttached()

{

base.OnAttached();

AssociatedObject.MouseWheel += new MouseWheelEventHandler(AssociatedObject_MouseWheel);

}

#endregion

#region 탈착중 처리하기 - OnDetaching()

/// <summary>

/// 탈착중 처리하기

/// </summary>

protected override void OnDetaching()

{

base.OnDetaching();

AssociatedObject.MouseWheel -= new MouseWheelEventHandler(AssociatedObject_MouseWheel);

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 결합 객체 마우스 휠시 처리하기 - AssociatedObject_MouseWheel(sender, e)

/// <summary>

/// 결합 객체 마우스 휠시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void AssociatedObject_MouseWheel(object sender, MouseWheelEventArgs e)

{

if(e.Delta > 0)

{

AssociatedObject.Opacity = Math.Max(0d, AssociatedObject.Opacity - 0.1d);

}

else if(e.Delta < 0)

{

AssociatedObject.Opacity = Math.Min(1d, AssociatedObject.Opacity + 0.1d);

}

#endregion

}

[C#/SILVERLIGHT] ChangePropertyAction 엘리먼트 사용하기

■ ChangePropertyAction 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Button x:Name="button"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="140"
    Height="100"
    Content="ChangeProperty">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <ei:ChangePropertyAction
                TargetName="rectangle"
                PropertyName="Width"
                Value="120" />

            ...

        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

<Button x:Name="button"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="140"

Height="100"

Content="ChangeProperty">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:ChangePropertyAction

TargetName="rectangle"

PropertyName="Width"

Value="120" />

...

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

[C#/SILVERLIGHT] ControlStoryboardAction 엘리먼트 사용하기

■ ControlStoryboardAction 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Grid
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
    <Grid.Resources>
        <Storyboard x:Key="StoryboardKey">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Width"
                Duration="0:0:0.2"
                To="200" />
        </Storyboard>
    </Grid.Resources>
    <Button
        Width="140"
        Height="100"
        Content="ControlStoryboard">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:ControlStoryboardAction
                    ControlStoryboardOption="Play"
                    Storyboard="{StaticResource StoryboardKey}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
</Grid>

<Grid

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Width"

Duration="0:0:0.2"

To="200" />

</Storyboard>

</Grid.Resources>

<Button

Width="140"

Height="100"

Content="ControlStoryboard">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:ControlStoryboardAction

ControlStoryboardOption="Play"

Storyboard="{StaticResource StoryboardKey}" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

</Grid>

[C#/SILVERLIGHT] Ellipse 엘리먼트 사용하기

■ Ellipse 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Ellipse
    Width="200"
    Height="200"
    StrokeThickness="10"
    Stroke="Black"
    Fill="Orange" />

<Ellipse

Width="200"

Height="200"

StrokeThickness="10"

Stroke="Black"

Fill="Orange" />

[C#/SILVERLIGHT] MouseDragElementBehavior 엘리먼트 사용하기

■ MouseDragElementBehavior 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Grid x:Name="grid"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="600"
    Height="400"
    Background="Khaki">
    <Rectangle
        Width="100"
        Height="100"
        Fill="Blue">
        <i:Interaction.Behaviors>
            <ei:MouseDragElementBehavior
                ConstrainToParentBounds="True"
                X="0"
                Y="0" />
        </i:Interaction.Behaviors>
    </Rectangle>
</Grid>

<Grid x:Name="grid"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="600"

Height="400"

Background="Khaki">

<Rectangle

Width="100"

Height="100"

Fill="Blue">

<i:Interaction.Behaviors>

<ei:MouseDragElementBehavior

ConstrainToParentBounds="True"

X="0"

Y="0" />

</i:Interaction.Behaviors>

</Rectangle>

</Grid>

[C#/SILVERLIGHT] PlaySoundAction 엘리먼트 사용하기

■ PlaySoundAction 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Button
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="140"
    Height="100"
    Content="PlaySoundAction">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <ei:PlaySoundAction
                Source="http://127.0.0.1/ibelive.mp3"
                Volume="1" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

<Button

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="140"

Height="100"

Content="PlaySoundAction">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:PlaySoundAction

Source="http://127.0.0.1/ibelive.mp3"

Volume="1" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

※ Volume 속성은 0에서 1

[C#/SILVERLIGHT] Polygon 엘리먼트 사용하기

■ Polygon 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 1 (XAML)


<Polygon
    Stroke="Orange"
    StrokeThickness="10"
    Fill="SkyBlue"
    Points="0 0, 50 0, 50 50" />

<Polygon

Stroke="Orange"

StrokeThickness="10"

Fill="SkyBlue"

Points="0 0, 50 0, 50 50" />

▶ 예제 코드 2 (XAML)


<Polygon
    StrokeThickness="2"
    Stroke="Purple"
    Points="300 200, 400 125, 400 275, 300 200">
    <Polygon.Fill>
      <SolidColorBrush
        Color="Blue"
        Opacity="0.4" />
    </Polygon.Fill>
</Polygon>

<Polygon

StrokeThickness="2"

Stroke="Purple"

Points="300 200, 400 125, 400 275, 300 200">

<Polygon.Fill>

<SolidColorBrush

Color="Blue"

Opacity="0.4" />

</Polygon.Fill>

</Polygon>

[C#/SILVERLIGHT] Polyline 엘리먼트 사용하기

■ Polyline 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Polyline
    StrokeThickness="10"
    Stroke="Orange"
    Fill="SkyBlue"
    Points="0 0, 50 0, 50 50" />

<Polyline

StrokeThickness="10"

Stroke="Orange"

Fill="SkyBlue"

Points="0 0, 50 0, 50 50" />

[C#/SILVERLIGHT] Rectangle 엘리먼트 사용하기

■ Rectangle 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Rectangle
    Width="200"
    Height="200"
    RadiusX="25"
    RadiusY="25"
    StrokeThickness="10"
    Stroke="Black"
    Fill="Orange" />

<Rectangle

Width="200"

Height="200"

RadiusX="25"

RadiusY="25"

StrokeThickness="10"

Stroke="Black"

Fill="Orange" />

[C#/SILVERLIGHT] TriggerAction 클래스 : 투명도 Action 구현하기

■ TriggerAction<T> 클래스를 사용해 투명도 Action을 구현하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions

Microsoft.Expression.Interactions

▶ 예제 코드 (C#)


using System;
using System.Windows;
using System.Windows.Interactivity;

namespace CustomActionApplication
{
    /// <summary>
    /// 투명도 액션
    /// </summary>
    public class OpacityAction : TriggerAction<UIElement>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 호출하기 - Invoke(parameter)

        /// <summary>
        /// 호출하기
        /// </summary>
        /// <param name="parameter">매개 변수</param>
        protected override void Invoke(object parameter)
        {
            UIElement uiElement = AssociatedObject as UIElement;

            if(uiElement != null)
            {
                if(uiElement.Opacity == 0d)
                {
                    uiElement.Opacity = 1d;
                }
                else
                {
                    uiElement.Opacity = 0d;
                }
            }
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Interactivity;

namespace CustomActionApplication

{

/// <summary>

/// 투명도 액션

/// </summary>

public class OpacityAction : TriggerAction<UIElement>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 호출하기 - Invoke(parameter)

/// <summary>

/// 호출하기

/// </summary>

/// <param name="parameter">매개 변수</param>

protected override void Invoke(object parameter)

{

UIElement uiElement = AssociatedObject as UIElement;

if(uiElement != null)

{

if(uiElement.Opacity == 0d)

{

uiElement.Opacity = 1d;

}

else

{

uiElement.Opacity = 0d;

}

#endregion

}

[C#/SILVERLIGHT] EventTrigger 엘리먼트 사용하기

■ EventTrigger 엘리먼트를 사용하는 방법을 보여준다. ▶ Expression Blend 참조 추가


Microsoft.Expression.Interactions
System.Windows.Interactivity

Microsoft.Expression.Interactions

System.Windows.Interactivity

▶ 예제 코드 (XAML)


<Button
    x:Name="button"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Width="100"
    Height="100"
    Content="Click Me">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
        	<ei:ChangePropertyAction
                TargetName="button"
                PropertyName="Width"
                Value="200" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

<Button

x:Name="button"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Width="100"

Height="100"

Content="Click Me">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Click">

<ei:ChangePropertyAction

TargetName="button"

PropertyName="Width"

Value="200" />

</i:EventTrigger>

</i:Interaction.Triggers>

</Button>

[C#/SILVERLIGHT] Expression Blend 4 Action 사용하기

■ Expression Blend 4 Action을 사용하는 방법을 보여준다. • 'Expression Blend 4 참조 사용하기'를 참조한다. ▶ 프로젝트 참조에서 아래 참조를 추가한다


Microsoft.Expression.Interactions
Microsoft.Expression.Prototyping.Interactivity
System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Prototyping.Interactivity

System.Windows.Interactivity

[C#/SILVERLIGHT] Silverlight Toolkit 어셈블리 추가하기

■ Silverlight Toolkit 어셈블리를 추가하는 방법을 보여준다. ▶ 프로젝트 참조에서 아래 참조를 추가한다.


System.Windows.Controls.Toolkit

System.Windows.Controls.Toolkit

▶ XML 네임스페이스를 아래와 같이 추가한다 (XAML)


xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"