如何解决如何通过仅单击用户控件中的一个按钮来更新框架的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 举报,一经查实,本站将立刻删除。