微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何通过仅单击用户控件中的一个按钮来更新框架的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();
}
    

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。