通过单击按钮将视图加载到ContentControl中并更改其属性 [英] Loading Views into ContentControl and changing their properties by clicking buttons

问题描述

我有一个mvvm（模型视图视图模型）silverlight应用程序，该应用程序具有几个需要加载到ContentControls中的视图（我在表达式混合中全部实现了）。我不知道该怎么做，例如，通过单击另一个内容控件中另一个视图中的按钮来在一个内容控件中加载一个视图（用户控件）。为了使问题更容易理解，我需要执行以下操作：

I have a mvvm(model view viewmodel) silverlight application that has several views that need to be loaded into ContentControls (i made it all in expression blend). What i dont know how to do is, for example, to load one view (user control) in one content control by clicking a button from another view that is in another content control. To make it easier to understand the problem, i need to do something similar to this:

http://www.codeproject.com/KB/silverlight/BlendableVMCom.aspx

区别是应该通过单击调用child1或调用child2按钮将child1和child2加载到其自己的内容控件中。

with that difference that child1 and child2 are supposed to be loaded into theirown content controls by clicking Call child1 or call child2 buttons.

和示例。

推荐答案

此示例非常简化，但是我认为您现在如何根据应用程序进行调整。

This example is very simplified, but I think you now how to adjust it to your application.

主视图：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Border x:Name="commandsView">
        <Button Content="Call view 1" Command="{Binding CallView1Command}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5" />
    </Border>
    <Border x:Name="displayedView" Grid.Column="1">
        <ContentControl Content="{Binding CurrentView}" />
    </Border>
</Grid>

我还没有创建单独的视图作为用户控件，这里只是边框，可以用边框代替真实视图。

I haven't created separated views as user controls, here are just borders, which can be replaced by real views.

后面代码中不同视图的不同视图模型：

Different view models for different views in code behind:

this.commandsView.DataContext = new CommandsViewModel();
this.displayedView.DataContext = new DisplayedViewModel();

第一个视图模型包含将消息发送到另一个视图模型的命令：

First view model conains the command which sends the message to another view model:

public class CommandsViewModel
{
    public CommandsViewModel()
    {
        this.CallView1Command = new RelayCommand(() => 
          Messenger.Default.Send<View1Message>(new View1Message()));
    }

    public RelayCommand CallView1Command { get; set; }

}

public class View1Message : MessageBase
{

}

要使此示例生效，请下载 MVVM Light库。

To make this example work, download the MVVM Light library.

第二个视图模型接收到消息并为其属性创建一个视图：

The second view model receive the message and creates a view for its property:

public class DisplayedViewModel : ViewModelBase
{
    public DisplayedViewModel()
    {
        Messenger.Default.Register<View1Message>(this, obj => 
            this.CurrentView = new TextBlock { Text = "Pressed the button 1 and now here is the view 1" });
    }

    private object currentView;

    public object CurrentView
    {
        get { return currentView; }
        set
        {
            currentView = value;
            RaisePropertyChanged("CurrentView");
        }
    }
}

再次，有可能使用clr对象代替控件并在xaml中应用数据模板，但是将没有足够的空间来提供所有生成的代码。

Again, it is possible to use clr object instead of controls and apply data templates in xaml, but there will not be enough space to provide all the resulting code.

这就是主要思想是某种事件聚合器，在这种情况下是 Messenger 类。

So that is all, the main idea is a some kind of event aggregator, which is the Messenger class in this particular case.

没有MVVM Light它将需要更多代码：

Without the MVVM Light it will require more code:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        var events = new GlobalEvents();
        this.commandsView.DataContext = new CommandsViewModel(events);
        this.displayedView.DataContext = new DisplayedViewModel(events);
    }
}

public class GlobalEvents
{
    public event EventHandler View1Event = delegate { };

    public void RaiseView1Event()
    {
        View1Event(this, EventArgs.Empty);
    }
}

/// <summary>
/// Commands which call different views
/// </summary>
public class CommandsViewModel
{
    public CommandsViewModel(GlobalEvents globalEvents)
    {
        this.CallView1Command = new DelegateCommand(globalEvents.RaiseView1Event);
    }

    public DelegateCommand CallView1Command { get; set; }
}

/// <summary>
/// Model where views are changed and then displayed
/// </summary>
public class DisplayedViewModel : INotifyPropertyChanged
{
    public DisplayedViewModel(GlobalEvents globalEvents)
    {
        globalEvents.View1Event += (s,e) =>
            this.CurrentView = new TextBlock { Text = "Pressed the button 1 and now here is the view 1" };
    }

    private object currentView;

    public object CurrentView
    {
        get { return currentView; }
        set
        {
            currentView = value;
            RaisePropertyChanged("CurrentView");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

}

在此示例中，您必须更改 DelegateCommand 类用于其他操作。其他代码将适用于所有人。

In this example you must change the DelegateCommand class for something different. Other code will work for everyone.

这篇关于通过单击按钮将视图加载到ContentControl中并更改其属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！