如何通过仅单击用户控件中的一个按钮来更新框架的Source属性？

如何解决如何通过仅单击用户控件中的一个按钮来更新框架的Source属性？

| 我想了解如何更新源属性，方法是基于点击次数仅单击一个\“ Next \”按钮，并且每次再次单击该按钮时，都可以将不同页面加载到框架中。任何建议都非常感谢！先感谢您。 主窗口代码：

<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,20\">
    <Button Content=\"Back\" HorizontalAlignment=\"Left\" Width=\"75\"/>
    <Button Content=\"Next\" HorizontalAlignment=\"Left\" Width=\"75\" />
</StackPanel>

    

解决方法

创建一个实现

NextPageCommand

和

PreviousPageCommand

命令的

PageViewModel

类，它们分别引发

UserNavigatedToNextPage

和

UserNavigatedToPreviousPage

事件。为了简单起见，还让它们公开类型为

PageViewModel

的

NextPage

和

PreviousPage

属性。为每个页面创建

PageViewModel

的子类。 为拥有的

UserControl

创建一个视图模型类，该类公开了类型为

PageViewModel

的

CurrentPage

属性。创建所有

PageViewModel

对象，并分别设置

NextPage

和

PreviousPage

。在这些对象上为导航事件添加处理程序，如下所示：

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

假设您已经实现了属性更改通知，那么现在每当执行当前页面的

NextPageCommand

或ѭ4，时，

CurrentPage

属性就会更新并反映在用户界面中。如果您已经为每种浏览量模型类型创建了数据模板，那么您所需要做的就是

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

在您的用户控件中，您一切顺利。 如果“上一个/下一个”按钮位于控件中，而不位于页面中，则在主视图模型中实现显示

CurrentPage.NextPageCommand

和

CurrentPage.PreviousPageCommand

的属性，并将这些按钮绑定到它们。     ,在您的NavUserControl中，我将为下一个和后一个按钮连接事件或命令（或者可能是两者）。然后，您可以从MainWindow中访问它们，并在Source属性中设置适当的值。 如果您选择事件路线，请附加事件并直接设置“源”。 如果执行命令路径，请在视图模型中设置命令，将其绑定到用户控件，然后将Source属性绑定到视图模型中的另一个值。 编辑：根据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,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;
}

并将MainWindow 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，这就是我在此示例中使用的。 创建一个ViewModel类，如下所示：

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,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。教程和书籍形式的大量资源。在SO上搜索这里也有很大帮助。 再次编辑： 将您的构造函数更改为此：

public MainWindow()
{
    this.InitializeComponent();

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