CODEWITHSUNDEEP
wpfvb.netimagebindingcanvas
donL
donL

Reputation: 1300

Programmatically bind an image's canvas point in WPF

In my program I am dynamically creating images to be added into a canvas in a WPF window. My question is: How can I bind the canvas.left and canvas.right point to a class property.

If the image existed before run-time I would make and bind it like this in XAML/WPF:

<Image Height="26" HorizontalAlignment="Left" Canvas.Left="{Binding left}" Canvas.Top="{Binding top}" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="28" Source="/imageTest;component/Images/blue-pin-md.png" />

What I have in VB.net:

'Create array of images
Dim myImages(5) as myImage

For i = 0 to myImages.count - 1
   myImages(i) = New myImage
   'set datacontext if I can bind
   myImages(i).image.DataContext = myImages(i)
   canvas1.Children.Add(myImages(i).image)
Next

myImage class:

Imports System.ComponentModel

Public Class myImage
    Implements INotifyPropertyChanged

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Private Sub NotifyPropertyChanged(ByVal info As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(info))
    End Sub

    Private Property _image as New Image
    Private Property _left As Double
    Private Property _top As Double
    Private Shared Property r As New Random()

    Public Sub New()
        _image.Width = 28
        _image.Height = 26
        _image.Source = New System.Windows.Media.Imaging.BitmapImage(New Uri("/imageTest;component/Images/blue-pin-md.png", UriKind.Relative))
        'the below works without binding if I just want to set and leave them in one place but I would like to bind them so that I can move them relative to other data
        '_left = r.Next(0, System.Windows.SystemParameters.PrimaryScreenWidth)
        '_top = r.Next(0, System.Windows.SystemParameters.PrimaryScreenHeight)
    End Sub

    Public ReadOnly Property image As Image
        Get
            Return _image
        End Get
    End Property

    Public ReadOnly Property left As Double
        Get
            Return _left
        End Get
    End Property

    Public ReadOnly Property top As Double
        Get
            Return _top
        End Get
    End Property

    'a possible move method that would take advantage of the binding
    Public Sub move()
        _top += 1
        _left += 1
        NotifyPropertyChanged("left")
        NotifyPropertyChanged("top")
    End Sub

Upvotes: 0

Views: 1464

Answers (2)

donL
donL

Reputation: 1300

Thanks to Clemens C# code I was able to get it working. Below is the code that I used. The .SetBindings(,) was the key for me.

For i = 0 To myImages.Count - 1
    myImages(i) = New myImage
    myImages(i).image.DataContext = myImages(i)
    myImages(i).image.SetBinding(Canvas.LeftProperty, "left")
    myImages(i).image.SetBinding(Canvas.TopProperty, "top")
    canvas1.Children.Add(myImages(i).image)
Next

Upvotes: 0

Clemens
Clemens

Reputation: 128013

Not sure how to write it in VB, but in C# it would look like this:

var leftBinding = new Binding
{
    Path = new PropertyPath("left"),
    Source = myImages[i]
};
var topBinding = new Binding
{
    Path = new PropertyPath("top"),
    Source = myImages[i]
};
myImages[i].image.SetBinding(Canvas.LeftProperty, leftBinding);
myImages[i].image.SetBinding(Canvas.TopProperty, topBinding);

Or perhaps simpler, with DataContext:

myImages[i].image.DataContext = myImages[i];
myImages[i].image.SetBinding(Canvas.LeftProperty, "left");
myImages[i].image.SetBinding(Canvas.TopProperty, "top");

Upvotes: 1

Related Questions