Trying to understand of DependencyProperty

Question

Being new to WPF, and its apparently amazing ability to change, bind, enable, and otherwise manipulate. I'm trying to get a mental overview of what is happening and hope some can either confirm or correct my readings.

Before WPF, you have delegates and events. You could have a dozen controls all listening (via being registered to the event), so when the event fires, all other controls will be notified automatically and can act on however they were so coded. Such as...

From Code Behind, you would do something like

GotFocus += MyMethodToDoSomething;

Then, the signature method

private void MyMethodToDoSomething(object sender, RoutedEventArgs e)
{
  .. do whatever
}

Additionally, by using standard getter / setter, the setter can call its own methods in its own class to do something every time someone tries to get or set a value

private int someValue;
public int SomeValue
{
   get { this.DoSomeOtherThing();
         return someValue;
       }

   set { this.DoAnotherThing();
        someValue = value;
}

Now, there's dependency properties, and the one/two-way binding. I understand (I think) about one-way to simulate more of a read-only operation.

Anyhow, with two way binding, the dependencies automatically notify anyone "depending" on a change in either the source or target respectively, without an explicit check if something has subscribed to an event, the framework automatically handles the announcing of the change to the respective controls (target or source).

So, let me through this scenario out with an old Add/Edit Save/Cancel maintenance form. In an older framework, if someone clicked on an add or edit button, all the data entry fields would become "enabled" with either blank data for a new record, or editing existing data. At the same time, the add/edit buttons would become disabled, but the Save/Cancel buttons would now become enabled.

Likewise when finished via Save/Cancel, it would disable all the entry fields, save/cancel, and re-enable the Add/Edit buttons.

I don't quite understand how such this type of scenario would be handled under this dependency property scenario (yet), but am I close? I also understand you can bind to almost anything, including color schemes, show/hide, fonts, etc... But I'm taking small steps on trying to really grasp this stuff.

Thanks.

Answer 1

The getter/setter stuff is a feature of regular C# properties. It isn't unique to WPF.

This one-way/two-way stuff is talking about WPF data binding, which doesn't require you to create Dependency Properties - just to use them.

Dependency properties are built into controls themselves. They let you directly reference those properties when adding instances of your control to the form. They allow your custom control to feel a bit more "native".

Generally they are used to implement a property that can use data binding. In your apps, you'll mostly just use data binding, rather than implement new hooks for it.

... if someone clicked on an add or edit button, all the data entry fields would become "enabled" with either blank data for a new record, or editing existing data. At the same time, the add/edit buttons would become disabled, but the Save/Cancel buttons would now become enabled.

Likewise when finished via Save/Cancel, it would disable all the entry fields, save/cancel, and re-enable the Add/Edit buttons.

I would accomplish what you want to accomplish with:

• A view model
• Data binding on the view to that view model
• Exposing ICommand on that view model (for buttons)
• INotifyPropertyChanged on the view model (for all properties)

No new dependency properties need to be created for this scenario. You'll just use existing ones to do data binding.

Here's a code sample/tutorial of doing WPF with data binding and MVVM style.

Setting up the project

I created a WPF application in the New Project wizard, and named it MyProject.

I set up my project name and namespaces to match the generally accepted scheme of things. You should set these properties in solution explorer -> project -> right click -> properties.

I also have a custom folder scheme I like to use for WPF projects:

I stuck the view in its own "View" folder for organizational purposes. This is also reflected in the namespace, since your namespaces should match your folders (namespace MyCompany.MyProject.View).

I also edited AssemblyInfo.cs, and cleaned up my assembly References and app config, but that is just some tedium that I'll leave as an exercise for the reader :)

Creating a view

Start off in the designer, and get everything looking nice. Don't add any code behind, or do any other work yet. Just play around in the designer until things look right (especially when you resize). Here's what I ended up with:

View/EntryView.xaml:

<Window x:Class="MyCompany.MyProject.View.EntryView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Entry View" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBox Text="Test 1" Grid.Row="0" />
            <TextBox Text="Test 2" Grid.Row="1" Margin="0,6,0,0" />
            <TextBox Text="Test 3" Grid.Row="2" Margin="0,6,0,0" />
            <TextBox Text="Test 4" Grid.Row="3" Margin="0,6,0,0" />
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Content="Edit" IsEnabled="True" Grid.Column="0"
                HorizontalAlignment="Left" Width="75" />
            <Button Content="Save" IsEnabled="False" Grid.Column="1"
                Width="75" />
            <Button Content="Cancel" IsEnabled="False" Grid.Column="2"
                Width="75" Margin="6,0,0,0" />
        </Grid>
    </Grid>
</Window>

View/EntryView.xaml.cs:

using System.Windows;

namespace MyCompany.MyProject.View
{
    public partial class EntryView : Window
    {
        public EntryView()
        {
            InitializeComponent();
        }
    }
}

I didn't create any Name properties on these controls. That is on purpose. I am going to use MVVM, and won't use any code behind. I'll let the designer do what it wants to do, but I won't touch any of that code.

Creating a view model

Next I will make my view model. This should be designed in a way that it services the view, but could ideally be view independent. I won't worry about that too much, but the point is you don't have to have a 1-to-1 parity of view controls and view model objects.

I try to make my views/view models make sense in a bigger app context, so I'll start purposing the view model here. We'll make this "editable form" a rolodex entry.

We'll create a helper class that we need first...

ViewModel/DelegateCommand.cs:

using System;
using System.Windows.Input;

namespace MyCompany.MyProject.ViewModel
{
    public class DelegateCommand : ICommand
    {
        private readonly Action<object> _execute;
        private readonly Func<object, bool> _canExecute;

        public DelegateCommand(Action execute)
            : this(execute, CanAlwaysExecute)
        {
        }

        public DelegateCommand(Action execute, Func<bool> canExecute)
        {
            if (execute == null)
                throw new ArgumentNullException("execute");

            if (canExecute == null)
                throw new ArgumentNullException("canExecute");

            _execute = o => execute();
            _canExecute = o => canExecute();
        }

        public bool CanExecute(object parameter)
        {
            return _canExecute(parameter);
        }

        public void Execute(object parameter)
        {
            _execute(parameter);
        }

        public event EventHandler CanExecuteChanged;

        public void RaiseCanExecuteChanged()
        {
            if (CanExecuteChanged != null)
                CanExecuteChanged(this, new EventArgs());
        }

        private static bool CanAlwaysExecute()
        {
            return true;
        }
    }
}

ViewModel/EntryViewModel.cs:

using System;
using System.ComponentModel;
using System.Windows.Input;

namespace MyCompany.MyProject.ViewModel
{
    public class EntryViewModel : INotifyPropertyChanged
    {
        private readonly string _initialName;
        private readonly string _initialEmail;
        private readonly string _initialPhoneNumber;
        private readonly string _initialRelationship;

        private string _name;
        private string _email;
        private string _phoneNumber;
        private string _relationship;

        private bool _isInEditMode;

        private readonly DelegateCommand _makeEditableOrRevertCommand;
        private readonly DelegateCommand _saveCommand;
        private readonly DelegateCommand _cancelCommand;

        public EntryViewModel(string initialNamename, string email,
            string phoneNumber, string relationship)
        {
            _isInEditMode = false;

            _name = _initialName = initialNamename;
            _email = _initialEmail = email;
            _phoneNumber = _initialPhoneNumber = phoneNumber;
            _relationship = _initialRelationship = relationship;

            MakeEditableOrRevertCommand = _makeEditableOrRevertCommand =
                new DelegateCommand(MakeEditableOrRevert, CanEditOrRevert);

            SaveCommand = _saveCommand =
                new DelegateCommand(Save, CanSave);

            CancelCommand = _cancelCommand =
                new DelegateCommand(Cancel, CanCancel);
        }

        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                RaisePropertyChanged("Name");
            }
        }

        public string Email
        {
            get { return _email; }
            set
            {
                _email = value;
                RaisePropertyChanged("Email");
            }
        }

        public string PhoneNumber
        {
            get { return _phoneNumber; }
            set
            {
                _phoneNumber = value;
                RaisePropertyChanged("PhoneNumber");
            }
        }

        public string Relationship
        {
            get { return _relationship; }
            set
            {
                _relationship = value;
                RaisePropertyChanged("Relationship");
            }
        }

        public bool IsInEditMode
        {
            get { return _isInEditMode; }
            private set
            {
                _isInEditMode = value;
                RaisePropertyChanged("IsInEditMode");
                RaisePropertyChanged("CurrentEditModeName");

                _makeEditableOrRevertCommand.RaiseCanExecuteChanged();
                _saveCommand.RaiseCanExecuteChanged();
                _cancelCommand.RaiseCanExecuteChanged();
            }
        }

        public string CurrentEditModeName
        {
            get { return IsInEditMode ? "Revert" : "Edit"; }
        }

        public ICommand MakeEditableOrRevertCommand { get; private set; }
        public ICommand SaveCommand { get; private set; }
        public ICommand CancelCommand { get; private set; }

        private void MakeEditableOrRevert()
        {
            if (IsInEditMode)
            {
                // Revert
                Name = _initialName;
                Email = _initialEmail;
                PhoneNumber = _initialPhoneNumber;
                Relationship = _initialRelationship;
            }

            IsInEditMode = !IsInEditMode; // Toggle the setting
        }

        private bool CanEditOrRevert()
        {
            return true;
        }

        private void Save()
        {
            AssertEditMode(isInEditMode: true);
            IsInEditMode = false;
            // Todo: Save to file here, and trigger close...
        }

        private bool CanSave()
        {
            return IsInEditMode;
        }

        private void Cancel()
        {
            AssertEditMode(isInEditMode: true);
            IsInEditMode = false;
            // Todo: Trigger close form...
        }

        private bool CanCancel()
        {
            return IsInEditMode;
        }

        private void AssertEditMode(bool isInEditMode)
        {
            if (isInEditMode != IsInEditMode)
                throw new InvalidOperationException();
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this,
                    new PropertyChangedEventArgs(propertyName));
        }

        #endregion INotifyPropertyChanged Members
    }
}

As is usual for this type of workflow, there are some requirements I missed when initially creating the view. For example, I figured out that it would make sense to have a "revert" feature that undoes the changes, but keeps the dialog open. I also figured out that I could reuse the edit button for this purpose. So I made a property that I will read to get the edit button's name.

The view model contains a lot of code to do something simple, but most of it is boilerplate for hooking up the properties. This boilerplate gives you some power, though. It helps isolate you from your view, so your view can change drastically with no changes or only minor changes to the view model.

If the view model gets too big, you can start pushing it into a additional sub view models. Create them wherever makes the most sense, and return them as properties on this view model. The WPF data binding mechanism supports chaining down the data context. You'll find out about this data context a little later when we hook things up.

Hooking up the view to our view model

To hook up the view to a view model, you have to set the DataContext property on view to point to your view model.

Some people like to instantiate and specify the view model in the XAML code. While this can work, I like to keep the view and the view model independent of each other, so I make sure I use some third class to hook the two up.

Normally I'd use a dependency injection container to hook up all my code, which is a lot of work, but keeps all the parts independent. But for an app this simple, I like to use the App class to bind my stuff together. Let's go edit it:

App.xaml:

<Application x:Class="MyCompany.MyProject.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Startup="ApplicationStartup">
    <Application.Resources>

    </Application.Resources>
</Application>

App.xaml.cs:

using System.Windows;

namespace MyCompany.MyProject
{
    public partial class App : Application
    {
        private void ApplicationStartup(object sender, StartupEventArgs e)
        {
            // Todo: Somehow load initial data...
            var viewModel = new ViewModel.EntryViewModel(
                "some name", "some email", "some phone number",
                "some relationship"
                );

            var view = new View.EntryView()
            {
                DataContext = viewModel
            };

            view.Show();
        }
    }
}

You can now run your project, though the logic we built won't do anything. This is because our initial view is created, but it doesn't actually do any data binding.

Setting up data binding

Lets go back and edit the view to finish hooking it all up.

Editing View/EntryView.xaml:

<Window x:Class="MyCompany.MyProject.View.EntryView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Rolodex Entry"
        Height="350" Width="525"
        MinWidth="300" MinHeight="200">
    <Grid Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="Name:" Grid.Column="0" Grid.Row="0" />
            <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"
                     IsEnabled="{Binding IsInEditMode}" Grid.Column="1"
                     Grid.Row="0" Margin="6,0,0,0" />
            <TextBlock Text="E-mail:" Grid.Column="0" Grid.Row="1"
                       Margin="0,6,0,0" />
            <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}"
                     IsEnabled="{Binding IsInEditMode}" Grid.Column="1"
                     Grid.Row="1" Margin="6,6,0,0" />
            <TextBlock Text="Phone Number:" Grid.Column="0" Grid.Row="2"
                       Margin="0,6,0,0" />
            <TextBox Text="{Binding PhoneNumber, UpdateSourceTrigger=PropertyChanged}"
                     IsEnabled="{Binding IsInEditMode}" Grid.Column="1" Grid.Row="2"
                     Margin="6,6,0,0" />
            <TextBlock Text="Relationship:" Grid.Column="0" Grid.Row="3"
                       Margin="0,6,0,0" />
            <TextBox Text="{Binding Relationship, UpdateSourceTrigger=PropertyChanged}"
                     IsEnabled="{Binding IsInEditMode}" Grid.Column="1" Grid.Row="3"
                     Margin="6,6,0,0" />
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Content="{Binding CurrentEditModeName}"
                    Command="{Binding MakeEditableOrRevertCommand}"
                    Grid.Column="0" HorizontalAlignment="Left"
                    Width="75" />
            <Button Content="Save" Command="{Binding SaveCommand}"
                    Grid.Column="1" Width="75" />
            <Button Content="Cancel" Command="{Binding CancelCommand}"
                    Grid.Column="2" Width="75" Margin="6,0,0,0" />
        </Grid>
    </Grid>
</Window>

I did a lot of work here. First, the static stuff:

• I changed the title of the form to match the Rolodex idea
• I added labels for the fields, since I now know what they apply to
• I changed the minimum width/height, since I noticed controls were getting cut off

Next the data-binding:

• I bound all the text fields to the appropriate properties on the view model
• I made the text fields update the view model on every keypress (UpdateSourceTrigger=PropertyChanged). This isn't necessary for this app, but could be helpful in the future. I added it to spare you from looking it up when you need it :)
• I bound the IsEnabled field of each text box to the IsInEditMode property
• I bound the buttons to their respective commands
• I bound the edit button's name (Content property) to the corresponding property on the view model

Here's the result

Now all the UI logic works, except those we left a Todo comment on. I left those unimplemented because they have to do with a specific application architecture, and I didn't want to get into that for this demo.

Also, vanilla WPF doesn't have a very clean MVVM way to close a form that I know of. You can use code-behind to do it, or you can use one of the dozens of WPF add-on libraries that provide their own cleaner way of doing it.

Dependency Properties

You may have noticed that I didn't create a single custom Dependency Property in my code. The dependency properties I used were all on existing controls (e.g. Text, Content and Command). This is how it usually works in WPF, because data binding and styling (which I didn't get into) gives you a lot of options. It lets you completely customize the look, feel, and actions of built-in controls.

In previous Windows GUI frameworks, you'd often have to subclass existing controls or create custom controls to get a custom look and feel. The only reasons to make custom controls in WPF are to combine patterns of multiple controls in a reusable way, or to create a completely new control from scratch.

E.g. if you were making an auto-complete text box that is paired with a popup control to display the values it is auto-completing from. In such a case you might want to make a custom control, with custom dependency properties (such as the auto-completion source). That way you can reuse the control throughout your application, and other applications.

If you aren't making custom controls, or making special non-UI classes that can directly instantiate and use in XAML and data bind with, you probably won't need to create dependency properties.

Answer 2

The poster has requested that I repost my comment as an answer. Happy to oblige :-)

• The video presentation I referred to: http://blog.lab49.com/archives/2650
• Bonus link: awesome WPF article in MSDN: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
• And in case you didn't know about it, there's a chapter in the online documentation: http://msdn.microsoft.com/en-us/library/ms752914.aspx

Also I've found this book very helpful: http://www.amazon.com/WPF-4-Unleashed-Adam-Nathan/dp/0672331195

My own experience with WPF involves going back between a bunch of different resources as I try to get my program to work. There's so much stuff in WPF it's really hard to keep it all in your head as you are learning it.