This project has moved. For the latest updates, please go here.

Load View from a MenuView

Apr 28, 2011 at 8:40 AM

Hi,

I have a shellWindow that is composed of a MenuView ( left side ) and a ContentView ( fills the remaining space )

Using the MenuView, you can open other views ( CustomerView, SupplierView, OrdersView,...).

The MenuView is loaded when the ShellWindow is started.

How can I achieve, when I click a button on the MenuView, a new View loads into the ContentView of the ShellWindow?

I suppose I have to handle the click event ( through the Command ) in the MenuController. The Controller can then inspect which Command was fired and loads the requested view.

Do I need to load the view from the MenuController?

Which sample covers my needs?

 

Greetings,

Coordinator
Apr 29, 2011 at 6:13 PM

Hi,

You might have a look at the PrintController class in the Writer.Applications / Controllers directory. It defines the printPreviewCommand which is responsible to show the PrintPreviewView in the ShellWindow.

Best Regards,
  jbe

Jul 18, 2011 at 3:05 AM

Hi,

I would have created the following:

MenuView that have an interface with IMenuView as

[Export(typeof(IMenuView))]
public partial class MenuView : UserControlIMenuView
Each button has a binding command eg CustomerView Command="{Binding ShowCustomerViewCommand}" 
MenuViewModel that have all the the binding commands
[Export] 
public class MenuViewModel : ViewModel<IMenuView>{
private ICommand showCustomerViewCommand;
 public ICommand ShowCustomerViewCommand
        {
            get
            {
                return showCustomerViewCommand;
            }
            set
            {
                if (showCustomerViewCommand!= value)
                {
                    showCustomerViewCommand = value;
                    RaisePropertyChanged("ShowCustomerViewCommand");
                }
            }
        }
................
}
MenuController that have the delegate commands
[Export]
    public class MenuController : Controller
    {
      private readonly DelegateCommand ShowCustomerViewCommand;
     private readonly IShellService ShellService;
    private readonly IMessageService MessageService;
[ImportingConstructor]         
public MenuController(            
CompositionContainer container,             
IMessageService messageService,                          
IShellService shellService)         
{
	
 MessageService = messageService;  
 Container = container;
ShellService = shellService; 
var customerView = Container.GetExportedValue<ICustomerView>();
 ShowCustomerViewCommand = new DelegateCommand(() => ShowView(customerView));
}
private void ShowView(object view) 
{
  ShellServices.ContentView = view;
}
Make sure you have in your ShellWindow as below
<ContentPresenter Content="{Binding ShellService.ContentView}">
Cheers,
dsiew
Aug 10, 2011 at 7:10 AM

dsiew,

your code is awesome. but what if I dynamically create menu ?

how can we get the currently clicked contract type in Controller ?

in the below line, we have hardcoded "ICustomerView" to get the getexported value. 

var customerView = Container.GetExportedValue<ICustomerView>();

but in my case, am dynamically creating menu and have to get the exportedvalue for the currently clicked menu on the fly. is it possible ??

Sep 27, 2011 at 3:54 AM

naveenjuswow,

I have gone as far as dynamically build the ExportValue but here is the MenuItems with databinding.

First create  MenuItemModel.cs with a Chlidren of itself as follows:

public class MenuItemModel : DataModel
    {
        private ICommand menuCommand;
 
        public MenuItemModel()
        {
            Children = new ObservableCollection<MenuItemModel>();
        }
 
        public ObservableCollection<MenuItemModel> Children { getset; }
 
        public string Title { getset; }
 
        public string View { getset; }
 
 
        public ICommand MenuCommand
        {
            get
            {
                return menuCommand;
            }
            set
            {
                menuCommand = value;
                RaisePropertyChanged("MenuCommand");
            }
        }
    }

In your MenuViewModel you have a MenuItems collection like this:

   [Export]
    public class MenuViewModel : ViewModel<IMenuView>
    {
        [ImportingConstructor]
        public MenuViewModel(IMenuView view) : base(view)
        {
        }
 
        public ObservableCollection<MenuItemModel> MenuItems { getset; }
    }

In your Controller have a method something like this to build your menu items:

 
 public void Initialize()
        {
            MenuViewModel = Container.GetExportedValue<MenuViewModel>();
 
            MenuItemModel m = new MenuItemModel { Title = "Main Menu" };
            m.Children.Add(new MenuItemModel {
                Title = "View 1",
                View = "View1",
                MenuCommand = new DelegateCommand(v => ShowView((MenuItemModel)v)) 
            });
            m.Children.Add(new MenuItemModel
            {
                Title = "View 2",
                View = "View2",
                MenuCommand = new DelegateCommand(v => ShowView((MenuItemModel)v))
            });
            m.Children.Add(new MenuItemModel
            {
                Title = "View 3",
                View = "View3",
                MenuCommand = new DelegateCommand(v => ShowView((MenuItemModel)v))
            });
 
            MenuViewModel.MenuItems = new ObservableCollection<MenuItemModel>();
            MenuViewModel.MenuItems.Add(m);
        }
  
private void ShowView(MenuItemModel view)
        {
            switch (view.View)
            {
                case "View1":
                    // code to show your view
                    break;
                case "View2":
                    // code to show your view
                    break;
                case "View3":
                    // code to show your view
                    break;
            }
        }
 

In your MenuView.xaml The menu ItemSources is bind to MenuItems with as HerarchialDataTemplate as follows:

<Menu IsMainMenu="True" Height="30" Name="menu1"   ItemsSource="{Binding Path=MenuItems}"/> 
and 
<UserControl.Resources> <HierarchicalDataTemplate DataType="{x:Type Model:MenuItemModel}"   ItemsSource="{Binding Path=Children}"> 
 <HierarchicalDataTemplate.ItemContainerStyle> <Style TargetType="MenuItem"> 
<Setter Property="Command" Value="{Binding MenuCommand}" /> 
<Setter Property="CommandParameter" Value="{Binding}" /> 
</Style> </HierarchicalDataTemplate.ItemContainerStyle> 
<StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Title}" /> 
</StackPanel> 
</HierarchicalDataTemplate>

 </UserControl.Resources>