2014-12-04 2 views
3

Я пытаюсь оживить StackPanel, когда его видимость изменилась расти с шириной от 0 до ее автоматической ширины, вот что у меня есть на данный момент:WPF анимация ширины StackPanel от 0 до Auto?

<Trigger Property="Visibility" Value="Visible"> 
    <Setter Property="Width" Value="0"></Setter> 
    <Trigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Duration="0:0:1"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
          <System:Double>NaN</System:Double> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </Trigger.EnterActions> 
</Trigger> 

Может кто-нибудь объяснить, как я мог бы достичь этой анимации ? Возможно, это невозможно в том, как я пытаюсь это сделать?

Thanks, alex.

+1

Я произвел некоторые примеры кода анимируя ScaleTransform от 0 до 1, как двойной анимации, но я, кажется, не имеют контроля над каком направлении он одушевляет из. Вы хотите, чтобы я опубликовал образец кода в качестве ответа? – learningcs

+1

@rshepp, если вы столкнулись со всей этой проблемой, вы можете также опубликовать его, даже если он работает наполовину. – McGarnagle

+0

Да, парень, опубликуйте его, единственное, что я нашел близко к работе, это использование LayoutTransform, но я не понял его достаточно хорошо, чтобы он соответствовал моим потребностям. –

ответ

6

Вот быстрый проект макета, который я бросил вместе.

В событии Loaded Window я просто установил видимость панели стека Visible и расширялся, чтобы соответствовать ширине контейнера слева направо ... Надеюсь, это соответствует вашим потребностям.

Некоторые вещи, чтобы отметить:

  • Вы должны предопределить масштаб преобразования, иначе анимация не будет играть.
  • Если вы опускаете To в анимацию, она будет обновляться до значения по умолчанию.

А вот код:

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="600" Loaded="Window_Loaded"> 
    <Border HorizontalAlignment="Center" Width="300" Background="Gainsboro"> 
     <Border.Resources> 
      <Style TargetType="StackPanel" x:Key="expand"> 
       <Setter Property="RenderTransform"> 
        <Setter.Value> 
         <ScaleTransform ScaleX="1"/> 
        </Setter.Value> 
       </Setter> 
       <Style.Triggers> 
        <Trigger Property="Visibility" Value="Visible"> 
         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
                From="0" 
                Duration="0:00:01"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Resources> 

     <StackPanel x:Name="stackpanel" Background="Gray" Visibility="Collapsed" Style="{StaticResource expand}"/> 

    </Border> 
</Window> 
+0

Хорошо работает! Скорее всего, анимация ширины будет напрямую, но анимация масштабирования не будет выглядеть и потертой. Благодаря! –

+0

Это хорошо работает для анимации, когда «Видимость» изменена на «Видимый» - как бы добавить «обратную» анимацию, когда «Видимость» «Свернута»? –

+1

Я заметил в вашем комментарии выше, что вы не можете контролировать направление анимации; все, что вам нужно сделать, - установить «RenderTransformOrigin» на «1,0» для анимации с другой стороны или «0,5,0» для анимации из центра. –

Смежные вопросы