[WPF] 繫結資料有任何變更，就啟動Storyboard

範例下載

範例程式碼：點此下載

透過DataTrigger，啟動Storyboard

開發WPF應用程式，常會需要在繫結資料變更時，透過畫面變化來提示使用者資料已變更。例如下列的程式碼：透過DataTrigger與Storyboard的組合，在繫結資料變更為1的時候，來將背景顏色變更為紅色1秒、再變更回預設的白色。

執行結果

XAML

<Window x:Class="NotifyOnTargetUpdatedSample01.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <DockPanel LastChildFill="True">

        <!--Action Block-->
        <Button Content="Click Me" Click="Button_Click" DockPanel.Dock="Bottom" Height="150" />

        <!--Message Block-->
        <Border Background="Transparent">
            <Border.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=Data}" Value="1">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="Red" Duration="0:0:.5" AutoReverse="True" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <TextBlock Text="{Binding Path=Data}"  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" />
        </Border>

    </DockPanel>

</Window>

透過DataTrigger啟動Storyboard，在繫結資料為固定值的時候，能夠正常的運作。但是遇到繫結資料為不定值的時候，因為DataTrigger必須要給定明確的比對參數(DataTrigger.Value)，所以使用DataTrigger來啟動Storyboard就會顯得力不從心。例如下列的程式碼：透過DataTrigger與Storyboard的組合，在繫結資料變更為1、2、3的時候，可以將背景顏色變更為紅色1秒、再變更回預設的白色；而當繫結資料變更為4、5、6...N的時候，範例程式無法因應繫結資料來變更背景顏色。

執行結果

XAML

<Window x:Class="NotifyOnTargetUpdatedSample02.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <DockPanel LastChildFill="True">

        <!--Action Block-->
        <Button Content="Click Me" Click="Button_Click" DockPanel.Dock="Bottom" Height="150" />

        <!--Message Block-->
        <Border Background="Transparent">
            <Border.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=Data}" Value="1">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="Red" Duration="0:0:.5" AutoReverse="True" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=Data}" Value="2">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="Red" Duration="0:0:.5" AutoReverse="True" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=Data}" Value="3">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="Red" Duration="0:0:.5" AutoReverse="True" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <TextBlock Text="{Binding Path=Data}"  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" />
        </Border>

    </DockPanel>

</Window>

透過Binding.TargetUpdated、EventTrigger，啟動Storyboard

為了因應繫結資料變更為不定值的情景，可以將Binding類別的NotifyOnTargetUpdated屬性設定為true，這樣在DataBinding的時候，只要系統發現繫結資料變更，就會發出Binding.TargetUpdated事件。接著只要再透過EventTrigger來處理這個Binding.TargetUpdated事件，並且藉此來啟動Storyboard。就可以簡單完成：繫結資料有任何變更，就啟動Storyboard這個功能。

執行結果

XAML

<Window x:Class="NotifyOnTargetUpdatedSample03.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <DockPanel LastChildFill="True">

        <!--Action Block-->
        <Button Content="Click Me" Click="Button_Click" DockPanel.Dock="Bottom" Height="150" />

        <!--Message Block-->
        <Border Background="Transparent">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="Red" Duration="0:0:.5" AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <TextBlock Text="{Binding Path=Data, NotifyOnTargetUpdated=True}"  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" />
        </Border>

    </DockPanel>

</Window>

簽名檔

期許自己
能以更簡潔的文字與程式碼，傳達出程式設計背後的精神。
真正做到「以形寫神」的境界。

回首頁

昏睡領域

Clark的心得筆記