Binding Issue in WPF

Question

I have problem with binding, I'm trying to move rectangle when mouse is moved, this is my list:

    <ListBox x:Name="icTables" FlowDirection="LeftToRight" ItemsSource="{Binding Path=ocTablesinSection,UpdateSourceTrigger=PropertyChanged}" Margin="0,101,52,0" Grid.Column="1" SelectionMode="Extended" HorizontalAlignment="Right" Width="705" Height="400" VerticalAlignment="Top">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style
                TargetType="ListBoxItem">
                <Setter Property="Canvas.Left" Value="{Binding Path=CLeft,UpdateSourceTrigger=PropertyChanged}"/>
                <Setter Property="Canvas.Top" Value="{Binding Path=CTop,UpdateSourceTrigger=PropertyChanged}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Rectangle Width="50" Height="50" Fill="Red" Cursor="Hand" MouseDown="Rectangle_MouseDown" MouseUp="Rectangle_MouseUp" MouseMove="Rectangle_MouseMove" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

In MouseMove event in code behind:

        private void Rectangle_MouseMove(object sender, MouseEventArgs e)
    {
        if (isDraggingRectangle)
        {
            //
            // Drag-move selected rectangles.
            //
            Point curMouseDownPoint = e.GetPosition(this);
            var dragDelta = curMouseDownPoint - origMouseDownPoint;

            origMouseDownPoint = curMouseDownPoint;

            foreach (var item in ocTablesinSection)
            {
                item.CLeft += dragDelta.X;
                item.CTop += dragDelta.Y;
            }
       }
        else if (isLeftMouseDownOnRectangle)
        {
            //
            // The user is left-dragging the rectangle,
            // but don't initiate the drag operation until
            // the mouse cursor has moved more than the threshold value.
            //
            Point curMouseDownPoint = e.GetPosition(this);
            var dragDelta = curMouseDownPoint - origMouseDownPoint;
            double dragDistance = Math.Abs(dragDelta.Length);
            if (dragDistance > DragThreshold)
            {
                //
                // When the mouse has been dragged more than the threshold value commence dragging the rectangle.
                //
                isDraggingRectangle = true;
            }

            e.Handled = true;
        }
    }

Every thing works but the UI don't show updated (Rectangle do not move), When I change CLeft and CTop to a public variable and the window as Element-name it works !!

What is the problem in my code the prevent the rectangle from moving with mouse?

// Update --

private ObservableCollection<TablesinSection> _ocTablesinSection;

public ObservableCollection ocTablesinSection { get { return _ocTablesinSection; } set { _ocTablesinSection = value; OnPropertyChanged("ocTablesinSection"); } }

When I change CLeft and CTop to a public variable and the window as Element-name it works !! - What do you mean by this? Post code for CLeft and CTop. — Rohit Vats
@Rohit Vats ocTablesinSection is an Observable Collection of Resturant tables, CLeft and CTop is an fields in each record that describe location of each table, instead of using CLeft and CTop if I had defined a Public variable and bind it to Canvas it works. hope this clear. — Abdulsalam Elsharif

Rohit Vats Rohit Vats · Accepted Answer · 2014-04-19T15:08:11

WPF bindings doesn't work with fields. It works only with properties.

Declare them as properties.

public double CLeft { get; set; }
public double CTop { get; set; }

Also in case you want to update UI on any property change, you have to implement INotifyPropertyChanged interface on class containing this property.

UPDATE

Make properties to raise PropertyChangedEvent:

private double cLeft;
public double CLeft
{
   get
   {
      return cLeft;
   }
   set
   {
      if(cLeft != value)
      {
         cLeft = value;
         OnPropertyChanged("CLeft");
      }
   }
}

Do this same for CTop as well.

Binding Issue in WPF

1 Answers