Hi :) I'm trying to figure out how the INotifyPropertyChanged work with a very basic application. I am simply having a button in my mainWindow and when you press it, it should fire of an event to update a textBox, which have been bound to a specific attribute. However, even though the events gets fired of, they are always null and therefore the textBox is not updated.
<Window x:Class="StockViewer.MainWindow"
<!--Just erased some basic xaml here-->
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:RandomGen/>
</Window.DataContext>
<Grid>
<Button Click="incr" Height="30" VerticalAlignment="Top" Background="DarkGoldenrod"></Button>
<TextBlock VerticalAlignment="Top" Margin="40" Text="{Binding price, UpdateSourceTrigger=PropertyChanged}" Background="Aqua"></TextBlock>
</Grid>
When the button is pressed, the price should change:
public partial class MainWindow : Window
{
private RandomGen gen;
public MainWindow()
{
gen = new RandomGen();
InitializeComponent();
}
private void incr(object sender, RoutedEventArgs e)
{
gen.price = 7;
}
}
class RandomGen : NotifiedImp
{
public RandomGen()
{
_i = 3;
}
private int _i;
public int price
{
get { return _i; }
set
{
_i = value;
OnPropertyChanged("price");
}
}
}
class NotifiedImp: INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this,new PropertyChangedEventArgs(propertyName));
}
}
}
It's just really strange, the handler is always null. Thank you :)
You have two instances of RandomGen, one initialized in your XAML:
<Window.DataContext>
<local:RandomGen/>
</Window.DataContext>
And another initialized in your MainWindow constructor:
gen = new RandomGen();
This means when you update gen.price = 7; you aren't updating the instance which is your DataContext.
One solution would be remove your <Window.DataContext> setting in XAML and set DataContext in your MainWindow constructor, like so:
public MainWindow()
{
gen = new RandomGen();
InitializeComponent();
DataContext = gen;
}
The most MVVM like solution would be to use a ICommand on your RandomGen object to update price rather than using an event handler, then use this command in your XAML, like:
<Button Command="{Binding IncrementPriceCommand}"></Button>
Then it is up to you how you initialize DataContext, you wouldn't need to keep the RandomGen backing field either way.
Related
I have implemented something violating the MVVM pattern, and I wondered if there was a MVVM way of doing this.
I have a Window MainWindow, its DataContext is bound to a class called ViewModel which implements INotifyPropertyChanged.
I also implemented a Window ChildWindow which appears in a "Dialog" style when a button is clicked, using a RelayCommand. The DataContext of ChildWindow also binds to ViewModel. This Window is used to fill the details of a new list Item. I pass the View as a CommandParameter to the ViewModel, so that the ChildWindow can be centered in comparison to the MainWindow. This is not MVVM, and I would like to change this.
First, I implemented this in a non-MVVM way:
Here is my XAML for the button in MainWindow which opens the ChildWindow:
<Button Name="BtnInsert" Width="50" Margin="10" Command="{Binding OpenChildWindowCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}">Add</Button>
Here is my simplified XAML for the ChildWindow:
<Window x:Class="HWE_Einteilen_Prototype.View.ListItemWindow"
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:HWE_Einteilen_Prototype.View"
mc:Ignorable="d"
Title="test" Height="400" Width="400">
<TextBox Width="50" Text="{Binding CurrentListItem.Id}" ></TextBox>
</Window>
And here is my (simplified) ViewModel Class:
public class ViewModel : INotifyPropertyChanged
{
private DataContext _ctx;
private ListItem _currentListItem;
private ObservableCollection<listItem> _listItems;
private ListItemWindow _listItemWindow;
private ICommand _openListItemWindowCommand;
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<ListItem> ListItems
{
get { return _listItems; }
set
{
_listItems = value;
OnPropertyChanged();
}
}
public ListItem CurrentListItem
{
get { return _currentListItem; }
set
{
_currentListItem = value;
OnPropertyChanged();
}
}
public ICommand OpenListItemWindowCommand
{
get { return _openListItemWindowCommand; }
set
{
_openListItemWindowCommand = value;
OnPropertyChanged();
}
}
public ViewModel()
{
OpenListItemWindowCommand = new RelayCommand(this.OpenNewListItemWindow, this.CanOpenListItemWindow);
}
private void OpenNewListItemWindow(object parameter)
{
CurrentListItem = new listItem(){Id = "testId"};
_listItemWindow = new StListItemWindow(){DataContext = this};
_listItemWindow.Owner = (MainWindow)parameter;
_listItemWindow.WindowStartupLocation = WindowStartupLocation.CenterOwner;
_listItemWindow.Closing += OnStListItemWindowClosing;
_listItemWindow.Show();
}
private bool CanOpenListItemWindow(object parameter)
{
return true;
}
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
What I have tried:
I have tried implementing a Behavior (from system.windows.interactivity) for the button opening the child window, so that it creates a new Window and does all the centering and owner stuff, and leaving only CurrentListItem = new listItem(){Id = "testId"}; in the command method. However, in this case binding to CurrentListItem in the ChildWindow throws an exception.
XAML Code for the MainWindow Button:
<Button Name="BtnInsert" Width="50" Margin="10" Command="{Binding OpenListItemWindowCommand}" Content="Add">
<i:Interaction.Behaviors>
<behaviors:BehButtonNewWindow></behaviors:BehButtonNewWindow>
</i:Interaction.Behaviors>
</Button>
Behavior Code:
class BehButtonNewWindow : Behavior<Button>
{
private StListItemWindow _ListItemWindow;
protected override void OnAttached()
{
AssociatedObject.Click += OnClickHandler;
}
protected override void OnDetaching()
{
AssociatedObject.Click -= OnClickHandler;
}
private void OnClickHandler(object sender, RoutedEventArgs routedEventArgs)
{
if (sender is Button button)
{
var win = Window.GetWindow(button);
if (win != null)
{
_ListItemWindow = new ListItemWindow
{
DataContext = win.DataContext,
Owner = win,
WindowStartupLocation = WindowStartupLocation.CenterOwner
};
_ListItemWindow.Show();
}
}
}
}
Code of Command Execute Method from ViewModel:
private void OpenNewStListItemWindow(object parameter)
{
CurrentListItem = new ListItem(){Id = "testId"};
}
What am I doing wrong?
Credit for this answer goes to Will (see comments)
On handling the window opening:
Opening a window is a UI concern. Simply handle the button click in the codebehind, construct a new window and stick the current VM in it. MVVM != no codebehind.
On handling vm code:
[...] If you mean that last little bit of code at the bottom, make it public and have the window call it before opening the new window. The UI is perfectly fine knowing about your view models. They're designed to display their state and bind to their properties.
Thanks for your help!
I'm trying to create a very simple data binding app for practice but I can't get it to work, I've looked at a lot of different solutions but none of them help and I can't figure out the problem.
MainWindow.xaml:
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<TextBlock Text="{Binding BindText, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
Window1.xaml:
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<TextBox Text="{Binding BindText, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
ViewModel:
using System.ComponentModel;
namespace bindtest
{
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string bindText = "Hello";
public string BindText
{
get { return bindText; }
set
{
bindText = value;
OnPropertyChanged("BindText");
}
}
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
The text displays correctly when it first loads but then won't update. The text in MainWindow is meant to update when the text in window1 changes.
Any solutions?
Thanks
As JanDotNet suggests, you need to use a single instance of the view model. So in your app level code for instance you would do something like:
public partial class App : Application
{
private void App_Startup(object sender, StartupEventArgs e)
{
try
{
ViewModel vm = new ViewModel();
MainWindow w = new MainWindow(vm);
Window1 w1 = new Window1(vm);
w.Show();
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
}
And then your window constructors modified like so:
public partial class MainWindow : Window
{
pulic MainWindow(ViewModel vm)
{
InitializeComponent();
DataContext = vm;
}
}
Since you are creating your view model via:
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
you have 2 distinct instances of the view models. You have to bind the same instance of your view models against the views.
How to bind the same instance against 2 views?
The simplest way in your case is, to create a singleton:
public class ViewModel : INotifyPropertyChanged
{
public ViewModel Instance {get; } = new ViewModel();
// ....
}
and bind to it:
<Window DataContext="{Binding Source={x:Static local:ViewModel.Instance}}" /* ... */>
Note that it is not the best way....
You should use PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); or
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName)
to ensure that the handler wasn't unsubscribed beween checking for null and invoking the event handler!
I have the following begginer project, and have a wierd effect. I want the button to add one element to the ComboBox every time it is clicked.
What happens is that when I start the app, click n times on the button and then open the ComboBox, it shows me n items as expected. But no matter how often I click the button atfer that, there will be no new items in the ComboBox.
MainWindow.xaml:
<Window x:Class="WPF_binding_combobox.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:WPF_binding_combobox"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<Button Content="Add item to combobox" Click="Button_Click" />
<ComboBox ItemsSource="{Binding Path=ComboBoxItems}" />
</StackPanel>
</Window>
MainWindow.xaml.cs (code-behind):
namespace WPF_binding_combobox {
using System.Windows;
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
this.DataContext = new La();
}
private void Button_Click(object sender, RoutedEventArgs e) {
La l = this.DataContext as La;
l.AddItem();
}
}
}
La.cs
namespace WPF_binding_combobox {
using System.Collections.Generic;
using System.ComponentModel;
class La : INotifyPropertyChanged {
private int counter;
private IList<string> cbItems;
public IList<string> ComboBoxItems {
get {
return this.cbItems;
}
set {
this.cbItems = value;
this.RaisePropertyChanged("ComboBoxItems");
}
}
public La() {
this.cbItems = new List<string>();
this.counter = 0;
}
public void AddItem() {
var temp = this.ComboBoxItems;
temp.Add("abc" + (++this.counter));
this.ComboBoxItems = temp;
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName) {
var handler = this.PropertyChanged;
if (handler != null) {
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
I have tried the debugger, and it shows me that there are items added to the backing field and the RaisePropertyChanged is called. For some reason, the UI does not show me any thing that changes after the first click.
I have tried setting Mode=OneWay or Mode=TowWay, there was no change.
Why is the ComboBox not getting updated after I open it for the first time?
You are using IList which has no way of informing View that items has been added or removed after initial binding (like you said).
You should use ObservableCollection. As the name suggests, it works on observer pattern where your View will be observer.
public ObservableCollection<string> ComboBoxItems
{
get
{
return cbItems;
}
}
and in AddItem you only need to to this
public void AddItem()
{
ComboBoxItems.Add("abc" + (++this.counter));
}
Off Topic:
If you want to use MVVM pattern, don't write any code in Code-behind. Use Delegate Commands to bind to buttons. (Google will help).
Even assigning DataContext can be removed to XAML like this
<Window.DataContext>
<myassembly:LA />
</Window.DataContext>
Till then, have a local variable in View which would save you casting hackles everytime.
private La _dataContext;
public MainWindow()
{
InitializeComponent();
_dataContext = new La();
this.DataContext = _dataContext
}
private void Button_Click(object sender, RoutedEventArgs e)
{
_dataContext.AddItem();
}
Whether you are using an ObservableCollection<T> or an IList<T> doesn't really matter if you reset the source collection property each time you want to update the ComboBox.
You should either use a single instance of an ObservableCollection that you add all items to or set your source property to a new IList<string>.
If you modify your AddItem() method slightly it works as expected:
public void AddItem()
{
var temp = new List<string>(this.ComboBoxItems);
temp.Add("abc" + (++this.counter));
this.ComboBoxItems = temp;
}
So, I have a project with a scrolling text (marqee) that rotates over a string array. And I want it to change the string value after 20 seconds of each animation iteration.
There is a problem though, the property(ScrollingText) that uses the INotifyPropertyChanged interface to bind to a textblock(using XAML) does not return after the first iteration. Even though it refreshes normally(in the set part), it does not return on the Getter part.... except for the first set in the default ctor.
MAIN CLASS:
class GetScrollingText : CommonBase
{
private string _scrollingtext = String.Empty;
DoubleAnimation Animation;
public GetScrollingText()
{
ScrollingText = GetScrollString();
}
public string ScrollingText
{
get
{
return _scrollingtext;
}
set
{
if (value != _scrollingtext)
{
_scrollingtext = value;
RaisePropertyChanged("ScrollingText");
}
}
} // INJECTS the string in the animated textblock {binding}.
public TextBlock scrollBlock { get; set; }
string GetScrollString()
{
.........
return scrolltext;
}
public void LeftToRightMarqee(double from, double to)
{
Animation = new DoubleAnimation();
Animation.From = from;
Animation.To = to;
Animation.Duration = new Duration(TimeSpan.FromSeconds(20));
Animation.Completed += animation_Completed;
scrollBlock.BeginAnimation(Canvas.LeftProperty, Animation);
}
void animation_Completed(object sender, EventArgs e)
{
ScrollingText = GetScrollString();
scrollBlock.BeginAnimation(Canvas.LeftProperty, Animation);
}
}
For some reason the animation_Completed Event only changes the value ScrollingText, but it does not invoke the Getter part therefore there is not a return to the {binding}.
XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:AnnouncingSys"
x:Class="AnnouncingSys.MainWindow"
x:Name="Window"
Width="1280" Height="720" MinHeight="566" MinWidth="710">
<Window.Resources>
<vm:GetScrollingText x:Key="ScrollingText"/>
</Window.Resources>
<Canvas x:Name="MainCanvas" ClipToBounds="True" Margin="0,0,0,0" Grid.Row="5" Background="Black" Grid.ColumnSpan="5" >
<TextBlock x:Name="ScrollBlock" TextWrapping="Wrap" VerticalAlignment="Top" Height="113" Width="5147" Canvas.Left="-1922" Text="{Binding ScrollingText, Source={StaticResource ScrollingText}}"/>
</Canvas>
</Window>
CODE BEHIND:
public partial class MainWindow : Window
{
GetScrollingText scrolling = new GetScrollingText();
public MainWindow()
{
InitializeComponent();
scrolling.scrollBlock = this.ScrollBlock;
scrolling.LeftToRightMarqee(2000, -3000);
}
}
And finally the helper class CommonBase:
public class CommonBase : INotifyPropertyChanged
{
protected CommonBase()
{
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string PropertyName)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
PropertyChangedEventArgs e = new PropertyChangedEventArgs(PropertyName);
handler(this, e);
}
}
}
I have even put a breakpoint on the return block of the Getter but it only activates on the first: "ScrollingText = GetScrollString()". I mean, shouldn't it return each time the value is changed???
You are using two different instances of your GetScrollingText class, one in XAML as StaticResource, the other in code behind as the scrolling field in class MainWindow.
Instead of creating a StaticResource in XAML, you could just set the DataContext property of your MainWindow:
public partial class MainWindow : Window
{
GetScrollingText scrolling = new GetScrollingText();
public MainWindow()
{
InitializeComponent();
scrolling.scrollBlock = this.ScrollBlock;
scrolling.LeftToRightMarqee(2000, -3000);
DataContext = scrolling; // here
}
}
Now you would not explicitly set the binding's Source property, because the DataContext is used as default binding source:
<TextBlock ... Text="{Binding ScrollingText}"/>
I've attached some WPF C# binding code - why doesn't this simple example work? (just trying to understanding binding to a custom object). That is when clicking on the button to increase the counter in the model, the label isn't updated.
<Window x:Class="testapp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Height="23" HorizontalAlignment="Left" Margin="20,12,0,0"
Name="testButton" VerticalAlignment="Top" Width="126"
Click="testButton_Click" Content="Increase Counter" />
<Label Content="{Binding Path=TestCounter}" Height="37"
HorizontalAlignment="Right" Margin="0,12,122,0"
Name="testLabel2" VerticalAlignment="Top"
BorderThickness="3" MinWidth="200" />
</Grid>
</Window>
namespace testapp1
{
public partial class MainWindow : Window
{
public TestModel _model;
public MainWindow()
{
InitializeComponent();
InitializeComponent();
_model = new TestModel();
_model.TestCounter = 0;
this.DataContext = _model;
}
private void testButton_Click(object sender, RoutedEventArgs e)
{
_model.TestCounter = _model.TestCounter + 1;
Debug.WriteLine("TestCounter = " + _model.TestCounter);
}
}
public class TestModel : DependencyObject
{
public int TestCounter { get; set; }
}
}
thanks
For this simple example, consider using INotifyPropertyChanged and not DependencyProperties!
UPDATE
If you do want to use DPs, use the propdp snippet in VS2010 or Dr WPF's snippets for VS2008?
TestCounter needs to be a DepenencyProperty
public int TestCounter
{
get { return (int)GetValue(TestCounterProperty); }
set { SetValue(TestCounterProperty, value); }
}
// Using a DependencyProperty as the backing store for TestCounter.
//This enables animation, styling, binding, etc...
public static readonly DependencyProperty TestCounterProperty =
DependencyProperty.Register
("TestCounter",
typeof(int),
typeof(TestModel),
new UIPropertyMetadata(0));
You can implement the INotifyPropertyChanged interface in the System.ComponentModel namespace. I usually implement a Changed method that can take a number of property names and check for the event not being set. I do that because sometimes I have multiple properties that depend on one value and I can call one method from all of my property setters.
For instance if you had a Rectangle class with Width and Height properties and an Area read-only property that returns Width * Height, you could put Changed("Width", "Area"); in the property setter for Width.
public class TestModel : INotifyPropertyChanged
{
int m_TestCounter;
public int TestCounter {
get {
return m_TestCounter;
}
set {
m_TestCounter = value;
Changed("TestCounter");
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
void Changed(params string[] propertyNames)
{
if (PropertyChanged != null)
{
foreach (string propertyName in propertyNames)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}