Question

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

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

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

enter image description here

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

最好的解决方案是创建按钮的副本，然后移动它吗？

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

替代建议

将目标位置中的按钮启动为隐藏，然后将其移到网格上，然后将其显示？

Answer 2

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

正如我在问题中所说：

我试图让itemscontrol与列表框完全重叠，并减小uniformgrid的大小。这很有用，但我在Listbox旁边有一些按钮停止工作，因为它们位于itemscontrol下面。所以按钮不介意出于某种原因退出UniformGrids边界。

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

这是“原创”：

    <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比itemsource高。可以与他们互动。

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

感谢您的帮助！

在其外部移动带有动画的元素的面板

2 个答案:

替代建议