UserControl Command to modify Property - wpf

Question

In a User Control, I am trying to get a Command to modify a Property. I have an IncrementValueCommand and a Value property that I want to increment when a button is clicked. The button's Command is bound to the IncrementValueCommand and the Content is bound to the Value property.
I have tried two approaches to do this and in both cases the Button doesn't show the Value incrementing..
1st Approach: Dependency Property for Value
XAML:
<UserControl x:Class="UserControl1"
x:Name="root"
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:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="200"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Button Content="{Binding Path=Value}"
Command="{Binding Path=IncrementValueCommand}" />
</UserControl>
Code behind:
Public Class UserControl1
Public Shared ValueProperty As DependencyProperty = DependencyProperty.Register("Value", GetType(Integer), GetType(UserControl1), New PropertyMetadata(1))
Public Property IncrementValueCommand As ICommand
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
IncrementValueCommand = New RelayCommand(AddressOf IncrementValue)
End Sub
Public Property Value() As Integer
Get
Return GetValue(ValueProperty)
End Get
Set(value As Integer)
SetValue(ValueProperty, value)
End Set
End Property
Private Sub IncrementValue()
Value += 1
End Sub
End Class
2nd approach: INotifyPropertyChanged for Value
XAML:
<UserControl x:Class="UserControl2"
x:Name="root"
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:WpfApp1"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="200"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Button Content="{Binding Path=Value}"
Command="{Binding Path=IncrementValueCommand}" />
</UserControl>
Code behind:
Imports System.ComponentModel
Imports System.Runtime.CompilerServices
Public Class UserControl2
Implements INotifyPropertyChanged
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Private _value As Integer = 1
Public Property IncrementValueCommand As ICommand
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
IncrementValueCommand = New RelayCommand(AddressOf IncrementValue)
End Sub
Public Property Value() As Integer
Get
Return _value
End Get
Set(value As Integer)
If _value <> value Then
_value = value
NotifyPropertyChanged()
End If
End Set
End Property
' This method is called by the Set accessor of each property.
' The CallerMemberName attribute that is applied to the optional propertyName
' parameter causes the property name of the caller to be substituted as an argument.
Private Sub NotifyPropertyChanged(<CallerMemberName()> Optional ByVal propertyName As String = Nothing)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
Private Sub IncrementValue()
Value += 1
End Sub
End Class
I left out the RelayCommand class which is a standard implementation for ICommand.
Any help will be greatly appreciated.
Working Code (thanks to Peter Duniho for his answer)
Adjust the code-behind constructor by creating the IncrementValueCommand first:
Public Sub New()
' Add any initialization after the InitializeComponent() call? Nah
IncrementValueCommand = New RelayCommand(AddressOf IncrementValue)
' This call is required by the designer.
InitializeComponent()
End Sub

Answer 1

As I've explained in this comment, the problem in this particular variant of your attempts to use a command to update a value is that you are initializing the IncrementValueCommand property after the call to InitializeComponent() in the class constructor.
The InitializeComponent() call is where the binding to that property is set up, i.e. Command="{Binding Path=IncrementValueCommand}" in your XAML. When that call is made, the property still has its default value of null.
When you assign the property a value later, because the property is an auto-implemented property, there's nothing about that assignment that would cause a property-change notification to happen, so the binding is never updated to reflect the new value.
You can either implement property-change notification for that property, just as is already done for the Value property, or you can (as I had suggested earlier) move the assignment within the constructor so that it occurs before the call to InitializeComponent instead of after.