[C#/WPF] DoubleAnimation 엘리먼트 : To 속성에서 데이터 바인딩 사용하기

■ DoubleAnimation 엘리먼트의 To 속성에서 데이터 바인딩을 사용하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    Background="Cornsilk"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <TextBlock>Select a destination value :</TextBlock>
        <Slider Name="sourceSlider"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="500"
            Orientation="Horizontal"
            Minimum="25"
            Maximum="500" />
        <Rectangle
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="{Binding ElementName=sourceSlider, Path=Value}"
            Height="30"
            Fill="Red" />
        <TextBlock Margin="0 30 0 0">Animated Rectangle</TextBlock>
        <Rectangle Name="targetRectangle"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="50"
            Height="30"
            Fill="Blue" />
        <Button Name="triggerAnimationButton"
            Margin="0 30 0 0"
            Width="160"
            Height="30"
            Content="Trigger animation">
            <Button.Triggers>
                <EventTrigger
                    SourceName="triggerAnimationButton"
                    RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard FillBehavior="HoldEnd">
                                <DoubleAnimation
                                    FillBehavior="HoldEnd"
                                    BeginTime="00:00:00"
                                    Storyboard.TargetName="targetRectangle"
                                    Storyboard.TargetProperty="Width"
                                    Duration="00:00:03"
                                    To="{Binding ElementName=sourceSlider, Path=Value}"
                                    From="0" />
                            </Storyboard>
                        </BeginStoryboard >
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

Background="Cornsilk"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<TextBlock>Select a destination value :</TextBlock>

<Slider Name="sourceSlider"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="500"

Orientation="Horizontal"

Minimum="25"

Maximum="500" />

<Rectangle

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="{Binding ElementName=sourceSlider, Path=Value}"

Height="30"

Fill="Red" />

<TextBlock Margin="0 30 0 0">Animated Rectangle</TextBlock>

<Rectangle Name="targetRectangle"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="50"

Height="30"

Fill="Blue" />

<Button Name="triggerAnimationButton"

Margin="0 30 0 0"

Width="160"

Height="30"

Content="Trigger animation">

<Button.Triggers>

<EventTrigger

SourceName="triggerAnimationButton"

RoutedEvent="Button.Click">

<EventTrigger.Actions>

<DoubleAnimation

FillBehavior="HoldEnd"

BeginTime="00:00:00"

Storyboard.TargetName="targetRectangle"

Storyboard.TargetProperty="Width"

Duration="00:00:03"

To="{Binding ElementName=sourceSlider, Path=Value}"

From="0" />

</Storyboard>

</BeginStoryboard >

</EventTrigger.Actions>

</EventTrigger>

</Button.Triggers>

</Button>

</StackPanel>

</Window>

TestProject.zip

.NETFRAMEWORK 2D ANIMATION C# GRAPHICS MICROSOFT WPF

icodebroker

[C#/WPF] DoubleAnimation 엘리먼트 : To 속성에서 데이터 바인딩 사용하기