滑動覆蓋面板

Question

我有一個ItemsControl在我的視圖中設置，它會生成可點擊的項目（duh！）。當用戶點擊/選擇其中一個項目時，我希望面板/網格從左向右滑動並覆蓋（佔據整個空間）。我如何使用幻燈片動畫通過MVVM實現這一點？我知道如何對它進行編碼，以便網格顯示正確的數據，並通過設置一個樣式DataTrigger來顯示，但它看起來很可怕，沒有任何動畫。

PS：因爲有些人會問，我剛剛成立了一個新的布爾項目在我的視圖模型，如：

public bool ShowGrid 
{ 
    get { return _showGrid; } 
    set 
    { 
     _showGrid = value; 
     NotifyOfPropertyChange(() => ShowGrid); 
    } 
} 

而DataTrigger只是說：如果ShowGrid = true，那麼知名度=「可見」。沒有什麼花哨。

這怎麼編碼，以便當DataTrigger知道顯示/隱藏網格時，它將它滑入/滑出？

Answer 1

該實現有幾種變體。我會這樣做的。我會創建一個附加的依賴項屬性，它被設置爲True，當您點擊一個項目時觸發該事件。根據依賴屬性，在DataTrigger中，動畫將顯示滑動動畫。

的樣品附依賴屬性：

public static class PanelBehaviors 
{ 
    public static void SetIsSliding(DependencyObject target, bool value) 
    { 
     target.SetValue(IsSlidingProperty, value); 
    } 

    public static readonly DependencyProperty IsSlidingProperty = 
               DependencyProperty.RegisterAttached("IsSliding", 
               typeof(bool), 
               typeof(PanelBehaviors), 
               new UIPropertyMetadata(false, OnIsSliding)); 

    private static void OnIsSliding(DependencyObject sender, DependencyPropertyChangedEventArgs e) 
    { 
     if (e.NewValue is bool && ((bool)e.NewValue) == true) 
     { 
      // You can do the operations on the object for which the property is set, 
      // for example, for panel - set Visible 
     } 
    } 
} 

在後面的代碼（例如：在事件處理程序），可以設置爲附接依賴屬性這樣的值：

PanelBehaviours.SetIsSliding(SomeControl, Value // True or False); 

或在XAML中：

<SomeControl local:PanelBehaviours.SetIsSliding="True" ... /> 

在OnIsSliding您可以應用動畫，但我會在XAML一側執行此操作。顯示面板可以通過依賴屬性或動畫完成。

的DataTrigger和幻燈片的動畫樣品：

<DataTrigger Binding="{Binding ElementName=MyPanel, Path=(local:MyDependencyClass.IsSliding), Mode=OneWay}" Value="True"> 
    <DataTrigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard> 
       <!-- Here you can show the panel, or use additional animation --> 
       <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MyPanel" Storyboard.TargetProperty="VerticalAlignment"> 
        <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
         <DiscreteObjectKeyFrame.Value> 
          <VerticalAlignment>Bottom</VerticalAlignment> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </DataTrigger.EnterActions> 
</DataTrigger> 

在WPF沒有動畫比對，能想出的唯一的東西 - 它ThicknessAnimation（使用Margin）。但是您可以使用DiscreteObjectKeyFrame來設置對齊方式。以上是一個簡單的演示，其中Panel在底部設置VerticalAlignment。

原則上，所有這些選項都不應與MVVM模式相矛盾。

請參閱我實施方案的實例有附加屬性和對準動畫：

wpf ObjectAnimationUsingKeyFrames setting the left value

Animation limited by panel

How to clear the contents of a PasswordBox when login fails without databinding?

How to inherit Button behaviour in WPF style?

Quit application from a user Control