Develop Reference

How do I bind an event captured by a XAML element to a method in an arbitrary class in C#?

I am a C# newbie trying to build a simple MVVM app, and I am having trouble tying events in my XAML View to methods in my Model or ViewModel. I understand why MVVM is used and feel like I get the broad strokes of how to put an MVVM app together, but I am lost in the details. I apologize in advance if it looks like I have no idea what I'm doing, but I don't, despite lots of reading up on the subject.
I want btnUpdate_Click in MainScreenViewModel to execute when the button is clicked, but I get the error
MC6005 Click="vm:btnUpdate_Click" is not valid. 'vm:btnUpdate_Click' is not a valid event handler method name. Only instance methods on the generated or code-behind class are valid.
If my classes are public and in the same namespace, what do I need to do to make them visible from my View? I don't want to move methods back to the MainWindow class.
<Window x:Class="SFM_Calculator.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:local="clr-namespace:SFM_Calculator"
xmlns:vm="MainScreenViewModel"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
>
<Window.DataContext>
<local:SFMModel />
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
...
<ColumnDefinition/>
</Grid.ColumnDefinitions>
...
</Grid.RowDefinitions>
...
<Button
Grid.Column="1"
Grid.Row="2"
x:Name="btnUpdate"
Content="Update"
Click="vm:btnUpdate_Click"
/>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Text;
using System.Linq;
using System.ComponentModel;
namespace SFM_Calculator
{
public class MainScreenViewModel : INotifyPropertyChanged
{
private void btnUpdate_Click(object sender, System.Windows.RoutedEventArgs e)
{
TestInt = 999;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
var e = new PropertyChangedEventArgs(propertyName);
handler(this, e);
}
}
public SFMModel sfmModel = new SFMModel();
private int _testInt;
public int TestInt
{
get { return _testInt; }
set { _testInt = value; }
}
public MainScreenViewModel()
{
Debug.WriteLine("Got here.");
}
}
}
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
namespace SFM_Calculator
{
public class SFMModel : INotifyPropertyChanged
{
private int _tprop;
public int TProp
{
get { return _tprop; }
set { _tprop = value; }
}
public SFMModel ()
{
TProp = 69;
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Configuration;
namespace SFM_Calculator
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}

Your viewModel should expose a command, not a method. Plus you should access the exposed command via binding mechanism.
Sample Command that implements required ICommand interface
internal class Command : ICommand
{
private readonly Action execute;
public Command(Action execute)
{
this.execute = execute;
}
public event EventHandler? CanExecuteChanged;
public bool CanExecute(object? parameter)
{
return true;
}
public void Execute(object? parameter)
{
execute();
}
}
Sample ViewModel that exposes ICommand (not a regular method as in your example). It will change the value of Text property after clicking the button - just to show that it works.
internal class ViewModel : INotifyPropertyChanged
{
public string Text { get; private set; }
public ICommand AwesomeCommand { get; }
public ViewModel()
{
AwesomeCommand = new Command(() => {
Text = "Button clicked";
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Text)));
});
}
public event PropertyChangedEventHandler? PropertyChanged;
}
MainWindow:
<StackPanel>
<Button Command="{Binding AwesomeCommand}"></Button>
<Label Content="{Binding Text}" Height="100"></Label>
</StackPanel>
code-behind MainWindow, to hook-up ViewModel and the view (MainWindow):
public MainWindow()
{
DataContext = new ViewModel();
InitializeComponent();
}

Datagrid stays Empty but ObservableCollection has values

Currently i am trying to learn WPF, but i have hit a brickwall with my current Problem, after many hours googling and trying to fix it on my own. I am trying to display the Model Province. I have found multiple similar Problems but i couldn't figure it out on my own. After having checked the Output there was no mention of any error. Currently the Window shows just the empty Model but no data even though the Observable Collection gets updated. So before i completely destroy my interest in WPF i am asking for help.
MyView
<Window x:Class="isnuaatest.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:local="clr-namespace:isnuaatest"
xmlns:local1="clr-namespace:isnuaatest.Models"
xmlns:local2="clr-namespace:isnuaatest.ViewModel"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local2:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<Grid>
<DataGrid ItemsSource="{Binding Provinces, UpdateSourceTrigger=PropertyChanged}">
</DataGrid>
</Grid>
<StackPanel Width="200" Margin="50">
<Button x:Name="OpenSaveFile" Click="OpenSaveFile_Click">OpenSaveFile</Button>
</StackPanel>
</Grid>
My View Model
using isnuaatest.Helper;
using isnuaatest.Models;
using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Controls;
using System.Windows.Input;
namespace isnuaatest.ViewModel
{
public class MainWindowViewModel : INotifyPropertyChanged
{
public ObservableCollection<Province> _province;
public ObservableCollection<Province> Provinces
{
get { return this._province; }
set
{
_province = value;
}
}
public MainWindowViewModel() : base()
{
this.Provinces = new ObservableCollection<Province>();
}
private string _savegamePath;
public string SavegamePath
{
get { return _savegamePath; }
set { _savegamePath = value; OnPropertyChanged("SavegamePath"); GetProvinces(_savegamePath);}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
var savegamefile = this.PropertyChanged;
if (savegamefile != null)
savegamefile(this, new PropertyChangedEventArgs(propertyName));
}
public event EventHandler OnItemChanged;
public void GetProvinces(string path)
{
Reader reader = new Reader();
if (_savegamePath != null)
{
FileStream fs = File.OpenRead(path);
List<Province> listofProvinces = reader.ReadTextString(fs);
foreach (Province province in listofProvinces)
{
Provinces.Add(new Province()
{
Aristocrats = province.Aristocrats,
Artisans = province.Artisans
});
}
}
}
}
}
Code Behind
using isnuaatest.Helper;
using isnuaatest.Models;
using isnuaatest.ViewModel;
using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace isnuaatest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindowViewModel _vm = new MainWindowViewModel();
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel();
}
private void OpenSaveFile_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog fileDialog = new OpenFileDialog();
fileDialog.Multiselect = false;
dynamic result = fileDialog.ShowDialog();
if (result == true)
{
_vm.SavegamePath = fileDialog.FileName;
}
}
}
}
My thinking is that maybe the Data Context wont update, because the data is in the Observable Collection. If this is true how can i update the Data Context, i already tried adding it in xaml to no avail.
Thanks

You actually create 3 different MainWindowViewModel objects - one in xaml and two in code behind. You can get rid of one in xaml, once in MainWindow constructor you set DataContext xaml-one is overridden.
But two objects in code-behind cause your problem - you load file into _vm object, but it's not the one that is held in DataContext.
To fix your problem use _vm for DataContext and not the new object:
public MainWindowViewModel _vm = new MainWindowViewModel();
public MainWindow()
{
InitializeComponent();
DataContext = _vm;
}

Change your Provinces:
public ObservableCollection<Province> Provinces
{
get { return this._province; }
set
{
_province = value;
OnPropertyChanged("Provinces");
}
}

In WPF Can I have a button event in the MainWindow.xaml reference code in my own class? [duplicate]

On a button's click, i want it to execute an event handler method that is another class apart from the window class.
I believe creating a ObjectDataProvider object which is binded to the event handler method in the other class, then binding said object to the Click event would do the trick, but it didn't.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Threading;
using System.Data.SqlClient;
namespace LoginNS
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class LoginWindow : Window
{
public LoginWindow()
{
InitializeComponent();
}
}
public class SQLServerClass
{
public void ConnectSQLServer(object sender, RoutedEventArgs e)
{
try
{
SqlConnection conn = new SqlConnection("Data Source=tcp:172.16.1.71;Initial Catalog=Sample;User ID=sa;Password=hbkrko");
conn.Open();
MessageBox.Show("success");
}
catch
{
MessageBox.Show("db error");
}
}
}
}
Here is the resource and how i'm using it which is incorrect because i get an error message:
<ObjectDataProvider x:Key="loginFunction" ObjectType="{x:Type local:SQLServerClass}" MethodName="ConnectSQLServer"/>
<Grid DataContext="{Binding Path=LoginNS}" Width="400" Height="200">
<Button x:Name="LoginButton" Style="{StaticResource LoginButton}" Click="{Binding Source={StaticResource loginFunction}}"/>
</Grid>
Immediate run-time error:
Additional information: 'Provide value on 'System.Windows.Data.Binding' threw an exception.' Line number '24' and line position '75'.

ObjectDataProvider is used to create object instances that can be used as binding source. In your case ConnectSQLServer method does not return any object that can be used for binding.
The best option for your scenario is to use RelayCommand. You can read about how to achieve this at http://www.codeproject.com/Articles/126249/MVVM-Pattern-in-WPF-A-Simple-Tutorial-for-Absolute
In your case, with RelayCommand your SQLServerClass will be something like this
public class SQLServerClass
{
public SQLServerClass()
{
LoginCommand = new RelayCommand<object>(LoginCommandExecute, LoginCommandCanExecute);
}
public void ConnectSQLServer(object sender, RoutedEventArgs e)
{
try
{
SqlConnection conn = new SqlConnection("Data Source=tcp:172.16.1.71;Initial Catalog=Sample;User ID=sa;Password=hbkrko");
conn.Open();
MessageBox.Show("success");
}
catch
{
MessageBox.Show("db error");
}
}
public ICommand LoginCommand { get; set; }
private void LoginCommandExecute(object arg)
{
ConnectSQLServer(this, new RoutedEventArgs());
}
private bool LoginCommandCanExecute(object arg)
{
return true;
}
}
And your XAML
<Window.Resources>
<ObjectDataProvider x:Key="loginFunction" ObjectType="{x:Type local:SQLServerClass}"/>
</Window.Resources>
<Grid>
<Grid Width="400" Height="200">
<Button x:Name="LoginButton" Command="{Binding Path=LoginCommand, Source={StaticResource loginFunction}}"/>
</Grid>
</Grid>
Note that you can use the MvvmLight library. It already contains an implementation of the RelayCommand class and other useful classes for WPF MVVM application.

Why can't you use this:
InitializeComponent();
sqlServerInstance = new SQLServerClass();
LoginButton.Click += MainConnectSQLServer()
And
private void MainConnectSQLServer(object sender, RoutedEventArgs e)
{
sqlServerInstance.ConnectSQLServer(sender, e);
}

Filling WPF Combobox with SQL Column

Going off of this thread: Attach a SQL database to ComboBox.ItemSource (WPF)
I am still confused on how to execute. Below is my code for my GUI. I am new to C# and am unsure how to manipulate the combo box.
I am trying to take data from a SQL query and fill the values of a combobox.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace List
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var instance = new SQLInformation();
instance.fillComboBox("Data Source=server Initial Catalog=db; User id=user; Password=pass;", System.Windows.Controls.ComboBox. , "select distinct [location] from [dbo].[locations]", null, "[location]");
}
}
}
SQL Information code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data.SqlClient;
using System.Data;
using System.Collections.Specialized;
using System.Configuration;
namespace List
{
public class SQLInformation
{
public bool fillComboBox(string connectionString, System.Windows.Controls.ComboBox combobox, string query, string defaultValue, string itemText)
{
SqlCommand sqlcmd = new SqlCommand();
SqlDataAdapter sqladp = new SqlDataAdapter();
DataSet ds = new DataSet();
try
{
using (SqlConnection _sqlconTeam = new SqlConnection(ConfigurationManager.ConnectionStrings[connectionString].ConnectionString))
{
sqlcmd.Connection = _sqlconTeam;
sqlcmd.CommandType = CommandType.Text;
sqlcmd.CommandText = query;
_sqlconTeam.Open();
sqladp.SelectCommand = sqlcmd;
sqladp.Fill(ds, "defaultTable");
DataRow nRow = ds.Tables["defaultTable"].NewRow();
nRow[itemText] = defaultValue;
ds.Tables["defaultTable"].Rows.InsertAt(nRow, 0);
combobox.DataContext = ds.Tables["defaultTable"].DefaultView;
combobox.DisplayMemberPath = ds.Tables["defaultTable"].Columns[0].ToString();
combobox.SelectedValuePath = ds.Tables["defaultTable"].Columns[1].ToString();
}
return true;
}
catch (Exception expmsg)
{
return false;
}
finally
{
sqladp.Dispose();
sqlcmd.Dispose();
}
}
}
}
Here is my XAML code:
<Window x:Class="List.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="FirstWindow" Height="390" Width="683">
<Window.Background>
<LinearGradientBrush StartPoint='0,0' EndPoint='0,1'>
<LinearGradientBrush.GradientStops>
<GradientStop Color='#FFC1C1C1' Offset="0.99" />
<GradientStop Color='White' />
<GradientStop Color="#FFE4E4E4" Offset="0.397"/>
<GradientStop Color="#FFD1D1D1" Offset="0.777"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Window.Background>
<Grid>
<Grid Height="360" VerticalAlignment="Top">
<Image HorizontalAlignment="Left" Height="50" Margin="119,10,0,0" VerticalAlignment="Top" Width="270" Source=""/>
<Image HorizontalAlignment="Left" Height="23" Margin="153,50,0,0" VerticalAlignment="Top" Width="209" Source=""/>
<ComboBox x:Name="LocationComboBox" HorizontalAlignment="Left" Margin="153,122,0,0" VerticalAlignment="Top" Width="73" SelectedIndex="0">
</ComboBox>
</Grid>
</Grid>
</Window>

You are approaching this the wrong way. WPF was designed to work well using data binding and the MVVM methodology (Model->View->ViewModel). You should do some reading up on MVVM, as it is very powerful and will help you write better WPF apps. Your Window XAML file should just have layout code, and each property that you want bound to some data should use a {Binding} expression in the XAML.
For example, if you want to bind this ComboBox to a list of locations, you can use this XAML:
<ComboBox ItemsSource="{Binding Locations}" />
And then in your ViewModel class, you can expose a property called Locations that returns a list of the locations from the database, like this:
First create a ViewModel class and implement the INotifyPropertyChanged interface:
public class MainViewModel : INotifyPropertyChanged
Then inside the class you'll add a public Property called Locations:
private ObservableCollection<string> _locations;
public ObservableCollection<string> Locations
{
get { return _locations; }
set
{
_locations = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Locations"));
}
}
Notice how I've implemented the INotifyPropertyChanged interface on my ViewModel class. This interface is used by WPF to update the UI whenever a property on the underlying model changes. You can see where I am invoking the PropertyChanged event when my Locations list changes. This tells the UI that it should update any UI controls that are bound to Locations.
In the constructor of your MainWindow.xaml.cs file, you should set the DataContext to a new instance of this ViewModel:
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
And this is what my final MainViewModel class looks like. You can replace my code with some real database code to populate the Locations list:
public class MainViewModel : INotifyPropertyChanged
{
private ObservableCollection<string> _locations;
public ObservableCollection<string> Locations
{
get { return _locations; }
set
{
_locations = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Locations"));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public MainViewModel()
{
// Load our locations from the database here
// You can instead populate yours from SQL
Locations = new ObservableCollection<string>();
Locations.Add("Location 1");
Locations.Add("Location 2");
Locations.Add("Location 3");
Locations.Add("Location 4");
// Now your combobox should be populated
}
}

Data Binding in MVVM WPF

I have little knowledge in MVVM pattern. My problem is the data does not get binded to the xaml controls, no error is there. The progressbar is still at 0.
HomepageViewModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;
using CSMS_MVVM.Models;
namespace CSMS_MVVM.ViewModels
{
class HomepageViewModel : INotifyPropertyChanged
{
BackgroundWorker _worker;
public int _progress=20;
public int Progress
{
get { return _progress; }
set {
_progress = value;
OnPropertyChanged(new PropertyChangedEventArgs("Progress"));
}
}
public void startBackgroundProcess()
{
_worker = new BackgroundWorker();
_worker.DoWork += new DoWorkEventHandler(worker_DoWork);
_worker.ProgressChanged += worker_Progress_Changed;
_worker.RunWorkerAsync();
}
private void worker_Progress_Changed(object sender, ProgressChangedEventArgs e)
{
Progress = e.ProgressPercentage;
}
private void worker_DoWork(object sender, DoWorkEventArgs e)
{
Progress = 20;
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
PropertyChanged(this, e);
}
#endregion
}
}
Homepage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Timers;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using CSMS_MVVM.ViewModels;
namespace CSMS_MVVM.Views
{
/// <summary>
/// Interaction logic for Homepage.xaml
/// </summary>
public partial class Homepage : Page
{
HomepageViewModel hvm;
public Homepage()
{
InitializeComponent();
}
private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
hvm = new HomepageViewModel();
hvm.startBackgroundProcess();
}
}
}
Homepage.xaml
<Page x:Class="CSMS_MVVM.Views.Homepage"
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:CSMS_MVVM.ViewModels"
mc:Ignorable="d"
d:DesignHeight="700" d:DesignWidth="1000"
Title="Homepage" Loaded="Page_Loaded_1" Name="main">
<ProgressBar Name="pbStatus" Value="{Binding Path=Progress}" HorizontalAlignment="Center" Height="20" Margin="0,582,0,0" VerticalAlignment="Top" Width="300">
-----
<ProgressBar.Effect>
<DropShadowEffect Color="#FFB6B6B6" ShadowDepth="3" BlurRadius="15" Direction="310"/>
</ProgressBar.Effect>
</ProgressBar>
<TextBlock Text="{Binding Progress}" Margin="0,582,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" />
<Label Content="Loading ..." HorizontalAlignment="Center" Margin="0,607,0,0" VerticalAlignment="Top"/>
------
</Page>
Am i doing the correct coding? I searched the internet for an example but i did not understand them.
Thanks!

All bindings you set will bind to the DataContext if nothing else is specified.
private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
hvm = new HomepageViewModel();
hvm.startBackgroundProcess();
this.DataContext = hvm;
}
Once you have your data context set to your viewmodel instance, it should work.

You can set the DataContext of the page in the code behind.
Another option is to create the ViewModel as a XAML resource, and set the data context of the child element via Data Binding:
<Page x:Class="CSMS_MVVM.Views.Homepage"
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:CSMS_MVVM.ViewModels"
mc:Ignorable="d"
d:DesignHeight="700" d:DesignWidth="1000"
Title="Homepage" Loaded="Page_Loaded_1" Name="main">
<Page.Resources>
<!-- This creates the instance of the HomepageViewModel -->
<local:HomepageViewModel x:Key="HomepageViewModel" />
</Page.Resources>
<ProgressBar DataContext="{StaticResource HomepageViewModel}"
Value="{Binding Path=Progress}">

public Homepage()
{
InitializeComponent();
hvm = new HomepageViewModel();
this.DataContext=hvm;
}
Create view model object inside constructor.