locked
Collapse over time RRS feed

  • Question

  • Is there a way to collapse a Grid after a state has changed?

    Basically I want to make the collapse after the fading transition. The Default makes it collapse First which totally negates the fade, and if I jsut adjust visibility the grid is blocking buttons under it.

     

    Thanks,

    AJ

    Thursday, August 12, 2010 3:01 PM

All replies

  • You could add a storyboard completed event and in that event collapse the grid
    Thursday, August 12, 2010 3:43 PM
  • Hello Riot,

    you want a Grid to fade out and then let the same Grid collapse right after the fade out completed? Correct?

    Build three different states (normal, fadedout and collapsed), use ExtendedVisualStateManager.UseFluidLayout="True" and activate the states as you like.

    Here is a sample snippet (only XAML):

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
           mc:Ignorable="d"
           x:Class="CollapseOverTimeLab.MainPage"
           Width="640"
           Height="480">
    
     <Grid x:Name="LayoutRoot"
        Background="#FF0C1F31">
      <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="MyGridStates"
                ei:ExtendedVisualStateManager.UseFluidLayout="True">
        <VisualStateGroup.Transitions>
         <VisualTransition GeneratedDuration="0:0:0.6" />
         <VisualTransition From="fadedout"
                  GeneratedDuration="0:0:0.4"
                  To="collapsed">
          <VisualTransition.GeneratedEasingFunction>
           <BackEase EasingMode="EaseInOut" />
          </VisualTransition.GeneratedEasingFunction>
         </VisualTransition>
         <VisualTransition From="collapsed"
                  GeneratedDuration="0:0:0.4"
                  To="normal">
          <VisualTransition.GeneratedEasingFunction>
           <BackEase EasingMode="EaseInOut" />
          </VisualTransition.GeneratedEasingFunction>
         </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="normal" />
        <VisualState x:Name="fadedout">
         <Storyboard>
          <DoubleAnimation Duration="0"
                   To="0.5"
                   Storyboard.TargetProperty="(UIElement.Opacity)"
                   Storyboard.TargetName="myGrid"
                   d:IsOptimized="True" />
         </Storyboard>
        </VisualState>
        <VisualState x:Name="collapsed">
         <Storyboard>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                          Storyboard.TargetName="myGrid">
           <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
             <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
          </ObjectAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
       </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <VisualStateManager.CustomVisualStateManager>
       <ei:ExtendedVisualStateManager />
      </VisualStateManager.CustomVisualStateManager>
      <Grid x:Name="myGrid"
         Background="#FF877A23"
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Width="100"
         Height="100" />
      <Grid x:Name="HoverGrid"
         Height="60"
         VerticalAlignment="Top"
         Margin="0,84,0,0"
         HorizontalAlignment="Center"
         Width="240">
       <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
         <ei:GoToStateAction StateName="fadedout" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeftButtonUp">
         <ei:GoToStateAction StateName="collapsed" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
         <ei:GoToStateAction StateName="normal" />
        </i:EventTrigger>
       </i:Interaction.Triggers>
       <Rectangle Fill="#FF676781"
             Stroke="Black"
             RadiusX="6"
             RadiusY="6"
             StrokeThickness="0" />
       <TextBlock HorizontalAlignment="Center"
             TextWrapping="Wrap"
             Text="Hover here to change the Grid states"
             VerticalAlignment="Center" />
      </Grid>
     </Grid>
    </UserControl>
    

    Please post again if you need some instruction how to build that within Blend 4.

    Martin

    Friday, August 13, 2010 8:37 AM