检测UI

Question

你如何检测你的用户界面？在过去,我读过人们已经为他们的用户界面进行了检测,但我没有找到关于如何测量 UI的示例或提示.

通过仪表,我的意思是收集有关系统使用和性能的数据.有关Instrumentation的MSDN文章是http://msdn.microsoft.com/en-us/library/x5952w0c.aspx.我想捕获用户点击的按钮,他们使用的键盘缩写,他们用来搜索的术语等.

• 你如何检测你的用户界面？
• 您存储仪器的格式是什么？
• 您如何处理检测数据？
• 如何使用此检测逻辑保持UI代码清洁？

具体来说,我正在WPF中实现我的UI,因此与基于Web的应用程序相比,这将提供额外的挑战.(即需要将仪表化数据传回中心位置等).也就是说,我觉得这项技术可以通过附加属性等概念提供更简单的仪器实现.

• 你有没有检测过WPF应用程序？您对如何实现这一目标有什么建议吗？

---

编辑:以下博客文章提出了一个有趣的解决方案:Pixel-In-Gene博客:WPF应用程序上的UI审计技术

Answer 1

下面是我如何使用简单的事件管理器来挂钩 UI 事件并提取事件的关键信息的示例，例如 UI 元素的名称和类型、事件名称和父窗口的类型名称。对于列表，我还提取所选项目。

此解决方案仅侦听从 ButtonBase 派生的控件（Button、ToggleButton 等）的单击以及从 Selector 派生的控件（ListBox、TabControl 等）中的选择更改。它应该很容易扩展到其他类型的 UI 元素或实现更细粒度的解决方案。该解决方案的灵感来自于Brad Leach 的回答。

public class UserInteractionEventsManager
{
    public delegate void ButtonClickedHandler(DateTime time, string eventName, string senderName, string senderTypeName, string parentWindowName);
    public delegate void SelectorSelectedHandler(DateTime time, string eventName, string senderName, string senderTypeName, string parentWindowName, object selectedObject);

    public event ButtonClickedHandler ButtonClicked;
    public event SelectorSelectedHandler SelectorSelected;

    public UserInteractionEventsManager()
    {
        EventManager.RegisterClassHandler(typeof(ButtonBase), ButtonBase.ClickEvent, new RoutedEventHandler(HandleButtonClicked));
        EventManager.RegisterClassHandler(typeof(Selector), Selector.SelectionChangedEvent, new RoutedEventHandler(HandleSelectorSelected));
    }

    #region Handling events

    private void HandleSelectorSelected(object sender, RoutedEventArgs e)
    {
        // Avoid multiple events due to bubbling. Example: A ListBox inside a TabControl will cause both to send the SelectionChangedEvent.
        if (sender != e.OriginalSource) return;

        var args = e as SelectionChangedEventArgs;
        if (args == null || args.AddedItems.Count == 0) return;

        var element = sender as FrameworkElement;
        if (element == null) return;

        string senderName = GetSenderName(element);
        string parentWindowName = GetParentWindowTypeName(sender);
        DateTime time = DateTime.Now;
        string eventName = e.RoutedEvent.Name;
        string senderTypeName = sender.GetType().Name;
        string selectedItemText = args.AddedItems.Count > 0 ? args.AddedItems[0].ToString() : "<no selected items>";

        if (SelectorSelected != null)
            SelectorSelected(time, eventName, senderName, senderTypeName, parentWindowName, selectedItemText);
    }

    private void HandleButtonClicked(object sender, RoutedEventArgs e)
    {
        var element = sender as FrameworkElement;
        if (element == null) return;

        string parentWindowName = GetParentWindowTypeName(sender);
        DateTime time = DateTime.Now;
        string eventName = e.RoutedEvent.Name;
        string senderTypeName = sender.GetType().Name;
        string senderName = GetSenderName(element);

        if (ButtonClicked != null) 
            ButtonClicked(time, eventName, senderName, senderTypeName, parentWindowName);
    }

    #endregion

    #region Private helpers

    private static string GetSenderName(FrameworkElement element)
    {
        return !String.IsNullOrEmpty(element.Name) ? element.Name : "<no item name>";
    }


    private static string GetParentWindowTypeName(object sender)
    {
        var parent = FindParent<Window>(sender as DependencyObject);
        return parent != null ? parent.GetType().Name : "<no parent>";
    }

    private static T FindParent<T>(DependencyObject item) where T : class
    {
        if (item == null) 
            return default(T);

        if (item is T)
            return item as T;

        DependencyObject parent = VisualTreeHelper.GetParent(item);
        if (parent == null)
            return default(T);

        return FindParent<T>(parent);
    }

    #endregion
}

为了进行实际的日志记录，我使用 log4net 并创建了一个名为“Interaction”的单独记录器来记录用户交互。这里的“Log”类只是我自己的 log4net 静态包装器。

/// <summary>
/// The user interaction logger uses <see cref="UserInteractionEventsManager"/> to listen for events on GUI elements, such as buttons, list boxes, tab controls etc.
/// The events are then logged in a readable format using Log.Interaction.Info().
/// </summary>
public class UserInteractionLogger
{
    private readonly UserInteractionEventsManager _events;
    private bool _started;

    /// <summary>
    /// Create a user interaction logger. Remember to Start() it.
    /// </summary>
    public UserInteractionLogger()
    {
        _events = new UserInteractionEventsManager();

    }

    /// <summary>
    /// Start logging user interaction events.
    /// </summary>
    public void Start()
    {
        if (_started) return;

        _events.ButtonClicked += ButtonClicked;
        _events.SelectorSelected += SelectorSelected;

        _started = true;
    }

    /// <summary>
    /// Stop logging user interaction events.
    /// </summary>
    public void Stop()
    {
        if (!_started) return;

        _events.ButtonClicked -= ButtonClicked;
        _events.SelectorSelected -= SelectorSelected;

        _started = false;
    }

    private static void SelectorSelected(DateTime time, string eventName, string senderName, string senderTypeName, string parentWindowTypeName, object selectedObject)
    {
        Log.Interaction.Info("{0}.{1} by {2} in {3}. Selected: {4}", senderTypeName, eventName, senderName, parentWindowTypeName, selectedObject);
    }

    private static void ButtonClicked(DateTime time, string eventName, string senderName, string senderTypeName, string parentWindowTypeName)
    {
        Log.Interaction.Info("{0}.{1} by {2} in {3}", senderTypeName, eventName, senderName, parentWindowTypeName);
    }
}

输出将如下所示，省略不相关的日志条目。

04/13 08:38:37.069 INFO Iact ToggleButton.Click 通过 MyMainWindow 中的 AnalysisButton
04/13 08:38:38.493 信息 Iact ListBox.SelectionChanged 由 MyMainWindow 中的 ListView 执行。选定：安德烈亚斯·拉森
04/13 08:38:44.587 INFO Iact Button.Click 通过 MyMainWindow 中的 EditEntryButton
04/13 08:38:46.068 INFO Iact Button.通过 EditEntryDialog 中的 OkButton 单击
04/13 08:38:47.395 信息 Iact ToggleButton.Click 通过 MyMainWindow 中的 ExitButton

Answer 2

以下博客文章提供了一些关于检测 WPF 应用程序的好主意： WPF 应用程序上的 UI 审核技术。