Почему мой XAML выдает ошибку ссылки на объект Storyboard?

Question

Итак, я пытаюсь создать анимацию, которая будет запускаться при нажатии моей кнопки.Предполагается, что «Box» перемещается вправо.

Однако, когда я пытаюсь запустить приложение, я получаю эту ошибку.

System.Windows.Markup.XamlParseException: '' Установитьсвойство 'System.Windows.ResourceDictionary.DeferrableContent' вызвало исключение. 'Номер строки '48' и позиция строки '6'. '

Внутреннее исключение InvalidOperationException: Должна иметь ссылку на объект Storyboard, прежде чем это действие триггера может быть выполнено.

Я новичок в анимациипоэтому я не совсем уверен, почему он выдает эту ошибку.Я попробовал Googleing, но я не мог найти никаких реальных решений.Похоже, что это проблема области действия afaik.

Было бы лучше создать файл ресурсов и использовать его?Я слышал, что люди делают это, но я не уверен, как это сделать.

XAML

<Window x:Class="WooImporter.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:WooImporter"
        mc:Ignorable="d"
        Title="WooImporter" Height="450" Width="800">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.Resources>
            <Storyboard x:Key="slideRight">
                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                 From="0" To="100"
                                 Duration="0:0:0.3"/>
            </Storyboard>
        </Grid.Resources>

        <Grid Column="0"
              Background="#272727">
            <StackPanel>
                <ToggleButton Height="30"
                              Content="Add Products"
                              FontSize="18"
                              Foreground="White"
                              Style="{DynamicResource MenuToggleButtonStyle}"
                              x:Name="MenuButton1"/>
            </StackPanel>
        </Grid>

        <Grid Column="1">
            <StackPanel Width="100"
                        Height="100"
                        Background="#212121"
                        x:Name="Box"/>
        </Grid>
    </Grid>



    <Window.Resources>
        <Style TargetType="ToggleButton"
               x:Key="MenuToggleButtonStyle">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontSize" Value="18"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Orange"></Setter>
                </Trigger>

                <Trigger Property="IsPressed" Value="True">     
                    <Setter Property="Background" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="StackPanel">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, ElementName=MenuButton1}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{DynamicResource slideRight}"/>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>


</Window>

Answer 1

Статический ресурс сделает свое дело, но помните, что раскадровка должна быть выше в иерархии ресурсов, чем стиль StackPanel.Я имею в виду, что вы должны переместить раскадровку в стиль Window.Resources или StackPanel в Grid.Resources.StoryBoard должен быть в стиле StackPanel.Затем к стилю StackPanel добавьте RenderTransform Setter.В StoryBoard.TargetProperty вы должны добавить (TransformGroup.Children)[0], чтобы показать, какой элемент вы хотите преобразовать в TransformGroup.

 <Grid.Resources>
        <Storyboard x:Key="slideRight">
            <Storyboard>
                <DoubleAnimation
                    AutoReverse="True"
                    RepeatBehavior="Forever"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"
                    From="0"
                    To="1000"
                    Duration="0:0:0.3" />
            </Storyboard>
        </Storyboard>

        <Style TargetType="StackPanel">
            <Setter Property="Background" Value="Green" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, ElementName=MenuButton1}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource slideRight}" />
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>

Answer 2

Как я и подозревал, это была проблема объема.Я переместил стиль внутри стековой панели

<Grid Column="1">
            <StackPanel Width="100"
                        Height="100"
                        Background="#212121"
                        x:Name="Box">

                <StackPanel.Style>
                    <Style TargetType="StackPanel">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsChecked, ElementName=theMenuButton}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource slideRight}" />
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>
            </StackPanel>

        </Grid>