Как заставить XAML-анимацию ScaleTransform (преобразование рендеринга) работать только через EventTrigger для события Loaded? - PullRequest
Новая
       33

Как заставить XAML-анимацию ScaleTransform (преобразование рендеринга) работать только через EventTrigger для события Loaded?

0 голосов
/ 11 июля 2019

У меня есть UserControl с RenderTransform, установленным на ScaleTransform. Я пытаюсь анимировать его свойства ScaleX и ScaleY в Storyboard внутри EventTrigger с RoutedEvent = Loaded, но анимация не происходит.

Я пытался изменить Длительность DoubleAnimation s, я пытался явно установить целевые свойства анимации с длинным синтаксисом (например, (ScaleTransform.ScaleX) вместо ScaleX), я пытался изменить начальные значения установите значение ScaleTransform, когда оно построено в разметке.

MainWindow.xaml 

<Window x:Class="cs_wpf_test_18.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:cs_wpf_test_18"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:UserControl1/>
    </Grid>
</Window>

UserControl1.xaml 

<UserControl x:Class="cs_wpf_test_18.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:cs_wpf_test_18"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Background="Blue" RenderTransformOrigin="0.5 0.5">

    <UserControl.RenderTransform>
        <ScaleTransform ScaleX="0.5" ScaleY="0.5" x:Name="MyRenderScaleTransform"/>
    </UserControl.RenderTransform>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.Target="{Binding ElementName=MyRenderScaleTransform}"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                         From="0" To="1" Duration="0:0:2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.Target="{Binding ElementName=MyRenderScaleTransform}"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                         From="0" To="1" Duration="0:0:2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </UserControl.Triggers>
</UserControl>

Анимации не работают, вместо этого анимации не запускаются вообще, и начальные значения, установленные при построении ScaleTransform в XAML, отображаются в пользовательском интерфейсе.

Скриншот

Screenshot

1 Ответ

1 голос
/ 11 июля 2019

Вам не нужно устанавливать Storyboard.Target.

Просто напрямую анимируйте свойства объекта ScaleTransform в RenderTransform: 

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

В качестве альтернативы установите Storyboard.TargetName:

<Storyboard>
    <DoubleAnimation Storyboard.TargetName="MyRenderScaleTransform"
                     Storyboard.TargetProperty="ScaleX"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <DoubleAnimation Storyboard.TargetName="MyRenderScaleTransform"
                     Storyboard.TargetProperty="ScaleY"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
...