wpf – 在动画元素外面移动带有动画的元素

所以我想要做的是：将一个带有故事板动画的按钮从Uniformgrid内部移动到一个列表框兄弟.正如你从下面的图像中看到的那样,按钮确实向Listbox(绿色矩形)移动,但是一旦它超出了ItemControls的界限,它就会消失.我尝试尽可能地遵循mvvm模式(我使用Mvvm light toolkit).所以我尝试在XAML中保留大部分UI.

所以我想知道的是,对此最好的解决方案是什么？

>我试图使itemscontrol与列表框完全重叠并减小uniformgrid的大小.这很有用,但我在Listbox旁边有一些按钮停止工作,因为它们位于itemscontrol下面.所以按钮不介意出于某种原因走出UniformGrids边界.
>最好的解决方案是创建按钮的副本,然后移动它吗？我该怎么做呢？

XAML文件.我简化了它. (对不起,它还很大)

<Canvas x:Name="Canvas">

<Grid x:Name="SymbolGrid"  Background="Transparent" Height="{Binding ElementName=Canvas, Path=ActualHeight}"
          Width="{Binding ElementName=Canvas, Path=ActualWidth}">


    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition ></ColumnDefinition>
        <ColumnDefinition ></ColumnDefinition>
        <ColumnDefinition ></ColumnDefinition>
        <ColumnDefinition ></ColumnDefinition>
        <ColumnDefinition ></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="180" ></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>



<!-- The listbox that i want the Button to move over -->
    <ListBox ItemsSource="{Binding Output}"  Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="3" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Button>
                    <StackPanel>
                        <Image Source="{Binding Path=Image}" Height="30"/>
                        <TextBlock Text="{Binding Name}" FontSize="20" />
                    </StackPanel>
                </Button>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>



    <ScrollViewer x:Name="TheScrollViewer" Grid.Row="0"  Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="7"
                          VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden"  >
        <ItemsControl   HorizontalAlignment="Stretch" ItemsSource="{Binding PageList}" >

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>

                    <ItemsControl ItemsSource="{Binding}" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=ScrollViewer}}" 
                          Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollViewer}}"  >
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <UniformGrid   Rows="4"  Columns="7" >
                                </UniformGrid>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
            <!-- The Button I want to move over the listbox -->
                                <Button  Width="200">

                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <Image Source="{Binding Path=Image}" Height="100"/>
                                        <TextBlock Text="{Binding Name}" FontSize="20" />
                                    </StackPanel>
                                    <Button.RenderTransform>
                                        <TranslateTransform></TranslateTransform>
                                    </Button.RenderTransform>
                                    <Button.Triggers>
                                        <EventTrigger RoutedEvent="Button.Click">
                                            <BeginStoryboard>

                                                <Storyboard>
                                                    <DoubleAnimation  Duration="0:0:3" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"  

                            >
                                                        <DoubleAnimation.To>
                                                            <MultiBinding Converter="{StaticResource VerticalDistanceConverter}" >
                                                                <!-- Some converting done to get the relative Y position -->
                                                            </MultiBinding>
                                                        </DoubleAnimation.To>
                                                    </DoubleAnimation>
                                                    <DoubleAnimation   Duration="0:0:3" From="0"  Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"  >
                                                        <DoubleAnimation.To>
                                                            <MultiBinding Converter="{StaticResource HorizontalDistanceConverter}" >
                                                                <!-- Some converting done to get the relative X position -->
                                                        </DoubleAnimation.To>
                                                    </DoubleAnimation>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Button.Triggers>

                                </Button>


                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>

            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

</Grid>

我会感激任何帮助:)谢谢.

Would the best solution be to create a copy of the button, then move it?

不,不要重新定位按钮,通过调整边距使其移动直到它出现在目标位置上方.

替代建议

在隐藏的目标位置启动按钮,然后将其移动到网格上,然后使其可见？