This question already has answers here:
What is DataContext for?
(4 answers)
Closed 4 months ago.
sorry about this question. I know MVVM exist for many years but each time I try to code something with it I face the same issue again and again ans I'm still looking for a real good tutorial about this.
Let's consider we have a main window (MainWindow.xaml) with its view model (MainViewModel.cs).
This window has a grid, in my grid I define 2 user controls. Whatever it is. One is on the left, one on the right. On my main window I have create, in MainViewModel.cs an engine:
internal class MainWindowViewModel
{
public MainWindowViewModel()
{
QCEngine qcEngine = new();
}
}
This engine is my unique model and contains a complex code that read data. Whatever. This engine has a public list of value. I want to display these values on my left and right panels in different ways. Again whatever. The display is not my issue.
My issue is how I pass this list or the entire engine reference to my panels? I'm really lost. I can do this in few seconds with any classic WinForms but I never figure out how to do in MVVM. I'm at this moment where I give up MVVM to do classic WinForms. This time I want to understand.
Can you help me?
My QC engine is a RFID reader. It already works fine as console application. All parameters are in a config file. the idea of the interface is to give more flexibility to the reader. Having a nice result screen, a setting screen, some interactions.
<Window x:Class="Beper.QCTable.Control.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:view="clr-namespace:Beper.QCTable.Control.View"
xmlns:viewmodel="clr-namespace:Beper.QCTable.Control.ViewModel"
mc:Ignorable="d"
Title="MainWindow"
Height="450"
Width="800">
<Window.DataContext>
<viewmodel:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Menu -->
<Menu Grid.Row="0" FontSize="20">
<MenuItem Header="_Menu">
<MenuItem Header="_Advanced"/>
</MenuItem>
</Menu>
<!--Header-->
<StackPanel Grid.Row="1" Background="Orange">
<TextBlock FontSize="20">
Header
</TextBlock>
</StackPanel>
<!--Body-->
<Grid Grid.Row="2">
<view:TabPanel/>
</Grid>
<!--Status Bar-->
<StatusBar Grid.Row="3" FontSize="20">
<StatusBarItem>
Status
</StatusBarItem>
</StatusBar>
</Grid>
</Window>
Focus on tab panel:
public class TabPanelViewModel
{
public ObservableCollection<TabItem> Tabs { get; set; } = new ObservableCollection<TabItem>();
public TabPanelViewModel()
{
Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
}
}
I cannot chare the engine code but, really, it is just a list of keys (RFID keys / EPC). This is the only public data. I want to display this list of key by group under my tabs.
Passing "this list or the entire engine reference" to the view defats the purpose of implementing the MVVM design pattern in the first place.
What you should do is to use the engine to prepare and set the state of your app/view in your view model.
The controls in the views should then bind to properties of the view model that contains, and effetively defines, the current state.
Related
I have a working program in Caliburn Micro but am moving over to MvvmCross. What I have working in Caliburn is a ShellView (Parent) that displays my navigation buttons and a cart. On that view, there is another view which is my selection of the navigation buttons, let's call it ActiveView (the view changes, in Caliburn it was ActiveItem() to change the view).
In MvvmCross, I cannot get this same functionality to work. After 3 days of searching and reading, I need help. Here is the image of the program, Blue outline is ShellView, inside of it Red outline is ActiveView.
What I get with MvvmCross is the ShellView, with no ActiveView. So the parent works, but no child is displayed. I have created a few other MvvmCross apps but they contain no navigation.
I have 2 Code Versions, First works but creates a second Window. Second keeps a single Window, but does not navigate. I need a single window with navigation. I feel I have a core misunderstanding and cannot find a source that explains it.
First Sample Works, but creates 2 Windows. An empty window (from MainWindow.xaml) and a second from ShellView. My assumption for 2 Windows opening when app is ran, is MainWindow being a window, and ShellView also being set to Window in xaml and cs.
Based on MvvmCross Playground.Wpf
<views:MvxWindow
x:Class="MvxKioskMtg.Wpf.Views.ShellView"
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
xmlns:mvx="clr-namespace:MvvmCross.Platforms.Wpf.Binding;assembly=MvvmCross.Platforms.Wpf"
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"
xmlns:local="clr-namespace:MvxKioskMtg.Wpf.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Background="#3d3d3d"
>
<views:MvxWindow.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content="Welcome" Command="{Binding ShowWindowChildCommand1}" Grid.Column="0"/>
<Button Content="Checkout" Command="{Binding ShowWindowChildCommand2}" Grid.Column="1"/>
</Grid>
<ContentPresenter Content="{Binding}" Grid.Row="1" />
</Grid>
</DataTemplate>
</views:MvxWindow.ContentTemplate>
</views:MvxWindow>
ShellView.xaml.cs
public partial class ShellView : MvxWindow
{
public ShellView()
{
InitializeComponent();
}
}
Second Version Layout looks correct, but no navigation. Click buttons has no effect. Adding break point to the Command that changes views and it is never reached.
XAML changed from MvxWindow to MvxWpfView in 4 places, otherwise same as First Version.
<views:MvxWpfView
<views:MvxWpfView.ContentTemplate>
</views:MvxWpfView.ContentTemplate>
</views:MvxWpfView>
ShellView.xaml.cs
public partial class ShellView : MvxWpfView
{
public ShellView()
{
InitializeComponent();
}
}
In the XAML, if I update the DataContect to AncestorType={x:Type views:MvxWpfView} from Window, it does update the View, but the entire View. Not the ContentPresenter space. So I lose my navigation buttons.
Which of these methods is correct, and what am I doing incorrect? Am I totally off base? Thank you for any help and guidance you can provide. I'll happily read any sources.
I am trying to accomplish a navigation bar and a content screen in .NetFramework WPF application. My goal is to implement MVVM pattern. The main objective is when I hit Users button in navigation bar, I want my Body page to render "Users" text. And when I press Actions button, body page must render "Actions" text. Navigation buttons are "Users" and "Actions". I have 3 View pages that are OperationPage, Navbar and Body. OperationPage is using Navbar and Body XAML to create view. The grid code is as following :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20*" />
<RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<local:Navbar/>
</Grid>
<Grid Grid.Row="1">
<local:Body/>
</Grid>
</Grid>
Navbar grid is as follows :
<UserControl.DataContext>
<vm:NavbarViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="{Binding Path=CurrentPage}" FontSize="30"/>
</Grid>
<Grid Grid.Row="1">
<Button Content="Users" Width="75"/>
</Grid>
<Grid Grid.Row="2">
<Button Content="Actions" Width="75"/>
</Grid>
</Grid>
And Finally Body grid is as following :
<Grid>
<TextBlock Text="{Binding Path=CurrentPage}" FontSize="30"></TextBlock>
</Grid>
I have created a ViewModel classes for both Navigation and Body that implements INotifyPropertyChanged. I can change the text from these classes. One of them is as following for navigation bar.
class NavbarViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyChange(string changedVar) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(changedVar));
private string _currentPage = "Navbar Data";
public string CurrentPage
{
get { return _currentPage; }
set
{
_currentPage = value;
NotifyChange("CurrentPage");
}
}
}
But I am stuck with connecting these two classes to a Singleton ViewState class. Should I again implement two-way binding with INotifyPropertyChanged to my model class or Should I follow another way? I tried implementing the INotifyPropertyChanged class again in my Model class but I could'not find a way to create connection between the ViewModel class and model.
You might solve this in a couple of ways.
The first way is to strongly-couple your ViewModels, like this.
OperationPage View
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20*" />
<RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<local:Navbar DataContext="{Binding NavbarViewModel}"/>
</Grid>
<Grid Grid.Row="1">
<local:Body DataContext="{Binding BodyViewModel}"/>
</Grid>
</Grid>
Then implements the OperationPageViewModel. This ViewModel should implement the INotifyPropertyChanged interface and it must have the 2 properties named NavbarViewModel and BodyViewModel of types NavbarViewModel and BodyViewModel respectively.
You might need to add to NavbarViewModel 2 events binded to Users' button clicked and Groups' button clicked in order to expose them outside and OperationPageViewModel should monitor those events (it has the instance of NavbarViewModel) then for example set CurrentPage property of BodyViewModel accordingly on user's button click.
Another solution might be to decouple ViewModels.
This solution get you better code maintenance and also let you code less than the first solution.
You need to use Message Broker design pattern https://en.wikipedia.org/wiki/Message_broker
you can implement your own Message Broker or simply use one of any MVVM Toolkit libraries that already implement it.
Most of the existing MVVM Toolkits have their own Message Broker implementation.
So no need to re-invent the whell.
For example, the MVVM Light Toolkit Message Broker is explained here: https://learn.microsoft.com/en-us/archive/msdn-magazine/2014/june/mvvm-the-mvvm-light-messenger-in-depth#using-messages
I need to write a Windows Form where the user can view many "contracts" grouped by "customer". Each customer must be a expand-collapse panel, and the contracts of the customer must be inside of the corresponding panel.
I already tried the great ExpandCollapsePanel, but when the number of customers is big then the panel doesn't autoscroll, even with the AutoScroll property set to true.
Does anybody know some other alternatives? Remember the panels must be dynamically created because there are many customers and many contracts belonging to each customers.
Ok, I've created a sample using an ElementHost to host a WPF UserControl, it looks like this:
I've uploaded the full source code Here, but anyways these are the most relevant parts:
Form1:
public partial class Form1 : Form
{
public CustomerContractsViewModel ContractsVM { get; set; }
public Form1()
{
InitializeComponent();
ContractsVM = new CustomerContractsViewModel();
var customercontractsview = new CustomerContractsView(){DataContext = ContractsVM};
var elementHost = new ElementHost() { Dock = DockStyle.Fill };
elementHost.Child = customercontractsview;
panel1.Controls.Add(elementHost);
}
private void button1_Click(object sender, EventArgs e)
{
ContractsVM.LoadCustomers(DataSource.GetCustomers());
}
}
(Designer code omitted for brevity)
WPF View:
<UserControl x:Class="ElementHostSamples.CustomerContractsView"
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">
<UserControl.Resources>
<!-- This style is applied to all Label elements within the UserControl-->
<Style TargetType="Label">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
<!-- This DataTemplate will be used to render the Contract items-->
<DataTemplate x:Key="ContractTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Contract Date:"/>
<Label Grid.Row="1" Grid.Column="0" Content="Amount:"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ContractDate, StringFormat='MM/dd/yyyy'}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Amount, StringFormat=C}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
<!-- This DataTemplate will be used to render the Customer Items -->
<DataTemplate x:Key="CustomerTemplate">
<Expander Header="{Binding Name}">
<ListBox ItemsSource="{Binding Contracts}" ItemTemplate="{StaticResource ContractTemplate}">
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<ItemsPresenter/>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</Expander>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding Customers}"
ItemTemplate="{StaticResource CustomerTemplate}"/>
</UserControl>
Code Behind:
public partial class CustomerContractsView : UserControl
{
public CustomerContractsView()
{
InitializeComponent();
}
}
ViewModel:
public class CustomerContractsViewModel:PropertyChangedBase
{
public List<Customer> Customers { get; set; }
public void LoadCustomers(List<Customer> customers)
{
Customers = customers;
OnPropertyChanged("Customers");
}
}
Notice how this simple, less than 100 lines of code, 20-minute WPF sample is better than anything you can ever hope to achieve in winforms, and doesn't need any "owner draw", "P/Invoke" (whatever that means) or horrendous gargantuan code behind stuff. And does not force you to spend lots of money in third party components such as DevExpress or Telerik. This is why WPF is the best option for ALL .Net Windows Desktop application development, regardless if it's a simple Hello World type of stuff.
I'm using an ItemsControl to host the Customer items, and inside these I'm using a ListBox with a custom DataTemplate to show the Contract items.
Both ItemsControl (outer and inner) are Virtualized to enable an immediate response time, even with 200,000 items.
Notice that there's not a single line of code that interacts with the UserControls' UI Elements, Everything is defined in XAML and populated with data via DataBinding. This enables a great amount of scalability and maintainability because the UI is completely decoupled from the application logic / business logic. That's the WPF way.
The Form code (except for the initialization code) only interacts with the ViewModel, and has no need to interact with the WPF View.
When upgrading from winforms to WPF, you seriously need to embrace The WPF Mentality, which is, as mentioned before, you almost never manipulate UI elements in procedural code, or use too much code behind, but rather use DataBinding for everything and embrace The MVVM Pattern
WPF Rocks. Download the linked source code and see the results for yourself.
Let me know if you need further help.
I am trying to make a program in winRT that uses the MVVMlight framework. In the application i have a part that should remain constant and a part that should have its content linked to a specfic viewmodel. I will give an little example below of what i am trying to say:
So when i press the Grey button the content should be grey and when i press the red button the content should be red, however the rest of the page should remain constant.
The only way i could think of now is to put multiple datatemplates in my view and only fill the list to which they are bound when i need them caussing them to appear when filled and dissapear when cleared, but i think this will make the view a bit of a mess and i want to know if there arent any other ways to do this?
What i would really like to achieve is when i click a button (grey or red) that there will be a view with a correspoding viewmodel that will be loaded into the contentarea, the contentarea beying the square that is colored red/grey atm.
It should be something like i found in this tutorial but for WinRt cause i cant get this tutorial to work in WinRt.
http://www.codeproject.com/Articles/323187/MVVMLight-Using-Two-Views
Try something like this, a wpf window with a content control that binds to a usercontrol property on the view model:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MainWindow"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
DataContext="{Binding Main_VM, Source={StaticResource Locator}}"
Background="#FF1D1D1D"
WindowState="Maximized"
WindowStyle="None"
WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip"
MinHeight="750" MinWidth="1050">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="700" MinWidth="1000">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<ContentControl Name="UC_Main" Content="{Binding UC_Main}" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<!--workspace user control goes here-->
</ContentControl>
</Grid>
</Window>
you can some buttons, or listview etc that changes the value of the usercontrol property. the following is the viewmodel of hte view:
Public Class MainWindowViewModel
Inherits ViewModelBase
#Region "DECLARATIONS"
Public Const CC_Main As String = "UC_Main"
Private _ucMain As UserControl = Nothing
#End Region
#Region "PROPERTIES"
Public Property UC_Main() As UserControl
Get
Return _ucMain
End Get
Set(value As UserControl)
If _ucMain Is value Then
Return
End If
RaisePropertyChanging(CC_Main)
_ucMain = value
RaisePropertyChanged(CC_Main)
End Set
End Property
#End Region
#Region "COMMANDS"
#End Region
#Region "CONSTRUCTOR"
Public Sub New()
UC_Main = New YourUserControl
End Sub
#End Region
#Region "METHODS"
#End Region
End Class
obviously these have both been simplified but should show you what is possible. YourUserCOntrol is the view you want to be displayed in the content control of the main window. Then you can use the mvvm-light relay command on a button or event to change/set the usercontrol to a new one. You can have as many content controls on your page as you need.
By default when you use "ActivateItem(new Control());" your control is loaded into a ContentControl which with the name ActiveItem, fro example. . If I have multiple content controls on my page how would I load controls into them whilst retaining the ability to use the default functionality of being able to load controls into the the active item control.
for example I want to have a login control to be loaded into the Login ContentControl, and when a user successfully login I want a new control to be loaded into the ActiveItem ContentControl.
Thanx in advance.
If the ViewModel that gets binded to the UI contains a property with the name that matches a content control. The Content control view automatically gets resolved the the view supported by this property, provided this property itself is a ViewModel type and has been registed with Ioc container. For example
<ContentControl x:Name="LoginStatus"></ContentControl>
If there is a property LoginStatus on the main ViewModel (LoginStatus property itself is a ViewModel). The content control would correctly get rendered with the appropriate view.
This is an old question, but in case anyone is having the same issue, here is my solution:
Your main window that contain both (or even more than two) of your User Controls must be inherited from Caliburn.Micro.Conductor<Screen>.Collection.AllActive;
Your User Controls must be inherited from Caliburn.Micro.Screen;
You must also keep naming conventions in mind. If you use MenuUC as the name of a ContentControl in your View, also create a property named MenuUC in your ViewModel;
Initialize your UserControl as I do in Constructor;
Now you can use ActivateItem(MenuUC) and DeactivateItem(MenuUC) everywhere in your code. Caliburn.Micro automatically detects which one you want to work with.
Example XAML View code:
<Window x:Class="YourProject.Views.YourView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="YourViewTitle" Width="900" Height="480">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Menu Side Bar -->
<ContentControl Grid.Row="0" Grid.Column="0" x:Name="MenuUC" />
<!-- Panel -->
<Border Grid.Column="1" Grid.RowSpan="2" BorderThickness="1,0,0,0" BorderBrush="#FF707070" >
<ContentControl x:Name="PanelUC" />
</Border>
</Grid>
</Window>
Example C# ViewModel code:
class YourViewModel : Conductor<Screen>.Collection.AllActive
{
// Menu Side Bar
private MenuUCViewModel _menuUC;
public MenuUCViewModel MenuUC
{
get { return _menuUC; }
set { _menuUC = value; NotifyOfPropertyChange(() => MenuUC); }
}
// Panel
private Screen _panelUC;
public Screen PanelUC
{
get { return _panelUC; }
set { _panelUC = value; NotifyOfPropertyChange(() => PanelUC); }
}
// Constructor
public YourViewModel()
{
MenuUC = new MenuUCViewModel();
ActivateItem(MenuUC);
PanelUC = new FirstPanelUCViewModel();
ActivateItem(PanelUC);
}
// Some method that changes PanelUC (previously FirstPanelUCViewModel) to SecondPanelUCViewModel
public void ChangePanels()
{
DeactivateItem(PanelUC);
PanelUC = new SecondPanelUCViewModel();
ActivateItem(PanelUC);
}
}
In the above example, ChangePanels() acts as a method to load new User Control into your ContentControl.
Also read this question, it might be help you further.
You should have a look at Screen Conductors. See here.