Create Databinding

Question

I am trying to do a small thing with DataBinding in WPF and C#, but I can't understand any of the tutorials for DataBinding.. my problem is, that I have a character class in C# and it has X and Y Coordinates with get and set functions. Then I have an image in a canvas in the window and now I am trying to bind the coordinates from the character class to the image. (There is only one image, and there will be created only one instance of the character class, though not at the beginning). Hope anyone can explain it so that I can fully understand it :/

EDIT:

Here is the XAML:

<Window x:Class="ProjectChar.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="800" Width="1000" Background="Gray">
<Viewbox StretchDirection="Both" Stretch="Uniform">
    <Grid>
        <Canvas Name="Canv" Background="White" Visibility="Hidden" MaxHeight="750" MaxWidth="1000">
            <Canvas.LayoutTransform>
                <ScaleTransform ScaleY="-1"/>
            </Canvas.LayoutTransform>
            <Image Name="CharImage"  Source="CharBild.png" Canvas.Left="{Binding iXCoordinate}" Canvas.Top="{Binding iYCoordinate}"/>
        </Canvas>
    </Grid>
</Viewbox>

and here is the C#-Part:

namespace ProjectChar
{
    public class Char : MainWindow
    {
        public int iXCoordinate { get; set; }
        public int iYCoordinate { get; set; }
    }
}

So I somehow need to bind them together, but I don't exactly know how. I know that I have to create a DataContext and that I need to set the UpdateSource to PropertyChanged and that I need an EventHandler for the Property Changed, but I don't know how to do any of that and the tutorials on the internet are all saying kind of different things :/

Answer 1

To bind the Image's X and Y coordinates to your properties, do this:

1. Remove Char's inheritance from MainWindow.
2. Set MainWindow's DataContext to an instance of Char.
3. Remove Visibility="Hidden" from the Canvas

Example:

public class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new Char { iXCoordinate = 20, iYCoordinate = 50 };
    }
}

Make sure you actually set the iXCoordinate and iYCoordinate properties to something. If not, they will be the default value of int, which is 0. E.g. the image will show in the upper left corner.

To let the View (UI) know when a bound value have changed, implement INotifyPropertyChanged and raise the PropertyChanged event every time a property is set:

public class Char : INotifyPropertyChanged
{
    private int _iXCoordinate;

    public int iXCoordinate
    {
        get { return _iXCoordinate; }
        set
        {
            _iXCoordinate = value;
            OnPropertyChanged("iXCoordinate");
        }
    }

    private int _iYCoordinate;

    public int iYCoordinate
    {
        get { return _iYCoordinate; }
        set
        {
            _iYCoordinate = value;
            OnPropertyChanged("iYCoordinate");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

This is the most simple way to implement INotifyPropertyChanged. However, I would recommend to make a base class which implements the interface and let your ViewModels inherit from that. Try something like this:

public class PropertyChangedBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged<T>(Expression<Func<T>> propertyExpression)
    {
        var handler = PropertyChanged;
        var propertyName = GetPropertyName(propertyExpression);
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    private static string GetPropertyName<T>(Expression<Func<T>> propertyExpression)
    {
        var memberExpression = propertyExpression.Body as MemberExpression;
        if (memberExpression == null)
        {
            var unaryExpression = propertyExpression.Body as UnaryExpression;
            if (unaryExpression == null) 
                throw new ArgumentException("Expression must be a MemberExpression.", "propertyExpression");

            memberExpression = unaryExpression.Operand as MemberExpression;
        }

        if (memberExpression == null) 
            throw new ArgumentException("Expression must be a MemberExpression.", "propertyExpression");

        var propertyInfo = memberExpression.Member as PropertyInfo;
        if (propertyInfo == null) 
            throw new ArgumentException("Expression must be a Property.", "propertyExpression");

        return propertyInfo.Name;
    }
}

This PropertyChangedBase also has the added benefit that you have to raise the PropertyChanged event by using a lambda expression instead of using "magic strings", which is prone to typos and bad for refactoring:

    public int iYCoordinate
    {
        get { return _iYCoordinate; }
        set
        {
            _iYCoordinate = value;
            OnPropertyChanged(() => iYCoordinate);
        }
    }

However, your REAL problem is the ViewBox which wraps the Grid.

A ViewBox measures it's children to a size of Infinity, it then arranges them by their DesiredSize. This means that it's children can be whatever size they want to be. Both Grid and Canvas have no size they want to be, they rely on their parent to give them a size.

To solve your problem, specify Width and Height of either the Grid or the Canvas inside it.

BTW: You know that

<Canvas.LayoutTransform>
  <ScaleTransform ScaleY="-1"/>
</Canvas.LayoutTransform>

will flip your cavas, right?