如何通過單擊用戶控件中的一個按鈕來更新框架的Source屬性？

Question

我想了解如何通過點擊一個「下一步」按鈕，基於點擊次數來更新源屬性，並且能夠在每次單擊另一次按鈕時將不同頁面加載到框架中。任何建議非常感謝！先謝謝你。

主窗口代碼：

<Grid x:Name="LayoutRoot"> 
    <Frame Content="Frame" Source="/WpfApplication1;component/Page1.xaml"/> 
    <local:NavUserControl HorizontalAlignment="Center" VerticalAlignment="Bottom"/> 
</Grid> 

用戶控件包含按鈕：

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,20"> 
    <Button Content="Back" HorizontalAlignment="Left" Width="75"/> 
    <Button Content="Next" HorizontalAlignment="Left" Width="75" /> 
</StackPanel> 

Answer 1

在你NavUserControl，我將線了兩個事件或命令（或兩者兼而有之，也許是）未來和後退按鈕。然後，您可以從MainWindow中訪問這些文件，並將相應的值設置爲Source屬性。

如果您轉到活動路線，請將其附加到活動並直接設置來源。

如果你走命令路由，在你的viewmodel中設置一個命令，將它綁定到usercontrol，並將Source屬性綁定到viewmodel中的另一個值。

編輯：根據OP的請求添加一些代碼。請記住，這不是最佳實踐。只是一些例子。

去事件路線應該是最簡單的。你已經知道如何做到這一點，我想可以。只需添加：

public event EventHandler BackClicked; 
public event EventHandler NextClicked; 

private void Back_Click(object sender, RoutedEventArgs e) 
{ 
    BackClicked(sender, e); 
} 

private void Next_Click(object sender, RoutedEventArgs e) 
{ 
    NextClicked(sender, e); 
} 

事件到您的NavUserControl。然後改變你的XAML到：

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,20">  
    <Button Content="Back" HorizontalAlignment="Left" Width="75" Click="Back_Click" />  
    <Button Content="Next" HorizontalAlignment="Left" Width="75" Click="Next_Click" /> 
</StackPanel> 

在MainWindow.xaml.cs文件

而現在，添加：

private void BackClicked(object sender, EventArgs e) 
{ 
    Uri source = // Whatever your business logic is to determine the previous page; 
    _Frame.Source = source; 
} 

private void NextClicked(object sender, EventArgs e) 
{ 
    Uri source = // Whatever your business logic is to determine the next page; 
    _Frame.Source = source; 
} 

，改變主窗口XAML是：

<Grid x:Name="LayoutRoot"> 
    <Frame x:Name="_Frame" Content="Frame" 
      Source="/WpfApplication1;component/Page1.xaml"/> 
    <local:NavUserControl HorizontalAlignment="Center" VerticalAlignment="Bottom" 
          BackClicked="BackClicked" NextClicked="NextClicked" /> 
</Grid> 

去了命令路線需要更多的架構，但是更加乾淨。我建議使用你最喜歡的MVVM工具包。我最喜歡的是MVVMLight，所以這就是我將用於這個例子。

創建一個視圖模型類，像這樣：

public class ViewModel : GalaSoft.MvvmLight.ViewModelBase 
{ 
    private Uri _Source; 
    public Uri Source 
    { 
     get { return _Source; } 
     set 
     { 
      if (_Source != value) 
      { 
       _Source = value; 
       RaisePropertyChanged("Source"); 
      } 
     } 
    } 



    private GalaSoft.MvvmLight.Command.RelayCommand _BackCommand; 
    public ICommand BackCommand 
    { 
     get 
     { 
      if (_BackCommand == null) 
      { 
       _BackCommand = new GalaSoft.MvvmLight.Command.RelayCommand(() => 
       { 
        Uri source = // Whatever your business logic is to determine the previous page 
        Source = source; 
       }); 
      } 
      return _BackCommand; 
     } 
    } 

    private GalaSoft.MvvmLight.Command.RelayCommand _NextCommand; 
    public ICommand NextCommand 
    { 
     get 
     { 
      if (_NextCommand == null) 
      { 
       _NextCommand = new GalaSoft.MvvmLight.Command.RelayCommand(() => 
       { 
        Uri source = // Whatever your business logic is to determine the next page 
        Source = source; 
       }); 
      } 
      return _NextCommand; 
     } 
    } 
} 

在你MainWindow.xaml.cs，創建這個類的一個實例，您的DataContext屬性設置爲實例。然後設置您的綁定：

<Grid x:Name="LayoutRoot">  
    <Frame Content="Frame" Source="{Binding Source}"/>  
    <local:NavUserControl HorizontalAlignment="Center" VerticalAlignment="Bottom"/> 
</Grid> 

和

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,20">  
    <Button Content="Back" HorizontalAlignment="Left" Width="75" Command="{Binding BackCommand}"/>  
    <Button Content="Next" HorizontalAlignment="Left" Width="75" Command="{Binding NextCommand}" /> 
</StackPanel> 

結合的例子是相當直接的MVVM式的WPF。我建議你走這條路，如果你需要更多的幫助，請閱讀WPF中的MVVM。大量的資源以教程和書籍的形式出現在那裏。 Searching here on SO也可以幫助很多。再次

編輯：

改變你的構造函數是：

public MainWindow() 
{ 
    this.InitializeComponent(); 

    // Insert code required on object creation below this point. 
    DataContext = new ViewModel(); 
} 

Answer 2

創建一個PageViewModel類實現NextPageCommand和PreviousPageCommand命令，提高（分別）UserNavigatedToNextPage和UserNavigatedToPreviousPage事件。爲了簡單起見，也讓他們暴露NextPage和PreviousPage類型的屬性PageViewModel。爲每個頁面創建PageViewModel的子類。

爲擁有的UserControl創建一個視圖模型類，該類顯示類型爲PageViewModel的CurrentPage屬性。創建所有對象，並分別設置NextPage和PreviousPage。添加處理程序，看起來像這些對象上的導航事件：

public void Page_UserNavigatedToNextPage(object sender, EventArgs e) 
{ 
    if (sender == CurrentPage && CurrentPage.NextPage != null) 
    { 
     CurrentPage = CurrentPage.NextPage; 
    } 
} 

假設你已經實現屬性更改通知，現在只要在當前頁面的NextPageCommand或PreviousPageCommand執行時，CurrentPage屬性將被更新，並體現在UI中。如果您已經創建爲每個頁面視圖模型類型數據模板，所有你需要的是

<ContentPresenter Content="{Binding CurrentPage}"/> 

在用戶控件

，你是好去。

如果Next/Previous按鈕在您的控件中，而不在頁面中，則在主視圖模型中實現公開CurrentPage.NextPageCommand和CurrentPage.PreviousPageCommand的屬性，並將按鈕綁定到它們。