用silverlight中的行爲管理屏幕轉換

我的app root visual是一個邊框面板，它始終保持固定。改變的是邊界面板的子項：我做了幾個屏幕（UserControl），並且想要在每個屏幕內的某些按鈕被點擊時在它們之間切換。用silverlight中的行爲管理屏幕轉換

我希望屏幕之間的轉換具有視覺吸引力，以便每個屏幕都有兩個StoryBoards，一個用於幻燈片放映，另一個用於幻燈片放映動畫。（爲了使它更清晰，例如，screen1的動畫幻燈片會將screen1的按鈕和字段以特定方式移動到視圖區域，直到它們到達最終位置）。

我的目標是通過行爲來實現這些屏幕轉換，並將它們應用於屏幕儘可能少的代碼（最好僅限於XAML）。

首先，我defiend這我所有的應用程序的屏幕將實行新的接口：

public interface IScreenWithTransitions 
    { 
     void beginOutTransition(); 

     void beginInTransition(); 

     event EventHandler outTransitionEnded; 
    }

然後後面屏蔽1的代碼看起來就像這樣：

public partial class Screen1 : UserControl, IScreenWithTransitions 
    { 
     public Screen1() 
     { 
      // Required to initialize variables 
      InitializeComponent(); 
     } 

     public void beginOutTransition() 
     { 
      AnimationOut.Completed += outTransitionEnded; 
      AnimationOut.Begin();   
     } 

     public void beginInTransition() 
     { 
      AnimationIn.Begin();    
     } 

     public event EventHandler outTransitionEnded; 
    }

AnimationOut和AnimationIn是故事板，我爲每個屏幕創建混合。

現在，我想寫一個行爲來管理轉換。此行爲將對按鈕起作用。它將有兩個屬性。一個是OldScreenContainer，它是Panel的類型，代表我們想要移除的屏幕的容器。其次是NewScreen，其類型爲IScreenWithTransitions，表示我們想要放入容器的新屏幕。

public class SwitchScreensBehavior : Behavior<Button> 
    { 
     public static readonly DependencyProperty NewScreenProperty = DependencyProperty.Register("NewScreen", typeof(IScreenWithTransitions), typeof(ChangeButtonTextBehavior), null); 
     public static readonly DependencyProperty OldScreenContainerProperty = DependencyProperty.Register("OldScreenContainer", typeof(Panel), typeof(ChangeButtonTextBehavior), null); 

     public IScreenWithTransitions NewScreen 
     { 
      get { return (IScreenWithTransitions)GetValue(SwitchScreensBehavior.NewScreenProperty); } 
      set { SetValue(SwitchScreensBehavior.NewScreenProperty, value); } 
     } 

     public Panel OldScreenContainer 
     { 
      get { return (Panel)GetValue(SwitchScreensBehavior.OldScreenContainerProperty); } 
      set { SetValue(SwitchScreensBehavior.OldScreenContainerProperty, value); } 
     } 

     protected override void OnAttached() 
     { 
      base.OnAttached(); 
      this.AssociatedObject.Click += AssociatedObject_Click; 
     } 

     protected override void OnDetaching() 
     { 
      base.OnDetaching(); 
      this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_Click; 
     } 

     void AssociatedObject_Click(object sender, RoutedEventArgs e) 
     { 

      IScreenWithTransitions oldPage = (IScreenWithTransitions)OldScreenContainer.Children[0]; 
      oldPage.outTransitionEnded += new EventHandler(oldPage_outTransitionEnded); 
      oldPage.beginOutTransition(); 
     } 

     void oldPage_outTransitionEnded(object sender, EventArgs e) 
     { 
      OldScreenContainer.Children.Clear(); 
      OldScreenContainer.Children.Add((UserControl)NewScreen); 
      NewScreen.beginInTransition(); 

     } 


    }

例如，可以說我的根視覺被稱爲Border1，現在方含一種叫做屏蔽1其中有一個名爲Button1的按鈕孩子。當按鈕被點擊時，我想切換到Screen2，所以我會將Button1上的SwitchScreensBehavior與Border1作爲OldScreenContainer屬性，將Screen2作爲NewScreen屬性。

此代碼編譯。我在Blend中看到了這個行爲並且可以將它拖到一個按鈕上。但是，我如何設置行爲的兩個屬性？混合顯示我他們，但我不知道如何將他們指向新的屏幕和容器（以及如果新的屏幕是在運行時創建的話）。所以我試圖通過XAML來定義這些屬性，並且不知道如何去做。也許在代碼中定義它們？

或者，也許這個功能對於一個行爲來說很重要，並且存在其他優雅的解決方案（它依賴於儘可能多的XMAL）？

來源

2011-03-10 Yaron Levi

您可以在XAML中綁定依賴項屬性的值，所以我要做的是在Blend中選擇Panel並通過ViewModel綁定另一個屏幕。因此，在你的行爲，你想最終是這樣的：

OldScreenContainer="{Binding ElementName=MyPanel}" NewScreen="{Binding MyNewScreen}"

這怎麼可以點擊小矩形的屬性字段右邊後在Blend綁定：

This is how you bind in Blend

爲了能夠引用一個UserControl，你可能需要創建一個ViewModel並將其設置爲DataContext，至少我現在想不出任何更簡單/更清晰的方法。其實，等一下，你有沒有在XAML中添加這些屏幕？你可能會將你的主要XAML粘貼到你的問題上？

讓我知道如果這是明確的或你需要任何澄清！

來源

2011-03-10 12:00:41 dain

@dain嗨，你是什麼意思「挑選混合中的面板，並通過ViewModel綁定另一個屏幕」？ – 2011-03-10 12:14:38

@Yaron，我已經添加了一些說明，看看它是否回答你的問題！ – dain 2011-03-10 12:28:45

@dain什麼是ViewModel？我知道這是來自設計模式的一部分，但是你的意思是我可以在混合中以某種方式提升它？ – 2011-03-10 12:59:52

用silverlight中的行爲管理屏幕轉換

回答

相關問題