WPF - Bir yığın panelinin yönünü değiştirmek için bir değişiklik mi yaratılmalı?

Question

Bir simgenin (Viewbox Sarılmış Tuval'teki xaml vektörel grafik) metnin (TextBlock) altında kalmasına neden olan bir animasyon oluşturmaya çalışıyorum.

Şu anda Yatay Yönlendirilmiş StackPanel'de Viewbox ve TextBlock var. Yönlendirmeyi dikey olarak değiştirebilirim, ancak bu anlık bir değişikliktir (sorunsuzca animasyonlu değil). Ayrıca TextBlock'un konumunu bir TranslateTransform ile ayarlayabilirim (ki bu canlandırılabilir), ancak bu yeniden kullanılabilir bir şekilde (yani, sabit kodlama değerleri olmadan) yapmak zordur. Bir yığın panel dikey yönde yatay geçiş animasyon herhangi bir WPF merkezli bir yol olup olmadığını

kimse söyleyebilir? Ya da başka bir şekilde istenen etkiyi elde etmeyi düşünmedim mi?

Herkese teşekkürler!

Answer 1

yapabilirsiniz FluidLayout denilen Blend bir özelliği yoktur. Blend

• yılında

  yeni bir devlet grubu oluşturma, bir geçiş süresini ayarlamak ve akış düzenini sağlar.

• Yatay için, biri dikey için iki durum oluşturun.
• Aralarında geçiş yapmak için bir davranış kullanabilirsiniz.

Eğer gerekli dosyalar Microsoft.Expression.Interactions ve System.Windows.Interactivity olmalıdır SDK indirebilirsiniz Blend var yoksa. Bunlara referans ekleyin ve aşağıdaki örneği deneyin.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="WpfApplication4.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <VisualStateManager.CustomVisualStateManager> 
      <ic:ExtendedVisualStateManager/> 
     </VisualStateManager.CustomVisualStateManager> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="Orientation" ic:ExtendedVisualStateManager.UseFluidLayout="True"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="00:00:00.3000000"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Vertical"/> 
       <VisualState x:Name="Horizontal"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stack" Storyboard.TargetProperty="(StackPanel.Orientation)"> 
          <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Orientation.Horizontal}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <StackPanel x:Name="stack" Margin="8,49,8,8"> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
     </StackPanel> 
     <Button HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="H"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Horizontal"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
     <Button HorizontalAlignment="Left" Margin="109,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="V"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Vertical"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
    </Grid> 
</Window> 

Sen unsurları taşımak için durumlarını kullanarak öğe geçişi işlemek için benzer bir yöntemi kullanmak veya Grid.Row, RowSpan, Col değiştirerek yapabilirsiniz. Her şeyi birbirine bağlamak için bazı kodlara ihtiyacınız olabilir. Sorunları çözersem daha ayrıntılı bir örnek arıyorum.