Question

WPF可以使用哪种技术来显示TextBlock Text基于鼠标悬停在其上的Button？

用户界面的组织如下：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <StackPanel>
        <Button Content="Item1" Tag="This is the text for Item1"/>
        <Button Content="Item2" Tag="This is the text for Item2"/>
        <Button Content="Item3" Tag="This is the text for Item3"/>
    </StackPanel>
    <TextBlock Grid.Column="2" Margin="20,0,0,0" TextWrapping="Wrap" Text="This text should be shown based on the mouseovered button"/>
</Grid>

我正在考虑将所需的文字设置为Tag的{{1}}，但是如何让鼠标在事件上显示该标记。

注意：

我更喜欢在这里使用个人Button而不是Buttons或任何其他ListBox（真正的应用程序在这些内容之间有更多控制等。）
该应用程序遵循MVVM
我更喜欢直接将文本设置为UI的方法（ItemsControl的{{1}}）

Answer 1

鼠标移动，

为MouseMove创建一个AttachedProperty并使用属性挂钩列表视图。附加属性可用于应用程序中的任何元素。

附属物

public class MouseBehaviour
{
  public static readonly DependencyProperty MouseMoveCommandProperty =
    DependencyProperty.RegisterAttached("MouseMoveCommand", typeof(ICommand), typeof(MouseBehaviour), new FrameworkPropertyMetadata(new PropertyChangedCallback(MouseMoveCommandChanged)));

private static void MouseMoveCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    FrameworkElement element = (FrameworkElement)d;

    element.MouseMove += new MouseEventHandler(element_MouseMove);
}

static void element_MouseMove(object sender, MouseEventArgs e)
{
    FrameworkElement element = (FrameworkElement)sender;

    ICommand command = GetMouseMoveCommand(element);

    command.Execute(e);
}

public static void SetMouseMoveCommand(UIElement element, ICommand value)
{
    element.SetValue(MouseMoveCommandProperty, value);
}

public static ICommand GetMouseMoveCommand(UIElement element)
{
    return (ICommand)element.GetValue(MouseMoveCommandProperty);
}
}

XAML

xmlns:mousebehav="clr-namespace:your namespace"

<Button mousebehav:MouseBehaviour.MouseMoveCommand="{Binding MouseMoveCommand}">

VM

private RelayCommand _MouseMoveCommand;
public RelayCommand MouseMoveCommand
{
    get
    {
        if (_MouseMoveCommand== null) return _MouseMoveCommand= new RelayCommand(param => Execute_MouseMoveCommand((MouseEventArgs)param));
        return _MouseMoveCommand;
    }
    set { _MouseMoveCommand= value; }
}

private void Execute_MouseMoveCommand(MouseEventArgs param)
{
    //your logic to expand or ??
}

Mouse Leave的附加属性，

    public static readonly DependencyProperty MouseLeaveCommandProperty =
        DependencyProperty.RegisterAttached("MouseLeaveCommand", typeof(ICommand), typeof(MouseBehaviour), new FrameworkPropertyMetadata(new PropertyChangedCallback(MouseLeaveCommandChanged)));

    private static void MouseLeaveCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement element = (FrameworkElement)d;

        element.MouseLeave += new MouseEventHandler(element_MouseLeave);
    }

    static void element_MouseLeave(object sender, MouseEventArgs e)
    {
        FrameworkElement element = (FrameworkElement)sender;

        ICommand command = GetMouseLeaveCommand(element);

        command.Execute(e);
    }

    public static void SetMouseLeaveCommand(UIElement element, ICommand value)
    {
        element.SetValue(MouseLeaveCommandProperty, value);
    }

    public static ICommand GetMouseLeaveCommand(UIElement element)
    {
        return (ICommand)element.GetValue(MouseLeaveCommandProperty);
    }

VM

private RelayCommand _MouseLeaveCommand;
public RelayCommand MouseLeaveCommand
{
    get
    {
        if (_MouseLeaveCommand== null) return _MouseLeaveCommand= new RelayCommand(param => Execute_MouseLeaveCommand((MouseEventArgs)param));
        return _MouseLeaveCommand;
    }
    set { _MouseMoveCommand= value; }
}

private void Execute_MouseLeaveCommand(MouseEventArgs param)
{
    //your logic to expand or ??
}

XAML

<Button mousebehav:MouseBehaviour.MouseLeaveCommand="{Binding MouseLeaveCommand}">

在WPF中鼠标悬停按钮绑定

1 个答案:

XAML

VM

VM

XAML