C＃WPF绑定直到MouseOut才更新

Question

I have a board with clickable labels (Grass and Unit), When I click a Grass label I it should move the Unit Label to the Grass's x and y position. It works, but kinda wrong. When I click on a label, nothing happens until I move the cursor out of the clicked label, then the wanted behaviour executes.

XAML

<local:Grass Grid.Row="9" Grid.Column="16"   />
<local:Unit Grid.Row="{Binding Path=xPos, UpdateSourceTrigger=PropertyChanged}" Grid.Column="{Binding Path=yPos, UpdateSourceTrigger=PropertyChanged}" >
       <local:Unit.Background>
             <ImageBrush ImageSource="Images/tjej.png"/>
       </local:Unit.Background>
</local:Unit>

ObjectInspector

 public class ObjectInspector : INotifyPropertyChanged
{
    private int _xPos = 1, _yPos = 2;



    public int xPos
    {
        get { return _xPos; }
        set
        {
            _xPos = value;
            NotifyPropertyChanged("xPos");
        }
    }

    public int yPos
    {
        get { return _yPos; }
        set {
            _yPos = value;
            NotifyPropertyChanged("yPos");
        }
    }

    private string _type = "none";

    public string type
    {
        get { return _type; }
        set { 
            _type = value;
            NotifyPropertyChanged("type");
        }

    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            System.Diagnostics.Debug.WriteLine("property changed");

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Grass

   public class Grass : Button
{

    protected override void OnClick()
    {
        base.OnClick();
        int x = (int)this.GetValue(Grid.RowProperty);
        int y = (int)this.GetValue(Grid.ColumnProperty);
        string type = this.GetType().Name;
        MainWindow.objectInspector.xPos = x;
        MainWindow.objectInspector.yPos = y;
        MainWindow.objectInspector.type = type;
    }
}

MainWindow

  public partial class MainWindow : Window
{
    public static ObjectInspector objectInspector= new ObjectInspector();
    public MainWindow()
    {
        InitializeComponent();                       
        this.DataContext = objectInspector;


    }
}

Any ideas?

Edit Added MainWindow and Grass

Answer 1

EDIT

Try to register to the common event handler Click of buttons:

<local:Grass Grid.Row="9" Grid.Column="16"  Click="ClickEventHandler" />
...

And take the grass element from the sender, in the event handler method.

---

Anyway, I think a better way for doing this is usin MVVM patter. You may set a GrassViewModel and UnitViewModel . Then create a DataTemplate for each one. For example:

<DataTemplate DataType="{x:Type ViewModel:UnitViewModel}">
    ...Visual Elements Here...
</DataTemplate>

The for showing the elements in a grid you may use a ListBox with a Grid as items panel, some like this:

<ListBox ItemsSource={Binding AllItemsCollection}>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                ...rows and columns definitions here...
            </Grid>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <!--HERE THE ITEMS STYLE, HERE YOU SET THE COLUMN, ROW BINDINGS-->
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Grid.Row" Value="{Binding yPos}"/>
            <Setter Property="Grid.Column" Value="{Binding xPos}"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Then you only need to create the AllItemsCollection in your view model with all the elements that you want. You can handler the click event using behaviors, or creating a UserControl for the grass (and controlling the click event inside):

<DataTemplate DataType="{x:Type ViewModel:UnitViewModel}">
    <GrassUserControl ...Inside the grass user control you can handler the click event.../>
</DataTemplate>

Hope helps...

Answer 2

If your following MVVM then you can attach a property to the label as below. You can attache this behavior any control that derives from UIElement

Create a Attached property for MouseClick

public class MouseClick
{
    public static readonly DependencyProperty MouseLeftClickProperty = 
        DependencyProperty.RegisterAttached("MouseLeftClick", typeof(ICommand), typeof(MouseClick),
        new FrameworkPropertyMetadata(CallBack));

    public static void SetMouseLeftClick(DependencyObject sender, ICommand value)
    {
        sender.SetValue(MouseLeftClickProperty, value);
    }

    public static ICommand GetMouseLeftClick(DependencyObject sender)
    {
        return sender.GetValue(MouseLeftClickProperty) as ICommand;
    }

    public static readonly DependencyProperty MouseEventParameterProperty =
        DependencyProperty.RegisterAttached(
            "MouseEventParameter",
            typeof(object),
            typeof(MouseClick),
            new FrameworkPropertyMetadata((object)null, null));


    public static object GetMouseEventParameter(DependencyObject d)
    {
        return d.GetValue(MouseEventParameterProperty);
    }


    public static void SetMouseEventParameter(DependencyObject d, object value)
    {
        d.SetValue(MouseEventParameterProperty, value);
    }

    private static void CallBack(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        if (sender != null)
        {
            UIElement element = sender as UIElement;
            if (element != null)
            {
                if (e.OldValue != null)
                {
                    element.RemoveHandler(UIElement.MouseDownEvent, new MouseButtonEventHandler(Handler));
                }
                if (e.NewValue != null)
                {
                    element.AddHandler(UIElement.MouseDownEvent, new MouseButtonEventHandler(Handler), true);
                }
            }
        }
    }
    private static void Handler(object sender, EventArgs e)
    {
        UIElement element = sender as UIElement;
        if (sender != null)
        {
            ICommand cmd = element.GetValue(MouseLeftClickProperty) as ICommand;
            if (cmd != null)
            {
                RoutedCommand routedCmd =cmd as RoutedCommand;
                object paramenter = element.GetValue(MouseEventParameterProperty);
                if (paramenter == null)
                {
                    paramenter = element;
                }
                if (routedCmd != null)
                {
                    if (routedCmd.CanExecute(paramenter, element))
                    {
                        routedCmd.Execute(paramenter, element);
                    }
                }
                else
                {
                    if (cmd.CanExecute(paramenter))
                    {
                        cmd.Execute(paramenter);
                    }
                }
            }
        }
    }
}

In you Xaml attache the Command of your viewModel as below

 <Label Height="30" Width="200" Margin="10" Content="Click" local:MouseClick.MouseLeftClick="{Binding Click}" />