Question

我目前正在尝试通过使用ListView（作为制表符）和带有绑定内容属性的ContentControl来实现带有隐藏制表符的tabcontrol的功能。

我在这个主题上读到了一些内容，如果我做对了，它应该以这种方式工作：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20.0*"/>
        <ColumnDefinition Width="80.0*"/>
    </Grid.ColumnDefinitions>
    <ListBox Grid.Column="0">
        <ListBoxItem Content="Appearance"/>
    </ListBox>

    <ContentControl Content="{Binding SettingsPage}" Grid.Column="1"/>
</Grid>
.
.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ContentControl x:Key="AppearancePage">
        <TextBlock Text="Test" />
    </ContentControl>
    <ContentControl x:Key="AdvancedPage">
        <TextBlock Text="Test2" />
    </ContentControl>
</ResourceDictionary>

在后面的代码中：

public partial class MainWindow : MetroWindow
  {
    private ContentControl SettingsPage;
    private ResourceDictionary SettingsPagesDict = new ResourceDictionary();

    public MainWindow()
    {
        InitializeComponent();

        SettingsPagesDict.Source = new Uri("SettingsPages.xaml", UriKind.RelativeOrAbsolute);
        SettingsPage = SettingsPagesDict["AppearancePage"] as ContentControl;

尽管它不会引发任何错误，但它不会显示“Test”TextBlock。

我可能有错误的绑定概念，请给我一个正确方向的提示。

此致

Answer 1

好的我已经敲了一个简单的例子来向您展示如何使用带有数据绑定的MVVM（Model-View-ViewModel）方法动态更改ContentControl的内容。

我建议您创建一个新项目并加载这些文件以查看它是如何工作的。

我们首先需要实现INotifyPropertyChanged接口。这将允许您定义自己的类，其属性将在对属性进行更改时通知UI。我们创建了一个提供此功能的抽象类。

<强> ViewModelBase.cs

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
    }

    protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        var handler = this.PropertyChanged;
        if (handler != null)
        {
            handler(this, e);
        }
    }
}

我们现在需要拥有数据模型。为简单起见，我创建了2个模型 - HomePage和SettingsPage。两种模型只有一个属性，您可以根据需要添加更多属性。

<强> HomePage.cs

public class HomePage
{
    public string PageTitle { get; set; }
}

<强> SettingsPage.cs

public class SettingsPage
{
    public string PageTitle { get; set; }
}

然后我创建相应的ViewModel来包装每个模型。请注意，viewmodel继承自我的ViewModelBase抽象类。

<强> HomePageViewModel.cs

public class HomePageViewModel : ViewModelBase
{
    public HomePageViewModel(HomePage model)
    {
        this.Model = model;
    }

    public HomePage Model { get; private set; }

    public string PageTitle
    {
        get
        {
            return this.Model.PageTitle;
        }
        set
        {
            this.Model.PageTitle = value;
            this.OnPropertyChanged("PageTitle");
        }
    }
}

<强> SettingsPageViewModel.cs

public class SettingsPageViewModel : ViewModelBase
{
    public SettingsPageViewModel(SettingsPage model)
    {
        this.Model = model;
    }

    public SettingsPage Model { get; private set; }

    public string PageTitle
    {
        get
        {
            return this.Model.PageTitle;
        }
        set
        {
            this.Model.PageTitle = value;
            this.OnPropertyChanged("PageTitle");
        }
    }
}

现在我们需要为每个ViewModel提供视图。即HomePageView和SettingsPageView。我为此创建了2个UserControl。

<强> HomePageView.xaml

<UserControl x:Class="WpfApplication3.HomePageView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
        <TextBlock FontSize="20" Text="{Binding Path=PageTitle}" />
</Grid>

<强> SettingsPageView.xaml

<UserControl x:Class="WpfApplication3.SettingsPageView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <TextBlock FontSize="20" Text="{Binding Path=PageTitle}" />
</Grid>

我们现在需要为MainWindow定义xaml。我已经包含了2个按钮来帮助在2个“页面”之间导航。的 MainWindow.xaml

<Window x:Class="WpfApplication3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApplication3" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <DataTemplate DataType="{x:Type local:HomePageViewModel}"> <local:HomePageView /> </DataTemplate> <DataTemplate DataType="{x:Type local:SettingsPageViewModel}"> <local:SettingsPageView /> </DataTemplate> </Window.Resources> <DockPanel> <StackPanel DockPanel.Dock="Left"> <Button Content="Home Page" Command="{Binding Path=LoadHomePageCommand}" /> <Button Content="Settings Page" Command="{Binding Path=LoadSettingsPageCommand}"/> </StackPanel> <ContentControl Content="{Binding Path=CurrentViewModel}"></ContentControl> </DockPanel>

我们还需要一个用于MainWindow的ViewModel。但在此之前，我们需要创建另一个类，以便我们可以将我们的Buttons绑定到命令。

<强> DelegateCommand.cs

public class DelegateCommand : ICommand { /// <summary> /// Action to be performed when this command is executed /// </summary> private Action<object> executionAction; /// <summary> /// Predicate to determine if the command is valid for execution /// </summary> private Predicate<object> canExecutePredicate; /// <summary> /// Initializes a new instance of the DelegateCommand class. /// The command will always be valid for execution. /// </summary> /// <param name="execute">The delegate to call on execution</param> public DelegateCommand(Action<object> execute) : this(execute, null) { } /// <summary> /// Initializes a new instance of the DelegateCommand class. /// </summary> /// <param name="execute">The delegate to call on execution</param> /// <param name="canExecute">The predicate to determine if command is valid for execution</param> public DelegateCommand(Action<object> execute, Predicate<object> canExecute) { if (execute == null) { throw new ArgumentNullException("execute"); } this.executionAction = execute; this.canExecutePredicate = canExecute; } /// <summary> /// Raised when CanExecute is changed /// </summary> public event EventHandler CanExecuteChanged { add { CommandManager.RequerySuggested += value; } remove { CommandManager.RequerySuggested -= value; } } /// <summary> /// Executes the delegate backing this DelegateCommand /// </summary> /// <param name="parameter">parameter to pass to predicate</param> /// <returns>True if command is valid for execution</returns> public bool CanExecute(object parameter) { return this.canExecutePredicate == null ? true : this.canExecutePredicate(parameter); } /// <summary> /// Executes the delegate backing this DelegateCommand /// </summary> /// <param name="parameter">parameter to pass to delegate</param> /// <exception cref="InvalidOperationException">Thrown if CanExecute returns false</exception> public void Execute(object parameter) { if (!this.CanExecute(parameter)) { throw new InvalidOperationException("The command is not valid for execution, check the CanExecute method before attempting to execute."); } this.executionAction(parameter); } }

现在我们可以定义MainWindowViewModel了。 CurrentViewModel是绑定到MainWindow上的ContentControl的属性。当我们通过单击按钮更改此属性时，屏幕将在MainWindow上更改。由于我在Window.Resources部分中定义的DataTemplates，MainWindow知道要加载哪个屏幕（usercontrol）。

<强> MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase { public MainWindowViewModel() { this.LoadHomePage(); // Hook up Commands to associated methods this.LoadHomePageCommand = new DelegateCommand(o => this.LoadHomePage()); this.LoadSettingsPageCommand = new DelegateCommand(o => this.LoadSettingsPage()); } public ICommand LoadHomePageCommand { get; private set; } public ICommand LoadSettingsPageCommand { get; private set; } // ViewModel that is currently bound to the ContentControl private ViewModelBase _currentViewModel; public ViewModelBase CurrentViewModel { get { return _currentViewModel; } set { _currentViewModel = value; this.OnPropertyChanged("CurrentViewModel"); } } private void LoadHomePage() { CurrentViewModel = new HomePageViewModel( new HomePage() { PageTitle = "This is the Home Page."}); } private void LoadSettingsPage() { CurrentViewModel = new SettingsPageViewModel( new SettingsPage(){PageTitle = "This is the Settings Page."}); } }

最后，我们需要覆盖应用程序启动，以便我们可以将MainWindowViewModel类加载到MainWindow的DataContext属性中。

<强> App.xaml.cs

public partial class App : Application { protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); var window = new MainWindow() { DataContext = new MainWindowViewModel() }; window.Show(); } }

删除App.xaml Application标记中的StartupUri="MainWindow.xaml"代码也是一个好主意，这样我们就无法在启动时获得2个MainWindows。

请注意，DelegateCommand和ViewModelBase类只能复制到新项目中并使用。这只是一个非常简单的例子。您可以从here和here
获得更好的主意
修改在您的评论中，您想知道是否可以不必为每个视图和相关的样板代码创建一个类。据我所知，答案是否定的。是的，您可以拥有一个巨大的类，但您仍然需要为每个Property setter调用OnPropertyChanged。这也有很多弊端。首先，由此产生的类很难维护。会有很多代码和依赖项。其次，使用DataTemplates来“交换”视图会很困难。通过在DataTemplates中使用x：Key并在usercontrol中对模板绑定进行硬编码，仍然可以实现。从本质上讲，你并没有真正让你的代码更短，但是你会让自己变得更难。

我猜你的主要抱怨是你必须在你的viewmodel中编写这么多代码来包装你的模型属性。看看T4 templates。一些开发人员使用它来自动生成他们的样板代码（即ViewModel类）。我个人不使用这个，我使用自定义代码片段来快速生成viewmodel属性。

另一种选择是使用MVVM框架，例如Prism或MVVMLight。我自己没有使用过，但我听说其中一些内置功能可以轻松制作样板代码。

需要注意的另一点是：如果要将设置存储在数据库中，则可以使用ORM框架（如Entity Framework）从数据库生成模型，这意味着您剩下的就是创建视图模型和视图。

为动态内容绑定ContentControl内容

1 个答案: