Trigger Silverlight button mouseover event for two buttons simultaneously - silverlight

Question

I have two sets of buttons in two wrappanles that are related to each other. When I move the mouse over a button in one wrappanel, I want its related button to light up at the same time i.e. firing both buttons' mouseover events. So in my code exampes, I when moving over button with label "1.Block", it and its matching button in the other row, "1.Sqaure", must both display their mouseover styles/animations.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<toolkit:WrapPanel Grid.Column="0" Grid.Row="0">
<Button Content="1. Block" Width="100" />
<Button Content="2. Block" Width="100" />
<Button Content="3. Block" Width="100" />
<Button Content="4. Block" Width="100" />
<Button Content="5. Block" Width="100" />
<Button Content="6. Block" Width="100" />
<Button Content="7. Block" Width="100" />
<Button Content="8. Block" Width="100" />
</toolkit:WrapPanel>
<toolkit:WrapPanel Grid.Column="0" Grid.Row="1">
<Button Content="1. Square" Width="100" />
<Button Content="2. Square" Width="100" />
<Button Content="3. Square" Width="100" />
<Button Content="4. Square" Width="100" />
<Button Content="5. Square" Width="100" />
<Button Content="6. Square" Width="100" />
<Button Content="7. Square" Width="100" />
<Button Content="8. Square" Width="100" />
</toolkit:WrapPanel>
</Grid>
I have no idea where to start on this? Trigger perhaps? Any suggestions will be appreciated.

Answer 1

I think the easiest way to do this is to use VisualStateManager. Following example may be a little rough but should be sufficient overall.
So what we need is to link MouseEnter and MouseLeave events for each pair of buttons in two lists. I don`t have WrapPanel so I used StackPanels instead, but this should not matter if we can get all child buttons from them. Say we have this:
<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
<StackPanel Name="panel1">
<Button Content="1. Block" Width="100" />
<Button Content="2. Block" Width="100" />
</StackPanel>
<StackPanel Name="panel2">
<Button Content="1. Square" Width="100" />
<Button Content="2. Square" Width="100" />
</StackPanel>
</StackPanel>
Using panels by name we take all their children (this can be done in constuctor for example) and iterate through them assigning same event handlers that move both buttons to required state:
var panel1Buttons = panel1.Children.OfType<Button>().ToList();
var panel2Buttons = panel2.Children.OfType<Button>().ToList();
for (int i = 0; i < panel1Buttons.Count(); i++)
{
var button1 = panel1Buttons[i];
var button2 = panel2Buttons[i];
//assign same mouse enter event handler
MouseEventHandler enterHandler = (s, e) =>
{
VisualStateManager.GoToState(button1, "MouseOver", true);
VisualStateManager.GoToState(button2, "MouseOver", true);
};
button1.MouseEnter += enterHandler;
button2.MouseEnter += enterHandler;
//assign same mouse leave handler
MouseEventHandler leaveHandler = (s, e) =>
{
VisualStateManager.GoToState(button1, "Normal", true);
VisualStateManager.GoToState(button2, "Normal", true);
};
button1.MouseLeave += leaveHandler;
button2.MouseLeave += leaveHandler;
}
So now when mouse enters any of paired buttons they both go to MouseOver state and return to Normal on when mouse leaves.
This us purely UI related functionality so even if you follow MVVM it`s ok to place this in code behind.