将带有动画的元素移出其面板

Question

所以我想做的是：将带有故事板动画的按钮从 Uniformgrid 内部移动到同级列表框。从下图中可以看出，按钮确实移向列表框（绿色矩形），但一旦超出 ItemControls 的边界，它就会消失。我尽量遵循 mvvm 模式（我使用 Mvvm light 工具包）。所以我尝试将大多数 UI 保留在 XAML.

中

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

我已尝试使项目控件与列表框完全重叠并减小统一网格的大小。这有效，但我在列表框旁边有一些按钮停止工作，因为它们将在项目控件下方。所以按钮不介意出于某种原因超出 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>

我将不胜感激 :) 谢谢。

Answer 1

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

不，不要重新定位按钮，通过调整边距让它移动，直到它出现在目标位置上。

备选建议

开始在目标位置隐藏按钮，然后将其移动到网格上，然后使其可见？

Answer 2

好的，我找到了我自己问题的答案。这可能不是最好的解决方案，但它对我有用，因为它只是一个原型，我可以接受它。

正如我在问题中所说：

我已尝试使 itemscontrol 与列表框完全重叠并减小 uniformgrid 的大小。这有效，但我在列表框旁边有一些按钮停止工作，因为它们将在项目控件下方。所以按钮不介意出于某种原因超出 UniformGrids 范围。

这个问题是按钮不起作用，因为它会在（zindex 明智的）itemscontrol 下方，而 itemscontrol 在两行上方展开。使按钮再次工作的解决方案与将按钮移动到 xaml 文件中的 itemsource 下一样合乎逻辑。

这是"original":

    <Button Grid.row="0" Grid.column="0" .... /> //Button that did'nt work
    <ListBox Grid.row="0" Grid.column="1" Grid.columnspan="3"> .... </ListBox> //Target
    <Button Grid.row="0" Grid.column="4" .... /> //Button that did'nt work


    <ItemsControl Grid.row="0" Grid.rowspan="2" Grid.columnspan="5" > //Source.( You can see the rowspan of 2.)
        ....
        </ItemsControl>

解决方法：

    <ListBox Grid.row="0" Grid.column="1" Grid.columnspan="3"> .... </ListBox> //Target

    <ItemsControl Grid.row="0" Grid.rowspan="2" Grid.columnspan="5" > //Source.( You can see the rowspan of 2.)
        ....
        </ItemsControl>

    <Button Grid.row="0" Grid.column="0" .... /> 
    <Button Grid.row="0" Grid.column="4" .... />

之所以可行，是因为现在按钮的 Zindex 高于项目源。使与他们互动成为可能。

但正如我所说：这不是一个好的解决方案，所以如果有人知道这样做的好方法，请说出来。因为很好奇

感谢您的帮助！

将带有动画的元素移出其面板

Moving an Element with animation outside it's Panel

wpf

xaml

mvvm

storyboard

mvvm-light

备选建议