Geek Answers Handbook

Moving an element with animation outside its panel

So what I'm trying to do: move the button with the animation of the storyboard from inside Uniformgrid to the sibling, which is Listbox. As you can see from the image below, the button does move to the list (green rectangle), but as soon as it goes beyond the ItemControls, it disappears. I try to follow the mvvm pattern as best as possible (I use the Mvvm light toolkit). Therefore, I try to store most user interfaces in XAML.

So I wonder what is the best solution to this?

  • I tried to make the control element completely overlap the list and reduce the size of the unified curve. This worked, but I have a few buttons next to the Listbox that stopped working because they will be below the control. Thus, the button for some reason does not go beyond UniformGrids.

  • Would a better solution be to create a copy of the button and then move it? How can I do something like this?

enter image description here

XAML file. I have simplified this. (Sorry he's still big)

<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>

I would be grateful for any help :) thanks.

+4
source share
2 answers

Would a better solution be to create a copy of the button and then move it?

, , , , .

, , ?

+2

, . , , , , , .

:

  • control . , Listbox, , . , - UniformGrids.

, , (zindex wise) , . , xaml.

"":

    <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, items. .

, : , , - , , , . .

!

+1

More articles:


All Articles