SILVERLIGHT Archives - 9 중 2 번째 페이지

[C#/SILVERLIGHT] CollectionViewSource 엘리먼트 : 계층적 데이터 바인딩 하기

■ CollectionViewSource 엘리먼트를 사용해 계층적 데이터를 바인딩하는 방법을 보여준다. ▶ Team.cs


/// <summary>
/// 팀
/// </summary>
public class Team
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion
}

/// <summary>

/// 팀

/// </summary>

public class Team

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

}

▶ Division.cs


using System;
using System.Collections.ObjectModel;

/// <summary>
/// 부문
/// </summary>
public class Division
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion

    #region 팀 컬렉션 - TeamCollection

    /// <summary>
    /// 팀 컬렉션
    /// </summary>
    public ObservableCollection<Team> TeamCollection { get; set; }

    #endregion
}

using System;

using System.Collections.ObjectModel;

/// <summary>

/// 부문

/// </summary>

public class Division

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 팀 컬렉션 - TeamCollection

/// <summary>

/// 팀 컬렉션

/// </summary>

public ObservableCollection<Team> TeamCollection { get; set; }

#endregion

}

▶ League.cs


using System;
using System.Collections.ObjectModel;

/// <summary>
/// 리그
/// </summary>
public class League
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion

    #region 부문 컬렉션 - DivisionCollection

    /// <summary>
    /// 부문 컬렉션
    /// </summary>
    public ObservableCollection<Division> DivisionCollection { get; set; }

    #endregion
}

using System;

using System.Collections.ObjectModel;

/// <summary>

/// 리그

/// </summary>

public class League

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 부문 컬렉션 - DivisionCollection

/// <summary>

/// 부문 컬렉션

/// </summary>

public ObservableCollection<Division> DivisionCollection { get; set; }

#endregion

}

▶ LeagueCollection.cs


using System;
using System.Collections.ObjectModel;

/// <summary>
/// 리그 컬렉션
/// </summary>
public class LeagueCollection : ObservableCollection<League>
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - LeagueCollection()

    /// <summary>
    /// 생성자
    /// </summary>
    public LeagueCollection()
    {
        for(int x = 1; x < 3; x++)
        {
            League league = new League()
            {
                Name               = "League " + x,
                DivisionCollection = new ObservableCollection<Division>()
            };

            for(int y = 1; y < 4; y++)
            {
                Division division = new Division()
                {
                    Name           = string.Format("Division {0}-{1}", x, y),
                    TeamCollection = new ObservableCollection<Team>()
                };

                for(int z = 1; z < 5; z++)
                {
                    Team team = new Team()
                    {
                        Name = string.Format("Team {0}-{1}-{2}", x, y, z)
                    };

                    division.TeamCollection.Add(pTeam);
                }

                league.DivisionCollection.Add(pDivision);
            }

            Add(league);
        }
    }

    #endregion
}

using System;

using System.Collections.ObjectModel;

/// <summary>

/// 리그 컬렉션

/// </summary>

public class LeagueCollection : ObservableCollection<League>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - LeagueCollection()

/// <summary>

/// 생성자

/// </summary>

public LeagueCollection()

{

for(int x = 1; x < 3; x++)

{

League league = new League()

{

Name = "League " + x,

DivisionCollection = new ObservableCollection<Division>()

};

for(int y = 1; y < 4; y++)

{

Division division = new Division()

{

Name = string.Format("Division {0}-{1}", x, y),

TeamCollection = new ObservableCollection<Team>()

};

for(int z = 1; z < 5; z++)

{

Team team = new Team()

{

Name = string.Format("Team {0}-{1}-{2}", x, y, z)

};

division.TeamCollection.Add(pTeam);

}

league.DivisionCollection.Add(pDivision);

}

Add(league);

}

#endregion

}

▶

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

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


<Grid xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <sdk:DataGrid />
</Grid>

<sdk:DataGrid />

</Grid>

※ System.Windows.Controls.Data 참조를 추가한다.

[C#/SILVERLIGHT] DesignData 태그 확장 사용하기

■ DesignData 태그 확장을 사용하는 방법을 보여준다. ▶ SampleCustomer.xaml


<local:Customer
    xmlns:local="clr-namespace:TestProject"
    FirstName="Syed"
    LastName="Abbas"
    Age="23"
    CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

<local:Customer

xmlns:local="clr-namespace:TestProject"

FirstName="Syed"

LastName="Abbas"

Age="23"

CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

※빌드 작업 : DesignData ▶ SampleCustomers.xaml


<local:CustomerCollection
    xmlns:local="clr-namespace:TestProject" >
    <local:Customer
        FirstName="Syed"
        LastName="Abbas"
        Age="23"
        CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer
        FirstName="Brenda"
        LastName="Diaz"
        Age="55"
        CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer
        FirstName="Lori"
        LastName="Kane"
        Age="17"
        CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />
</local:CustomerCollection>

<local:CustomerCollection

xmlns:local="clr-namespace:TestProject" >

<local:Customer

FirstName="Syed"

LastName="Abbas"

Age="23"

CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

<local:Customer

FirstName="Brenda"

LastName="Diaz"

Age="55"

CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />

<local:Customer

FirstName="Lori"

LastName="Kane"

Age="17"

CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

※ 빌드 작업 : DesignData

[C#/SILVERLIGHT] DesignInstance 태그 확장 사용하기

■ DesignInstance 태그 확장을 사용하는 방법을 보여준다. ▶ Customer.cs


/// <summary>
/// 고객
/// </summary>
public class Customer
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 이름 - FirstName

    /// <summary>
    /// 이름
    /// </summary>
    public string FirstName { get; set; }

    #endregion
    #region 성 - LastName

    /// <summary>
    /// 성
    /// </summary>
    public string LastName { get; set; }

    #endregion
}

/// <summary>

/// 고객

/// </summary>

public class Customer

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 이름 - FirstName

/// <summary>

/// 이름

/// </summary>

public string FirstName { get; set; }

#endregion

#region 성 - LastName

/// <summary>

/// 성

/// </summary>

public string LastName { get; set; }

#endregion

}

▶ 예제 코드 (XAML)


<Grid x:Name="grid"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:DataBindingApplication"
    d:DataContext="{d:DesignInstance Type=local:Customer}"
    Background="White">
    <TextBox x:Name="textBox"
        Width="200"
        Height="25"
        BorderBrush="Black"
        FontFamily="Times New Roman"
        FontSize="16"
        Text="{Binding Path=FirstName, Mode=TwoWay}" />
</Grid>

<Grid x:Name="grid"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-namespace:DataBindingApplication"

d:DataContext="{d:DesignInstance Type=local:Customer}"

Background="White">

<TextBox x:Name="textBox"

Width="200"

Height="25"

BorderBrush="Black"

FontFamily="Times New Roman"

FontSize="16"

Text="{Binding Path=FirstName, Mode=TwoWay}" />

</Grid>

[C#/SILVERLIGHT] 디자인 타임 속성 사용하기

■ 디자인 타임 속성을 사용하는 방법을 보여준다. ▶ XML 네임스페이스 (XAML)


xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

▶ 디자인 타임 속성


───────────────────────────────────────────────────────────────────────────────
디자인 타임 속성          설명
────────────  ──────────────────────────────────────────────────────────────────
d:DesignHeight            런타임의 높이와는 독립적으로 디자인 타임의 루트 요소 높이 및 너비를 지정한다.
d:DesignWidth
                          <UserControl x:Class="TestSilverlightApplication.MainPage"
                              ...
                              mc:Ignorable="d"
                              d:DesignWidth="400"
                              d:DesignHeight="300">
────────────  ──────────────────────────────────────────────────────────────────
d:DataContext             컨트롤 및 해당 자식에 대한 디자인 타임 데이터 컨텍스트를 지정한다.
                          XAML 뷰에서 컨트롤 바인딩을 선언하고 런타임에 바인딩을 채우는 데 사용되는 DataContext를 설정하는 것이 일반적인 패턴이다.
                          이 패턴을 따르는 경우 지정한 형식의 모양을 디자이너에서 인식할 수 있도록 d:DataContext를 설정할 수 있다.
                          이렇게 하면 데이터 바인딩 작성기를 사용하여 디자인 뷰에서 바인딩을 만들 수 있다.

                          <Grid x:Name="grid"
                              Background="White"
                              d:DataContext="{d:DesignInstance Type=local:Customer}">
────────────  ──────────────────────────────────────────────────────────────────
d:DesignInstance          d:DataContext 또는 d:DesignSource 선언의 일부로 사용된다.
                          디자이너에서 컨트롤에 바인딩할 데이터 소스로 사용할 수 있는 형식을 지정한다.
                          XAML로 생성 가능한 형식을 지정할 필요는 없다.

                          <Grid x:Name="grid"
                              Background="White"
                              d:DataContext="{d:DesignInstance Type=local:Customer}">
────────────  ──────────────────────────────────────────────────────────────────
d:DesignData              d:DataContext 또는 d:DesignSource 선언의 일부로 사용된다.
                          디자인 타임에 사용할 샘플 데이터가 들어 있는 XAML 파일을 지정한다.
                          DesignData 또는 DesignDataWithDesignTimeCreatableTypes 빌드 작업을 사용하여 샘플 데이터를 프로젝트에 통합한다.
                          읽기 전용 속성에 값을 할당할 수 있다.

                          <StackPanel
                              d:DataContext="{d:DesignData Source=/DesignData/SampleCustomer.xaml}">
────────────  ──────────────────────────────────────────────────────────────────
d:DesignSource            CollectionViewSource에 대한 디자인 타임 데이터 소스를 지정한다.
                          이렇게 하면 디자이너에서 모양을 인식할 수 있으므로 데이터 바인딩 작성기를 사용하여 바인딩을 만들 수 있다.

                          <CollectionViewSource x:Key="CollectionViewSourceKey"
                              d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />
────────────  ──────────────────────────────────────────────────────────────────
d:IsDesignTimeCreatable   d:DesignInstance 태그 확장에서 디자인 인스턴스가 디자이너에서 생성된 대체 형식 대신 사용자의 형식에서 만들어지도록 지정한다.

                          <Grid d:DataContext="{d:DesignInstance local:Customer, IsDesignTimeCreatable=True}">
────────────  ──────────────────────────────────────────────────────────────────
d:CreateList              d:DesignInstance 태그 확장에서 디자인 인스턴스가 지정된 형식의 목록이 되도록 지정한다.

                          <CollectionViewSource x:Key="CollectionViewSourceKey"
                              d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />
────────────  ──────────────────────────────────────────────────────────────────
d:Type                    d:DesignInstance 태그 확장에서 만들 형식을 지정한다.
                          인스턴스를 사용자의 형식에서 만들지 아니면 디자이너에서 생성된 대체 형식에서 만들지를 지정하려면 d:IsDesignTimeCreatable을 사용한다.

                          <CollectionViewSource x:Key="CollectionViewSourceKey"
                              d:DesignSource="{d:DesignInstance Type=local:Customer, CreateList=True}" />
───────────────────────────────────────────────────────────────────────────────

───────────────────────────────────────────────────────────────────────────────

디자인 타임 속성 설명

──────────── ──────────────────────────────────────────────────────────────────

d:DesignHeight 런타임의 높이와는 독립적으로 디자인 타임의 루트 요소 높이 및 너비를 지정한다.

d:DesignWidth

<UserControl x:Class="TestSilverlightApplication.MainPage"

...

mc:Ignorable="d"

d:DesignWidth="400"

d:DesignHeight="300">

d:DataContext 컨트롤 및 해당 자식에 대한 디자인 타임 데이터 컨텍스트를 지정한다.

XAML 뷰에서 컨트롤 바인딩을 선언하고 런타임에 바인딩을 채우는 데 사용되는 DataContext를 설정하는 것이 일반적인 패턴이다.

이 패턴을 따르는 경우 지정한 형식의 모양을 디자이너에서 인식할 수 있도록 d:DataContext를 설정할 수 있다.

이렇게 하면 데이터 바인딩 작성기를 사용하여 디자인 뷰에서 바인딩을 만들 수 있다.

<Grid x:Name="grid"

Background="White"

d:DataContext="{d:DesignInstance Type=local:Customer}">

d:DesignInstance d:DataContext 또는 d:DesignSource 선언의 일부로 사용된다.

디자이너에서 컨트롤에 바인딩할 데이터 소스로 사용할 수 있는 형식을 지정한다.

XAML로 생성 가능한 형식을 지정할 필요는 없다.

<Grid x:Name="grid"

Background="White"

d:DataContext="{d:DesignInstance Type=local:Customer}">

d:DesignData d:DataContext 또는 d:DesignSource 선언의 일부로 사용된다.

디자인 타임에 사용할 샘플 데이터가 들어 있는 XAML 파일을 지정한다.

DesignData 또는 DesignDataWithDesignTimeCreatableTypes 빌드 작업을 사용하여 샘플 데이터를 프로젝트에 통합한다.

읽기 전용 속성에 값을 할당할 수 있다.

<StackPanel

d:DataContext="{d:DesignData Source=/DesignData/SampleCustomer.xaml}">

d:DesignSource CollectionViewSource에 대한 디자인 타임 데이터 소스를 지정한다.

이렇게 하면 디자이너에서 모양을 인식할 수 있으므로 데이터 바인딩 작성기를 사용하여 바인딩을 만들 수 있다.

<CollectionViewSource x:Key="CollectionViewSourceKey"

d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />

d:IsDesignTimeCreatable d:DesignInstance 태그 확장에서 디자인 인스턴스가 디자이너에서 생성된 대체 형식 대신 사용자의 형식에서 만들어지도록 지정한다.

d:CreateList d:DesignInstance 태그 확장에서 디자인 인스턴스가 지정된 형식의 목록이 되도록 지정한다.

<CollectionViewSource x:Key="CollectionViewSourceKey"

d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />

d:Type d:DesignInstance 태그 확장에서 만들 형식을 지정한다.

인스턴스를 사용자의 형식에서 만들지 아니면 디자이너에서 생성된 대체 형식에서 만들지를 지정하려면 d:IsDesignTimeCreatable을 사용한다.

<CollectionViewSource x:Key="CollectionViewSourceKey"

d:DesignSource="{d:DesignInstance Type=local:Customer, CreateList=True}" />

▶ 빌드 작업


d:DesignData를 설정하려면 샘플 데이터가 들어 있는 XAML 파일에 빌드 작업을 설정한다.

────────────────────────────────────────────────────────────────────────────────────
빌드 작업                               설명
───────────────────  ────────────────────────────────────────────────────────────────
DesignData                              샘플 데이터 형식을 만들 수 없거나 샘플 데이터 형식에 샘플 데이터 값을 정의할 읽기 전용 속성이 있는 경우 이 빌드 작업을 사용한다.
                                        Silverlight Designer에서 사용자의 비즈니스 개체 형식과 동일한 속성이 있는 대체 형식이 만들어진다.
                                        반드시 생성 가능한 형식을 지정할 필요는 없다.
                                        이는 팩터리 메서드, 추상 형식 및 데이터베이스 연결과 관련된 복잡함을 줄여 준다.
                                        읽기 전용 속성에 값을 할당할 수 있다.
───────────────────  ────────────────────────────────────────────────────────────────
DesignDataWithDesignTimeCreatableTypes  비어 있는 기본 생성자를 사용하여 샘플 데이터 형식을 만들 수 있는 경우 이 빌드 작업을 사용한다.
                                        Silverlight Designer에서 샘플 데이터 파일에 정의된 형식의 인스턴스가 만들어진다.
                                        XAML로 생성할 수 있는 형식을 지정해야 한다.
────────────────────────────────────────────────────────────────────────────────────

d:DesignData를 설정하려면 샘플 데이터가 들어 있는 XAML 파일에 빌드 작업을 설정한다.

────────────────────────────────────────────────────────────────────────────────────

빌드 작업 설명

─────────────────── ────────────────────────────────────────────────────────────────

DesignData 샘플 데이터 형식을 만들 수 없거나 샘플 데이터 형식에 샘플 데이터 값을 정의할 읽기 전용 속성이 있는 경우 이 빌드 작업을 사용한다.

Silverlight Designer에서 사용자의 비즈니스 개체 형식과 동일한 속성이 있는 대체 형식이 만들어진다.

반드시 생성 가능한 형식을 지정할 필요는 없다.

이는 팩터리 메서드, 추상 형식 및 데이터베이스 연결과 관련된 복잡함을 줄여 준다.

읽기 전용 속성에 값을 할당할 수 있다.

DesignDataWithDesignTimeCreatableTypes 비어 있는 기본 생성자를 사용하여 샘플 데이터 형식을 만들 수 있는 경우 이 빌드 작업을 사용한다.

Silverlight Designer에서 샘플 데이터 파일에 정의된 형식의 인스턴스가 만들어진다.

XAML로 생성할 수 있는 형식을 지정해야 한다.

[C#/SILVERLIGHT] Binding 엘리먼트 : RelativeSource 속성 사용하기

■ Binding 엘리먼트의 RelativeSource 속성을 사용하는 방법을 보여준다. ▶ 자동 모드 (XAML)


요소의 한 속성을 동일한 요소의 다른 속성에 바인딩하는 경우

<Binding
    RelativeSource="{RelativeSource Self}"
    ... />

요소의 한 속성을 동일한 요소의 다른 속성에 바인딩하는 경우

<Binding

RelativeSource="{RelativeSource Self}"

... />

▶ TemplatedParent 모드 (XAML)


ControlTemplate이 적용되는 컨트롤이 바인딩 소스가 되는 경우

<Binding
    RelativeSource="{RelativeSource TemplatedParent}"
    ... />

ControlTemplate이 적용되는 컨트롤이 바인딩 소스가 되는 경우

<Binding

RelativeSource="{RelativeSource TemplatedParent}"

... />

▶ FindAncestor 모드 (XAML)

[C#/SILVERLIGHT] BindingExpression 클래스 : UpdateSourceTrigger.Explicit 설정시 처리하기

■ BindingExpression 클래스의 UpdateSourceTrigger 속성에서 Explicit 값을 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<TextBox
    x:Name="textBox"
    Text="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=Explicit}" />
<Button
    Content="Update"
    Click="updateButton_Click" />

<TextBox

x:Name="textBox"

Text="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=Explicit}" />

<Button

Content="Update"

Click="updateButton_Click" />

▶ 예제 코드 (C#)


using System.Windows;
using System.Windows.Data;

/// <summary>
/// 테스트 데이터
/// </summary>
public class TestData
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 값 - Value

    /// <summary>
    /// 값
    /// </summary>
    public string Value { get; set; }

    #endregion
}

...

/// <summary>
/// 테스트 데이터
/// </summary>
private TestData testData;

...

this.testData = new TestData() { Value = "One" };

this.textBox.DataContext = this.testData;

...

#region Update 버튼 클릭시 처리하기 - updateButton_Click(sender, e)

/// <summary>
/// Update 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void updateButton_Click(object sender, RoutedEventArgs e)
{
    BindingExpression bindingExpression = this.textBox.GetBindingExpression(TextBox.TextProperty);

    MessageBox.Show("Before UpdateSource, Test = " + this.testData.Value);

    bindingExpression.UpdateSource();

    MessageBox.Show("After UpdateSource, Test = " + this.testData.Value);
}

#endregion

using System.Windows;

using System.Windows.Data;

/// <summary>

/// 테스트 데이터

/// </summary>

public class TestData

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 값 - Value

/// <summary>

/// 값

/// </summary>

public string Value { get; set; }

#endregion

}

...

/// <summary>

/// 테스트 데이터

/// </summary>

private TestData testData;

...

this.testData = new TestData() { Value = "One" };

this.textBox.DataContext = this.testData;

...

#region Update 버튼 클릭시 처리하기 - updateButton_Click(sender, e)

/// <summary>

/// Update 버튼 클릭시 처리하기

/// </summary>

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

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

private void updateButton_Click(object sender, RoutedEventArgs e)

{

BindingExpression bindingExpression = this.textBox.GetBindingExpression(TextBox.TextProperty);

MessageBox.Show("Before UpdateSource, Test = " + this.testData.Value);

bindingExpression.UpdateSource();

MessageBox.Show("After UpdateSource, Test = " + this.testData.Value);

}

#endregion

[C#/SILVERLIGHT] FrameworkElement 클래스 : BindingValidationError 이벤트 사용하기

■ FrameworkElement 클래스의 BindingValidationError 이벤트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel
    xmlns:local="clr-namespace:SilverlightApplication1"
    BindingValidationError="stackPanel_BindingValidationError">
    <StackPanel.Resources>
        <local:Bill x:Name="BillKey" />
    </StackPanel.Resources>
    <TextBox x:Name="textBox"
        Margin="10"
        Width="50">
        <TextBox.Text>
            <Binding
                Source="{StaticResource BillKey}"
                Path="Amount"
                Mode="TwoWay"
                ValidatesOnExceptions="true"
                NotifyOnValidationError="true" />
        </TextBox.Text>
    </TextBox>
    <Button
        Width="150"
        Height="50"
        Content="Click To Update Source" />
</StackPanel>

<StackPanel

xmlns:local="clr-namespace:SilverlightApplication1"

BindingValidationError="stackPanel_BindingValidationError">

<StackPanel.Resources>

<local:Bill x:Name="BillKey" />

</StackPanel.Resources>

<TextBox x:Name="textBox"

Margin="10"

Width="50">

<TextBox.Text>

<Binding

Source="{StaticResource BillKey}"

Path="Amount"

Mode="TwoWay"

ValidatesOnExceptions="true"

NotifyOnValidationError="true" />

</TextBox.Text>

</TextBox>

<Button

Width="150"

Height="50"

Content="Click To Update Source" />

</StackPanel>

▶ 예제 코드 (C#)


using System;
using System.Windows.Controls;
using System.Windows.Media;

/// <summary>
/// 청구서
/// </summary>
public class Bill
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 금액
    /// </summary>
    private double amount;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 금액 - Amount

    /// <summary>
    /// 금액
    /// </summary>
    public double Amount
    {
        get
        {
            return this.amount;
        }
        set
        {
            if(value < 0d)
            {
                throw new Exception("Amount must be greater than zero.");
            }

            this.amount = value;
        }
    }

    #endregion
}

...

#region 스택 패널 바인딩 무결성 에러 발생시 처리하기 - stackPanel_BindingValidationError(sender, e)

/// <summary>
/// 스택 패널 바인딩 무결성 에러 발생시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void stackPanel_BindingValidationError(object sender, ValidationErrorEventArgs e)
{
    if(e.Action == ValidationErrorEventAction.Added)
    {
        this.textBox.Background = new SolidColorBrush(Colors.Red);
    }
    else if(e.Action == ValidationErrorEventAction.Removed)
    {
        this.textBox.Background = new SolidColorBrush(Colors.White);
    }
}

#endregion

using System;

using System.Windows.Controls;

using System.Windows.Media;

/// <summary>

/// 청구서

/// </summary>

public class Bill

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 금액

/// </summary>

private double amount;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 금액 - Amount

/// <summary>

/// 금액

/// </summary>

public double Amount

{

get

{

return this.amount;

}

set

{

if(value < 0d)

{

throw new Exception("Amount must be greater than zero.");

}

this.amount = value;

}

#endregion

}

...

#region 스택 패널 바인딩 무결성 에러 발생시 처리하기 - stackPanel_BindingValidationError(sender, e)

/// <summary>

/// 스택 패널 바인딩 무결성 에러 발생시 처리하기

/// </summary>

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

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

private void stackPanel_BindingValidationError(object sender, ValidationErrorEventArgs e)

{

if(e.Action == ValidationErrorEventAction.Added)

{

this.textBox.Background = new SolidColorBrush(Colors.Red);

}

else if(e.Action == ValidationErrorEventAction.Removed)

{

this.textBox.Background = new SolidColorBrush(Colors.White);

}

#endregion

[C#/SILVERLIGHT] RelativeSource 태그 확장 사용하기

■ RelativeSource 태그 확장을 사용하는 방법을 보여준다. ▶ 자동 모드 (XAML)


요소의 한 속성을 동일한 요소의 다른 속성에 바인딩하는 경우

"{Binding RelativeSource={RelativeSource Self} ... }"

요소의 한 속성을 동일한 요소의 다른 속성에 바인딩하는 경우

"{Binding RelativeSource={RelativeSource Self} ... }"

▶ TemplatedParent 모드 (XAML)


ControlTemplate이 적용되는 컨트롤에서 바인딩 소스가 되는 경우

"{Binding RelativeSource={RelativeSource TemplatedParent} ... }"

ControlTemplate이 적용되는 컨트롤에서 바인딩 소스가 되는 경우

"{Binding RelativeSource={RelativeSource TemplatedParent} ... }"

▶ FindAncestor 모드 (XAML)


"{Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=TypeName, AncestorLevel=Level} ... }"

"{Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=TypeName, AncestorLevel=Level} ... }"

[C#/SILVERLIGHT] DispatcherTimer 클래스 사용하기

■ DispatcherTimer 클래스를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid x:Name="grid"
    Background="White">
    <TextBlock
        x:Name="textBlock"
        Loaded="textBlock_Loaded" />
</Grid>

<Grid x:Name="grid"

Background="White">

<TextBlock

x:Name="textBlock"

Loaded="textBlock_Loaded" />

</Grid>

▶ 예제 코드 (C#)


using System;
using System.Windows.Input;
using System.Windows.Threading;

/// <summary>
/// 카운트
/// </summary>
private int count = 0;

#region 텍스트 블럭 로드시 처리하기 - textBlock_Loaded(sender, e)

/// <summary>
/// 텍스트 블럭 로드시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
public void textBlock_Loaded(object sender, RoutedEventArgs e)
{
    DispatcherTimer dispatcherTimer = new DispatcherTimer();

    dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 100); // 100 밀리초

    dispatcherTimer.Tick += dispatcherTimer_Tick;

    dispatcherTimer.Start();
}

#endregion

#region 디스패처 타이머 틱 발생시 처리하기 - dispatcherTimer_Tick(sender, e)

/// <summary>
/// 디스패처 타이머 틱 발생시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
public void dispatcherTimer_Tick(object sender, EventArgs e)
{
    this.textBlock.Text = string.Format("Count : {0}", this.count++);
}

#endregion

using System;

using System.Windows.Input;

using System.Windows.Threading;

/// <summary>

/// 카운트

/// </summary>

private int count = 0;

#region 텍스트 블럭 로드시 처리하기 - textBlock_Loaded(sender, e)

/// <summary>

/// 텍스트 블럭 로드시 처리하기

/// </summary>

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

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

public void textBlock_Loaded(object sender, RoutedEventArgs e)

{

DispatcherTimer dispatcherTimer = new DispatcherTimer();

dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 100); // 100 밀리초

dispatcherTimer.Tick += dispatcherTimer_Tick;

dispatcherTimer.Start();

}

#endregion

#region 디스패처 타이머 틱 발생시 처리하기 - dispatcherTimer_Tick(sender, e)

/// <summary>

/// 디스패처 타이머 틱 발생시 처리하기

/// </summary>

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

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

public void dispatcherTimer_Tick(object sender, EventArgs e)

{

this.textBlock.Text = string.Format("Count : {0}", this.count++);

}

#endregion

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

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


<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="translateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:10">
                <LinearDoubleKeyFrame   KeyTime="0:0:3" Value="500" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="400" />
                <SplineDoubleKeyFrame   KeyTime="0:0:6" Value="0" KeySpline="0.6 0.0 0.9 0.00" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        Width="50"
        Height="50"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform" X="0" Y="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="0:0:10">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

Width="50"

Height="50"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] LinearDoubleKeyFrame 엘리먼트 : KeyTime 속성 사용하기

■ LinearDoubleKeyFrame 엘리먼트의 KeyTime 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="translateTransform"
                Storyboard.TargetProperty="X"
                FillBehavior="Stop"
                Duration="0:0:10">
                <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"   />
                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="350" />
                <LinearDoubleKeyFrame KeyTime="0:0:7" Value="50"  />
                <LinearDoubleKeyFrame KeyTime="0:0:8" Value="200" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        Width="50"
        Height="50"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform"
                X="0"
                Y="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

FillBehavior="Stop"

Duration="0:0:10">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

Width="50"

Height="50"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown">

<Rectangle.RenderTransform>

<TranslateTransform x:Name="translateTransform"

X="0"

Y="0" />

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void _pRectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void _pRectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] MediaElement 엘리먼트 : CurrentStateChanged 이벤트 사용하기

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


<Grid
    Width="600"
    Height="450">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"    />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <MediaElement Name="mediaElement" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
        IsMuted="False"
        Volume="1"
        CurrentStateChanged="mediaElement_CurrentStateChanged"
        Source="http://texture2d.iptime.org:8864/butterfly.wmv" />
    <Button Grid.Row="1" Grid.Column="0"
        Content="Stop"
        Click="stopButton_Click" />
    <Button Grid.Row="1" Grid.Column="1"
        Content="Pause"
        Click="pauseButton_Click" />
    <Button Grid.Row="1" Grid.Column="2"
        Content="Play"
        Click="playButton_Click" />
    <TextBlock Grid.Row="2" Grid.Column="0"
        Margin="10"
        FontSize="12"
        Text="CurrentState : " />
    <TextBlock Name="statusTextBlock" Grid.Row="2" Grid.Column="1"
        Margin="0 10 0 0"
        FontSize="12" />
</Grid>

<Grid

Width="600"

Height="450">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<MediaElement Name="mediaElement" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"

IsMuted="False"

Volume="1"

CurrentStateChanged="mediaElement_CurrentStateChanged"

Source="http://texture2d.iptime.org:8864/butterfly.wmv" />

<Button Grid.Row="1" Grid.Column="0"

Content="Stop"

Click="stopButton_Click" />

<Button Grid.Row="1" Grid.Column="1"

Content="Pause"

Click="pauseButton_Click" />

<Button Grid.Row="1" Grid.Column="2"

Content="Play"

Click="playButton_Click" />

<TextBlock Grid.Row="2" Grid.Column="0"

Margin="10"

FontSize="12"

Text="CurrentState : " />

<TextBlock Name="statusTextBlock" Grid.Row="2" Grid.Column="1"

Margin="0 10 0 0"

FontSize="12" />

</Grid>

▶ 예제 코드 (C#)


using System;
using System.Windows;

#region 미디어 엘리먼트 현재 상태 변경시 처리하기 - mediaElement_CurrentStateChanged(sender, e)

/// <summary>
/// 미디어 엘리먼트 현재 상태 변경시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void mediaElement_CurrentStateChanged(object sender, EventArgs e)
{
    this.statusTextBlock.Text = this.mediaElement.CurrentState.ToString();
}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>
/// Stop 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void stopButton_Click(object sender, RoutedEventArgs e)
{
    this.mediaElement.Stop();
}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>
/// Pause 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void pauseButton_Click(object sender, RoutedEventArgs e)
{
    this.mediaElement.Pause();
}

#endregion

#region Play 버튼 클릭시 처리하기 - playButton_Click(sender, e)

/// <summary>
/// Play 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void playButton_Click(object sender, RoutedEventArgs e)
{
    this.mediaElement.Play();
}

#endregion

using System;

using System.Windows;

#region 미디어 엘리먼트 현재 상태 변경시 처리하기 - mediaElement_CurrentStateChanged(sender, e)

/// <summary>

/// 미디어 엘리먼트 현재 상태 변경시 처리하기

/// </summary>

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

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

private void mediaElement_CurrentStateChanged(object sender, EventArgs e)

{

this.statusTextBlock.Text = this.mediaElement.CurrentState.ToString();

}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>

/// Stop 버튼 클릭시 처리하기

/// </summary>

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

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

private void stopButton_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.Stop();

}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>

/// Pause 버튼 클릭시 처리하기

/// </summary>

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

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

private void pauseButton_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.Pause();

}

#endregion

#region Play 버튼 클릭시 처리하기 - playButton_Click(sender, e)

/// <summary>

/// Play 버튼 클릭시 처리하기

/// </summary>

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

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

private void playButton_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.Play();

}

#endregion

[C#/SILVERLIGHT] PointAnimation 엘리먼트 : 실행시 To 속성 동적 변경하기

■ PointAnimation 엘리먼트를 사용해 실행시 속성을 동적 변경하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas Name="canvas"
    Width="600"
    Height="500"
    Background="Gray"
    MouseLeftButtonDown="canvas_MouseLeftButtonDown">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <PointAnimation
                x:Name="pointAnimation"
                Storyboard.TargetName="ellipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:2" />
        </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
        <Path.Data>
            <EllipseGeometry x:Name="ellipseGeometry"
                Center="200 100"
                RadiusX="15"
                RadiusY="15" />
      </Path.Data>
    </Path>
</Canvas>

<Canvas Name="canvas"

Width="600"

Height="500"

Background="Gray"

MouseLeftButtonDown="canvas_MouseLeftButtonDown">

<Canvas.Resources>

<PointAnimation

x:Name="pointAnimation"

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="0:0:2" />

</Storyboard>

</Canvas.Resources>

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="200 100"

RadiusX="15"

RadiusY="15" />

</Path.Data>

</Path>

</Canvas>

▶ 예제 코드 (C#)


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

#region 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기 - canvas_MouseLeftButtonDown(sender, e)

/// <summary>
/// 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    double newX = e.GetPosition(this.canvas).X;
    double newY = e.GetPosition(this.canvas).Y;

    Point toPoint = new Point();

    toPoint.X = newX;
    toPoint.Y = newY;

    this.pointAnimation.To = toPoint;

    this.storyboard.Begin();
}

#endregion

using System.Windows;

using System.Windows.Input;

#region 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기 - canvas_MouseLeftButtonDown(sender, e)

/// <summary>

/// 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

double newX = e.GetPosition(this.canvas).X;

double newY = e.GetPosition(this.canvas).Y;

Point toPoint = new Point();

toPoint.X = newX;

toPoint.Y = newY;

this.pointAnimation.To = toPoint;

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] PointAnimationUsingKeyFrames 엘리먼트 : 실행시 자식 속성 동적 사용하기

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


<Canvas Name="canvas"
    Width="600"
    Height="500"
    Background="Gray"
    MouseLeftButtonDown="canvas_MouseLeftButtonDown">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <PointAnimationUsingKeyFrames x:Name="pointAnimationUsingKeyFrames"
                Storyboard.TargetName="ellipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:3">
                <DiscretePointKeyFrame KeyTime="0:0:0"   />
                <LinearPointKeyFrame   KeyTime="0:0:0.5" />
                <SplinePointKeyFrame   KeyTime="0:0:3"   KeySpline="0.6,0.0 0.9,0.00" />
            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
        <Path.Data>
            <EllipseGeometry x:Name="ellipseGeometry"
                Center="200 100"
                RadiusX="15"
                RadiusY="15" />
        </Path.Data>
    </Path>
</Canvas>

<Canvas Name="canvas"

Width="600"

Height="500"

Background="Gray"

MouseLeftButtonDown="canvas_MouseLeftButtonDown">

<Canvas.Resources>

<PointAnimationUsingKeyFrames x:Name="pointAnimationUsingKeyFrames"

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="0:0:3">

</PointAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="200 100"

RadiusX="15"

RadiusY="15" />

</Path.Data>

</Path>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;

/// <summary>
/// 이전 X
/// </summary>
double previousX = 200d;

/// <summary>
/// 이전 Y
/// </summary>
double previousY = 100d;

#region 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기 - canvas_MouseLeftButtonDown(sender, e)

/// <summary>
/// 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
public void canvas_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    double newX = e.GetPosition(this.canvas).X;
    double newY = e.GetPosition(this.canvas).Y;

    for(int i = 0; i < this.pointAnimationUsingKeyFrames.KeyFrames.Count; i++)
    {
        PointKeyFrame pointKeyFrame = this.pointAnimationUsingKeyFrames.KeyFrames[i];

        if(pointKeyFrame.GetType().Name == "DiscretePointKeyFrame")
        {
            pointKeyFrame.SetValue(DiscretePointKeyFrame.ValueProperty, new Point(this.previousX, this.previousY));
        }
        else if(pointKeyFrame.GetType().Name == "LinearPointKeyFrame")
        {
            double slope = (newY - this.previousY) / (newX - this.previousX);

            double interceptY = newY - (slope * newX);

            double itermediateX  = this.previousX + (newX - this.previousX) / 3d;
            double intermediateY = (slope * itermediateX) + interceptY;

            pointKeyFrame.SetValue(LinearPointKeyFrame.ValueProperty, new Point(itermediateX, intermediateY));
        }
        else if(pointKeyFrame.GetType().Name == "SplinePointKeyFrame")
        {
            pointKeyFrame.SetValue(SplinePointKeyFrame.ValueProperty, new Point(newX, newY));
        }
    }

    this.storyboard.Stop();
    this.storyboard.Begin();

    this.previousX = newX;
    this.previousY = newY;
}

#endregion

using System.Windows;

using System.Windows.Input;

using System.Windows.Media.Animation;

/// <summary>

/// 이전 X

/// </summary>

double previousX = 200d;

/// <summary>

/// 이전 Y

/// </summary>

double previousY = 100d;

#region 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기 - canvas_MouseLeftButtonDown(sender, e)

/// <summary>

/// 캔버스 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

public void canvas_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

double newX = e.GetPosition(this.canvas).X;

double newY = e.GetPosition(this.canvas).Y;

for(int i = 0; i < this.pointAnimationUsingKeyFrames.KeyFrames.Count; i++)

{

PointKeyFrame pointKeyFrame = this.pointAnimationUsingKeyFrames.KeyFrames[i];

if(pointKeyFrame.GetType().Name == "DiscretePointKeyFrame")

{

pointKeyFrame.SetValue(DiscretePointKeyFrame.ValueProperty, new Point(this.previousX, this.previousY));

}

else if(pointKeyFrame.GetType().Name == "LinearPointKeyFrame")

{

double slope = (newY - this.previousY) / (newX - this.previousX);

double interceptY = newY - (slope * newX);

double itermediateX = this.previousX + (newX - this.previousX) / 3d;

double intermediateY = (slope * itermediateX) + interceptY;

pointKeyFrame.SetValue(LinearPointKeyFrame.ValueProperty, new Point(itermediateX, intermediateY));

}

else if(pointKeyFrame.GetType().Name == "SplinePointKeyFrame")

{

pointKeyFrame.SetValue(SplinePointKeyFrame.ValueProperty, new Point(newX, newY));

}

this.storyboard.Stop();

this.storyboard.Begin();

this.previousX = newX;

this.previousY = newY;

}

#endregion

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

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


<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="translateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:15">
                <SplineDoubleKeyFrame KeyTime="0:0:7"  Value="500" KeySpline="0.0 1.0 1.0 0.0" />
                <SplineDoubleKeyFrame KeyTime="0:0:10" Value="200" KeySpline="0.0 0.0 1.0 0.0" />
                <SplineDoubleKeyFrame KeyTime="0:0:15" Value="350" KeySpline="0.25 0.5 0.75 1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle
        Width="50"
        Height="50"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform"
                X="0"
                Y="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="0:0:15">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle

Width="50"

Height="50"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown">

<Rectangle.RenderTransform>

<TranslateTransform x:Name="translateTransform"

X="0"

Y="0" />

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Storyboard 엘리먼트 : 실행시 TargetName 속성 동적 사용하기

■ Storyboard 엘리먼트에서 실행시 TargetName 속성을 동적 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation x:Name="doubleAnimation"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="rectangle1"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle2"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle3"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle4"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</StackPanel>

<StackPanel.Resources>

<DoubleAnimation x:Name="doubleAnimation"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

</StackPanel.Resources>

<Rectangle x:Name="rectangle1"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle2"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle3"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle4"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</StackPanel>

▶ 예제 코드 (C#)


using System.Windows.Input;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Stop();

    Rectangle rectangle = pSender as Rectangle;

    this.doubleAnimation.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

using System.Windows.Shapes;

using System.Windows.Media.Animation;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Stop();

Rectangle rectangle = pSender as Rectangle;

this.doubleAnimation.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] Storyboard 엘리먼트 : 실행시 동적 할당하기

■ Storyboard 엘리먼트에서 실행시 동적으로 할당하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <Storyboard x:Name="storyboard1"
            Completed="storyboard_Completed">
            <DoubleAnimation x:Name="doubleAnimation1"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
        <Storyboard x:Name="storyboard2"
            Completed="storyboard_Completed">
            <DoubleAnimation x:Name="doubleAnimation2"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
        <Storyboard x:Name="storyboard3"
            Completed="storyboard_Completed">
            <DoubleAnimation x:Name="doubleAnimation3"
                Storyboard.TargetProperty="Opacity"
                AutoReverse="True"
                Duration="0:0:2"
                From="1.0"
                To="0.0" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="rectangle1"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle2"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle3"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
    <Rectangle x:Name="rectangle4"
        Margin="3"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</StackPanel>

<StackPanel.Resources>

<Storyboard x:Name="storyboard1"

Completed="storyboard_Completed">

<DoubleAnimation x:Name="doubleAnimation1"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

<Storyboard x:Name="storyboard2"

Completed="storyboard_Completed">

<DoubleAnimation x:Name="doubleAnimation2"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

<Storyboard x:Name="storyboard3"

Completed="storyboard_Completed">

<DoubleAnimation x:Name="doubleAnimation3"

Storyboard.TargetProperty="Opacity"

AutoReverse="True"

Duration="0:0:2"

From="1.0"

To="0.0" />

</Storyboard>

</StackPanel.Resources>

<Rectangle x:Name="rectangle1"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle2"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle3"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

<Rectangle x:Name="rectangle4"

Margin="3"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</StackPanel>

▶ 예제 코드 (C#)


using System;
using System.Windows.Input;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

/// <summary>
/// 스토리보드 1 활성 여부
/// </summary>
bool isStoryboard1Active = false;

/// <summary>
/// 스토리보드 2 활성 여부
/// </summary>
bool isStoryboard2Active = false;

/// <summary>
/// 스토리보드 3 활성 여부
/// </summary>
bool isStoryboard3Active = false;

#region 스토리보드 완료시 처리하기 - storyboard_Completed(sender, e)

/// <summary>
/// 스토리보드 완료시 처리하기
/// </summary>
/// <param name="pSender">이벤트 발생자</param>
/// <param name="pEventArgs">이벤트 인자</param>
private void storyboard_Completed(object sender, EventArgs e)
{
    Storyboard storyboard = sender as Storyboard;

    switch(storyboard.GetValue(NameProperty).ToString())
    {
        case "storyboard1" : this.isStoryboard1Active = false; break;
        case "storyboard2" : this.isStoryboard2Active = false; break;
        case "storyboard3" : this.isStoryboard3Active = false; break;
    }
}

#endregion

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    Rectangle rectangle = pSender as Rectangle;

    if(!this.isStoryboard1Active)
    {
        this.storyboard1.Stop();

        this.doubleAnimation1.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

        this.storyboard1.Begin();

        this.isStoryboard1Active = true;
    }
    else if(!this.isStoryboard2Active)
    {
        this.storyboard2.Stop();

        this.doubleAnimation2.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

        this.storyboard2.Begin();

        this.isStoryboard2Active = true;
    }
    else if(!this.isStoryboard3Active)
    {
        this.storyboard3.Stop();

        this.doubleAnimation3.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

        this.storyboard3.Begin();

        this.isStoryboard3Active = true;
    }
}

#endregion

using System;

using System.Windows.Input;

using System.Windows.Shapes;

using System.Windows.Media.Animation;

/// <summary>

/// 스토리보드 1 활성 여부

/// </summary>

bool isStoryboard1Active = false;

/// <summary>

/// 스토리보드 2 활성 여부

/// </summary>

bool isStoryboard2Active = false;

/// <summary>

/// 스토리보드 3 활성 여부

/// </summary>

bool isStoryboard3Active = false;

#region 스토리보드 완료시 처리하기 - storyboard_Completed(sender, e)

/// <summary>

/// 스토리보드 완료시 처리하기

/// </summary>

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

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

private void storyboard_Completed(object sender, EventArgs e)

{

Storyboard storyboard = sender as Storyboard;

switch(storyboard.GetValue(NameProperty).ToString())

{

case "storyboard1" : this.isStoryboard1Active = false; break;

case "storyboard2" : this.isStoryboard2Active = false; break;

case "storyboard3" : this.isStoryboard3Active = false; break;

}

#endregion

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

Rectangle rectangle = pSender as Rectangle;

if(!this.isStoryboard1Active)

{

this.storyboard1.Stop();

this.doubleAnimation1.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard1.Begin();

this.isStoryboard1Active = true;

}

else if(!this.isStoryboard2Active)

{

this.storyboard2.Stop();

this.doubleAnimation2.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard2.Begin();

this.isStoryboard2Active = true;

}

else if(!this.isStoryboard3Active)

{

this.storyboard3.Stop();

this.doubleAnimation3.SetValue(Storyboard.TargetNameProperty, rectangle.Name);

this.storyboard3.Begin();

this.isStoryboard3Active = true;

}

#endregion

[C#/SILVERLIGHT] DoubleAnimation 엘리먼트 : 사각형을 투명하게 만들기

■ DoubleAnimation 엘리먼트를 사용해 사각형을 투명하게 하는 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Opacity"
                RepeatBehavior="Forever"
                AutoReverse="True"
                Duration="0:0:1"
                From="1.0"
                To="0.0" />
        </Storyboard>
    </Grid.Resources>
    <Rectangle
        x:Name="rectangle"
        Width="100"
        Height="100"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Grid>

<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Opacity"

RepeatBehavior="Forever"

AutoReverse="True"

Duration="0:0:1"

From="1.0"

To="0.0" />

</Storyboard>

</Grid.Resources>

<Rectangle

x:Name="rectangle"

Width="100"

Height="100"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Grid>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] BounceEase 엘리먼트 : 사각형 높이 늘리기

■ BounceEase 엘리먼트를 사용해 사각형의 높이를 늘리는 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height"
                Duration="00:00:03"
                From="30"
                To="200">
                <DoubleAnimation.EasingFunction>
                    <BounceEase
                        EasingMode="EaseOut"
                        Bounces="3"
                        Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="30"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="00:00:03"

From="30"

To="200">

<DoubleAnimation.EasingFunction>

<BounceEase

EasingMode="EaseOut"

Bounces="3"

Bounciness="2" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="30"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

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

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


<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height">
                <EasingDoubleKeyFrame
                    KeyTime="00:00:02"
                    Value="30">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame
                    KeyTime="00:00:06"
                    Value="200" >
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BounceEase Bounces="5" EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="200"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height">

<EasingDoubleKeyFrame

KeyTime="00:00:02"

Value="30">

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame

KeyTime="00:00:06"

Value="200" >

<EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="200"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

[C#/SILVERLIGHT] EasingFunctionBase 클래스 : 커스텀 Easing 함수 정의하기

■ EasingFunctionBase 클래스를 사용해 커스텀 Easing 함수를 정의하는 방법을 보여준다. ▶ MainPage.xaml


...

<Canvas x:Name="canvas"
    Background="White">
    <Canvas.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="Height"
                Duration="00:00:03"
                From="30"
                To="300">
                <DoubleAnimation.EasingFunction>
                    <local:CustomEasingFunction EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Canvas.Resources>
    <Rectangle x:Name="rectangle"
        Canvas.Left="100"
        Canvas.Top="100"
        Width="200"
        Height="30"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Canvas>

...

...

<Canvas x:Name="canvas"

Background="White">

<Canvas.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="Height"

Duration="00:00:03"

From="30"

To="300">

<DoubleAnimation.EasingFunction>

<local:CustomEasingFunction EasingMode="EaseIn" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name="rectangle"

Canvas.Left="100"

Canvas.Top="100"

Width="200"

Height="30"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Canvas>

...

▶ MainPage.xaml.cs


using System.Windows.Input;

...

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="eMouseEventArgs">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

...

using System.Windows.Input;

...

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

this.storyboard.Begin();

}

#endregion

...

▶ CustomEasingFunction.cs


using System;
using System.Windows.Media.Animation;

/// <summary>
/// 커스텀 Easing 함수
/// </summary>
public class CustomEasingFunction : EasingFunctionBase
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CustomEasingFunction()

    /// <summary>
    /// 생성자
    /// </summary>
    public CustomEasingFunction() : base()
    {
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기 - EaseInCore(normalizedTime)

    /// <summary>
    /// 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기
    /// </summary>
    /// <param name="normalizedTime">정규화된 시간</param>
    /// <returns>변환된 진행률</returns>
    protected override double EaseInCore(double normalizedTime)
    {
        return Math.Pow(normalizedTime, 7);
    }

    #endregion
}

using System;

using System.Windows.Media.Animation;

/// <summary>

/// 커스텀 Easing 함수

/// </summary>

public class CustomEasingFunction : EasingFunctionBase

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - CustomEasingFunction()

/// <summary>

/// 생성자

/// </summary>

public CustomEasingFunction() : base()

{

}

#endregion

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

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

#region 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기 - EaseInCore(normalizedTime)

/// <summary>

/// 사용자 지정 감속/가속 함수 EaseIn 모드 처리하기

/// </summary>

/// <param name="normalizedTime">정규화된 시간</param>

/// <returns>변환된 진행률</returns>

protected override double EaseInCore(double normalizedTime)

{

return Math.Pow(normalizedTime, 7);

}

#endregion

}

[C#/SILVERLIGHT] Storyboard 엘리먼트 : 애니메이션 제어하기

■ Storyboard 엘리먼트를 사용해 애니메이션을 제어하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<StackPanel>
    <TextBlock
        Margin="10"
        TextWrapping="Wrap">
        This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.
    </TextBlock>
    <Canvas>
        <Canvas.Resources>
            <Storyboard x:Name="storyboard">
                <PointAnimation
                    Storyboard.TargetName="ellipseGeometry"
                    Storyboard.TargetProperty="Center"
                    RepeatBehavior="Forever"
                    Duration="0:0:5"
                    From="20 200"
                    To="400 100" />
            </Storyboard>
        </Canvas.Resources>
        <Path Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ellipseGeometry"
                    Center="20 200"
                    RadiusX="15"
                    RadiusY="15" />
            </Path.Data>
        </Path>
        <StackPanel
            Canvas.Left="10"
            Canvas.Top="265"
            Orientation="Horizontal">
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Begin"
                Click="beginButton_Click" />
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Pause"
                Click="pauseButton_Click" />
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Resume"
                Click="resumeButton_Click" />
            <Button
                Margin="2"
                Width="65"
                Height="30"
                Content="Stop"
                Click="stopButton_Click" />
        </StackPanel>
    </Canvas>
</StackPanel>

<TextBlock

Margin="10"

TextWrapping="Wrap">

This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.

</TextBlock>

<Canvas.Resources>

<PointAnimation

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

RepeatBehavior="Forever"

Duration="0:0:5"

From="20 200"

To="400 100" />

</Storyboard>

</Canvas.Resources>

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="20 200"

RadiusX="15"

RadiusY="15" />

</Path.Data>

</Path>

<StackPanel

Canvas.Left="10"

Canvas.Top="265"

Orientation="Horizontal">

<Button

Margin="2"

Width="65"

Height="30"

Content="Begin"

Click="beginButton_Click" />

<Button

Margin="2"

Width="65"

Height="30"

Content="Pause"

Click="pauseButton_Click" />

<Button

Margin="2"

Width="65"

Height="30"

Content="Resume"

Click="resumeButton_Click" />

<Button

Margin="2"

Width="65"

Height="30"

Content="Stop"

Click="stopButton_Click" />

</StackPanel>

</Canvas>

</StackPanel>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region Begin 버튼 클릭시 처리하기 - beginButton_Click(sender, e)

/// <summary>
/// Begin 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void beginButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>
/// Pause 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void pauseButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Pause();
}

#endregion

#region Resume 버튼 클릭시 처리하기 - resumeButton_Click(sender, e)

/// <summary>
/// Resume 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void resumeButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Resume();
}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>
/// Stop 버튼 클릭시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void stopButton_Click(object sender, RoutedEventArgs e)
{
    this.storyboard.Stop();
}

#endregion

using System.Windows.Input;

#region Begin 버튼 클릭시 처리하기 - beginButton_Click(sender, e)

/// <summary>

/// Begin 버튼 클릭시 처리하기

/// </summary>

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

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

private void beginButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Begin();

}

#endregion

#region Pause 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>

/// Pause 버튼 클릭시 처리하기

/// </summary>

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

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

private void pauseButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Pause();

}

#endregion

#region Resume 버튼 클릭시 처리하기 - resumeButton_Click(sender, e)

/// <summary>

/// Resume 버튼 클릭시 처리하기

/// </summary>

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

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

private void resumeButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Resume();

}

#endregion

#region Stop 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>

/// Stop 버튼 클릭시 처리하기

/// </summary>

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

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

private void stopButton_Click(object sender, RoutedEventArgs e)

{

this.storyboard.Stop();

}

#endregion

[C#/SILVERLIGHT] Storyboard 클래스 : 코드 구현하기

■ Storyboard 클래스를 사용해 코드로 구현하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Canvas x:Name="canvas" />

▶ 예제 코드 (C#)


using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

Rectangle rectangle = new Rectangle();

rectangle.Width  = 200d;
rectangle.Height = 200d;

Color color = Color.FromArgb(255, 255, 0, 0);

SolidColorBrush solidColorBrush = new SolidColorBrush();

solidColorBrush.Color = color;

rectangle.Fill = solidColorBrush;

this.canvas.Children.Add(rectangle);


Duration duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimation leftDoubleAnimation = new DoubleAnimation();
DoubleAnimation topDoubleAnimation  = new DoubleAnimation();

leftDoubleAnimation.Duration = duration;
topDoubleAnimation.Duration  = duration;


Storyboard storyboard = new Storyboard();

storyboard.Children.Add(leftDoubleAnimation);
storyboard.Children.Add(topDoubleAnimation );

Storyboard.SetTarget(leftDoubleAnimation, rectangle);
Storyboard.SetTarget(topDoubleAnimation , rectangle);

Storyboard.SetTargetProperty(leftDoubleAnimation, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(topDoubleAnimation , new PropertyPath("(Canvas.Top)" ));

leftDoubleAnimation.To = 200d;
topDoubleAnimation.To  = 200d;

this.canvas.Resources.Add("StoryboardKey", storyboard);

storyboard.Begin();

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

Rectangle rectangle = new Rectangle();

rectangle.Width = 200d;

rectangle.Height = 200d;

Color color = Color.FromArgb(255, 255, 0, 0);

SolidColorBrush solidColorBrush = new SolidColorBrush();

solidColorBrush.Color = color;

rectangle.Fill = solidColorBrush;

this.canvas.Children.Add(rectangle);

Duration duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimation leftDoubleAnimation = new DoubleAnimation();

DoubleAnimation topDoubleAnimation = new DoubleAnimation();

leftDoubleAnimation.Duration = duration;

topDoubleAnimation.Duration = duration;

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(leftDoubleAnimation);

storyboard.Children.Add(topDoubleAnimation );

Storyboard.SetTarget(leftDoubleAnimation, rectangle);

Storyboard.SetTarget(topDoubleAnimation , rectangle);

Storyboard.SetTargetProperty(leftDoubleAnimation, new PropertyPath("(Canvas.Left)"));

Storyboard.SetTargetProperty(topDoubleAnimation , new PropertyPath("(Canvas.Top)" ));

leftDoubleAnimation.To = 200d;

topDoubleAnimation.To = 200d;

this.canvas.Resources.Add("StoryboardKey", storyboard);

storyboard.Begin();

※ WPF에서는 Storyboard.SetTarget 메소드가

[C#/SILVERLIGHT] Storyboard 클래스 : TargetName 첨부 속성을 사용해 속성 간접 설정하기

■ Storyboard 클래스의 TargetName 첨부 속성을 사용해 속성을 간접 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <Grid.Resources>
        <Storyboard x:Name="storyboard">
            <ColorAnimation
                Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                RepeatBehavior="Forever"
                AutoReverse="True"
                Duration="00:00:01"
                From="Blue"
                To="Yellow" />
        </Storyboard>
    </Grid.Resources>
    <Rectangle x:Name="rectangle"
        Width="200"
        Height="200"
        StrokeThickness="10"
        Stroke="Blue"
        Fill="Blue"
        MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
</Grid>

<Grid>

<Grid.Resources>

<ColorAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

RepeatBehavior="Forever"

AutoReverse="True"

Duration="00:00:01"

From="Blue"

To="Yellow" />

</Storyboard>

</Grid.Resources>

<Rectangle x:Name="rectangle"

Width="200"

Height="200"

StrokeThickness="10"

Stroke="Blue"

Fill="Blue"

MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />

</Grid>

▶ 예제 코드 (C#)


using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>
/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.storyboard.Begin();
}

#endregion

using System.Windows.Input;

#region 사각형 마우스 왼쪽 버튼 DOWN시 처리하기 - rectangle_MouseLeftButtonDown(sender, e)

/// <summary>

/// 사각형 마우스 왼쪽 버튼 DOWN시 처리하기

/// </summary>

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

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

private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.storyboard.Begin();

}

#endregion