Data Binding in MVVM WPF

Question

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!

nvoigt · Accepted Answer · 2015-03-15 09:01:56Z

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.

Andrew Shepherd · Accepted Answer · 2015-03-15 09:12:14Z

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}">

Abhinav Singh · Accepted Answer · 2015-03-15 09:15:45Z

public Homepage() { InitializeComponent(); hvm = new HomepageViewModel(); this.DataContext=hvm; }

Create view model object inside constructor.

Collectives™ on Stack Overflow

Data Binding in MVVM WPF

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related