单击“制作按钮”,然后通过动画展开在uniformgrid中的其他元素上

时间:2015-02-04 18:14:22

标签: wpf xaml storyboard mvvm-light

我正在开发一个遵循MVVM模式的WPF应用程序。但我对动画有些麻烦。我有这个uniformGrid填充按钮,当我按下其中一个按钮时,我希望它通过动画展开遍布uniformgrid中的其他元素,直到它是网格中唯一的一个。

带有按钮的统一网格图示 Pic2

单击其中一个按钮后的Uniform网格图示。它将成长为涵盖所有元素 Pic

如果你很好奇,这里有一些代码:

uniformgrid

  <Canvas Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="CanvasContainer">


            <ScrollViewer x:Name="TheScrollViewer" Uid="212"  Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}" 
                          Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas}}" 
                          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=Canvas}}" 
                          Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas}}">

                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <UniformGrid 
                                            Rows="{Binding KeyboardModel.GridRows, Source={StaticResource Locator}}" 
                                                      Columns="{Binding KeyboardModel.GridColumns, Source={StaticResource Locator}}" >
                                            </UniformGrid>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <navigationControls:SymbolControl></navigationControls:SymbolControl>


                                        </Grid>


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

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


        </Canvas>

按钮

<Grid>
    <Button   x:Name="SymbolButton"   wpf:WindowBoundInteraction.Command="{Binding KeyboardModel.UpdateSymbolsCommand, Source={StaticResource Locator}}" 
   CommandParameter="{Binding}"  Width="200"  Style="{StaticResource SymbolButtonStyle}" >

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Source="{Binding Path=Image}" Height="100"/>
            <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" FontSize="20" />
        </StackPanel>
        <Button.RenderTransform>
            <TranslateTransform></TranslateTransform>
        </Button.RenderTransform>
        <Button.Triggers>
            <!-- <EventTrigger RoutedEvent="Button.Loaded">
                <BeginStoryboard Storyboard="{StaticResource FadeInStoryboard}"></BeginStoryboard>
            </EventTrigger>-->
            <EventTrigger RoutedEvent="wpf:WindowBoundInteraction.Activate">
                <BeginStoryboard Storyboard="{StaticResource Minimize}"></BeginStoryboard>
            </EventTrigger >
        </Button.Triggers>

    </Button>

</Grid>

如果有人能指出我正确的方向,我会非常需要一个很长的答案。

0 个答案:

没有答案