locked
Creating a collapsing animation effect RRS feed

  • Question

  • Hi

    I have a project where I have several stackpanels horizontal to one another within a grid which is within a scrollviewer, within each stackpanel I have some controls, when a user clicks a button I set the visibility property of the first stackpanel to the left to collapsed my disered effect would be to shift and reposition the remaining stackpanels to the left of the scrollviewer in a slower more animated way instead of the effect that happens currently when you collapse a stackpannel I am currently using the FadeOutThemeAnimation on the stackpanel that I collapse with a completed event that then sets the visibility to collapse but would like to somehow reposition the remaining stackpanels I looked at the RepositionThemeAnimation but was not sure how to or if that would work.. can some one tell me or are there any examples as to how to achieve this? here is a general layout of my xaml..

    <Grid Style="{StaticResource LayoutRootStyle}" >
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFCFC2C2"/>
                    <GradientStop Color="#FFBFAFAF" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ScrollViewer VerticalScrollMode="Disabled" 
    			          HorizontalScrollBarVisibility="Auto" 
    			          VerticalScrollBarVisibility="Disabled" 
                          Grid.Row="1" 
                          Grid.RowSpan="2" 
                          Margin="0,-140,0,0">
    
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
    
       <StackPanel x:Name="spArtist" Background="#FF362E2E" Width="200">
         <StackPanel.Resources>
                 <Storyboard x:Name="sbArtistFade">
                   <FadeOutThemeAnimation TargetName="spArtist"  />
                </Storyboard>
          </StackPanel.Resources>
        </StackPanel>
        <StackPanel Background="#FF362E2E" Grid.Column="1" Width="200" />
        <StackPanel Background="#FF362E2E" Grid.Column="2" Width="200" />
        <StackPanel Background="#FF362E2E" Grid.Column="3" Width="200" />
        <StackPanel Background="#FF362E2E" Grid.Column="4" Width="200" />
      </Grid>
     </ScrollViewer>
    </Grid>
    
    
    Code 
    void sbArtistHideTransition_Completed(object sender, object e)
            {
               spArtist.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            }


    Juan Rodriguez Celltrac Software


    • Edited by rruffman07 Thursday, August 15, 2013 3:51 PM
    Thursday, August 15, 2013 3:51 PM

All replies

  • Hi Juan,

    I'm not quite envisioning what you are trying to do. I'd recommend opening your page up in Blend and playing with the animation timelines there. I suspect you'll be able to get your effect working there even if there isn't a theme animation that does exactly what you want.

    --Rob

    Friday, August 16, 2013 4:50 AM
    Moderator
  • Hi rruffman07,

    I suggest you can set <ColumnDefinition Width="*"/> "Width" as "auto" instead of "*", thus you will be able to see that when your first StackPanel collapsed, the other StackPanels moves to left.

    Best Regards,


    James He
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, August 16, 2013 4:51 AM
    Moderator
  • Hi James

    yes the * will also move them to the left both "Auto" and "*" will that's not my issue its at the rate of speed that they do almost instant its seems more of a fast poping to the left effect not a fluid slower slide effect in which I am desiring a good example would be the "Great British Chefs" App app Microsoft promoted when you click on a recipe and with in the details of the recipe there is a section for the chef if you tap the chef's image you will see that they also seem to collapse the items to the left and the chefs image seems to reposition to the left in a fluid manor.


    Juan Rodriguez Celltrac Software

    Friday, August 16, 2013 4:08 PM
  • Hi Rob

    Thanks for your reply.. Yes I would think that Blend would help but then I would think I would be trying to animate the width property again and from your previous reply to my other post its not recommended and it did not seem to work. a good example of the effect  I am trying to get is would be the "Great British Chefs" App Microsoft promoted when you click on a recipe and within the details of the recipe there is a section for the chef if you tap the chef's image you will see that they also seem to collapse the items to the left and the chefs image seems to reposition to the left in a fluid manor.


    Juan Rodriguez Celltrac Software

    Friday, August 16, 2013 4:14 PM