Silverlight Storyboard中的縮小面板

Question

我希望通過點擊一個按鈕來縮小項目的寬度。

現在我基本上有兩個對象，當你點擊objectA上的按鈕時，一個故事板開始繞X軸旋轉並摺疊它。然後它通過將它的可見性設置爲可見並將其旋轉到視圖中來顯示objectB。

我想要添加的所有內容是，在storyboard發生在objectA和objectB的情況下，設置較小的寬度，然後在故事板結束時將其設置回正常。

我嘗試設置厚度，但我得到了編譯時錯誤，抱怨它是隻讀的。

<ObjectAnimationUsingKeyFrames 
      BeginTime="00:00:00" 
      Storyboard.TargetName="objectA" 
      Storyboard.TargetProperty="(UIElement.Margin)"> 
     <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
     <DiscreteObjectKeyFrame.Value> 
      <Thickness Left="10" Right="10"/> 
     </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
    </ObjectAnimationUsingKeyFrames> 

我有一個簡單的佈局現在...

這是我UI XAML：

<StackPanel> 
    <Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100"> 
     <StackPanel> 
     <TextBox Margin="10"></TextBox> 
     <Button Width="50" x:Name="btn1" Content="Flip" Click="btn1_Click"/> 
     </StackPanel> 
    <Border.Projection> 
     <PlaneProjection RotationX="0"></PlaneProjection> 
    </Border.Projection> 
    </Border> 

    <Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100"> 
    <StackPanel> 
     <TextBox Margin="10"></TextBox> 
     <Button Width="50" x:Name="btn2" Content="Flip" Click="btn2_Click"/> 
    </StackPanel> 
    <Border.Projection> 
     <PlaneProjection RotationX="90"></PlaneProjection> 
    </Border.Projection> 
    </Border> 

這裏是故事板...

<Storyboard x:Name="Storyboardtest"> 
      <DoubleAnimation BeginTime="00:00:00" 
       Storyboard.TargetName="objectA" 
       Storyboard.TargetProperty="(UIElement.Projection).(RotationX)" 

       From="0" To="-90"> 
      </DoubleAnimation> 
      <ObjectAnimationUsingKeyFrames 
       BeginTime="00:00:01" 
       Storyboard.TargetName="objectA" 
       Storyboard.TargetProperty="(UIElement.Visibility)"> 

       <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 

      </ObjectAnimationUsingKeyFrames> 

      <ObjectAnimationUsingKeyFrames 
       BeginTime="00:00:01" 
       Storyboard.TargetName="objectB" 
       Storyboard.TargetProperty="(UIElement.Visibility)"> 

       <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 

      </ObjectAnimationUsingKeyFrames> 

      <DoubleAnimation BeginTime="00:00:01" 
       Storyboard.TargetName="objectB" 
       Storyboard.TargetProperty="(UIElement.Projection).(RotationX)" 

       From="90" To="0"> 
      </DoubleAnimation> 

     </Storyboard> 

Answer 1

如果它只是視覺您想要影響的寬度，請將以下內容添加到故事板。它會給移動到距離控件的外觀和背部，因爲它翻轉：

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="objectA"> 
     <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/> 
    </DoubleAnimationUsingKeyFrames> 
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="objectB"> 
     <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
    </DoubleAnimationUsingKeyFrames> 

您還需要添加爲我所用Expression Blend中添加動畫以下並會自動添加任何必需的元素：

<Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5"> 
     <Border.RenderTransform> 
      <CompositeTransform/> 
     </Border.RenderTransform> 

[剪斷]

<Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5"> 
     <Border.RenderTransform> 
      <CompositeTransform/> 
     </Border.RenderTransform> 

Answer 2

的問題是，無論是寬度和Margin特性不DependencyProperties所以它們不能被動畫。在解決方法中，要完成此操作，需要將一些自定義DependencyProperties添加到您的用戶控制代碼後面，從而可以將它們連接到故事板並反過來操縱對象的實際屬性。

例如，你可以添加此的DependencyProperty到您的用戶控件基本上允許對象A的Width屬性的設置：

public static readonly DependencyProperty ObjectWidthProperty = DependencyProperty.Register(
    "ObjectWidth", 
    typeof(double), 
    typeof(MainPage), 
    new PropertyMetadata(50.0, new PropertyChangedCallback(OnObjectWidthChanged))); 

public double ObjectWidth 
{ 
    get { return (double)GetValue(ObjectWidthProperty); } 
    set { SetValue(ObjectWidthProperty, value); } 
} 

private static void OnObjectWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
{ 
    ((MainPage)d).OnObjectWidthChanged(e); 
} 

private void OnObjectWidthChanged(DependencyPropertyChangedEventArgs e) 
{ 
    this.objectA.Width = this.ObjectWidth; 
} 

然後，您可以添加以下到你的故事板這將動畫對象A的寬度從50像素降至0：

<DoubleAnimation BeginTime="00:00:00" 
       Storyboard.TargetName="MyControl" 
       Storyboard.TargetProperty="ObjectWidth" 
       From="50" To="0"/> 

還需要您將x：Name =「MyControl」添加到您的頂級UserControl。這有點不好意思，但它有助於動畫化一些不屬於DependencyPropertys的元素的基本屬性。