.net - UWP网格行/列鼠标悬停效果

Question

我已经以编程方式制作了一个网格，现在我不想以某种方式 hilite 鼠标所在的行+列。

我在列上寻找 mouseOver/Enter/Leave 或 IsMouseOver...，但似乎它们不在那里...

这里是 Xaml 代码

<UserControl
x:Class="moo_data_sheets.Views.MoraleView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:moo_data_sheets.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid x:Name="MoraleGrid" />

</UserControl>

以及背后的相关代码:

MoraleGrid.ColumnDefinitions.Add(new ColumnDefinition()); // Header
MoraleGrid.RowDefinitions.Add(new RowDefinition()); // Header

// Create columns
List<int> morales = new List<int>();
for (int i = 100; i > 40; i -= 5)
    morales.Add(i);

foreach (var item in morales)
    MoraleGrid.ColumnDefinitions.Add(new ColumnDefinition()); // Header

// Create Rows
List<int> population = new List<int>();
for (int i = 1; i <= 20; i++)
    population.Add(i);

foreach (var item in population)
    MoraleGrid.RowDefinitions.Add(new RowDefinition()); // Header
...

我是 UWP 新手，所以我不太确定我在寻找什么，感谢任何帮助。

更新 - 1我尝试了 David Oliver 建议的方法，但它给了我一些问题。

我想要的效果是我将鼠标悬停在行/列上的一点突出显示。

我的原始代码已经添加了着色边框，以下代码片段是原始代码

// Function for creating the color I like for the morale table as function
// of the strike size.
Func<int, Border> getStrikeSizeBorder = (strike) =>
{
    Dictionary<int, Brush> colors = new Dictionary<int, Brush>()
    {
        {0, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 183, 255, 205)) },
        {1, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 252, 232, 178)) },
        {2, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 244, 199, 195)) },
        {3, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 255, 153, 0)) }
    };

    return new Border
    {
        Background = colors.ContainsKey(strike)
            ? colors[strike]
            : new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 255))
    };
};

// Fill the table with the actual values
// The trick is the casting to int the floors the value.
for (int i = 0; i < morales.Count; ++i)
{
    for (int j = 0; j < population.Count; ++j)
    {
        int strikeSize = (100 - morales[i]) * population[j] / 100;

        var item = getStrikeSizeBorder(strikeSize);
        item.Child = CreateTextBlockCenteredText(strikeSize.ToString()); ;

        Grid.SetRow(item, j + 1);
        Grid.SetColumn(item, i + 1);
        MoraleGrid.Children.Add(item);
    }
}

这会产生以下输出

我尝试了以下方法来突出显示列/行

for (int i = 1; i < MoraleGrid.ColumnDefinitions.Count; i++)
{
    var border = new Border { Background = new SolidColorBrush(Colors.Transparent) };
    MoraleGrid.Children.Add(border);

    Grid.SetColumn(border, i);
    Grid.SetRow(border, 1);
    Grid.SetRowSpan(border, MoraleGrid.RowDefinitions.Count - 1);
    border.PointerEntered += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Tomato);

    border.PointerExited += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Transparent);
}

for (int i = 1; i < MoraleGrid.RowDefinitions.Count; i++)
{
    var border = new Border { Background = new SolidColorBrush(Colors.Transparent) };
    MoraleGrid.Children.Add(border);

    Grid.SetColumn(border, 1);
    Grid.SetRow(border, i);
    Grid.SetColumnSpan(border, MoraleGrid.ColumnDefinitions.Count - 1);
    border.PointerEntered += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Tomato);

    border.PointerExited += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Transparent);
}

但只有最后一组添加的项目可见，并且只有最后“鼠标悬停”影响的项目才“有效”，例如该行，如下所示:

以下代码片段基于@DavidOliver 的回答解决了问题

...
// When making the relevant border items, I add them to a list for later
activeElements.Add(item);
...
Action<Border> AddHighLight = (I) =>
{
    var rightOfI = activeElements
        .Where(X =>
                Grid.GetColumn(X) < Grid.GetColumn(I)
                && Grid.GetRow(X) == Grid.GetRow(I))
        .ToArray();

    var aboveI = activeElements
        .Where(X =>
                Grid.GetColumn(X) == Grid.GetColumn(I)
                && Grid.GetRow(X) < Grid.GetRow(I))
        .ToArray();

    double w = 0.5;
    I.PointerEntered += (o, e) =>
    {
        I.BorderThickness = new Thickness(0, 0, w, w);
        foreach (var item in aboveI)
            item.BorderThickness = new Thickness(w, 0, w, 0);
        foreach (var item in rightOfI)
            item.BorderThickness = new Thickness(0, w, 0, w);
    };

    I.PointerExited += (o, e) =>
    {
        I.BorderThickness = new Thickness(0);
        foreach (var item in aboveI)
            item.BorderThickness = new Thickness(0);
        foreach (var item in rightOfI)
            item.BorderThickness = new Thickness(0);
    };
};

foreach (var item in activeElements)
{
    AddHighLight(item);
}

以下是结果，悬停在 {75%,11} 上，我对此感到非常高兴

Answer 1

有PointerEntered和 PointerExited事件，但这些是在 View 上，而不是行/列上。您可以向每个行+列交叉点添加一个 View ，并使用它来显示您想要的视觉效果。

例如:

for (int i = 0; i < MoraleGrid.ColumnDefinitions.Count; i++)
{
    for (int j = 0; j < MoraleGrid.RowDefinitions.Count; j++)
    {
        var border = new Border { Background = new SolidColorBrush(Colors.Transparent) };
        MoraleGrid.Children.Add(border);

        Grid.SetColumn(border, i);
        Grid.SetRow(border, j);

        border.PointerEntered += (o, e) =>
            {
                border.Background = new SolidColorBrush(Colors.Tomato);
            };
        border.PointerExited += (o, e) =>
            {
                border.Background = new SolidColorBrush(Colors.Transparent);
            };
    }
}

请注意，更惯用的方法是设置“PointerOver” VisualState来自事件，然后在 Xaml 的 Storyboard 中处理效果的详细信息。您可以在某些框架控件的默认样式中看到这种方法，例如 ToggleButton .

更新:在您添加的代码中，行突出显示位于可视化树的最上方(因为它们是最后添加的)，因此它们会屏蔽列突出显示以接收指针事件。

由于您已经在每个“单元格”中添加了边框，因此我只需在其中添加指针处理逻辑即可:

    var item = getStrikeSizeBorder(strikeSize);
    item.PointerEntered += (o, e) =>
      {
          var column = Grid.GetColumn(item);
          foreach (var child in MoraleGrid.Children.Where(child => Grid.GetColumn((FrameworkElement)child) == column))
          {
              //Set highlight colour
          }

          ...etc
      };
    item.PointerExited += (o, e) =>
      {
           ...
      }