同时触发两个按钮的 Silverlight 按钮鼠标悬停事件

Question

我在两个相互关联的 wrappanles 中有两组按钮。当我将鼠标移到一个包装面板中的按钮上时，我希望其相关按钮同时亮起，即触发两个按钮的鼠标悬停事件。所以在我的代码示例中，当我移动带有标签“1.Block”的按钮时，它和另一行中的匹配按钮“1.Sqaure”必须都显示它们的鼠标悬停样式/动画。

    <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>

我不知道从哪里开始？也许触发？任何建议将不胜感激。

Answer 1

我认为最简单的方法是使用VisualStateManager。以下示例可能有点粗略，但总体上应该足够了。

所以我们需要为两个列表中的每对按钮链接MouseEnter 和MouseLeave 事件。我没有WrapPanel，所以我改用StackPanels，但是如果我们可以从它们那里获取所有子按钮，这并不重要。假设我们有这个：

<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>

按名称使用面板，我们获取它们的所有子级（例如，这可以在构造函数中完成）并遍历它们，分配相同的事件处理程序，将两个按钮移动到所需状态：

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;
}

所以现在当鼠标进入任何配对按钮时，它们都会进入MouseOver 状态并在鼠标离开时返回Normal。

这是我们纯粹与 UI 相关的功能，因此即使您遵循 MVVM，也可以将其放在代码后面。