Question

我在两个彼此相关的包裹中有两组按钮。当我将鼠标移动到一个wrappanel中的按钮上时，我希望它的相关按钮同时点亮，即触发两个按钮的鼠标悬停事件。所以在我的代码示例中，当我移动带有标签“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>

按名称使用面板我们带走他们所有的孩子（这可以在constuctor中完成）并迭代通过它们分配相同的事件处理程序，将两个按钮移动到所需的状态：

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，也可以把它放在代码背后。

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

1 个答案: