How to use multibinding on a rectangle-command in mvvm? - wpf

Question

I got the following rectangle
<Rectangle
Width="{Binding Width}"
Height="{Binding Length}"
Tag="{Binding Id}"
Name="rectangleDrawnMachine">
<i:Interaction.Triggers>
<i:EventTrigger
EventName="MouseDown">
<cmd:EventToCommand
Command="{Binding Main.UpdateSelectedMachine, Mode=OneWay, Source={StaticResource Locator}}"
PassEventArgsToCommand="True"
CommandParameter="{Binding ElementName=rectangleDrawnMachine}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Rectangle>
The rectangle is bound to a model which is declared in an above ItemsControl. The document-structure is like the following:
<Grid>
<ItemsControl ItemsSource="{Binding AllMachines}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Name="canvasDrawnMachines" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Rectangle Name="rectangleDrawnMachine"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Now my UpdateSelectedMachine-command needs at least three properties of the rectangle:
Position x
Position y
ID / Tag
With the CommandParameter of the rectangle itself my command will get a lot of informations about the rectangle (like the neccessary tag). But it doesnt get the neccessary information about the (X- & Y-)position of the canvas.
So my question is: how to use multibinding on my rectangle-command? And how to transfer the positions of the canvas?

Answer 1

You cannot pass multiple values by using command parameter.
In order to do so, you have to use multi binding.
<cmd:EventToCommand
Command="{Binding Main.UpdateSelectedMachine, Mode=OneWay, Source={StaticResource Locator}}"
PassEventArgsToCommand="True">
<cmd:EventToCommand.CommandParameter>
<MultiBinding Converter="{StaticResource YourConverter}">
<Binding Path="Canvas.Left" ElementName="canvasDrawnMachines"/>
<Binding Path="Canvas.Top" ElementName="canvasDrawnMachines"/>
<Binding Path="Tag" ElementName="canvasDrawnMachines"/>
</MultiBinding>
</cmd:EventToCommand.CommandParameter>
Your converter:
public class YourConverter : IMultiValueConverter
{
public object Convert(object[] values, ...)
{
return values.Clone();
}
}
Then, execution command logic:
public void OnExecute(object parameter)
{
var values = (object[])parameter;
var left = (double)values[0];
var top = (double)values[1];
var tag = values[2];
}

Answer 2

You can get the values of the Canvas.Left and Canvas.Top attached properties of the Rectangle that you are passing as the command parameter to the command like this:
double x = Canvas.GetLeft(rectangle);
double y = Canvas.GetTop(rectangle);
Do you know how to get the position in XAML-way?
Use a MultiBinding with a converter and bind to the Canvas.Left and Canvas.Top properties:
<MultiBinding Converter="{StaticResource converter}">
<Binding Path="(Canvas.Left)" ElementName="canvasDrawnMachines"/>
<Binding Path="(Canvas.Top)" ElementName="canvasDrawnMachines"/>
<Binding Path="Tag" ElementName="canvasDrawnMachines"/>
</MultiBinding>